Bug 1899599 - Change orientation of tools and extensions in expanded sidebar when more than 5 tools/extensions r=desktop-theme-reviewers,reusable-components-reviewers,sidebar-reviewers,hjones,jsudiaman

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

browser/components/sidebar/sidebar-main.css

@@ -31,7 +31,7 @@
   justify-content: center;
   align-items: start;
 
-  > moz-button {
+  > moz-button:not(.tools-overflow) {
     --button-outer-padding-inline: var(--space-medium);
     --button-outer-padding-block: var(--space-xsmall);
 
@@ -45,6 +45,31 @@
   }
 }
 
+.tools-and-extensions[orientation="horizontal"] {
+  :host([expanded]) & {
+    /* button width + extra inline padding to extend to the edge of sidebar + inline padding between adjacent buttons */
+    --first-last-button-width: calc(var(--button-size-icon) + var(--space-medium) + var(--space-xxsmall));
+    display: grid;
+    grid-template-columns: var(--first-last-button-width) repeat(4, calc(var(--button-size-icon) + var(--space-xsmall))) var(--first-last-button-width);
+  }
+
+  > moz-button.tools-overflow {
+    width: min-content;
+    --button-outer-padding-inline: var(--space-xxsmall);
+    --button-outer-padding-block: var(--space-xxsmall);
+
+    /* First button in every row */
+    &:nth-of-type(6n + 1) {
+      --button-outer-padding-inline-start: var(--space-medium);
+    }
+
+    /* Last button in every row */
+    &:nth-of-type(6n) {
+      --button-outer-padding-inline-end: var(--space-medium);
+    }
+  }
+}
+
 .bottom-actions > moz-button:last-of-type {
   --button-outer-padding-block-end: var(--space-medium);
 }

browser/components/sidebar/sidebar-main.mjs

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import {
+  classMap,
   html,
   ifDefined,
   nothing,
@@ -11,6 +12,8 @@ import {
 } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 
+const TOOLS_OVERFLOW_LIMIT = 5;
+
 /**
  * Sidebar with expanded and collapsed states that provides entry points
  * to various sidebar panels and sidebar extensions.
@@ -232,6 +235,23 @@ export default class SidebarMain extends MozLitElement {
     }
   }
 
+  isToolsOverflowing() {
+    if (
+      !this.expanded ||
+      !window.SidebarController.sidebarVerticalTabsEnabled
+    ) {
+      return false;
+    }
+    let enabledToolsAndExtensionsCount = 0;
+    for (const tool of window.SidebarController.toolsAndExtensions.values()) {
+      if (!tool.disabled) {
+        enabledToolsAndExtensionsCount++;
+      }
+    }
+    // Add 1 to enabledToolsAndExtensionsCount to account for 'Customize sidebar'
+    return enabledToolsAndExtensionsCount + 1 > TOOLS_OVERFLOW_LIMIT;
+  }
+
   entrypointTemplate(action) {
     if (action.disabled || action.hidden) {
       return null;
@@ -245,8 +265,12 @@ export default class SidebarMain extends MozLitElement {
       const attributes = messages?.[0]?.attributes;
       actionLabel = attributes?.find(attr => attr.name === "label")?.value;
     }
+    let toolsOverflowing = this.isToolsOverflowing();
     return html`<moz-button
-      class=${this.expanded ? "expanded-button" : ""}
+      class=${classMap({
+        "expanded-button": this.expanded,
+        "tools-overflow": toolsOverflowing,
+      })}
       type=${isActiveView ? "icon" : "icon ghost"}
       aria-pressed="${isActiveView}"
       view=${action.view}
@@ -256,7 +280,7 @@ export default class SidebarMain extends MozLitElement {
       ?extension=${action.view?.includes("-sidebar-action")}
       extensionId=${ifDefined(action.extensionId)}
     >
-      ${this.expanded ? actionLabel : nothing}
+      ${this.expanded && !toolsOverflowing ? actionLabel : nothing}
     </moz-button>`;
   }
 
@@ -274,7 +298,7 @@ export default class SidebarMain extends MozLitElement {
         <slot name="tabstrip"></slot>
         <button-group
           class="tools-and-extensions actions-list"
-          orientation="vertical"
+          orientation=${this.isToolsOverflowing() ? "horizontal" : "vertical"}
         >
           ${repeat(
             this.getToolsAndExtensions().values(),

browser/components/sidebar/tests/browser/browser.toml

@@ -44,6 +44,8 @@ run-if = ["os == 'mac'"] # Mac only feature
 
 ["browser_toolbar_sidebar_button.js"]
 
+["browser_tools_overflow.js"]
+
 ["browser_verticalTabs_widget_placements.js"]
 
 ["browser_vertical_tabs.js"]

browser/components/sidebar/tests/browser/browser_tools_overflow.js

@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_setup(async () => {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["sidebar.verticalTabs", true],
+      ["browser.ml.chat.enabled", true],
+      ["browser.shopping.experience2023.integratedSidebar", true],
+      ["sidebar.main.tools", "aichat,reviewchecker,syncedtabs,history"],
+    ],
+  });
+});
+registerCleanupFunction(async () => {
+  await SpecialPowers.popPrefEnv();
+  while (gBrowser.tabs.length > 1) {
+    BrowserTestUtils.removeTab(gBrowser.tabs.at(-1));
+  }
+});
+
+add_task(async function test_tools_overflow() {
+  const sidebar = document.querySelector("sidebar-main");
+  ok(sidebar, "Sidebar is shown.");
+  sidebar.expanded = true;
+  await sidebar.updateComplete;
+
+  let toolsAndExtensionsButtonGroup = sidebar.shadowRoot.querySelector(
+    ".tools-and-extensions"
+  );
+  Assert.strictEqual(
+    toolsAndExtensionsButtonGroup.getAttribute("orientation"),
+    "vertical",
+    "Tools are displaying vertically"
+  );
+  for (const toolMozButton of toolsAndExtensionsButtonGroup.children) {
+    Assert.greater(
+      toolMozButton.innerText.length,
+      0,
+      `Tool button is displaying label ${toolMozButton.innerText}`
+    );
+  }
+
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      [
+        "sidebar.main.tools",
+        "aichat,reviewchecker,syncedtabs,history,bookmarks",
+      ],
+    ],
+  });
+  await sidebar.updateComplete;
+  Assert.strictEqual(
+    toolsAndExtensionsButtonGroup.getAttribute("orientation"),
+    "horizontal",
+    "Tools are displaying horizontally"
+  );
+  for (const toolMozButton of toolsAndExtensionsButtonGroup.children) {
+    ok(
+      !toolMozButton.innerText.length,
+      `Tool button is not displaying label text`
+    );
+  }
+});