Bug 1499236 - remove customizableui menubar binding, r=Felipe

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

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

browser/base/content/browser-customization.js

@@ -66,3 +66,115 @@ var CustomizationHandler = {
     gBrowser.selectedBrowser.focus();
   },
 };
+
+var AutoHideMenubar = {
+  get _node() {
+    delete this._node;
+    return this._node = document.getElementById("toolbar-menubar");
+  },
+
+  _contextMenuListener: {
+    contextMenu: null,
+
+    get active() {
+      return !!this.contextMenu;
+    },
+
+    init(event) {
+      // Ignore mousedowns in <menupopup>s.
+      if (event.target.closest("menupopup")) {
+        return;
+      }
+
+      let contextMenuId = AutoHideMenubar._node.getAttribute("context");
+      this.contextMenu = document.getElementById(contextMenuId);
+      this.contextMenu.addEventListener("popupshown", this);
+      this.contextMenu.addEventListener("popuphiding", this);
+      AutoHideMenubar._node.addEventListener("mousemove", this);
+    },
+    handleEvent(event) {
+      switch (event.type) {
+        case "popupshown":
+          AutoHideMenubar._node.removeEventListener("mousemove", this);
+          break;
+        case "popuphiding":
+        case "mousemove":
+          AutoHideMenubar._setInactiveAsync();
+          AutoHideMenubar._node.removeEventListener("mousemove", this);
+          this.contextMenu.removeEventListener("popuphiding", this);
+          this.contextMenu.removeEventListener("popupshown", this);
+          this.contextMenu = null;
+          break;
+      }
+    },
+  },
+
+  init() {
+    this._node.addEventListener("toolbarvisibilitychange", this);
+    if (this._node.getAttribute("autohide") == "true") {
+      this._enable();
+    }
+  },
+
+  _updateState() {
+    if (this._node.getAttribute("autohide") == "true") {
+      this._enable();
+    } else {
+      this._disable();
+    }
+  },
+
+  _events: ["DOMMenuBarInactive", "DOMMenuBarActive", "popupshowing", "mousedown"],
+  _enable() {
+    this._node.setAttribute("inactive", "true");
+    for (let event of this._events) {
+      this._node.addEventListener(event, this);
+    }
+  },
+
+  _disable() {
+    this._setActive();
+    for (let event of this._events) {
+      this._node.removeEventListener(event, this);
+    }
+  },
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "toolbarvisibilitychange":
+        this._updateState();
+        break;
+      case "popupshowing":
+        // fall through
+      case "DOMMenuBarActive":
+        this._setActive();
+        break;
+      case "mousedown":
+        if (event.button == 2) {
+          this._contextMenuListener.init(event);
+        }
+        break;
+      case "DOMMenuBarInactive":
+        if (!this._contextMenuListener.active)
+          this._setInactiveAsync();
+        break;
+    }
+  },
+
+  _setInactiveAsync() {
+    this._inactiveTimeout = setTimeout(() => {
+      if (this._node.getAttribute("autohide") == "true") {
+        this._inactiveTimeout = null;
+        this._node.setAttribute("inactive", "true");
+      }
+    }, 0);
+  },
+
+  _setActive() {
+    if (this._inactiveTimeout) {
+      clearTimeout(this._inactiveTimeout);
+      this._inactiveTimeout = null;
+    }
+    this._node.removeAttribute("inactive");
+  },
+};

browser/base/content/browser.css

@@ -76,10 +76,6 @@ toolbar[customizable="true"] {
 }
 %endif
 
-#toolbar-menubar[autohide="true"] {
-  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
-}
-
 panelmultiview {
   -moz-box-align: start;
 }

browser/base/content/browser.js

@@ -107,7 +107,7 @@ XPCOMUtils.defineLazyScriptGetter(this, ["LightWeightThemeWebInstaller",
                                   "chrome://browser/content/browser-addons.js");
 XPCOMUtils.defineLazyScriptGetter(this, "ctrlTab",
                                   "chrome://browser/content/browser-ctrlTab.js");
-XPCOMUtils.defineLazyScriptGetter(this, "CustomizationHandler",
+XPCOMUtils.defineLazyScriptGetter(this, ["CustomizationHandler", "AutoHideMenubar"],
                                   "chrome://browser/content/browser-customization.js");
 XPCOMUtils.defineLazyScriptGetter(this, ["PointerLock", "FullScreen"],
                                   "chrome://browser/content/browser-fullScreenAndPointerLock.js");
@@ -1242,6 +1242,9 @@ var gBrowserInit = {
       }
     }
 
+    // Run menubar initialization first, to avoid TabsInTitlebar code picking
+    // up mutations from it and causing a reflow.
+    AutoHideMenubar.init();
     // Update the chromemargin attribute so the window can be sized correctly.
     window.TabBarVisibility.update();
     TabsInTitlebar.init();

browser/components/customizableui/content/toolbar.xml

@@ -161,108 +161,10 @@
     </implementation>
   </binding>
 
-  <!-- The toolbar-menubar-autohide and toolbar-drag bindings are almost
-       verbatim copies of their toolkit counterparts - they just inherit from
-       the customizableui's toolbar binding instead of toolkit's. We're currently
-       OK with the maintainance burden of having two copies of a binding, since
-       the long term goal is to move the customization framework into toolkit. -->
-
-  <binding id="toolbar-menubar-autohide"
-           extends="chrome://browser/content/customizableui/toolbar.xml#toolbar">
-    <implementation>
-      <constructor>
-        this._setInactive();
-      </constructor>
-      <destructor>
-        this._setActive();
-      </destructor>
-
-      <field name="_inactiveTimeout">null</field>
-
-      <field name="_contextMenuListener"><![CDATA[({
-        toolbar: this,
-        contextMenu: null,
-
-        get active() {
-          return !!this.contextMenu;
-        },
-
-        init(event) {
-          let node = event.target;
-          while (node != this.toolbar) {
-            if (node.localName == "menupopup")
-              return;
-            node = node.parentNode;
-          }
-
-          let contextMenuId = this.toolbar.getAttribute("context");
-          if (!contextMenuId)
-            return;
-
-          this.contextMenu = document.getElementById(contextMenuId);
-          if (!this.contextMenu)
-            return;
-
-          this.contextMenu.addEventListener("popupshown", this);
-          this.contextMenu.addEventListener("popuphiding", this);
-          this.toolbar.addEventListener("mousemove", this);
-        },
-        handleEvent(event) {
-          switch (event.type) {
-            case "popupshown":
-              this.toolbar.removeEventListener("mousemove", this);
-              break;
-            case "popuphiding":
-            case "mousemove":
-              this.toolbar._setInactiveAsync();
-              this.toolbar.removeEventListener("mousemove", this);
-              this.contextMenu.removeEventListener("popuphiding", this);
-              this.contextMenu.removeEventListener("popupshown", this);
-              this.contextMenu = null;
-              break;
-          }
-        },
-      })]]></field>
-
-      <method name="_setInactive">
-        <body><![CDATA[
-          this.setAttribute("inactive", "true");
-        ]]></body>
-      </method>
-
-      <method name="_setInactiveAsync">
-        <body><![CDATA[
-          this._inactiveTimeout = setTimeout(function(self) {
-            if (self.getAttribute("autohide") == "true") {
-              self._inactiveTimeout = null;
-              self._setInactive();
-            }
-          }, 0, this);
-        ]]></body>
-      </method>
-
-      <method name="_setActive">
-        <body><![CDATA[
-          if (this._inactiveTimeout) {
-            clearTimeout(this._inactiveTimeout);
-            this._inactiveTimeout = null;
-          }
-          this.removeAttribute("inactive");
-        ]]></body>
-      </method>
-    </implementation>
-
-    <handlers>
-      <handler event="DOMMenuBarActive"     action="this._setActive();"/>
-      <handler event="popupshowing"         action="this._setActive();"/>
-      <handler event="mousedown" button="2" action="this._contextMenuListener.init(event);"/>
-      <handler event="DOMMenuBarInactive"><![CDATA[
-        if (!this._contextMenuListener.active)
-          this._setInactiveAsync();
-      ]]></handler>
-    </handlers>
-  </binding>
-
+  <!-- The toolbar-drag binding is almost a verbatim copy of its toolkit counterpart,
+       but it inherits from the customizableui's toolbar binding instead of toolkit's.
+       This functionality will move into CustomizableUI proper as part of our move
+       away from XBL. -->
   <binding id="toolbar-drag"
            extends="chrome://browser/content/customizableui/toolbar.xml#toolbar">
     <implementation>