Bug 1407291 - Port browser-tabsintitlebar.js changes to TB (add "drawtitle" for macOS and shorten in TabsInTitlebar var the functions to ES6 notation). r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Tue, 10 Oct 2017 18:31:42 +0200
changeset 29159 1eba18865abe74b489994d30156078aa58f16002
parent 29158 e6c1d0bc8fa54e32f3663e44b405eddea98bfe6e
child 29160 84893db274a435ec11faa19c102efc9cd4780391
push id2068
push userclokep@gmail.com
push dateMon, 13 Nov 2017 19:02:14 +0000
treeherdercomm-beta@9c7e7ce8672b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1407291
Bug 1407291 - Port browser-tabsintitlebar.js changes to TB (add "drawtitle" for macOS and shorten in TabsInTitlebar var the functions to ES6 notation). r=jorgk
mail/base/content/msgMail3PaneWindow.js
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -1641,17 +1641,17 @@ function InitPageMenu(menuPopup, event) 
 
   PageMenuParent.buildAndAddToPopup(menuPopup.triggerNode, menuPopup);
 
   if (menuPopup.children.length == 0)
     event.preventDefault();
 }
 
 var TabsInTitlebar = {
-  init: function () {
+  init() {
     if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
       // Don't trust the initial value of the sizemode attribute; wait for the
       // resize event.
       this._readPref();
       Services.prefs.addObserver(this._drawInTitlePref, this, false);
       Services.prefs.addObserver(this._autoHidePref, this, false);
 
       this.allowedBy("sizemode", false);
@@ -1675,20 +1675,26 @@ var TabsInTitlebar = {
       this._menuObserver = new MutationObserver(this._onMenuMutate);
       this._menuObserver.observe(menu, {attributes: true});
 
       let sizeMode = document.getElementById("messengerWindow");
       this._sizeModeObserver = new MutationObserver(this._onSizeModeMutate);
       this._sizeModeObserver.observe(sizeMode, {attributes: true});
 
       this._initialized = true;
+      if (this._updateOnInit) {
+        // We don't need to call this with 'true', even if original calls
+        // (before init()) did, because this will be the first call and so
+        // we will update anyway.
+        this._update();
+      }
     }
   },
 
-  allowedBy: function (condition, allow) {
+  allowedBy(condition, allow) {
     if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
       if (allow) {
         if (condition in this._disallowed) {
           delete this._disallowed[condition];
           this._update(true);
         }
       } else {
         if (!(condition in this._disallowed)) {
@@ -1704,79 +1710,90 @@ var TabsInTitlebar = {
       this._update(aForce);
     }
   },
 
   get enabled() {
     return document.documentElement.getAttribute("tabsintitlebar") == "true";
   },
 
-  observe: function (subject, topic, data) {
+  observe(subject, topic, data) {
     if (topic == "nsPref:changed")
       this._readPref();
   },
 
-  _onMenuMutate: function (aMutations) {
+  _onMenuMutate(aMutations) {
     for (let mutation of aMutations) {
       if (mutation.attributeName == "inactive" ||
           mutation.attributeName == "autohide") {
         TabsInTitlebar._update(true);
         return;
       }
     }
   },
 
-  _onSizeModeMutate: function (aMutations) {
+  _onSizeModeMutate(aMutations) {
     for (let mutation of aMutations) {
       if (mutation.attributeName == "sizemode") {
         TabsInTitlebar._update(true);
         return;
       }
     }
   },
 
   _initialized: false,
+  _updateOnInit: false,
   _disallowed: {},
   _drawInTitlePref: "mail.tabs.drawInTitlebar",
   _autoHidePref: "mail.tabs.autoHide",
   _lastSizeMode: null,
 
-  _readPref: function () {
+  _readPref() {
     // check is only true when drawInTitlebar=true and autoHide=false
     let check = Services.prefs.getBoolPref(this._drawInTitlePref) &&
                 !Services.prefs.getBoolPref(this._autoHidePref);
     this.allowedBy("pref", check);
   },
 
-  _update: function (aForce=false) {
-    function $(id) { return document.getElementById(id); }
-    function rect(ele) { return ele.getBoundingClientRect(); }
-    function verticalMargins(cstyle) { return parseFloat(cstyle.marginBottom) + parseFloat(cstyle.marginTop); }
+  _update(aForce=false) {
+    let $ = id => document.getElementById(id);
+    let rect = ele => ele.getBoundingClientRect();
+    let verticalMargins = cstyle => parseFloat(cstyle.marginBottom) + parseFloat(cstyle.marginTop);
 
-    if (!this._initialized || window.fullScreen)
+    if (window.fullScreen)
       return;
 
-    let allowed = true;
+    // In some edgecases it is possible for this to fire before we've initialized.
+    // Don't run now, but don't forget to run it when we do initialize.
+    if (!this._initialized) {
+      this._updateOnInit = true;
+      return;
+    }
 
     if (!aForce) {
       // _update is called on resize events, because the window is not ready
       // after sizemode events. However, we only care about the event when the
       // sizemode is different from the last time we updated the appearance of
       // the tabs in the titlebar.
       let sizemode = document.documentElement.getAttribute("sizemode");
       if (this._lastSizeMode == sizemode) {
         return;
       }
+      let oldSizeMode = this._lastSizeMode;
       this._lastSizeMode = sizemode;
+      // Don't update right now if we are leaving fullscreen, since the UI is
+      // still changing in the consequent "fullscreen" event. Code there will
+      // call this function again when everything is ready.
+      // See browser-fullScreen.js: FullScreen.toggle and bug 1173768.
+      if (oldSizeMode == "fullscreen") {
+        return;
+      }
     }
 
-    for (let something in this._disallowed) {
-      allowed = false;
-      break;
-    }
+    let allowed = (Object.keys(this._disallowed)).length == 0;
 
     let titlebar = $("titlebar");
     let titlebarContent = $("titlebar-content");
     let menubar = $("mail-toolbar-menubar2");
 
     if (allowed) {
       // We set the tabsintitlebar attribute first so that our CSS for
       // tabsintitlebar manifests before we do our measurements.
@@ -1792,17 +1809,17 @@ var TabsInTitlebar = {
       }
 
       // Try to avoid reflows in this code by calculating dimensions first and
       // then later set the properties affecting layout together in a batch.
 
       // Get the height of the tabs toolbar:
       let tabsToolbar = $("tabs-toolbar");
       let tabsStyles = window.getComputedStyle(tabsToolbar);
-      let fullTabsHeight = rect($("tabs-toolbar")).height + verticalMargins(tabsStyles);
+      let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles);
       // Buttons first:
       let captionButtonsBoxWidth = rect($("titlebar-buttonbox")).width;
 
       let secondaryButtonsWidth, menuHeight, fullMenuHeight, menuStyles;
       if (AppConstants.platform == "macosx") {
         secondaryButtonsWidth = rect($("titlebar-fullscreen-button")).width;
         // No need to look up the menubar stuff on OS X:
         menuHeight = 0;
@@ -1894,62 +1911,46 @@ var TabsInTitlebar = {
       titlebarContent.style.marginBottom = "";
       titlebar.style.marginBottom = "";
       menubar.style.paddingBottom = "";
     }
 
     ToolbarIconColor.inferFromText();
   },
 
-  _sizePlaceholder: function (type, width) {
-    Array.from(document.querySelectorAll(".titlebar-placeholder[type='"+ type +"']"))
-         .forEach(node => node.width = width);
+  _sizePlaceholder(type, width) {
+    Array.forEach(document.querySelectorAll(".titlebar-placeholder[type='" + type + "']"),
+                  function(node) { node.width = width; });
   },
 
-  uninit: function () {
+  uninit() {
     if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
       this._initialized = false;
       Services.prefs.removeObserver(this._drawInTitlePref, this);
       Services.prefs.removeObserver(this._autoHidePref, this);
       this._menuObserver.disconnect();
     }
   }
 };
 
 if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
   function updateTitlebarDisplay() {
     if (AppConstants.platform == "macosx") {
-      // OS X and the other platforms differ enough to necessitate this kind of
-      // special-casing. Like the other platforms where we CAN_DRAW_IN_TITLEBAR,
-      // we draw in the OS X titlebar when putting the tabs up there. However, OS X
-      // also draws in the titlebar when a lightweight theme is applied, regardless
-      // of whether or not the tabs are drawn in the titlebar.
       if (TabsInTitlebar.enabled) {
-        document.documentElement.setAttribute("chromemargin-nonlwtheme", "0,2,2,2");
-        document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-        document.documentElement.setAttribute("tabsintitlebar", "true");
+        document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1");
+        document.documentElement.removeAttribute("drawtitle");
       } else {
-        // We set chromemargin-nonlwtheme to "" instead of removing it as a way of
-        // making sure that LightweightThemeConsumer doesn't take it upon itself to
-        // detect this value again if and when we do a lwtheme state change.
-        document.documentElement.setAttribute("chromemargin-nonlwtheme", "");
-        let hasLWTheme = document.documentElement.hasAttribute("lwtheme");
-        if (hasLWTheme) {
-          document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-        } else {
-          document.documentElement.removeAttribute("chromemargin");
-        }
+        document.documentElement.removeAttribute("chromemargin");
+        document.documentElement.setAttribute("drawtitle", "true");
       }
+    } else if (TabsInTitlebar.enabled) {
+      // not OS X
+      document.documentElement.setAttribute("chromemargin", "0,2,2,2");
     } else {
-       document.getElementById("titlebar").hidden = !TabsInTitlebar.enabled;
-
-       if (TabsInTitlebar.enabled)
-         document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-       else
-         document.documentElement.removeAttribute("chromemargin");
+      document.documentElement.removeAttribute("chromemargin");
     }
   }
 }
 
 /* Draw */
 function onTitlebarMaxClick() {
   if (window.windowState == window.STATE_MAXIMIZED)
     window.restore();