Bug 1560556 - Use Shadow DOM and CSS Shadow parts for <dropmarker> r=dao
authorBrian Grinstead <bgrinstead@mozilla.com>
Tue, 25 Jun 2019 19:18:27 +0000
changeset 542908 87e14a059e60b6fe092005e3b7f9b9e1fb0a982b
parent 542907 b23bd78e4d949c20a5e83f852958cd5fa58e02ea
child 542909 41f3dfea7b8f5d044caee9ccfd09845364fdc714
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1560556
milestone69.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 1560556 - Use Shadow DOM and CSS Shadow parts for <dropmarker> r=dao Differential Revision: https://phabricator.services.mozilla.com/D35551
browser/themes/windows/browser.css
toolkit/content/widgets/general.js
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/popupnotification.inc.css
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -821,17 +821,17 @@ notification[value="translation"] {
   notification[value="translation"] button[anonid="translate"]:active {
     background-color: #008ACB;
   }
 
   notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
   notification[value="translation"] menulist > .menulist-dropmarker {
     list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   }
-  notification[value="translation"] menulist > .menulist-dropmarker > .dropmarker-icon {
+  notification[value="translation"] menulist > .menulist-dropmarker::part(icon) {
     width: 11px;
     height: 11px;
   }
 
   notification[value="translation"] button > .button-box,
   notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker {
     padding: 0;
     margin-inline-start: 3ch;
--- a/toolkit/content/widgets/general.js
+++ b/toolkit/content/widgets/general.js
@@ -32,23 +32,22 @@ class MozDeck extends MozXULElement {
   get selectedPanel() {
     return this.children[this.selectedIndex];
   }
 }
 
 customElements.define("deck", MozDeck);
 
 class MozDropmarker extends MozXULElement {
-  connectedCallback() {
-    // Only create the image the first time we are connected
-    if (!this.firstElementChild) {
-      let image = document.createXULElement("image");
-      image.classList.add("dropmarker-icon");
-      this.appendChild(image);
-    }
+  constructor() {
+    super();
+    let shadowRoot = this.attachShadow({mode: "open"});
+    let image = document.createXULElement("image");
+    image.setAttribute("part", "icon");
+    shadowRoot.appendChild(image);
   }
 }
 
 customElements.define("dropmarker", MozDropmarker);
 
 class MozCommandSet extends MozXULElement {
   connectedCallback() {
     if (this.getAttribute("commandupdater") === "true") {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -374,17 +374,17 @@ xul|*.menulist-dropmarker {
   padding: 0;
   border: none;
   background-color: transparent;
   list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
-xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
+xul|*.menulist-dropmarker::part(icon) {
   width: 12px;
   height: 12px;
 }
 
 xul|menulist > xul|menupopup {
   -moz-appearance: none;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -80,17 +80,17 @@
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
   /* This is to override the linux !important */
   -moz-appearance: none !important;
   display: -moz-box;
   padding: 0;
   margin: 0;
 }
 
-.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) {
   width: 16px;
   height: 16px;
   list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .popup-notification-warning {