Bug 1425868 - Consolidate arrow panel styling. r=dao

Original patch by Jared Wein [:jaws] MozReview-Commit-ID: D8GxCjJ8Si3 --HG-- extra : rebase_source : 3f877d5b69e3ab86ad7d8b769e6b5459cea3b5bf
2024-11-25 22:01:30 +00:00 · 2017-12-19 08:00:00 -06:00 · 2017-12-19 08:00:00 -06:00 · fd655b880c
commit fd655b880c
parent a76c4dac15
32 changed files with 93 additions and 169 deletions
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@ -81,10 +81,6 @@ class BasePopup {

    this.viewNode.addEventListener(this.DESTROY_EVENT, this);

-    let doc = viewNode.ownerDocument;
-    let arrowContent = doc.getAnonymousElementByAttribute(this.panel, "class", "panel-arrowcontent");
-    this.borderColor = doc.defaultView.getComputedStyle(arrowContent).borderTopColor;
-
    this.browser = null;
    this.browserLoaded = new Promise((resolve, reject) => {
      this.browserLoadedDeferred = {resolve, reject};
@ -129,7 +125,6 @@ class BasePopup {
      let {panel} = this;
      if (panel) {
        panel.style.removeProperty("--arrowpanel-background");
-        panel.style.removeProperty("--panel-arrow-image-vertical");
        panel.removeAttribute("remote");
      }

@ -344,24 +339,10 @@ class BasePopup {
    this.browser.dispatchEvent(event);
  }

-  setBackground(background) {
-    let panelBackground = "";
-    let panelArrow = "";
-
+  setBackground(background = "") {
    if (background) {
-      let borderColor = this.borderColor || background;
-
-      panelBackground = background;
-      panelArrow = `url("data:image/svg+xml,${encodeURIComponent(`<?xml version="1.0" encoding="UTF-8"?>
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
-          <path d="M 0,10 L 10,0 20,10 z" fill="${borderColor}"/>
-          <path d="M 1,10 L 10,1 19,10 z" fill="${background}"/>
-        </svg>
-      `)}")`;
+      this.panel.style.setProperty("--arrowpanel-background", background);
    }
-
-    this.panel.style.setProperty("--arrowpanel-background", panelBackground);
-    this.panel.style.setProperty("--panel-arrow-image-vertical", panelArrow);
    this.background = background;
  }
 }
--- a/browser/components/extensions/test/browser/browser_ext_popup_background.js
+++ b/browser/components/extensions/test/browser/browser_ext_popup_background.js
@ -42,30 +42,14 @@ add_task(async function testPopupBackground() {
    let arrowContent = document.getAnonymousElementByAttribute(panel, "class", "panel-arrowcontent");
    let arrow = document.getAnonymousElementByAttribute(panel, "anonid", "arrow");

-    let borderColor = getComputedStyle(arrowContent).borderTopColor;
-
    let checkArrow = (background = null) => {
-      let image = getComputedStyle(arrow).listStyleImage;
-
      if (background == null || !standAlone) {
-        ok(image.startsWith('url("chrome://'), `We should have the built-in background image (got: ${image})`);
+        ok(!arrow.style.hasOwnProperty("fill"), "Arrow fill should be the default one");
        return;
      }

-      if (AppConstants.platform == "mac") {
-        // Panels have a drop shadow rather than a border on OS-X, so we extend
-        // the background color through the border area instead.
-        borderColor = background;
-      }
-
-      image = decodeURIComponent(image);
-      let borderIndex = image.indexOf(`fill="${borderColor}"`);
-      let backgroundIndex = image.lastIndexOf(`fill="${background}"`);
-
-      ok(borderIndex >= 0, `Have border fill (index=${borderIndex})`);
-      ok(backgroundIndex >= 0, `Have background fill (index=${backgroundIndex})`);
      is(getComputedStyle(arrowContent).backgroundColor, background, "Arrow content should have correct background");
-      isnot(borderIndex, backgroundIndex, "Border and background fills are separate elements");
+      is(getComputedStyle(arrow).fill, background, "Arrow should have correct background");
    };

    function getBackground(browser) {
--- a/browser/extensions/activity-stream/css/activity-stream-linux.css
+++ b/browser/extensions/activity-stream/css/activity-stream-linux.css
@ -1175,10 +1175,13 @@ main {
      offset-inline-end: 0;
      position: absolute; }
    .collapsible-section .section-top-bar .section-info-option .info-option::before {
-      background-image: url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg");
+      background-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
      background-position: right 6px bottom;
      background-repeat: no-repeat;
      background-size: 20px 10px;
+      -moz-context-properties: fill, stroke;
+      fill: #FFF;
+      stroke: #D7D7DB;
      height: 32px;
      top: -32px;
      width: 43px; }
--- a/browser/extensions/activity-stream/css/activity-stream-mac.css
+++ b/browser/extensions/activity-stream/css/activity-stream-mac.css
@ -1175,10 +1175,13 @@ main {
      offset-inline-end: 0;
      position: absolute; }
    .collapsible-section .section-top-bar .section-info-option .info-option::before {
-      background-image: url("chrome://global/skin/arrow/panelarrow-vertical@2x.png");
+      background-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
      background-position: right 7px bottom;
      background-repeat: no-repeat;
      background-size: 18px 10px;
+      -moz-context-properties: fill, stroke;
+      fill: #FFF;
+      stroke: #D7D7DB;
      height: 32px;
      top: -32px;
      width: 43px; }
--- a/browser/extensions/activity-stream/css/activity-stream-windows.css
+++ b/browser/extensions/activity-stream/css/activity-stream-windows.css
@ -1175,10 +1175,13 @@ main {
      offset-inline-end: 0;
      position: absolute; }
    .collapsible-section .section-top-bar .section-info-option .info-option::before {
-      background-image: url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg");
+      background-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
      background-position: right 6px bottom;
      background-repeat: no-repeat;
      background-size: 20px 10px;
+      -moz-context-properties: fill, stroke;
+      fill: #FFF;
+      stroke: #D7D7DB;
      height: 32px;
      top: -32px;
      width: 43px; }
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@ -3,6 +3,10 @@
  padding-bottom: 0;
 }

+#pageActionActivatedActionPanel[actionID="pocket"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow {
+  fill: #fbfbfb;
+}
+
 #pocket-button {
  list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
 }
--- a/browser/themes/shared/controlcenter/conn-not-secure.svg
+++ b/browser/themes/shared/controlcenter/conn-not-secure.svg
@ -1,9 +1,7 @@
-<?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" width="24" height="24" viewBox="0 0 24 24">
-#include ../icon-colors.inc.svg
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <defs>
    <mask id="mask-globe">
      <circle fill="#fff" cx="12" cy="12" r="11"/>
@ -11,5 +9,5 @@
    </mask>
  </defs>

-  <rect width="24" height="24" mask="url(#mask-globe)" class="fieldtext"/>
+  <rect width="24" height="24" mask="url(#mask-globe)" fill="context-fill" fill-opacity="context-fill-opacity"/>
 </svg>
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@ -78,6 +78,9 @@
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 24px auto;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: .6;
  padding: 0.5em 0 1em;
  /* .identity-popup-host depends on this width */
  padding-inline-start: calc(2em + 24px);
--- a/browser/themes/shared/controlcenter/permissions.svg
+++ b/browser/themes/shared/controlcenter/permissions.svg
@ -1,11 +1,7 @@
-<?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"
-     width="24" height="24" viewBox="0 0 24 24">
-#include ../icon-colors.inc.svg
-
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <defs>
    <mask id="mask-permissions">
      <path fill="#fff" d="M2,1h20c1.1,0,2,0.9,2,2v18c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V3 C0,1.9,0.9,1,2,1z"/>
@ -15,6 +11,5 @@
      <rect x="16.3" y="8.5" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 20.5355 32.5061)" fill="#fff" width="1.4" height="7.1"/>
    </mask>
  </defs>
-
-  <rect class="fieldtext" id="permissions" width="24" height="24" mask="url(#mask-permissions)"/>
+  <rect fill="context-fill" fill-opacity="context-fill-opacity" width="24" height="24" mask="url(#mask-permissions)"/>
 </svg>
--- a/browser/themes/shared/controlcenter/tracking-protection.svg
+++ b/browser/themes/shared/controlcenter/tracking-protection.svg
@ -1,10 +1,7 @@
-<?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" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="24" height="24" viewBox="0 0 24 24">
-#include ../icon-colors.inc.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
  <style>
    g:not(:target) {
      display: none;
@ -33,11 +30,11 @@
  </defs>

  <g id="enabled">
-    <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
+    <use fill="context-fill" fill-opacity="context-fill-opacity" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
  </g>

  <g id="disabled">
-    <use class="fieldtext" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
+    <use fill="context-fill" fill-opacity="context-fill-opacity" xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout-disabled)"/>
    <line x1="3" y1="22" x2="23" y2="1" stroke="#d92d21" stroke-width="3"/>
  </g>
 </svg>
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@ -456,17 +456,16 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {

 #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
 %ifdef XP_MACOSX
-  list-style-image: var(--panel-arrow-image-vertical,
-                        url("chrome://global/skin/arrow/panelarrow-vertical.png"));
  /* The OS X image is 2px narrower than the windows/linux one.
   * Add padding to compensate: */
  padding: 0 1px;
  /* specify width for hidpi image to fit correctly */
  width: 20px;
-%else
-  list-style-image: var(--panel-arrow-image-vertical,
-                        url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
 %endif
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg"));
+  -moz-context-properties: fill, stroke;
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
  /* The arrow needs to point to the overflow button. The numbers involved
   * are:
   * overflow button width: (16px + 2 * 2px padding
@ -486,15 +485,6 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
  vertical-align: top;
 }

-%ifdef XP_MACOSX
-@media (min-resolution: 2dppx) {
-  #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
-    list-style-image: var(--panel-arrow-image-vertical,
-                          url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));
-  }
-}
-%endif
-
 #customization-panelDescription {
  font-size: 1.1em;
  padding: 2px 12px 10px;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -907,6 +907,7 @@ panelview .toolbarbutton-1,

 .subviewbutton[checked="true"] {
  list-style-image: url(chrome://browser/skin/check.svg);
+  -moz-context-properties: fill;
  fill: currentColor;
 }

--- a/browser/themes/shared/icon-colors.inc.svg
+++ b/browser/themes/shared/icon-colors.inc.svg
@ -1,22 +0,0 @@
-<style>
-
-.fieldtext {
-  fill: fieldtext;
-  fill-opacity: .6;
-}
-
-.highlighttext {
-  fill: highlighttext;
-}
-
-.black {
-  fill: black;
-  fill-opacity: .6;
-}
-
-.white {
-  fill: white;
-  fill-opacity: .7;
-}
-
-</style>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -20,12 +20,12 @@
  skin/classic/browser/addons/addon-install-installed.svg      (../shared/addons/addon-install-installed.svg)
  skin/classic/browser/addons/addon-install-restart.svg        (../shared/addons/addon-install-restart.svg)
  skin/classic/browser/addons/addon-install-warning.svg        (../shared/addons/addon-install-warning.svg)
-* skin/classic/browser/controlcenter/conn-not-secure.svg       (../shared/controlcenter/conn-not-secure.svg)
+  skin/classic/browser/controlcenter/conn-not-secure.svg       (../shared/controlcenter/conn-not-secure.svg)
  skin/classic/browser/controlcenter/connection.svg            (../shared/controlcenter/connection.svg)
  skin/classic/browser/controlcenter/mcb-disabled.svg          (../shared/controlcenter/mcb-disabled.svg)
  skin/classic/browser/controlcenter/extension.svg             (../shared/controlcenter/extension.svg)
-* skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
-* skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)
+  skin/classic/browser/controlcenter/permissions.svg           (../shared/controlcenter/permissions.svg)
+  skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)
  skin/classic/browser/controlcenter/warning-gray.svg          (../shared/controlcenter/warning-gray.svg)
  skin/classic/browser/controlcenter/warning-yellow.svg        (../shared/controlcenter/warning-yellow.svg)
  skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@ -40,10 +40,15 @@ panel[type="arrow"][side="right"] {
  margin: 4px;
 }

+.panel-arrow {
+  -moz-context-properties: fill, stroke;
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
+}
+
 .panel-arrow[side="top"],
 .panel-arrow[side="bottom"] {
-  list-style-image: var(--panel-arrow-image-vertical,
-                        url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
@ -60,7 +65,7 @@ panel[type="arrow"][side="right"] {

 .panel-arrow[side="left"],
 .panel-arrow[side="right"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal-themed.svg");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
--- a/toolkit/themes/osx/global/arrow/panelarrow-horizontal.png
+++ b/toolkit/themes/osx/global/arrow/panelarrow-horizontal.png
--- a/toolkit/themes/osx/global/arrow/panelarrow-horizontal.svg
+++ b/toolkit/themes/osx/global/arrow/panelarrow-horizontal.svg
@ -0,0 +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="18">
+  <path d="M 10,0 L 0,9 10,18 z" fill="context-stroke"/>
+  <path d="M 10,1 L 1,9 10,17 z" fill="context-fill"/>
+</svg>
--- a/toolkit/themes/osx/global/arrow/panelarrow-horizontal@2x.png
+++ b/toolkit/themes/osx/global/arrow/panelarrow-horizontal@2x.png
--- a/toolkit/themes/osx/global/arrow/panelarrow-vertical.png
+++ b/toolkit/themes/osx/global/arrow/panelarrow-vertical.png
--- a/toolkit/themes/osx/global/arrow/panelarrow-vertical.svg
+++ b/toolkit/themes/osx/global/arrow/panelarrow-vertical.svg
@ -0,0 +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="18" height="10">
+  <path d="M 0,10 L 9,0 18,10 z" fill="context-stroke"/>
+  <path d="M 1,10 L 9,1 17,10 z" fill="context-fill"/>
+</svg>
--- a/toolkit/themes/osx/global/arrow/panelarrow-vertical@2x.png
+++ b/toolkit/themes/osx/global/arrow/panelarrow-vertical@2x.png
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@ -18,7 +18,7 @@ menulist > menupopup {
 /* ::::: Variables ::::: */
 :root {
  --arrowpanel-padding: 16px;
-  --arrowpanel-background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975));
+  --arrowpanel-background: hsla(0,0%,99%,.975);
  --arrowpanel-color: hsl(0,0%,10%);
  --arrowpanel-border-color: hsla(210,4%,10%,.05);
  --arrowpanel-border-radius: 3.5px;
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@ -59,10 +59,8 @@ toolkit.jar:
  skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
  skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
  skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
-  skin/classic/global/arrow/panelarrow-horizontal.png                (arrow/panelarrow-horizontal.png)
-  skin/classic/global/arrow/panelarrow-horizontal@2x.png             (arrow/panelarrow-horizontal@2x.png)
-  skin/classic/global/arrow/panelarrow-vertical.png                  (arrow/panelarrow-vertical.png)
-  skin/classic/global/arrow/panelarrow-vertical@2x.png               (arrow/panelarrow-vertical@2x.png)
+  skin/classic/global/arrow/panelarrow-horizontal.svg                (arrow/panelarrow-horizontal.svg)
+  skin/classic/global/arrow/panelarrow-vertical.svg                  (arrow/panelarrow-vertical.svg)
  skin/classic/global/checkbox/cbox-check.gif                        (checkbox/cbox-check.gif)
  skin/classic/global/checkbox/cbox-check-dis.gif                    (checkbox/cbox-check-dis.gif)
  skin/classic/global/dirListing/dirListing.css                      (dirListing/dirListing.css)
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@ -51,16 +51,21 @@ panel[type="arrow"][side="right"] {
  margin: 1px;
 }

+.panel-arrow {
+  -moz-context-properties: fill, stroke;
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
+}
+
 .panel-arrow[side="top"] {
-  list-style-image: var(--panel-arrow-image-vertical,
-                        url("chrome://global/skin/arrow/panelarrow-vertical.png"));
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: -1px;
 }

 .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
  -moz-transform: scaleY(-1);
  margin-left: 16px;
  margin-right: 16px;
@ -68,37 +73,20 @@ panel[type="arrow"][side="right"] {
 }

 .panel-arrow[side="left"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: -1px;
 }

 .panel-arrow[side="right"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
  transform: scaleX(-1);
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: -1px;
 }

-@media (min-resolution: 2dppx) {
-  .panel-arrow[side="top"],
-  .panel-arrow[side="bottom"] {
-    list-style-image: var(--panel-arrow-image-vertical,
-                          url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));
-    width: 18px;
-    height: 10px;
-  }
-
-  .panel-arrow[side="left"],
-  .panel-arrow[side="right"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal@2x.png");
-    width: 10px;
-    height: 18px;
-  }
-}
-
 /* ::::: tooltip ::::: */

 tooltip {
--- a/toolkit/themes/shared/non-mac.jar.inc.mn
+++ b/toolkit/themes/shared/non-mac.jar.inc.mn
@ -31,8 +31,8 @@
  skin/classic/global/arrow/arrow-rit-dis.gif              (../../windows/global/arrow/arrow-rit-dis.gif)
  skin/classic/global/arrow/arrow-up.gif                   (../../windows/global/arrow/arrow-up.gif)
  skin/classic/global/arrow/arrow-up-dis.gif               (../../windows/global/arrow/arrow-up-dis.gif)
-  skin/classic/global/arrow/panelarrow-horizontal-themed.svg (../../windows/global/arrow/panelarrow-horizontal-themed.svg)
-  skin/classic/global/arrow/panelarrow-vertical-themed.svg   (../../windows/global/arrow/panelarrow-vertical-themed.svg)
+  skin/classic/global/arrow/panelarrow-horizontal.svg      (../../windows/global/arrow/panelarrow-horizontal.svg)
+  skin/classic/global/arrow/panelarrow-vertical.svg        (../../windows/global/arrow/panelarrow-vertical.svg)

 * skin/classic/global/dirListing/dirListing.css            (../../windows/global/dirListing/dirListing.css)
  skin/classic/global/icons/error-16.png                   (../../windows/global/icons/error-16.png)
--- a/toolkit/themes/windows/global/arrow/panelarrow-horizontal-themed.svg
+++ b/toolkit/themes/windows/global/arrow/panelarrow-horizontal-themed.svg
@ -1,8 +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" width="10" height="20">
-  <path d="M 10,0 L 0,10 10,20 z" fill="ThreeDShadow"/>
-  <path d="M 10,1 L 1,10 10,19 z" fill="-moz-field"/>
-</svg>
--- a/toolkit/themes/windows/global/arrow/panelarrow-horizontal.svg
+++ b/toolkit/themes/windows/global/arrow/panelarrow-horizontal.svg
@ -1,8 +1,7 @@
-<?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" width="10" height="20">
-  <path d="M 10,0 L 0,10 10,20 z" fill="hsla(210,4%,10%,.2)"/>
-  <path d="M 10,1 L 1,10 10,19 z" fill="-moz-field"/>
+  <path d="M 10,0 L 0,10 10,20 z" fill="context-stroke"/>
+  <path d="M 10,1 L 1,10 10,19 z" fill="context-fill"/>
 </svg>
--- a/toolkit/themes/windows/global/arrow/panelarrow-vertical-themed.svg
+++ b/toolkit/themes/windows/global/arrow/panelarrow-vertical-themed.svg
@ -1,8 +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" width="20" height="10">
-  <path d="M 0,10 L 10,0 20,10 z" fill="ThreeDShadow"/>
-  <path d="M 1,10 L 10,1 19,10 z" fill="-moz-field"/>
-</svg>
--- a/toolkit/themes/windows/global/arrow/panelarrow-vertical.svg
+++ b/toolkit/themes/windows/global/arrow/panelarrow-vertical.svg
@ -1,8 +1,7 @@
-<?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" width="20" height="10">
-  <path d="M 0,10 L 10,0 20,10 z" fill="hsla(210,4%,10%,.2)"/>
-  <path d="M 1,10 L 10,1 19,10 z" fill="-moz-field"/>
+  <path d="M 0,10 L 10,0 20,10 z" fill="context-stroke"/>
+  <path d="M 1,10 L 10,1 19,10 z" fill="context-fill"/>
 </svg>
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@ -26,6 +26,12 @@ menulist > menupopup {
  --arrowpanel-border-color: ThreeDShadow;
 }

+@media (-moz-windows-default-theme) {
+  :root {
+    --arrowpanel-border-color: hsla(210,4%,10%,.2);
+  }
+}
+
 /* ::::: root elements ::::: */

 window,
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@ -33,8 +33,6 @@ toolkit.jar:
  skin/classic/global/toolbarbutton.css
 * skin/classic/global/tree.css
 * skin/classic/global/alerts/alert.css                     (alerts/alert.css)
-  skin/classic/global/arrow/panelarrow-horizontal.svg      (arrow/panelarrow-horizontal.svg)
-  skin/classic/global/arrow/panelarrow-vertical.svg        (arrow/panelarrow-vertical.svg)
  skin/classic/global/dirListing/folder.png                (dirListing/folder.png)
  skin/classic/global/dirListing/up.png                    (dirListing/up.png)
  skin/classic/global/icons/blacklist_favicon.png          (icons/blacklist_favicon.png)
--- a/toolkit/themes/windows/global/popup.css
+++ b/toolkit/themes/windows/global/popup.css
@ -63,10 +63,15 @@ panel[type="arrow"][side="right"] {
 }
 %endif

+.panel-arrow {
+  -moz-context-properties: fill, stroke;
+  fill: var(--arrowpanel-background);
+  stroke: var(--arrowpanel-border-color);
+}
+
 .panel-arrow[side="top"],
 .panel-arrow[side="bottom"] {
-  list-style-image: var(--panel-arrow-image-vertical,
-                        url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
@ -83,7 +88,7 @@ panel[type="arrow"][side="right"] {

 .panel-arrow[side="left"],
 .panel-arrow[side="right"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal-themed.svg");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
@ -101,20 +106,8 @@ panel[type="arrow"][side="right"] {
 %ifdef XP_WIN
@media (-moz-windows-default-theme) {
  .panel-arrowcontent {
-    --arrowpanel-border-color: hsla(210,4%,10%,.2);
    box-shadow: 0 0 4px hsla(210,4%,10%,.2);
  }
-
-  .panel-arrow[side="top"],
-  .panel-arrow[side="bottom"] {
-    list-style-image: var(--panel-arrow-image-vertical,
-                          url("chrome://global/skin/arrow/panelarrow-vertical.svg"));
-  }
-
-  .panel-arrow[side="left"],
-  .panel-arrow[side="right"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
-  }
 }
 %endif