From d89caae212e8f862dad014f2d0d9d6c416f1aa0d Mon Sep 17 00:00:00 2001 From: Sarah Clements Date: Fri, 11 Sep 2026 16:11:33 +0000 Subject: [PATCH] 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 --- .../firefoxview/SyncedTabsController.sys.mjs | 44 ++++++++----------- ...fox-view-synced-tabs-error-handler.sys.mjs | 12 +++++ .../browser_syncedtabs_errors_firefoxview.js | 17 ------- .../shared/sidebar/kit-page-history.svg | 2 +- .../sidebar/kit-qr-tabs-devices-empty.svg | 2 +- .../shared/sidebar/kit-tabs-devices-error.svg | 2 +- .../shared/sidebar/kit-tabs-devices.svg | 2 +- 7 files changed, 35 insertions(+), 46 deletions(-) diff --git a/browser/components/firefoxview/SyncedTabsController.sys.mjs b/browser/components/firefoxview/SyncedTabsController.sys.mjs index 19dfaaeb24db..908191448162 100644 --- a/browser/components/firefoxview/SyncedTabsController.sys.mjs +++ b/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 */: diff --git a/browser/components/firefoxview/firefox-view-synced-tabs-error-handler.sys.mjs b/browser/components/firefoxview/firefox-view-synced-tabs-error-handler.sys.mjs index e9ec02cb2f02..d6f0c60f0cb5 100644 --- a/browser/components/firefoxview/firefox-view-synced-tabs-error-handler.sys.mjs +++ b/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", diff --git a/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js index 394b0ac2e1fb..656c33813d86 100644 --- a/browser/components/firefoxview/tests/browser/browser_syncedtabs_errors_firefoxview.js +++ b/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"); }); diff --git a/browser/themes/shared/sidebar/kit-page-history.svg b/browser/themes/shared/sidebar/kit-page-history.svg index bc3cca90a614..2ddcf3bff761 100644 --- a/browser/themes/shared/sidebar/kit-page-history.svg +++ b/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/. --> - +