Bug 1317581 - DateTimePicker should support high contrast mode on Windows. r=dao
☠☠ backed out by b1dbb3ffc3d2 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Thu, 22 Mar 2018 13:01:28 -0400
changeset 467826 963466173a7466f7a5fe51d2b405ebbbc57e8bfd
parent 467825 fb3d15010d656629f19e40b5964b294dedaf67f5
child 467827 5cc1462548991de3dc524484f008e75394cb7df4
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)
reviewersdao
bugs1317581
milestone61.0a1
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
Bug 1317581 - DateTimePicker should support high contrast mode on Windows. r=dao MozReview-Commit-ID: DEBBjcgHIyH
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("--arrowpanel-background");
-        panel.style.removeProperty("--arrowpanel-border-color");
+        panel.style.removeProperty("--lwt-arrowpanel-background");
+        panel.style.removeProperty("--lwt-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("--arrowpanel-background", background);
+    this.panel.style.setProperty("--lwt-arrowpanel-background", background);
     if (background == "#fff") {
       // Set a usable default color that work with the default background-color.
-      this.panel.style.setProperty("--arrowpanel-border-color", "hsla(210,4%,10%,.15)");
+      this.panel.style.setProperty("--lwt-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(--arrowpanel-background);
-  color: var(--arrowpanel-color);
-  border: 1px solid var(--arrowpanel-border-color);
+  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));
   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,13 +135,15 @@
 
 :root:not([accessibilitymode]) .accessibility-indicator,
 :root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
   display: none;
 }
 
 /* End private browsing and accessibility indicators */
 
-/* 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;
+/* 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);
 }
--- 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(--arrowpanel-background);
+  fill: var(--lwt-arrowpanel-background, 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(--arrowpanel-color);
-  background: var(--arrowpanel-background);
+  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
+  background: var(--lwt-arrowpanel-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(--arrowpanel-border-color);
+  border: 1px solid var(--lwt-arrowpanel-border-color, 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(--arrowpanel-background);
+  background: var(--lwt-arrowpanel-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(--arrowpanel-background);
-  color: var(--arrowpanel-color);
-  border: 1px solid var(--arrowpanel-border-color);
+  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));
   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,18 +42,17 @@
 
 .datetime-edit-field[disabled="true"],
 .datetime-edit-field[readonly="true"]  {
   color: GrayText;
   -moz-user-select: none;
 }
 
 .datetime-reset-button {
-  background-image: url(chrome://global/skin/icons/input-clear.svg);
+  fill: currentColor;
+  opacity: .5;
   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,17 +1210,21 @@
                 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;"/>
+                     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>
       </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";
     }
   }],
-  ["--arrowpanel-background", {
+  ["--lwt-arrowpanel-background", {
     lwtProperty: "popup"
   }],
-  ["--arrowpanel-color", {
+  ["--lwt-arrowpanel-color", {
     lwtProperty: "popup_text"
   }],
-  ["--arrowpanel-border-color", {
+  ["--lwt-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(--arrowpanel-background);
-  border: 1px solid var(--arrowpanel-border-color);
+  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  border: 1px solid var(--lwt-arrowpanel-border-color, 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(--arrowpanel-background);
-  stroke: var(--arrowpanel-border-color);
+  fill: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  stroke: var(--lwt-arrowpanel-border-color, 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(--arrowpanel-background);
+  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
   border-radius: var(--arrowpanel-border-radius);
-  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
-  color: var(--arrowpanel-color);
+  box-shadow: 0 0 0 1px var(--lwt-arrowpanel-border-color, var(--arrowpanel-border-color));
+  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
   border: none;
   padding: var(--arrowpanel-padding);
   margin: 1px;
 }
 
 .panel-arrow {
   -moz-context-properties: fill, stroke;
-  fill: var(--arrowpanel-background);
-  stroke: var(--arrowpanel-border-color);
+  fill: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
+  stroke: var(--lwt-arrowpanel-border-color, 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,43 +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 #D6D6D6;
+  --border: 0.1rem solid ThreeDShadow;
   --border-radius: 0.3rem;
-  --border-active-color: #B1B1B1;
+  --border-active-color: ButtonShadow;
 
-  --font-color: #191919;
-  --fill-color: #EBEBEB;
+  --font-color: ButtonText;
+  --fill-color: ThreeDFace;
 
-  --today-fill-color: rgb(212, 212, 212);
+  --today-fill-color: ThreeDShadow;
 
-  --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-font-color: ButtonText;
+  --button-font-color-hover: ButtonText;
+  --button-font-color-active: ButtonText;
+  --button-fill-color-active: ButtonFace;
 
-  --weekday-header-font-color: #6C6C6C;
-  --weekend-header-font-color: rgb(218, 78, 68);
+  --weekday-header-font-color: ButtonText;
+  --weekend-header-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);
+  --weekend-font-color: -moz-activehyperlinktext;
+  --weekday-outside-font-color: ButtonText;
+  --weekend-outside-font-color: -moz-activehyperlinktext;
 
-  --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);
+  --weekday-disabled-font-color: ButtonText;
+  --weekend-disabled-font-color: ButtonText;
+  --disabled-fill-color: ButtonShadow;
 
   --disabled-opacity: 0.2;
 }
 
 html {
   font-size: 10px;
 }
 
@@ -69,26 +69,29 @@ 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;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 .nav > button:hover {
   fill: var(--button-font-color-hover);
+  fill-opacity: .8;
 }
 
 .nav > button.active {
   fill: var(--button-font-color-active);
+  fill-opacity: 1;
 }
 
 .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,
@@ -129,18 +132,19 @@ 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;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 button.month-year.active::after {
   background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .month-year-view {
   position: absolute;
@@ -204,16 +208,17 @@ button.month-year.active::after {
 }
 
 .week-header {
   display: flex;
 }
 
 .week-header > div {
   color: var(--weekday-header-font-color);
+  opacity: .5;
 }
 
 .week-header > div.weekend {
   color: var(--weekend-header-font-color);
 }
 
 .days-viewport {
   height: 15rem;
@@ -235,24 +240,26 @@ button.month-year.active::after {
   height: var(--date-picker-item-height);
   position: relative;
   justify-content: center;
   width: var(--date-picker-item-width);
 }
 
 .days-view > .outside {
   color: var(--weekday-outside-font-color);
+  opacity: .5;
 }
 
 .days-view > .weekend {
   color: var(--weekend-font-color);
 }
 
 .days-view > .weekend.outside {
   color: var(--weekend-outside-font-color);
+  opacity: .5;
 }
 
 .days-view > .out-of-range,
 .days-view > .off-step {
   color: var(--weekday-disabled-font-color);
   background: var(--disabled-fill-color);
 }
 
@@ -289,26 +296,29 @@ 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;
+  -moz-context-properties: fill, fill-opacity;
   fill: var(--button-font-color);
+  fill-opacity: .5;
 }
 
 .spinner-container > button:hover {
   fill: var(--button-font-color-hover);
+  fill-opacity: .8;
 }
 
 .spinner-container > button.active {
   fill: var(--button-font-color-active);
+  fill-opacity: 1;
 }
 
 .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="context-fill" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+  <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"/>
 </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="context-fill" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+  <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"/>
 </svg>
deleted file mode 100644
--- a/toolkit/themes/shared/icons/input-clear.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?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="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+  <path fill-opacity="context-fill-opacity" 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="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+  <path fill-opacity="context-fill-opacity" 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,17 +31,16 @@ 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(--arrowpanel-color);
-  background: var(--arrowpanel-background);
+  color: var(--lwt-arrowpanel-color, var(--arrowpanel-color));
+  background: var(--lwt-arrowpanel-background, var(--arrowpanel-background));
   background-clip: padding-box;
-  border: 1px solid var(--arrowpanel-border-color);
+  border: 1px solid var(--lwt-arrowpanel-border-color, 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 {