Bug 1932354 - Fix sidebar visual styling nits r=sidebar-reviewers,desktop-theme-reviewers,fxview-reviewers,dao,hjones,jsudiaman

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

browser/components/firefoxview/fxview-search-textbox.css

@@ -27,6 +27,7 @@
   bottom: 0;
   margin: auto 0;
   padding: 2px;
+  pointer-events: none;
 }
 
 .search-icon:dir(ltr) {

browser/components/firefoxview/fxview-tab-list.mjs

@@ -694,6 +694,25 @@ export class FxviewTabRowBase extends MozLitElement {
     </span>`;
   }
 
+  getIconSrc(actionClass) {
+    let iconSrc;
+    switch (actionClass) {
+      case "delete-button":
+        iconSrc = "chrome://global/skin/icons/delete.svg";
+        break;
+      case "dismiss-button":
+        iconSrc = "chrome://global/skin/icons/close.svg";
+        break;
+      case "options-button":
+        iconSrc = "chrome://global/skin/icons/more.svg";
+        break;
+      default:
+        iconSrc = null;
+        break;
+    }
+    return iconSrc;
+  }
+
   secondaryButtonTemplate() {
     return html`${when(
       this.secondaryL10nId && this.secondaryActionHandler,
@@ -713,6 +732,7 @@ export class FxviewTabRowBase extends MozLitElement {
           this.currentActiveElementId === "fxview-tab-row-secondary-button"
             ? "0"
             : "-1"}"
+          iconSrc=${this.getIconSrc(this.secondaryActionClass)}
         ></moz-button>`
     )}`;
   }
@@ -736,6 +756,7 @@ export class FxviewTabRowBase extends MozLitElement {
           this.currentActiveElementId === "fxview-tab-row-tertiary-button"
             ? "0"
             : "-1"}"
+          iconSrc=${this.getIconSrc(this.tertiaryActionClass)}
         ></moz-button>`
     )}`;
   }

browser/components/firefoxview/fxview-tab-row.css

@@ -119,22 +119,6 @@
   background-image: url("chrome://global/skin/media/audio.svg");
 }
 
-.fxview-tab-row-button.delete-button::part(button) {
-  background-image: url("chrome://global/skin/icons/delete.svg");
-}
-
-.fxview-tab-row-button.dismiss-button::part(button) {
-  background-image: url("chrome://global/skin/icons/close.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.fxview-tab-row-button.options-button::part(button) {
-  background-image: url("chrome://global/skin/icons/more.svg");
-}
-
 .fxview-tab-row-button.undo-button::part(button) {
   font-size: var(--font-size-small);
   font-weight: 400;

browser/components/sidebar/sidebar-customize.css

@@ -88,7 +88,8 @@ moz-checkbox {
 #manage-settings {
   display: flex;
   align-items: center;
-  gap: var(--space-large);
+  gap: var(--space-small);
+  padding-inline-start: var(--space-medium);
 }
 
 .customize-group {

browser/components/sidebar/sidebar-history.css

@@ -5,6 +5,7 @@
 .options-container {
   display: flex;
   width: 100%;
+  align-items: center;
 }
 
 fxview-search-textbox {
@@ -12,5 +13,5 @@ fxview-search-textbox {
 }
 
 .menu-button::part(button) {
-  background-image: url("chrome://global/skin/icons/more.svg");
+  margin-inline-start: var(--space-small);
 }

browser/components/sidebar/sidebar-history.mjs

@@ -286,8 +286,8 @@ export class SidebarHistory extends SidebarPage {
             aria-haspopup="menu"
             aria-expanded="false"
             view=${this.view}
-            size="small"
             type="icon ghost"
+            iconsrc="chrome://global/skin/icons/more.svg"
           >
           </moz-button>
         </div>

browser/components/sidebar/sidebar-main.css

@@ -41,7 +41,6 @@
 .actions-list {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: start;
   max-width: 100%;
   overflow-x: hidden;
@@ -54,10 +53,6 @@
     --button-outer-padding-inline: var(--space-medium);
     --button-outer-padding-block: var(--space-xxsmall);
 
-    &::part(button) {
-      height: var(--tab-min-height);
-    }
-
     &:first-of-type {
       --button-outer-padding-block-start: var(--space-small);
     }

browser/components/sidebar/sidebar-panel-header.css

@@ -12,10 +12,6 @@
   fill: currentColor;
   font-size: 15px;
 
-  .header-close-button::part(button) {
-    background-image: url("chrome://global/skin/icons/close-12.svg");
-  }
-
   h4 {
     margin-block: var(--space-large);
   }

browser/components/sidebar/sidebar-panel-header.mjs

@@ -29,17 +29,17 @@ export class SidebarPanelHeader extends MozLitElement {
     return html`
       <link rel="stylesheet" href="chrome://browser/content/sidebar/sidebar-panel-header.css"></link>
       <div class="sidebar-panel-header">
-      <h4 class="text-truncated-ellipsis">${this.heading}</h4>
+        <h4 class="text-truncated-ellipsis">${this.heading}</h4>
-      <moz-button
+        <moz-button
-        class="header-close-button"
+          iconsrc="chrome://global/skin/icons/close.svg"
-        data-l10n-id="sidebar-panel-header-close-button"
+          data-l10n-id="sidebar-panel-header-close-button"
-        @click=${this.closeSidebarPanel}
+          @click=${this.closeSidebarPanel}
-        view=${this.view}
+          view=${this.view}
-        size="default"
+          size="default"
-        type="icon ghost"
+          type="icon ghost"
-      >
+        >
-      </moz-button>
+        </moz-button>
-    </div>
+      </div>
     `;
   }
 }

browser/components/sidebar/sidebar-tab-list.css

@@ -2,13 +2,17 @@
  * 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/. */
 
- /* TODO: (Bug 1908692) Should be using design tokens. */
 sidebar-tab-row {
+  border-radius: var(--border-radius-medium);
+  height: var(--size-item-large);
+
   &:hover {
-    background-color: color-mix(in srgb, currentColor 14%, transparent);
+    background-color: var(--button-background-color-ghost-hover);
+    color: var(--button-text-color-ghost-hover);
   }
 
   &:active {
-    background-color: color-mix(in srgb, currentColor 21%, transparent);
+    background-color: var(--button-background-color-ghost-active);
+    color: var(--button-text-color-ghost-active);
   }
 }

browser/components/sidebar/sidebar-tab-list.mjs

@@ -107,6 +107,7 @@ export class SidebarTabRow extends FxviewTabRowBase {
           id="fxview-tab-row-secondary-button"
           type="icon ghost"
           @click=${this.secondaryActionHandler}
+          iconSrc=${this.getIconSrc(this.secondaryActionClass)}
         ></moz-button>`
     )}`;
   }

browser/components/sidebar/sidebar-tab-row.css

@@ -7,7 +7,6 @@
 
   :host(:hover) & {
     display: inline;
-    justify-self: end;
   }
 }
 
@@ -20,7 +19,20 @@
 }
 
 .fxview-tab-row-main {
-  height: 32px;
+  padding-block: 4px;
-  box-sizing: border-box;
+  padding-inline: 8px 4px;
+  border-radius: var(--border-radius-medium);
+  gap: 8px;
   flex: 1;
+
+  &:hover, &:hover:active {
+    background-color: unset;
+  }
+}
+
+.fxview-tab-row-button {
+  --button-outer-padding-block: 4px;
+  --button-outer-padding-inline: 4px;
+  --button-size-icon: 24px;
+  --button-min-height: 24px;
 }

browser/components/sidebar/sidebar.css

@@ -6,7 +6,8 @@
 @import url("chrome://browser/skin/browser-colors.css");
 
 :root {
-  --sidebar-box-border: 0.5px solid var(--border-color-deemphasized);
+  --sidebar-box-border-color: light-dark(color-mix(in srgb, currentColor 10%, transparent), var(--border-color-deemphasized));
+  --sidebar-box-border: 0.5px solid var(--sidebar-box-border-color);
   --sidebar-box-background: light-dark(rgba(0, 0, 0, .03), rgba(255, 255, 255, .05));
   --sidebar-box-color: currentColor;
   background-color: transparent;
@@ -20,6 +21,10 @@ body {
 }
 
 moz-card {
+  --card-gap: var(--space-small);
+  --card-padding: 8px;
+  --card-heading-padding-inline: 12px;
+
   margin-block-start: var(--space-medium);
   box-shadow: none;
   background-color: var(--sidebar-box-background);
@@ -64,11 +69,12 @@ fxview-search-textbox {
     background-color: var(--sidebar-box-background);
     color: var(--sidebar-box-color);
     border: var(--sidebar-box-border);
-    border-radius: 2em;
+    border-radius: var(--border-radius-medium);
   }
 
   &::part(container) {
     width: 100%;
+    height: var(--size-item-large)
   }
 }
 

toolkit/content/widgets/moz-card/moz-card.css

@@ -30,15 +30,15 @@
 
 :host([type=accordion]) {
   summary {
-    padding-block: var(--card-padding);
+    padding-block: var(--card-padding-block, var(--card-padding));
   }
   #content {
-    padding-block-end: var(--card-padding);
+    padding-block-end: var(--card-padding-block, var(--card-padding));
   }
 }
 :host(:not([type=accordion])) {
   .moz-card {
-    padding-block: var(--card-padding);
+    padding-block: var(--card-padding-block, var(--card-padding));
   }
 }
 
@@ -65,7 +65,7 @@ summary {
   align-items: center;
   justify-content: flex-start;
   gap: var(--card-gap);
-  padding-inline: var(--card-padding);
+  padding-inline: var(--card-heading-padding-inline, var(--card-padding));
   border-radius: var(--card-border-radius);
 
   .chevron-icon {
@@ -99,14 +99,14 @@ summary {
 
 #content {
   align-self: stretch;
-  padding-inline: var(--card-padding);
+  padding-inline: var(--card-padding-inline, var(--card-padding));
   border-end-start-radius: var(--card-border-radius);
   border-end-end-radius: var(--card-border-radius);
 
   @media (prefers-contrast) {
     :host([type=accordion]) & {
       border-block-start: 0;
-      padding-block-start: var(--card-padding);
+      padding-block-start: var(--card-padding-block, var(--card-padding));
     }
   }
 }