Bug 1408121: Dark theme should apply dark colors to Firefox menus.r=jaws,mconley draft
authorConnor Masini <cjmasini@gmail.com>
Sat, 10 Feb 2018 14:48:09 -0500
changeset 760246 66bf148a12033d57ba2399f08a5e5507290db3b9
parent 759390 25fbbd9fb23c4ecd04d573036f2d65b5c86eb49c
push id100584
push userbmo:masinico@msu.edu
push dateTue, 27 Feb 2018 05:21:41 +0000
reviewersjaws, mconley
bugs1408121
milestone60.0a1
Bug 1408121: Dark theme should apply dark colors to Firefox menus.r=jaws,mconley MozReview-Commit-ID: 9aaPYZPiHf8
browser/components/extensions/test/browser/browser-common.ini
browser/components/extensions/test/browser/browser_ext_themes_dark_theme_arrowpanels.js
browser/themes/shared/compacttheme.inc.css
--- a/browser/components/extensions/test/browser/browser-common.ini
+++ b/browser/components/extensions/test/browser/browser-common.ini
@@ -182,16 +182,17 @@ skip-if = os == 'mac' # Save as PDF not 
 [browser_ext_tabs_sendMessage.js]
 [browser_ext_tabs_sharingState.js]
 [browser_ext_tabs_cookieStoreId.js]
 [browser_ext_tabs_update.js]
 [browser_ext_tabs_zoom.js]
 [browser_ext_tabs_update_url.js]
 [browser_ext_themes_icons.js]
 [browser_ext_themes_validation.js]
+[browser_ext_themes_dark_theme_arrowpanels.js]
 [browser_ext_url_overrides_newtab.js]
 [browser_ext_user_events.js]
 [browser_ext_webRequest.js]
 [browser_ext_webNavigation_frameId0.js]
 [browser_ext_webNavigation_getFrames.js]
 [browser_ext_webNavigation_onCreatedNavigationTarget.js]
 [browser_ext_webNavigation_onCreatedNavigationTarget_contextmenu.js]
 [browser_ext_webNavigation_onCreatedNavigationTarget_named_window.js]
new file mode 100644
--- /dev/null
+++ b/browser/components/extensions/test/browser/browser_ext_themes_dark_theme_arrowpanels.js
@@ -0,0 +1,77 @@
+"use strict";
+
+const {LightweightThemeManager} = ChromeUtils.import("resource://gre/modules/LightweightThemeManager.jsm", {});
+
+function openIdentityPopup() {
+  let promise = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
+  gIdentityHandler._identityBox.click();
+  return promise;
+}
+
+function closeIdentityPopup() {
+  let promise = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
+  gIdentityHandler._identityPopup.hidePopup();
+  return promise;
+}
+
+function testBorderColor(element, expected) {
+  let computedStyle = window.getComputedStyle(element);
+  Assert.equal(computedStyle.borderLeftColor,
+               expected,
+               "Element left border color should be set.");
+  Assert.equal(computedStyle.borderRightColor,
+               expected,
+               "Element right border color should be set.");
+  Assert.equal(computedStyle.borderTopColor,
+               expected,
+               "Element top border color should be set.");
+  Assert.equal(computedStyle.borderBottomColor,
+               expected,
+               "Element bottom border color should be set.");
+}
+
+// This test checks applied WebExtension themes that attempt to change
+// popup properties
+
+add_task(async function test_dark_theme_popup_styling(browser, accDoc) {
+  const POPUP_BACKGROUND_COLOR = "rgb(12, 12, 13)";
+  const POPUP_TEXT_COLOR = "rgb(249, 249, 250)";
+  const POPUP_BORDER_COLOR = "rgba(24, 26, 27, 0.14)";
+  const COMPACT_DARK_ID = "firefox-compact-dark@mozilla.org";
+
+  await BrowserTestUtils.withNewTab({gBrowser, url: "https://example.com"}, async function(browser) {
+    LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+    ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet has been added when the lightweight theme is applied");
+
+    // Open the information popup
+    await openIdentityPopup();
+
+    let arrowContent = document.getAnonymousElementByAttribute(gIdentityHandler._identityPopup, "class", "panel-arrowcontent");
+    let arrowContentComputedStyle = window.getComputedStyle(arrowContent);
+    // Ensure popup background color was set properly
+    Assert.equal(
+      arrowContentComputedStyle.getPropertyValue("background-color"),
+      POPUP_BACKGROUND_COLOR,
+      "Popup background color should have been themed"
+    );
+
+    // Ensure popup text color was set properly
+    Assert.equal(
+      arrowContentComputedStyle.getPropertyValue("color"),
+      POPUP_TEXT_COLOR,
+      "Popup text color should have been themed"
+    );
+
+    // Ensure popup border color was set properly
+    if (AppConstants.platform == "macosx") {
+      Assert.ok(
+        arrowContentComputedStyle.getPropertyValue("box-shadow").includes(POPUP_BORDER_COLOR),
+        "Popup border color should be set"
+      );
+    } else {
+      testBorderColor(arrowContent, POPUP_BORDER_COLOR);
+    }
+
+    await closeIdentityPopup();
+  });
+});
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -28,16 +28,21 @@
   --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
   /* Url and search bars */
   --url-and-searchbar-background-color: rgb(71, 71, 73);
   --url-and-searchbar-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
+
+  /* Arrow panels */
+  --arrowpanel-background: var(--chrome-background-color);
+  --arrowpanel-color: var(--chrome-color);
+  --arrowpanel-border-color: var(--panel-separator-color);
 }
 
 :root:-moz-lwtheme-darktext {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;