Bug 1923753 - Update empty and error state assets for sidebar and firefox view r=sidebar-reviewers,fxview-reviewers,kcochrane,desktop-theme-reviewers

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

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 {

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;
+  }
 }

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;

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`
-       <link
-         rel="stylesheet"
-         href="chrome://browser/content/firefoxview/fxview-empty-state.css"
-       />
-       <card-container hideHeader="true" exportparts="image" ?isInnerCard="${
-         this.isInnerCard
-       }" id="card-container" isEmptyState="true" role="group" aria-labelledby="header" aria-describedby="description">
-         <div slot="main" part="container" class=${classMap({
-           selectedTab: this.isSelectedTab,
-           imageHidden: !this.mainImageUrl,
-         })}>
-           <div class="image-container">
-             <img class=${classMap({
-               image: true,
-               greyscale: this.errorGrayscale,
-             })}
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/firefoxview/fxview-empty-state.css"
+      />
+      <card-container
+        hideHeader="true"
+        exportparts="image"
+        ?isInnerCard="${this.isInnerCard}"
+        id="card-container"
+        isEmptyState="true"
+        role="group"
+        aria-labelledby="header"
+        aria-describedby="description"
+      >
+        <div
+          slot="main"
+          part="container"
+          class=${classMap({
+            selectedTab: this.isSelectedTab,
+            imageHidden: !this.mainImageUrl,
+          })}
+        >
+          <div class="image-container" part="image-container">
+            <img
+              class=${classMap({
+                image: true,
+                greyscale: this.errorGrayscale,
+              })}
               part="image"
               role="presentation"
               alt=""
               ?hidden=${!this.mainImageUrl}
-                       src=${this.mainImageUrl}/>
-           </div>
-           <div class="main">
-             <h2
-               part="header"
-               id="header"
-               class="header heading-large"
-               ?hidden=${!this.headerLabel}
-             >
-                 <img class="icon info"
-                   data-l10n-id="firefoxview-empty-state-icon"
-                   ?hidden=${!this.headerIconUrl}
-                   src=${ifDefined(this.headerIconUrl)}></img>
-                 <span
-                   data-l10n-id="${this.headerLabel}"
-                   data-l10n-args="${JSON.stringify(this.headerArgs)}">
-                 </span>
-             </h2>
-             <span id="description">
-               ${repeat(
-                 this.descriptionLabels,
-                 descLabel => descLabel,
-                 (descLabel, index) => html`<p
-                   class=${classMap({
-                     description: true,
-                     secondary: index !== 0,
-                   })}
-                   data-l10n-id="${descLabel}"
-                   @click=${this.openLinkInParentWindow &&
-                   this.linkActionHandler}
-                   @keydown=${this.openLinkInParentWindow &&
-                   this.linkActionHandler}
-                 >
-                   ${this.linkTemplate(this.descriptionLink)}
-                 </p>`
-               )}
-             </span>
-             <slot name="primary-action"></slot>
-           </div>
-         </div>
-       </card-container>
-     `;
+              src=${this.mainImageUrl}
+            />
+          </div>
+          <div class="main" part="main">
+            <h2
+              part="header"
+              id="header"
+              class="header heading-large"
+              ?hidden=${!this.headerLabel}
+            >
+              <span
+                data-l10n-id="${this.headerLabel}"
+                data-l10n-args="${JSON.stringify(this.headerArgs)}"
+              >
+              </span>
+            </h2>
+            <span id="description">
+              ${repeat(
+                this.descriptionLabels,
+                descLabel => descLabel,
+                (descLabel, index) => html`<p
+                  class=${classMap({
+                    description: true,
+                    secondary: index !== 0,
+                  })}
+                  data-l10n-id="${descLabel}"
+                  @click=${this.openLinkInParentWindow &&
+                  this.linkActionHandler}
+                  @keydown=${this.openLinkInParentWindow &&
+                  this.linkActionHandler}
+                >
+                  ${this.linkTemplate(this.descriptionLink)}
+                </p>`
+              )}
+            </span>
+            <slot name="primary-action"></slot>
+          </div>
+        </div>
+      </card-container>
+    `;
   }
 
   linkActionHandler(e) {

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)

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"
       >
       </fxview-empty-state>
     `;

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"
       >

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"
       >
-        <button
-          class="primary"
+        <moz-button
+          type="primary"
           slot="primary-action"
           ?hidden=${!buttonLabel}
           data-l10n-id="${ifDefined(buttonLabel)}"
           data-action="${action}"
           @click=${e => this.controller.handleEvent(e)}
-        ></button>
+        ></moz-button>
       </fxview-empty-state>
     `;
   }

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;
+  }
 }

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