Backed out 2 changesets (bug 1317581) for Browser chrome failures on toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js. CLOSED TREE

Backed out changeset 5cc146254899 (bug 1317581) Backed out changeset 963466173a74 (bug 1317581)
2018-04-18 18:54:38 +03:00
parent 328128f3dc
commit d3b5384c06
20 changed files with 105 additions and 78 deletions
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -123,8 +123,8 @@ class BasePopup {
        panel.removeEventListener("popuppositioned", this, {capture: true});
      }
      if (panel && panel.id !== REMOTE_PANEL_ID) {
-        panel.style.removeProperty("--lwt-arrowpanel-background");
-        panel.style.removeProperty("--lwt-arrowpanel-border-color");
+        panel.style.removeProperty("--arrowpanel-background");
+        panel.style.removeProperty("--arrowpanel-border-color");
        panel.removeAttribute("remote");
      }

@@ -360,10 +360,10 @@ class BasePopup {
    if (!background) {
      background = "#fff";
    }
-    this.panel.style.setProperty("--lwt-arrowpanel-background", background);
+    this.panel.style.setProperty("--arrowpanel-background", background);
    if (background == "#fff") {
      // Set a usable default color that work with the default background-color.
-      this.panel.style.setProperty("--lwt-arrowpanel-border-color", "hsla(210,4%,10%,.15)");
+      this.panel.style.setProperty("--arrowpanel-border-color", "hsla(210,4%,10%,.15)");
    }
    this.background = background;
  }
--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -6,9 +6,9 @@

 #BMB_bookmarksPopup menupopup {
  -moz-appearance: none;
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
-  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
-  border: 1px solid var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  background: var(--arrowpanel-background);
+  color: var(--arrowpanel-color);
+  border: 1px solid var(--arrowpanel-border-color);
  margin-top: -6px;
  padding-top: 1px;
 }
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -140,10 +140,8 @@

 /* End private browsing and accessibility indicators */

-/* Override theme colors since the picker uses extra colors that
-   themes cannot set */
-#DateTimePickerPanel[active="true"] {
-  --lwt-arrowpanel-background: var(--arrowpanel-background);
-  --lwt-arrowpanel-color: var(--arrowpanel-color);
-  --lwt-arrowpanel-border-color: var(--arrowpanel-border-color);
+/* Force background for datepicker popup to white so themes don't override it */
+#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowbox,
+#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowcontent {
+  --arrowpanel-background: #fff;
 }
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -414,7 +414,7 @@ description#identity-popup-content-verifier,
 }

 .identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
-  fill: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  fill: var(--arrowpanel-background);
 }

 .identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -423,8 +423,8 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
 }

 #customization-panelWrapper > .panel-arrowcontent {
-  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  color: var(--arrowpanel-color);
+  background: var(--arrowpanel-background);
  background-clip: padding-box;
 %ifdef XP_MACOSX
  /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
@@ -433,7 +433,7 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
  -moz-appearance: none;
  border-radius: var(--arrowpanel-border-radius);
 %else
-  border: 1px solid var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  border: 1px solid var(--arrowpanel-border-color);
  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
 %endif
  max-width: 29em;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -105,7 +105,7 @@
 panelview {
  -moz-box-orient: vertical;
  -moz-box-flex: 1;
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  background: var(--arrowpanel-background);
  padding: 0;
 }

--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -18,9 +18,9 @@
 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
  /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
-  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
-  border: 1px solid var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  background: var(--arrowpanel-background);
+  color: var(--arrowpanel-color);
+  border: 1px solid var(--arrowpanel-border-color);
  border-radius: 3.5px;
  margin-top: -4px;
 }
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -47,12 +47,13 @@
 }

 .datetime-reset-button {
-  fill: currentColor;
-  opacity: .5;
+  background-image: url(chrome://global/skin/icons/input-clear.svg);
  background-color: transparent;
+  background-repeat: no-repeat;
+  background-size: 12px, 12px;
  border: none;
+  height: 12px;
+  width: 12px;
  align-self: center;
  flex: none;
-  padding-left: 2px;
-  padding-right: 2px;
 }
--- a/toolkit/content/widgets/datetimebox.xml
+++ b/toolkit/content/widgets/datetimebox.xml
@@ -1215,11 +1215,7 @@
        </html:span>

        <html:button class="datetime-reset-button" anonid="reset-button"
-                     tabindex="-1" xbl:inherits="disabled" aria-label="&datetime.reset.label;">
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-            <path d="M 3.9,3 3,3.9 5.1,6 3,8.1 3.9,9 6,6.9 8.1,9 9,8.1 6.9,6 9,3.9 8.1,3 6,5.1 Z M 12,6 A 6,6 0 0 1 6,12 6,6 0 0 1 0,6 6,6 0 0 1 6,0 6,6 0 0 1 12,6 Z"/>
-          </svg>
-        </html:button>
+                     tabindex="-1" xbl:inherits="disabled" aria-label="&datetime.reset.label;"/>
      </html:div>
    </content>

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -35,13 +35,13 @@ const toolkitVariableMap = [
      return `rgba(${r}, ${g}, ${b}, ${a})` || "black";
    }
  }],
-  ["--lwt-arrowpanel-background", {
+  ["--arrowpanel-background", {
    lwtProperty: "popup"
  }],
-  ["--lwt-arrowpanel-color", {
+  ["--arrowpanel-color", {
    lwtProperty: "popup_text"
  }],
-  ["--lwt-arrowpanel-border-color", {
+  ["--arrowpanel-border-color", {
    lwtProperty: "popup_border"
  }],
 ];
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@@ -34,16 +34,16 @@ panel[type="arrow"][side="right"] {
 .panel-arrowcontent {
  padding: var(--arrowpanel-padding);
  color: var(--arrowpanel-color);
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
-  border: 1px solid var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  background: var(--arrowpanel-background);
+  border: 1px solid var(--arrowpanel-border-color);
  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
  margin: 4px;
 }

 .panel-arrow {
  -moz-context-properties: fill, stroke;
-  fill: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
-  stroke: var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
 }

 .panel-arrow[side="top"],
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -42,10 +42,10 @@ panel[type="arrow"][side="right"] {

 .panel-arrowcontent {
  -moz-appearance: none;
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  background: var(--arrowpanel-background);
  border-radius: var(--arrowpanel-border-radius);
-  box-shadow: 0 0 0 1px var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
-  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
+  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
+  color: var(--arrowpanel-color);
  border: none;
  padding: var(--arrowpanel-padding);
  margin: 1px;
@@ -53,8 +53,8 @@ panel[type="arrow"][side="right"] {

 .panel-arrow {
  -moz-context-properties: fill, stroke;
-  fill: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
-  stroke: var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
 }

 .panel-arrow[side="top"] {
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -15,25 +15,33 @@
  --date-picker-item-height: 2.5rem;
  --date-picker-item-width: 3.3rem;

-  --border: 0.1rem solid ThreeDShadow;
+  --border: 0.1rem solid #D6D6D6;
  --border-radius: 0.3rem;
-  --border-active-color: ButtonShadow;
+  --border-active-color: #B1B1B1;

-  --font-color: ButtonText;
-  --fill-color: ThreeDFace;
+  --font-color: #191919;
+  --fill-color: #EBEBEB;

-  --today-fill-color: ThreeDShadow;
+  --today-fill-color: rgb(212, 212, 212);

-  --selected-font-color: HighlightText;
-  --selected-fill-color: Highlight;
+  --selected-font-color: #FFFFFF;
+  --selected-fill-color: #0996F8;

-  --button-fill-color-active: ButtonFace;
+  --button-font-color: #858585;
+  --button-font-color-hover: #4D4D4D;
+  --button-font-color-active: #191919;
+  --button-fill-color-active: #D4D4D4;

-  /* Use -moz-activehyperlinktext to get a system color that
-     by default will be closest to Red */
-  --weekend-font-color: -moz-activehyperlinktext;
+  --weekday-header-font-color: #6C6C6C;
+  --weekend-header-font-color: rgb(218, 78, 68);

-  --disabled-fill-color: ButtonShadow;
+  --weekend-font-color: rgb(218, 78, 68);
+  --weekday-outside-font-color: rgb(153, 153, 153);
+  --weekend-outside-font-color: rgb(255, 152, 143);
+
+  --weekday-disabled-font-color: rgba(25, 25, 25, 0.2);
+  --weekend-disabled-font-color: rgba(218, 78, 68, 0.2);
+  --disabled-fill-color: rgba(235, 235, 235, 0.8);

  --disabled-opacity: 0.2;
 }
@@ -66,17 +74,16 @@ button {
 .nav > button {
  width: 3rem;
  height: var(--date-picker-item-height);
-  -moz-context-properties: fill, fill-opacity;
-  fill: var(--font-color);
-  fill-opacity: .5;
+  -moz-context-properties: fill;
+  fill: var(--button-font-color);
 }

 .nav > button:hover {
-  fill-opacity: .8;
+  fill: var(--button-font-color-hover);
 }

 .nav > button.active {
-  fill-opacity: 1;
+  fill: var(--button-font-color-active);
 }

 .nav > button.prev,
@@ -127,9 +134,8 @@ button.month-year::after {
  width: 2.6rem;
  height: 1.6rem;
  background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
-  -moz-context-properties: fill, fill-opacity;
-  fill: var(--font-color);
-  fill-opacity: .5;
+  -moz-context-properties: fill;
+  fill: var(--button-font-color);
 }

 button.month-year.active::after {
@@ -202,7 +208,11 @@ button.month-year.active::after {
 }

 .week-header > div {
-  opacity: .5;
+  color: var(--weekday-header-font-color);
+}
+
+.week-header > div.weekend {
+  color: var(--weekend-header-font-color);
 }

 .days-viewport {
@@ -229,22 +239,28 @@ button.month-year.active::after {
 }

 .days-view > .outside {
-  opacity: .5;
+  color: var(--weekday-outside-font-color);
 }

-.weekend {
+.days-view > .weekend {
  color: var(--weekend-font-color);
 }

 .days-view > .weekend.outside {
-  opacity: .5;
+  color: var(--weekend-outside-font-color);
 }

 .days-view > .out-of-range,
 .days-view > .off-step {
+  color: var(--weekday-disabled-font-color);
  background: var(--disabled-fill-color);
 }

+.days-view > .out-of-range.weekend,
+.days-view > .off-step.weekend {
+  color: var(--weekend-disabled-font-color);
+}
+
 .days-view > .today {
  font-weight: bold;
 }
@@ -278,17 +294,16 @@ button.month-year.active::after {

 .spinner-container > button {
  height: var(--spinner-button-height);
-  -moz-context-properties: fill, fill-opacity;
-  fill: var(--font-color);
-  fill-opacity: .5;
+  -moz-context-properties: fill;
+  fill: var(--button-font-color);
 }

 .spinner-container > button:hover {
-  fill-opacity: .8;
+  fill: var(--button-font-color-hover);
 }

 .spinner-container > button.active {
-  fill-opacity: 1;
+  fill: var(--button-font-color-active);
 }

 .spinner-container > button.up {
--- a/toolkit/themes/shared/icons/calendar-arrow-left.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-left.svg
@@ -3,5 +3,5 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
     width="14" height="14" viewBox="0 0 14 14">
-  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+  <path fill="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
 </svg>
--- a/toolkit/themes/shared/icons/calendar-arrow-right.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-right.svg
@@ -3,5 +3,5 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
     width="14" height="14" viewBox="0 0 14 14">
-  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+  <path fill="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
 </svg>
--- a/toolkit/themes/shared/icons/input-clear.svg
+++ b/toolkit/themes/shared/icons/input-clear.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+ <!-- This Source Code Form is subject to the terms of the Mozilla Public
+    - License, v. 2.0. If a copy of the MPL was not distributed with this
+    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <style>
+    .st0 {
+      fill: #858585;
+    }
+    .st1 {
+      fill: #FFFFFF;
+    }
+  </style>
+  <circle id="Combined-Shape" class="st0" cx="6" cy="6" r="6"/>
+  <polygon id="Close_Button_-_Normal-path" class="st1" points="9,8.1 8.1,9 6,6.9 3.9,9 3,8.1 5.1,6 3,3.9 3.9,3 6,5.1 8.1,3 9,3.9 6.9,6"/>
+</svg>
--- a/toolkit/themes/shared/icons/spinner-arrow-down.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-down.svg
@@ -3,5 +3,5 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
     width="10" height="6" viewBox="0 0 10 6">
-  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+  <path fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
 </svg>
--- a/toolkit/themes/shared/icons/spinner-arrow-up.svg
+++ b/toolkit/themes/shared/icons/spinner-arrow-up.svg
@@ -3,5 +3,5 @@
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg"
     width="10" height="6" viewBox="0 0 10 6">
-  <path fill-opacity="context-fill-opacity" fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+  <path fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
 </svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -36,6 +36,7 @@ toolkit.jar:
  skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
  skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
  skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
+  skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
  skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
  skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
  skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
--- a/toolkit/themes/windows/global/popup.css
+++ b/toolkit/themes/windows/global/popup.css
@@ -45,10 +45,10 @@ panel[type="arrow"][side="right"] {

 .panel-arrowcontent {
  padding: var(--arrowpanel-padding);
-  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  color: var(--arrowpanel-color);
+  background: var(--arrowpanel-background);
  background-clip: padding-box;
-  border: 1px solid var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  border: 1px solid var(--arrowpanel-border-color);
  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
  margin: 4px;
 }