Bug 1534685 - make all custom elements to use the attribute inheritance base implementation, r=bgrins

Differential Revision: https://phabricator.services.mozilla.com/D23541

--HG--
extra : moz-landing-system : lando

browser/extensions/formautofill/content/customElements.js

@@ -90,24 +90,14 @@
       this._label = this.querySelector(".profile-label");
       this._comment = this.querySelector(".profile-comment");
 
-      this._updateAttributes();
+      this.initializeAttributeInheritance();
       this._adjustAcItem();
     }
 
-    static get observedAttributes() {
-      return [
-        "ac-image",
-      ];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (this.isConnectedAndReady && name == "ac-image" && oldValue != newValue) {
-        this._updateAttributes();
-      }
-    }
-
-    _updateAttributes() {
-      this.inheritAttribute(this._itemBox, "ac-image");
+    static get inheritedAttributes() {
+      return {
+        ".autofill-item-box": "ac-image",
+      };
     }
 
     set selected(val) {

toolkit/content/customElements.js

@@ -118,7 +118,8 @@ const MozElementMixin = Base => class MozElement extends Base {
     this._inheritedAttributesValuesCache = null;
     this.inheritedAttributesCache = new Map();
     for (let selector in inheritedAttributes) {
-      let el = this.querySelector(selector);
+      let parent = this.shadowRoot || this;
+      let el = parent.querySelector(selector);
       // Skip unmatched selectors in case an element omits some elements in certain cases:
       if (!el) {
         continue;

toolkit/content/tests/chrome/test_custom_element_base.xul

@@ -17,6 +17,7 @@
   <simpleelement id="three" disabled="true" style="-moz-user-focus: normal;"/>
   <button id="four"/>
   <inherited-element-declarative foo="fuagra"></inherited-element-declarative>
+  <inherited-element-shadowdom-declarative foo="fuagra"></inherited-element-shadowdom-declarative>
   <inherited-element-imperative foo="fuagra"></inherited-element-imperative>
 
 
@@ -114,6 +115,25 @@
     let declarativeEl = document.querySelector("inherited-element-declarative");
     ok(declarativeEl, "declarative inheritance element exists");
 
+    class InheritsElementShadowDOMDeclarative extends MozXULElement {
+      static get inheritedAttributes() {
+        return {
+          "label": "text=label,foo,boo,bardo=bar",
+          "unmatched": "foo", // Make sure we don't throw on unmatched selectors
+        };
+      }
+
+      connectedCallback() {
+        this.attachShadow({ mode: "open" });
+        this.shadowRoot.append(MozXULElement.parseXULToFragment(`<label />`));
+        this.label = this.shadowRoot.querySelector("label");
+        this.initializeAttributeInheritance();
+      }
+    }
+    customElements.define("inherited-element-shadowdom-declarative", InheritsElementShadowDOMDeclarative);
+    let shadowDOMDeclarativeEl = document.querySelector("inherited-element-shadowdom-declarative");
+    ok(shadowDOMDeclarativeEl, "declarative inheritance element with shadow DOM exists");
+
     class InheritsElementImperative extends MozXULElement {
       static get observedAttributes() {
         return [ "label", "foo", "boo", "bar" ];
@@ -142,7 +162,7 @@
     let imperativeEl = document.querySelector("inherited-element-imperative");
     ok(imperativeEl, "imperative inheritance element exists");
 
-    for (let el of [declarativeEl, imperativeEl]) {
+    for (let el of [declarativeEl, shadowDOMDeclarativeEl, imperativeEl]) {
       info(`Running checks for ${el.tagName}`);
       is(el.label.getAttribute("foo"), "fuagra", "predefined attribute @foo");
       ok(!el.label.hasAttribute("boo"), "predefined attribute @boo");

toolkit/content/widgets/menu.js

@@ -120,26 +120,6 @@ class MozMenuCaption extends MozMenuBase {
     };
   }
 
-  _updateAttributes() {
-    if (!this._inheritedAttributeMap) {
-      return;
-    }
-
-    for (let [ el, attrs ] of this._inheritedAttributeMap.entries()) {
-      for (let attr of attrs) {
-        this.inheritAttribute(el, attr);
-      }
-    }
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) {
-      return;
-    }
-
-    this._updateAttributes();
-  }
-
   connectedCallback() {
     this.textContent = "";
     this.appendChild(MozXULElement.parseXULToFragment(`

toolkit/content/widgets/tree.js

@@ -519,46 +519,33 @@
             <hbox flex="1" class="tree-bodybox">
               <html:slot name="treechildren"></html:slot>
             </hbox>
-            <scrollbar height="0" minwidth="0" minheight="0" orient="vertical" inherits="collapsed=hidevscroll" style="position:relative; z-index:2147483647;" oncontextmenu="event.stopPropagation(); event.preventDefault();" onclick="event.stopPropagation(); event.preventDefault();" ondblclick="event.stopPropagation();" oncommand="event.stopPropagation();"></scrollbar>
+            <scrollbar height="0" minwidth="0" minheight="0" orient="vertical"
+                       class="hidevscroll-scrollbar"
+                       style="position:relative; z-index:2147483647;"
+                       oncontextmenu="event.stopPropagation(); event.preventDefault();"
+                       onclick="event.stopPropagation(); event.preventDefault();"
+                       ondblclick="event.stopPropagation();"
+                       oncommand="event.stopPropagation();"></scrollbar>
           </hbox>
           <textbox class="tree-input" left="0" top="0" hidden="true"></textbox>
         </stack>
-        <hbox inherits="collapsed=hidehscroll">
+        <hbox class="hidehscroll-box">
           <scrollbar orient="horizontal" flex="1" increment="16" style="position:relative; z-index:2147483647;" oncontextmenu="event.stopPropagation(); event.preventDefault();" onclick="event.stopPropagation(); event.preventDefault();" ondblclick="event.stopPropagation();" oncommand="event.stopPropagation();"></scrollbar>
-          <scrollcorner inherits="collapsed=hidevscroll" oncontextmenu="event.stopPropagation(); event.preventDefault();" onclick="event.stopPropagation(); event.preventDefault();" ondblclick="event.stopPropagation();" oncommand="event.stopPropagation();"></scrollcorner>
+          <scrollcorner class="hidevscroll-scrollcorner"
+                        oncontextmenu="event.stopPropagation(); event.preventDefault();"
+                        onclick="event.stopPropagation(); event.preventDefault();"
+                        ondblclick="event.stopPropagation();"
+                        oncommand="event.stopPropagation();"></scrollcorner>
         </hbox>
       `));
     }
 
-    static get observedAttributes() {
-      return [
-        "hidehscroll",
-        "hidevscroll",
-      ];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (this.isConnectedAndReady && oldValue != newValue) {
-        this._updateAttributes();
-      }
-    }
-
-    _updateAttributes() {
-      for (let [ el, attrs ] of this._inheritedAttributeMap.entries()) {
-        for (let attr of attrs) {
-          this.inheritAttribute(el, attr);
-        }
-      }
-    }
-
-    get _inheritedAttributeMap() {
-      if (!this.__inheritedAttributeMap) {
-        this.__inheritedAttributeMap = new Map();
-        for (let el of this.shadowRoot.querySelectorAll("[inherits]")) {
-          this.__inheritedAttributeMap.set(el, el.getAttribute("inherits").split(","));
-        }
-      }
-      return this.__inheritedAttributeMap;
+    static get inheritedAttributes() {
+      return {
+        ".hidehscroll-box": "collapsed=hidehscroll",
+        ".hidevscroll-scrollbar": "collapsed=hidevscroll",
+        ".hidevscroll-scrollcorner": "collapsed=hidevscroll",
+      };
     }
 
     connectedCallback() {
@@ -574,7 +561,7 @@
       this.setAttribute("hidehscroll", "true");
       this.setAttribute("clickthrough", "never");
 
-      this._updateAttributes();
+      this.initializeAttributeInheritance();
 
       this.pageUpOrDownMovesSelection = !/Mac/.test(navigator.platform);