Bug 2065486 - Update illustration for sync disconnected state in sidebar r=fxview-reviewers,desktop-theme-reviewers,nsharpley,emilio

* Add asset property for sync error map and consolidate the getMessageCardForState logic
* Remove height and width from new svgs so they scale

Differential Revision: https://phabricator.services.mozilla.com/D321595

browser/components/firefoxview/SyncedTabsController.sys.mjs

@@ -195,11 +195,13 @@ export class SyncedTabsController {
   /** @type {{[A in Action]: ActionMapping}} */
   actionMappings = {
     "sign-in": {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-empty.svg",
       header: "firefoxview-syncedtabs-signin-header-2",
       description: "firefoxview-syncedtabs-signin-description-2",
       buttonLabel: "firefoxview-syncedtabs-signin-primarybutton-2",
     },
     "add-device": {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-empty.svg",
       header: "firefoxview-syncedtabs-adddevice-header-2",
       description: "firefoxview-syncedtabs-adddevice-description-2",
       buttonLabel: "firefoxview-syncedtabs-adddevice-primarybutton",
@@ -209,6 +211,7 @@ export class SyncedTabsController {
       },
     },
     "sync-tabs-disabled": {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-empty.svg",
       header: "firefoxview-syncedtabs-synctabs-header",
       description: "firefoxview-syncedtabs-synctabs-description",
       buttonLabel: "firefoxview-tabpickup-synctabs-primarybutton",
@@ -254,34 +257,23 @@ export class SyncedTabsController {
     const nova = Services.prefs.getBoolPref("browser.nova.enabled", false);
     let header, description, descriptionLink, buttonLabel, mainImageUrl;
     let descriptionArray;
+    let mappings;
     if (error) {
-      let link;
-      ({ header, description, link, buttonLabel } =
-        SyncedTabsErrorHandler.getFluentStringsForErrorType(errorState));
+      mappings =
+        SyncedTabsErrorHandler.getFluentStringsForErrorType(errorState);
       action = `${errorState}`;
-      mainImageUrl = nova
-        ? "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg"
-        : "chrome://browser/content/firefoxview/synced-tabs-error.svg";
-      descriptionArray = [description];
-      if (errorState == "password-locked" && !nova) {
-        descriptionLink = {};
-        // This is ugly, but we need to special case this link so we can
-        // coexist with the old view. TODO remove with nova cleanup
-        descriptionArray.push("firefoxview-syncedtab-password-locked-link");
-        descriptionLink.name = "syncedtab-password-locked-link";
-        descriptionLink.url = link.href;
-      }
     } else {
-      const mappings = nova ? this.novaActionMappings : this.actionMappings;
-      header = mappings[action].header;
-      description = mappings[action].description;
-      buttonLabel = mappings[action].buttonLabel;
-      descriptionLink = mappings[action].descriptionLink;
-      mainImageUrl = nova
-        ? mappings[action].asset
-        : "chrome://browser/content/firefoxview/synced-tabs-empty.svg";
-      descriptionArray = [description];
+      mappings = nova
+        ? this.novaActionMappings[action]
+        : this.actionMappings[action];
     }
+    header = mappings.header;
+    description = mappings.description;
+    buttonLabel = mappings.buttonLabel;
+    descriptionLink = mappings.descriptionLink;
+    mainImageUrl = mappings.asset;
+    descriptionArray = [description];
+
     return {
       action,
       buttonLabel,
@@ -330,7 +322,9 @@ export class SyncedTabsController {
     switch (this.currentSetupStateIndex) {
       case 0 /* error-state */:
         if (this.errorState) {
-          return this.#getMessageCardForState({ error: true });
+          return this.#getMessageCardForState({
+            error: true,
+          });
         }
         return this.#getMessageCardForState({ action: "loading" });
       case 1 /* not-signed-in */:

browser/components/firefoxview/firefox-view-synced-tabs-error-handler.sys.mjs

@@ -150,27 +150,32 @@ export const SyncedTabsErrorHandler = {
   // error state strings.
   _errorStateStringMappings: {
     [ErrorType.SYNC_ERROR]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-sync-error-header",
       description: "firefoxview-tabpickup-generic-sync-error-description",
       buttonLabel: "firefoxview-tabpickup-sync-error-primarybutton",
     },
     [ErrorType.FXA_ADMIN_DISABLED]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-fxa-admin-disabled-header",
       description: "firefoxview-tabpickup-fxa-disabled-by-policy-description",
       // The button is hidden for this errorState, so we don't include the
       // buttonLabel property.
     },
     [ErrorType.NETWORK_OFFLINE]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-network-offline-header",
       description: "firefoxview-tabpickup-network-offline-description",
       buttonLabel: "firefoxview-tabpickup-network-offline-primarybutton",
     },
     [ErrorType.SYNC_DISCONNECTED]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-sync-disconnected-header",
       description: "firefoxview-tabpickup-sync-disconnected-description",
       buttonLabel: "firefoxview-tabpickup-sync-disconnected-primarybutton",
     },
     [ErrorType.PASSWORD_LOCKED]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-password-locked-header",
       description: "firefoxview-tabpickup-password-locked-description",
       buttonLabel: "firefoxview-tabpickup-password-locked-primarybutton",
@@ -182,6 +187,7 @@ export const SyncedTabsErrorHandler = {
       },
     },
     [ErrorType.SIGNED_OUT]: {
+      asset: "chrome://browser/content/firefoxview/synced-tabs-error.svg",
       header: "firefoxview-tabpickup-signed-out-header",
       description: "firefoxview-tabpickup-signed-out-description2",
       buttonLabel: "firefoxview-tabpickup-signed-out-primarybutton",
@@ -190,27 +196,32 @@ export const SyncedTabsErrorHandler = {
 
   _novaErrorStateStringMappings: {
     [ErrorType.SYNC_ERROR]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg",
       header: "firefoxview-tabpickup-sync-error-header-2",
       description: "firefoxview-tabpickup-generic-sync-error-description-2",
       buttonLabel: "firefoxview-tabpickup-sync-error-primarybutton",
     },
     [ErrorType.FXA_ADMIN_DISABLED]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg",
       header: "firefoxview-tabpickup-fxa-admin-disabled-header-2",
       description: "firefoxview-tabpickup-fxa-disabled-by-policy-description-2",
       // The button is hidden for this errorState, so we don't include the
       // buttonLabel property.
     },
     [ErrorType.NETWORK_OFFLINE]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg",
       header: "firefoxview-tabpickup-network-offline-header-2",
       description: "firefoxview-tabpickup-network-offline-description-2",
       buttonLabel: "firefoxview-tabpickup-network-offline-primarybutton",
     },
     [ErrorType.SYNC_DISCONNECTED]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices.svg",
       header: "firefoxview-syncedtabs-synctabs-header-2",
       description: "firefoxview-syncedtabs-synctabs-description-2",
       buttonLabel: "firefoxview-tabpickup-synctabs-primarybutton-2",
     },
     [ErrorType.PASSWORD_LOCKED]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg",
       header: "firefoxview-tabpickup-password-locked-header-2",
       description: "firefoxview-tabpickup-password-locked-description-2",
       buttonLabel: "firefoxview-tabpickup-password-locked-primarybutton",
@@ -222,6 +233,7 @@ export const SyncedTabsErrorHandler = {
       },
     },
     [ErrorType.SIGNED_OUT]: {
+      asset: "chrome://browser/skin/sidebar/kit-tabs-devices-error.svg",
       header: "firefoxview-tabpickup-signed-out-header-2",
       description: "firefoxview-tabpickup-signed-out-description-2",
       buttonLabel: "firefoxview-tabpickup-signed-out-primarybutton",

browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js

@@ -398,16 +398,6 @@ add_task(async function test_multiple_errors() {
       "Password locked message is shown"
     );
 
-    const errorLink = syncedTabsComponent.emptyState.shadowRoot.querySelector(
-      "a[data-l10n-name=syncedtab-password-locked-link]"
-    );
-    if (!isNovaEnabled) {
-      ok(
-        errorLink && BrowserTestUtils.isVisible(errorLink),
-        "Error link is visible"
-      );
-    }
-
     // Clear the primary password error message
     await LoginTestUtils.primaryPassword.disable();
     Services.obs.notifyObservers(null, UIState.ON_UPDATE);
@@ -422,13 +412,6 @@ add_task(async function test_multiple_errors() {
         SYNC_ERROR_HEADER_L10N_ID
     );
 
-    if (!isNovaEnabled) {
-      ok(
-        errorLink && BrowserTestUtils.isHidden(errorLink),
-        "Error link is now hidden"
-      );
-    }
-
     // Clear the sync error
     Services.obs.notifyObservers(null, "weave:service:sync:finish");
   });

browser/themes/shared/sidebar/kit-page-history.svg

@@ -2,7 +2,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
 
-<svg xmlns="http://www.w3.org/2000/svg" width="262" height="218" fill="none" viewBox="0 0 262 218">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 218">
   <style>
     @media (prefers-color-scheme: dark) {
       [fill="#e8e8e8"] { fill: #42414d; }

browser/themes/shared/sidebar/kit-tabs-devices-error.svg

@@ -2,7 +2,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
 
-<svg xmlns="http://www.w3.org/2000/svg" width="262" height="109" fill="none" viewBox="0 0 262 109">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 109">
   <style>
     @media (prefers-color-scheme: dark) {
       [fill="#fcf5f0"] { fill: #210340; }

browser/themes/shared/sidebar/kit-tabs-devices.svg

@@ -2,7 +2,7 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
 
-<svg xmlns="http://www.w3.org/2000/svg" width="262" height="109" fill="none" viewBox="0 0 262 109">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 262 109">
   <style>
     @media (prefers-color-scheme: dark) {
       [fill="#fcf5f0"] { fill: #210340; }