tor-browser

commit 9c23c57825ddf9173dd0dd4aae4cf69e6c506fc2
parent 2fdfc31293c9a25c15c80ea910a47ae1494d2deb
Author: Sarah Clements <sclements@mozilla.com>
Date:   Wed,  8 Oct 2025 09:39:48 +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
 | 
101
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---

2 files changed, 102 insertions(+), 10 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
@@ -7,6 +7,9 @@ registerCleanupFunction(async function () {
   if (!document.getElementById("sidebar-box").hidden) {
     SidebarController.hide({ dismissPanel: true });
   }
+  Services.prefs.clearUserPref(
+    "browser.toolbarbuttons.introduced.sidebar-button"
+  );
 });
 
 /**
@@ -22,6 +25,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 +126,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 +192,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,9 +240,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() {
+add_task(async function test_old_sidebar_border_color() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.revamp", false]],
+  });
   const LIGHT_SALMON = "#ffa07a";
   const extension = ExtensionTestUtils.loadExtension({
     manifest: {
@@ -281,4 +297,83 @@ 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 LIGHT_SALMON = "#ffa07a";
+  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.
+  is(
+    sidebarPanelCS.outlineColor,
+    hexToCSS(LIGHT_SALMON),
+    "The card border of the history sidebar panel should still be colored properly"
+  );
+
+  const sidebarLauncher = document.getElementById("sidebar-main");
+  const sidebarLauncherCS = window.getComputedStyle(sidebarLauncher);
+
+  is(
+    sidebarLauncherCS.borderInlineEndColor,
+    hexToCSS(LIGHT_SALMON),
+    "Sidebar launcher should be colored properly"
+  );
+
+  SidebarController.reversePosition();
+
+  is(
+    sidebarLauncherCS.borderInlineStartColor,
+    hexToCSS(LIGHT_SALMON),
+    "Sidebar launcher should be colored properly after switching sides"
+  );
+
+  SidebarController.reversePosition();
+
+  await extension.unload();
+  await SpecialPowers.popPrefEnv();
+  await SpecialPowers.popPrefEnv();
 });