Backed out 2 changesets (bug 1317581) for Browser chrome failures on toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js. CLOSED TREE
authorDorel Luca <dluca@mozilla.com>
Wed, 18 Apr 2018 18:54:38 +0300
changeset 467835 b1dbb3ffc3d228a345266b03b1e90cb950ac6f40
parent 467834 f206acff283f2e89fa67fca6e1a24a55bdb50a0b
child 467836 3e9acd2c8bd329cfeb8a53be7ecaefc462024f6c
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1317581
milestone61.0a1
backs out5cc1462548991de3dc524484f008e75394cb7df4
963466173a7466f7a5fe51d2b405ebbbc57e8bfd
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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)
browser/components/extensions/ExtensionPopups.jsm
browser/themes/linux/customizableui/panelUI.css
browser/themes/shared/browser.inc.css
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/customizableui/customizeMode.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/windows/customizableui/panelUI.css
toolkit/content/widgets/datetimebox.css
toolkit/content/widgets/datetimebox.xml
toolkit/modules/LightweightThemeConsumer.jsm
toolkit/themes/linux/global/popup.css
toolkit/themes/osx/global/popup.css
toolkit/themes/shared/datetimeinputpickers.css
toolkit/themes/shared/icons/calendar-arrow-left.svg
toolkit/themes/shared/icons/calendar-arrow-right.svg
toolkit/themes/shared/icons/input-clear.svg
toolkit/themes/shared/icons/spinner-arrow-down.svg
toolkit/themes/shared/icons/spinner-arrow-up.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/windows/global/popup.css
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -118,18 +118,18 @@ class BasePopup {
         delete this.viewNode.customRectGetter;
       }
 
       let {panel} = this;
       if (panel) {
         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");
       }
 
       this.browser = null;
       this.stack = null;
       this.viewNode = null;
     });
   }
@@ -355,20 +355,20 @@ class BasePopup {
     // Panels inherit the applied theme (light, dark, etc) and there is a high
     // likelihood that most extension authors will not have tested with a dark theme.
     // If they have not set a background-color, we force it to white to ensure visibility
     // of the extension content. Passing `null` should be treated the same as no argument,
     // which is why we can't use default parameters here.
     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 map of active popups for a given browser window.
  *
--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -1,19 +1,19 @@
 /* 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/. */
 
 %include ../../shared/customizableui/panelUI.inc.css
 
 #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;
 }
 
 /* Add some space at the top because there are no headers: */
 #BMB_bookmarksPopup menupopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
   padding-top: 4px;
 }
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -135,15 +135,13 @@
 
 :root:not([accessibilitymode]) .accessibility-indicator,
 :root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
   display: none;
 }
 
 /* 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
@@ -409,14 +409,14 @@ description#identity-popup-content-verif
 }
 
 /* swap foreground / background colors on hover */
 .identity-popup-permission-remove-button:not(:-moz-focusring):hover {
   background-color: currentColor;
 }
 
 .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 {
   opacity: 0.8;
 }
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -418,27 +418,27 @@ toolbarpaletteitem[place=toolbar] > tool
   background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box;
 }
 
 .customization-lwtheme-menu-footeritem:first-child {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
 
 #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
    * as best as we can here: */
   box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3);
   -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;
 }
 
 #customization-panelWrapper > .panel-arrowbox {
   position: relative;
   height: 10px;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -100,17 +100,17 @@
 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
   background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 }
 
 panelview {
   -moz-box-orient: vertical;
   -moz-box-flex: 1;
-  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  background: var(--arrowpanel-background);
   padding: 0;
 }
 
 /* This section is to anchor all the drop down panels at the same height, shift the
   panel`s top margin according to its positioning and the uidensity of the window. */
 #downloadsPanel,
 #widget-overflow,
 #appMenu-popup,
--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -13,19 +13,19 @@
   padding: 0;
   padding-top: 4px;
   padding-inline-start: 3px;
 }
 
 #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;
 }
 
 /* Add some space at the top because there are no headers: */
 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox  {
   padding-top: 4px;
 }
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -42,17 +42,18 @@
 
 .datetime-edit-field[disabled="true"],
 .datetime-edit-field[readonly="true"]  {
   color: GrayText;
   -moz-user-select: none;
 }
 
 .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
@@ -1210,21 +1210,17 @@
                 xbl:inherits="context,disabled,readonly" role="presentation">
         <html:span class="datetime-input-edit-wrapper"
                    anonid="edit-wrapper">
           <!-- Each of the date/time input types will append their input child
              - elements here -->
         </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>
 
     <implementation implements="nsIDateTimeInputArea">
       <constructor>
       <![CDATA[
         this.DEBUG = false;
         this.mInputElement = this.parentNode;
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -30,23 +30,23 @@ const toolkitVariableMap = [
       }
       const {r, g, b, a} = rgbaChannels;
       const luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
       element.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
       element.setAttribute("lwtheme", "true");
       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"
   }],
 ];
 
 // Get the theme variables from the app resource directory.
 // This allows per-app variables.
 ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
 
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@@ -29,26 +29,26 @@ panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-top: -20px;
   margin-bottom: -20px;
 }
 
 .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"],
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   position: relative;
   margin-left: 10px;
   margin-right: 10px;
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -37,29 +37,29 @@ panel[type="arrow"][side="bottom"] {
 panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-top: -25px;
   margin-bottom: -25px;
 }
 
 .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;
 }
 
 .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"] {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   margin-left: 16px;
   margin-right: 16px;
   margin-bottom: -1px;
 }
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -10,35 +10,43 @@
   --spinner-item-margin-bottom: 0.1rem;
   --spinner-button-height: 1.2rem;
   --colon-width: 2rem;
   --day-period-spacing-width: 1rem;
   --calendar-width: 23.1rem;
   --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: #FFFFFF;
+  --selected-fill-color: #0996F8;
 
-  --selected-font-color: HighlightText;
-  --selected-fill-color: Highlight;
+  --button-font-color: #858585;
+  --button-font-color-hover: #4D4D4D;
+  --button-font-color-active: #191919;
+  --button-fill-color-active: #D4D4D4;
 
-  --button-fill-color-active: ButtonFace;
+  --weekday-header-font-color: #6C6C6C;
+  --weekend-header-font-color: rgb(218, 78, 68);
 
-  /* Use -moz-activehyperlinktext to get a system color that
-     by default will be closest to Red */
-  --weekend-font-color: -moz-activehyperlinktext;
+  --weekend-font-color: rgb(218, 78, 68);
+  --weekday-outside-font-color: rgb(153, 153, 153);
+  --weekend-outside-font-color: rgb(255, 152, 143);
 
-  --disabled-fill-color: ButtonShadow;
+  --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;
 }
 
 html {
   font-size: 10px;
 }
 
@@ -61,27 +69,26 @@ button {
   height: 2.4rem;
   margin-bottom: 0.8rem;
   justify-content: space-between;
 }
 
 .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,
 .nav > button.next:dir(rtl) {
   background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
 }
 
 .nav > button.next,
@@ -122,19 +129,18 @@ button.month-year.active {
 }
 
 button.month-year::after {
   position: absolute;
   content: "";
   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 {
   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .month-year-view {
   position: absolute;
@@ -197,17 +203,21 @@ button.month-year.active::after {
   width: var(--calendar-width);
 }
 
 .week-header {
   display: flex;
 }
 
 .week-header > div {
-  opacity: .5;
+  color: var(--weekday-header-font-color);
+}
+
+.week-header > div.weekend {
+  color: var(--weekend-header-font-color);
 }
 
 .days-viewport {
   height: 15rem;
   overflow: hidden;
   position: relative;
 }
 
@@ -224,32 +234,38 @@ button.month-year.active::after {
   display: flex;
   height: var(--date-picker-item-height);
   position: relative;
   justify-content: center;
   width: var(--date-picker-item-width);
 }
 
 .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;
 }
 
 .days-view > .out-of-range::before,
 .days-view > .off-step::before {
   display: none;
 }
@@ -273,27 +289,26 @@ button.month-year.active::after {
 .spinner-container {
   display: flex;
   flex-direction: column;
   width: var(--spinner-width);
 }
 
 .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 {
   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .spinner-container > button.down {
   background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
--- a/toolkit/themes/shared/icons/calendar-arrow-left.svg
+++ b/toolkit/themes/shared/icons/calendar-arrow-left.svg
@@ -1,7 +1,7 @@
 <!-- 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"
      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
@@ -1,7 +1,7 @@
 <!-- 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"
      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>
new file mode 100644
--- /dev/null
+++ 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
@@ -1,7 +1,7 @@
 <!-- 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"
      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
@@ -1,7 +1,7 @@
 <!-- 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"
      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
@@ -31,16 +31,17 @@ toolkit.jar:
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
   skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
   skin/classic/global/icons/error.svg                      (../../shared/icons/error.svg)
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   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)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
   skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
   skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
--- a/toolkit/themes/windows/global/popup.css
+++ b/toolkit/themes/windows/global/popup.css
@@ -40,20 +40,20 @@ panel[type="arrow"][side="bottom"] {
 panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-top: -20px;
   margin-bottom: -20px;
 }
 
 .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;
 }
 
 %ifdef XP_WIN
 @media (-moz-os-version: windows-win7) {
 %endif
 .panel-arrowcontent {