Backed out changeset 29569f02015d

MozReview-Commit-ID: 6XcU3HUnEvX

browser/modules/ThemeVariableMap.jsm

@@ -23,7 +23,4 @@ const ThemeVariableMap = [
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
-  ["--arrowpanel-background", "popup"],
-  ["--arrowpanel-color", "popup_text"],
-  ["--arrowpanel-border-color", "popup_border"],
 ];

browser/themes/shared/customizableui/panelUI.inc.css

@@ -951,18 +951,6 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
 /* Unset the min-height constraint, because that works better for a text-only button. */
 #appMenu-zoomReset-button {
   min-height: unset;
-  border: 1px solid var(--panel-separator-color);
-  border-radius: 10000px;
-  padding: 1px 8px;
-  background-color: var(--arrowpanel-dimmed);
-}
-
-#appMenu-zoomReset-button@buttonStateHover@ {
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-#appMenu-zoomReset-button@buttonStateActive@ {
-  background-color: var(--arrowpanel-dimmed-even-further);
 }
 
 #appMenu-zoomReset-button > .toolbarbutton-text {
@@ -980,6 +968,14 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
   display: none;
 }
 
+/* Using this selector, because this way the hover and active selectors will apply properly. */
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) {
+  background-color: #f9f9f9;
+  border: 1px solid #e1e1e1;
+  border-radius: 10000px;
+  padding: 1px 8px;
+}
+
 .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
   font-size: 1em;
   padding-inline-start: 0;

toolkit/components/extensions/ext-theme.js

@@ -159,9 +159,6 @@ class Theme {
         case "toolbar_vertical_separator":
         case "button_background_hover":
         case "button_background_active":
-        case "popup":
-        case "popup_text":
-        case "popup_border":
           this.lwtStyles[color] = cssColor;
           break;
       }

toolkit/components/extensions/schemas/theme.json

@@ -152,18 +152,6 @@
               "button_background_active": {
                 "$ref": "ThemeColor",
                 "optional": true
-              },
-              "popup": {
-                "$ref": "ThemeColor",
-                "optional": true
-              },
-              "popup_text": {
-                "$ref": "ThemeColor",
-                "optional": true
-              },
-              "popup_border": {
-                "$ref": "ThemeColor",
-                "optional": true
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }

toolkit/components/extensions/test/browser/browser.ini

@@ -20,4 +20,3 @@ support-files =
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
-[browser_ext_themes_arrowpanels.js]

toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js

@@ -1,79 +0,0 @@
-"use strict";
-
-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;
-}
-
-// This test checks applied WebExtension themes that attempt to change
-// popup properties
-
-add_task(async function test_popup_styling(browser, accDoc) {
-  const POPUP_BACKGROUND_COLOR = "#FF0000";
-  const POPUP_TEXT_COLOR = "#008000";
-  const POPUP_BORDER_COLOR = "#0000FF";
-
-  let extension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      "theme": {
-        "images": {
-          "headerURL": "image1.png",
-        },
-        "colors": {
-          "accentcolor": ACCENT_COLOR,
-          "textcolor": TEXT_COLOR,
-          "popup": POPUP_BACKGROUND_COLOR,
-          "popup_text": POPUP_TEXT_COLOR,
-          "popup_border": POPUP_BORDER_COLOR,
-        },
-      },
-    },
-    files: {
-      "image1.png": BACKGROUND,
-    },
-  });
-
-
-  await BrowserTestUtils.withNewTab({gBrowser, url: "https://example.com"}, async function(browser) {
-    await extension.startup();
-
-    // Open the information arrow panel
-    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"),
-      `rgb(${hexToRGB(POPUP_BACKGROUND_COLOR).join(", ")})`,
-      "Popup background color should have been themed"
-    );
-
-    // Ensure popup text color was set properly
-    Assert.equal(
-      arrowContentComputedStyle.getPropertyValue("color"),
-      `rgb(${hexToRGB(POPUP_TEXT_COLOR).join(", ")})`,
-      "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(`rgb(${hexToRGB(POPUP_BORDER_COLOR).join(", ")})`),
-        "Popup border color should be set"
-      );
-    } else {
-      testBorderColor(arrowContent, POPUP_BORDER_COLOR);
-    }
-
-    await closeIdentityPopup();
-    await extension.unload();
-  });
-});

toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js

@@ -10,6 +10,21 @@ add_task(async function setup() {
   ]});
 });
 
+function testBorderColor(element, expected) {
+  Assert.equal(window.getComputedStyle(element).borderLeftColor,
+               hexToCSS(expected),
+               "Field left border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderRightColor,
+               hexToCSS(expected),
+               "Field right border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderTopColor,
+               hexToCSS(expected),
+               "Field top border color should be set.");
+  Assert.equal(window.getComputedStyle(element).borderBottomColor,
+               hexToCSS(expected),
+               "Field bottom border color should be set.");
+}
+
 add_task(async function test_support_toolbar_field_properties() {
   const TOOLBAR_FIELD_BACKGROUND = "#ff00ff";
   const TOOLBAR_FIELD_COLOR = "#00ff00";

toolkit/components/extensions/test/browser/head.js

@@ -1,5 +1,5 @@
 /* exported ACCENT_COLOR, BACKGROUND, ENCODED_IMAGE_DATA, FRAME_COLOR, TAB_TEXT_COLOR,
-   TEXT_COLOR, BACKGROUND_TAB_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB, testBorderColor */
+   TEXT_COLOR, BACKGROUND_TAB_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB */
 
 "use strict";
 
@@ -53,19 +53,3 @@ function imageBufferFromDataURI(encodedImageData) {
   let decodedImageData = atob(encodedImageData);
   return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
 }
-
-function testBorderColor(element, expected) {
-  let computedStyle = window.getComputedStyle(element);
-  Assert.equal(computedStyle.borderLeftColor,
-               hexToCSS(expected),
-               "Element left border color should be set.");
-  Assert.equal(computedStyle.borderRightColor,
-               hexToCSS(expected),
-               "Element right border color should be set.");
-  Assert.equal(computedStyle.borderTopColor,
-               hexToCSS(expected),
-               "Element top border color should be set.");
-  Assert.equal(computedStyle.borderBottomColor,
-               hexToCSS(expected),
-               "Element bottom border color should be set.");
-}