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 @@ const Logic = {
     // 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]);