diff --git a/browser/components/firefoxview/SyncedTabsController.sys.mjs b/browser/components/firefoxview/SyncedTabsController.sys.mjs index 633cdfc52914..e94e9f648100 100644 --- a/browser/components/firefoxview/SyncedTabsController.sys.mjs +++ b/browser/components/firefoxview/SyncedTabsController.sys.mjs @@ -225,7 +225,7 @@ export class SyncedTabsController { buttonLabel = this.actionMappings[action].buttonLabel; descriptionLink = this.actionMappings[action].descriptionLink; mainImageUrl = - "chrome://browser/content/firefoxview/synced-tabs-error.svg"; + "chrome://browser/content/firefoxview/synced-tabs-empty.svg"; descriptionArray = [description]; } return { diff --git a/browser/components/firefoxview/content/history-empty.svg b/browser/components/firefoxview/content/history-empty.svg index 4fb4d5021ce8..23c054a3452f 100644 --- a/browser/components/firefoxview/content/history-empty.svg +++ b/browser/components/firefoxview/content/history-empty.svg @@ -1,20 +1,4 @@ - - - - - - - - - - - - - - - - - +- License, v. 2.0. If a copy of the MPL was not distributed with this +- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + \ No newline at end of file diff --git a/browser/components/firefoxview/content/recentlyclosed-empty.svg b/browser/components/firefoxview/content/recentlyclosed-empty.svg deleted file mode 100644 index e8bd265df0ff..000000000000 --- a/browser/components/firefoxview/content/recentlyclosed-empty.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/browser/components/firefoxview/content/synced-tabs-empty.svg b/browser/components/firefoxview/content/synced-tabs-empty.svg new file mode 100644 index 000000000000..52eec9c20b4a --- /dev/null +++ b/browser/components/firefoxview/content/synced-tabs-empty.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/browser/components/firefoxview/content/synced-tabs-error.svg b/browser/components/firefoxview/content/synced-tabs-error.svg index b2a322ef7492..5d95906a3240 100644 --- a/browser/components/firefoxview/content/synced-tabs-error.svg +++ b/browser/components/firefoxview/content/synced-tabs-error.svg @@ -1,30 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +- License, v. 2.0. If a copy of the MPL was not distributed with this +- file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + \ No newline at end of file diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css index 0789c887bfa2..4986b49d5ce2 100644 --- a/browser/components/firefoxview/firefoxview.css +++ b/browser/components/firefoxview/firefoxview.css @@ -154,6 +154,23 @@ panel-item::part(button):hover:active { background-color: var(--fxview-element-background-active); } -fxview-empty-state:not([isSelectedTab]) button[slot="primary-action"] { - margin-inline-start: 0; +fxview-empty-state { + &:not([isSelectedTab]) button[slot="primary-action"] { + margin-inline-start: 0; + } + + /* these illustrations need a larger width otherwise they look too small */ + &.synced-tabs::part(image-container) { + min-width: 250px; + } + + /* center align the empty state image */ + &.recentlyclosed::part(image-container) { + margin-inline-start: 50px; + } + + /* align empty state text with synced tabs on recent browsing page */ + &.recentlyclosed::part(main) { + padding-inline-start: 50px; + } } diff --git a/browser/components/firefoxview/fxview-empty-state.css b/browser/components/firefoxview/fxview-empty-state.css index 2d0712ac94d9..6fde0e929ecd 100644 --- a/browser/components/firefoxview/fxview-empty-state.css +++ b/browser/components/firefoxview/fxview-empty-state.css @@ -72,12 +72,6 @@ } } - -.info { - -moz-context-properties: fill; - fill: var(--in-content-primary-button-background); -} - .description { color: var(--text-color-deemphasized); margin-block: 4px 15px; diff --git a/browser/components/firefoxview/fxview-empty-state.mjs b/browser/components/firefoxview/fxview-empty-state.mjs index 87ce25cd5cc2..6d4db9b407e5 100644 --- a/browser/components/firefoxview/fxview-empty-state.mjs +++ b/browser/components/firefoxview/fxview-empty-state.mjs @@ -4,7 +4,6 @@ import { html, - ifDefined, classMap, repeat, } from "chrome://global/content/vendor/lit.all.mjs"; @@ -64,68 +63,78 @@ class FxviewEmptyState extends MozLitElement { render() { return html` - - -
-
- + +
+
+ -
-
- - - ${repeat( - this.descriptionLabels, - descLabel => descLabel, - (descLabel, index) => html`

- ${this.linkTemplate(this.descriptionLink)} -

` - )} - - -
-
- - `; + src=${this.mainImageUrl} + /> +
+
+ + + ${repeat( + this.descriptionLabels, + descLabel => descLabel, + (descLabel, index) => html`

+ ${this.linkTemplate(this.descriptionLink)} +

` + )} + + +
+
+ + `; } linkActionHandler(e) { diff --git a/browser/components/firefoxview/jar.mn b/browser/components/firefoxview/jar.mn index dd0daf52896b..5e9b593c517e 100644 --- a/browser/components/firefoxview/jar.mn +++ b/browser/components/firefoxview/jar.mn @@ -32,7 +32,7 @@ browser.jar: content/browser/firefoxview/recentlyclosed.mjs content/browser/firefoxview/viewpage.mjs content/browser/firefoxview/history-empty.svg (content/history-empty.svg) - content/browser/firefoxview/recentlyclosed-empty.svg (content/recentlyclosed-empty.svg) + content/browser/firefoxview/synced-tabs-empty.svg (content/synced-tabs-empty.svg) content/browser/firefoxview/synced-tabs-error.svg (content/synced-tabs-error.svg) content/browser/callout-tab-pickup.svg (content/callout-tab-pickup.svg) content/browser/callout-tab-pickup-dark.svg (content/callout-tab-pickup-dark.svg) diff --git a/browser/components/firefoxview/recentlyclosed.mjs b/browser/components/firefoxview/recentlyclosed.mjs index a7e0646c4cb4..9112236e90bc 100644 --- a/browser/components/firefoxview/recentlyclosed.mjs +++ b/browser/components/firefoxview/recentlyclosed.mjs @@ -324,7 +324,7 @@ class RecentlyClosedTabsInView extends ViewPage { class="empty-state recentlyclosed" ?isInnerCard=${this.recentBrowsing} ?isSelectedTab=${this.selectedTab} - mainImageUrl="chrome://browser/content/firefoxview/recentlyclosed-empty.svg" + mainImageUrl="chrome://browser/content/firefoxview/history-empty.svg" > `; diff --git a/browser/components/firefoxview/syncedtabs.mjs b/browser/components/firefoxview/syncedtabs.mjs index 3311c1a3d31a..e0203cbc0bb4 100644 --- a/browser/components/firefoxview/syncedtabs.mjs +++ b/browser/components/firefoxview/syncedtabs.mjs @@ -134,7 +134,6 @@ class SyncedTabsInView extends ViewPage { buttonLabel, descriptionArray, descriptionLink, - error, header, headerIconUrl, mainImageUrl, @@ -148,7 +147,6 @@ class SyncedTabsInView extends ViewPage { ?isSelectedTab=${this.selectedTab} ?isInnerCard=${this.recentBrowsing} mainImageUrl="${ifDefined(mainImageUrl)}" - ?errorGrayscale=${error} headerIconUrl="${ifDefined(headerIconUrl)}" id="empty-container" > diff --git a/browser/components/sidebar/sidebar-syncedtabs.mjs b/browser/components/sidebar/sidebar-syncedtabs.mjs index dadae860394e..4f6f0265c02e 100644 --- a/browser/components/sidebar/sidebar-syncedtabs.mjs +++ b/browser/components/sidebar/sidebar-syncedtabs.mjs @@ -125,7 +125,6 @@ class SyncedTabsInSidebar extends SidebarPage { * @param {string} options.buttonLabel * @param {string[]} options.descriptionArray * @param {string} options.descriptionLink - * @param {boolean} options.error * @param {string} options.header * @param {string} options.headerIconUrl * @param {string} options.mainImageUrl @@ -136,7 +135,6 @@ class SyncedTabsInSidebar extends SidebarPage { buttonLabel, descriptionArray, descriptionLink, - error, header, headerIconUrl, mainImageUrl, @@ -149,18 +147,17 @@ class SyncedTabsInSidebar extends SidebarPage { class="empty-state synced-tabs error" isSelectedTab mainImageUrl="${ifDefined(mainImageUrl)}" - ?errorGrayscale=${error} headerIconUrl="${ifDefined(headerIconUrl)}" id="empty-container" > - + > `; } diff --git a/browser/components/sidebar/sidebar.css b/browser/components/sidebar/sidebar.css index 91f95edf37e5..30da50cc70d4 100644 --- a/browser/components/sidebar/sidebar.css +++ b/browser/components/sidebar/sidebar.css @@ -7,7 +7,6 @@ :root { --sidebar-box-border: 0.5px solid var(--border-color-deemphasized); - background-color: transparent; color: var(--sidebar-text-color); height: 100%; @@ -90,4 +89,15 @@ fxview-empty-state { fill: var(--toolbar-bgcolor); stroke: var(--toolbar-color); } + &::part(image-container) { + min-width: auto; + width: 100%; + max-width: 250px; + } + /* these illustrations need a larger width otherwise they look too small */ + &.synced-tabs::part(image-container) { + min-width: auto; + width: 100%; + max-width: 350px; + } } diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css index c8f4f2014c3b..c154c926069a 100644 --- a/browser/themes/shared/sidebar.css +++ b/browser/themes/shared/sidebar.css @@ -20,6 +20,7 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media (-moz-bool-pref: "sidebar.revamp") { min-width: 200px; + width: 340px; padding-block-end: var(--space-small); padding-inline-end: var(--space-small); position: relative; @@ -34,10 +35,6 @@ &[sidebarcommand="viewGenaiChatSidebar"] { min-width: 400px; } - - &[sidebarcommand="viewReviewCheckerSidebar"] { - width: 340px; - } } /* Note that with sidebar.revamp we apply the --sidebar-background-color to the