tor-browser

commit d999a8ab50b151c28ef33c2009a37554e9a315de
parent dc2d4d22e48f567f05d38c12b9a9f1173c2ce34c
Author: Sarah Clements <sclements@mozilla.com>
Date:   Wed, 15 Oct 2025 10:38:34 +0000

Bug 1912020 - Update browser_ext_themes_sidebar test to support new sidebar r=extension-reviewers,nsharpley,kcochrane,robwu

* Update test to support sidebar.revamp=false and sidebar.revamp=true
* Update sidebar stylesheet to fix a discrepancy with sidebar border color for expand on hover

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

Diffstat:
M
browser/themes/shared/sidebar.css
 | 
11
++++-------
M
toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
 | 
121
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---

2 files changed, 121 insertions(+), 11 deletions(-)
diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css
@@ -368,13 +368,10 @@ sidebar-main,
     pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
     has been added to root. There are certain scenarios when that attribute is temporarily
     removed from root such as when toggling the sidebar to expand with the toolbar button. */
-  #sidebar-box {
-    --sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94));
-    > #sidebar {
-      box-shadow: none;
-      margin-block-start: 1px;
-      border: 0.5px solid var(--sidebar-border-color);
-    }
+  #sidebar {
+    box-shadow: none;
+    margin-block-start: 1px;
+    outline-offset: -0.1px;
   }
 }
 
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js b/toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
@@ -1,14 +1,54 @@
 "use strict";
 
 // This test checks whether the sidebar color properties work.
+const LIGHT_SALMON = "#ffa07a";
 
 registerCleanupFunction(async function () {
   // Ensure sidebar is hidden after each test:
   if (!document.getElementById("sidebar-box").hidden) {
     SidebarController.hide({ dismissPanel: true });
   }
+  Services.prefs.clearUserPref(
+    "browser.toolbarbuttons.introduced.sidebar-button"
+  );
 });
 
+async function mouseOverSidebarToExpand(reversedPosition = false) {
+  EventUtils.synthesizeMouse(
+    SidebarController.sidebarContainer,
+    reversedPosition ? window.innerWidth : 1,
+    150,
+    {
+      type: "mousemove",
+    }
+  );
+
+  info(
+    `Waiting for the sidebar launcher to be expanded and have the correct border-${reversedPosition ? "start" : "end"} color`
+  );
+
+  await BrowserTestUtils.waitForMutationCondition(
+    SidebarController.sidebarContainer,
+    { attributes: true },
+    async () => {
+      await SidebarController.waitUntilStable();
+      let sidebarLauncherCS = window.getComputedStyle(
+        SidebarController.sidebarMain
+      );
+      let sidebarLauncherBorder = reversedPosition
+        ? sidebarLauncherCS.borderInlineStartColor
+        : sidebarLauncherCS.borderInlineEndColor;
+      return (
+        SidebarController.sidebarContainer.hasAttribute(
+          "sidebar-launcher-expanded"
+        ) &&
+        SidebarController.sidebarMain.expanded &&
+        SidebarController._state.launcherExpanded &&
+        sidebarLauncherBorder == hexToCSS(LIGHT_SALMON)
+      );
+    }
+  );
+}
 /**
  * Test whether the selected browser has the sidebar theme applied
  *
@@ -22,6 +62,7 @@ async function test_sidebar_theme(theme, isBrightText) {
     },
   });
 
+  const sidebarBrowser = document.getElementById("sidebar");
   const sidebarBox = document.getElementById("sidebar-box");
   const browserRoot = document.documentElement;
   const content = SidebarController.browser.contentWindow;
@@ -122,7 +163,9 @@ async function test_sidebar_theme(theme, isBrightText) {
   );
 
   if (isCustomSidebar) {
-    const sidebarBoxCS = window.getComputedStyle(sidebarBox);
+    const sidebarBoxCS = window.getComputedStyle(
+      Services.prefs.getBoolPref("sidebar.revamp") ? sidebarBrowser : sidebarBox
+    );
     is(
       sidebarBoxCS.backgroundColor,
       actualBackground,
@@ -186,7 +229,7 @@ async function test_sidebar_theme(theme, isBrightText) {
   );
 }
 
-add_task(async function test_support_sidebar_colors() {
+async function check_themes() {
   for (let command of ["viewBookmarksSidebar", "viewHistorySidebar"]) {
     info("Executing command: " + command);
 
@@ -234,10 +277,19 @@ add_task(async function test_support_sidebar_colors() {
       false
     );
   }
+}
+add_task(async function test_old_sidebar_colors() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.revamp", false]],
+  });
+  await check_themes();
+  await SpecialPowers.popPrefEnv();
 });
 
-add_task(async function test_support_sidebar_border_color() {
-  const LIGHT_SALMON = "#ffa07a";
+add_task(async function test_old_sidebar_border_color() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.revamp", false]],
+  });
   const extension = ExtensionTestUtils.loadExtension({
     manifest: {
       theme: {
@@ -281,4 +333,65 @@ add_task(async function test_support_sidebar_border_color() {
   }
 
   await extension.unload();
+  await SpecialPowers.popPrefEnv();
+});
+
+add_task(async function test_support_sidebar_colors() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.revamp", true]],
+  });
+  await check_themes();
+  await SpecialPowers.popPrefEnv();
+});
+
+add_task(async function test_support_sidebar_border_color() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.revamp", true]],
+  });
+  const command = "viewHistorySidebar";
+  info("Executing command: " + command);
+
+  await SidebarController.show(command);
+
+  const extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          sidebar_border: LIGHT_SALMON,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  const sidebarPanel = document.getElementById("sidebar");
+  const sidebarPanelCS = window.getComputedStyle(sidebarPanel);
+
+  is(
+    sidebarPanelCS.outlineColor,
+    hexToCSS(LIGHT_SALMON),
+    "The card border of the history sidebar panel should be colored properly"
+  );
+
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["sidebar.verticalTabs", true],
+      ["sidebar.visibility", "expand-on-hover"],
+    ],
+  });
+
+  // We only apply the border color to the launcher for expand on hover since it can overlap an open
+  // sidebar panel making it difficult to distinguish where one surface ends and the other begins.
+  await mouseOverSidebarToExpand();
+
+  // Move sidebar to the right and wait for the correct conditions (expanded and border)
+  SidebarController.reversePosition();
+  await mouseOverSidebarToExpand(true);
+
+  // cleanup
+  SidebarController.reversePosition();
+  await extension.unload();
+  await SpecialPowers.popPrefEnv();
+  await SpecialPowers.popPrefEnv();
 });