Show error message and troubleshooting steps on contextual identities error

src/css/popup.css

@@ -2395,3 +2395,18 @@ tr:hover > td > .trash-button {
 .searchbar input {
   inline-size: 100%;
 }
+
+/* ----- Error ---------- */
+
+#on-error {
+  margin-block: auto;
+}
+
+#on-error h2 {
+  font-weight: bold;
+}
+
+#on-error h2,
+#on-error p {
+  text-align: center;
+}

src/js/popup.js

@@ -74,12 +74,19 @@
     // Retrieve the list of identities.
     const identitiesPromise = this.refreshIdentities();
 
+    const errorBlock = document.getElementById("on-error");
+    const successBlock = document.getElementById("on-success");
     try {
       await identitiesPromise;
     } catch (e) {
-      throw new Error("Failed to retrieve the identities or variation. We cannot continue. ", e.message);
+      errorBlock.style.display = "block";
+      successBlock.style.display = "none";
+      return;
     }
 
+    errorBlock.style.display = "none";
+    successBlock.style.display = "block";
+
     // Routing to the correct panel.
     // If localStorage is disabled, we don't show the onboarding.
     const onboardingData = await browser.storage.local.get([ONBOARDING_STORAGE_KEY]);
@@ -827,7 +834,7 @@
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
 
       // TODO get UX and content decision on how to message and block clicks to containers with Mozilla VPN proxy configs
       // when Mozilla VPN app is disconnected.
 
       td.innerHTML = Utils.escaped`