Bug 1390448 - Restore vertical margin calculation in browser-tabsintitlebar.js, add 1px to window control margin on Windows 10. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Tue, 15 Aug 2017 14:18:22 +0200
changeset 646572 807e7c6da20958261b4da2a79b36a9e710931af1
parent 646498 564e82f0f289af976da01c2d50507017bbc152b5
child 726284 1db57e0ee0191fbb86c58db8e3df62428e65f070
push id74166
push userbmo:jhofmann@mozilla.com
push dateTue, 15 Aug 2017 12:30:15 +0000
reviewersdao
bugs1390448
milestone57.0a1
Bug 1390448 - Restore vertical margin calculation in browser-tabsintitlebar.js, add 1px to window control margin on Windows 10. r=dao MozReview-Commit-ID: LXR2zrAZS0k
browser/base/content/browser-tabsintitlebar.js
browser/base/content/test/performance/browser_windowopen_reflows.js
--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -155,17 +155,19 @@ var TabsInTitlebar = {
           menubar.getAttribute("autohide") != "true")) {
         $("titlebar-buttonbox").style.removeProperty("height");
       }
 
       // 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 tabsHeight = rect($("TabsToolbar")).height;
+      let tabsToolbar = $("TabsToolbar");
+      let tabsStyles = window.getComputedStyle(tabsToolbar);
+      let fullTabsHeight = rect($("TabsToolbar")).height + verticalMargins(tabsStyles);
       // Buttons first:
       let captionButtonsBoxWidth = rect($("titlebar-buttonbox-container")).width;
 
       let secondaryButtonsWidth, menuHeight, fullMenuHeight, menuStyles;
       if (AppConstants.platform == "macosx") {
         secondaryButtonsWidth = rect($("titlebar-secondary-buttonbox")).width;
         // No need to look up the menubar stuff on OS X:
         menuHeight = 0;
@@ -181,17 +183,18 @@ var TabsInTitlebar = {
       let titlebarContentHeight = rect(titlebarContent).height;
 
       // Begin setting CSS properties which will cause a reflow
 
       // On Windows 10, adjust the window controls to span the entire
       // tab strip height if we're not showing a menu bar.
       if (AppConstants.isPlatformAndVersionAtLeast("win", "10.0")) {
         if (!menuHeight) {
-          titlebarContentHeight = tabsHeight;
+          // Add a pixel to slightly overlap the navbar border.
+          titlebarContentHeight = fullTabsHeight + 1;
           $("titlebar-buttonbox").style.height = titlebarContentHeight + "px";
         }
       }
 
       // If the menubar is around (menuHeight is non-zero), try to adjust
       // its full height (i.e. including margins) to match the titlebar,
       // by changing the menubar's bottom padding
       if (menuHeight) {
@@ -215,17 +218,17 @@ var TabsInTitlebar = {
           menubar.style.paddingBottom = desiredPadding + "px";
           // We've changed the menu height now:
           fullMenuHeight += desiredPadding - existingPadding;
         }
       }
 
       // Next, we calculate how much we need to stretch the titlebar down to
       // go all the way to the bottom of the tab strip, if necessary.
-      let tabAndMenuHeight = tabsHeight + fullMenuHeight;
+      let tabAndMenuHeight = fullTabsHeight + fullMenuHeight;
 
       if (tabAndMenuHeight > titlebarContentHeight) {
         // We need to increase the titlebar content's outer height (ie including margins)
         // to match the tab and menu height:
         let extraMargin = tabAndMenuHeight - titlebarContentHeight;
         if (AppConstants.platform != "macosx") {
           titlebarContent.style.marginBottom = extraMargin + "px";
         }
--- a/browser/base/content/test/performance/browser_windowopen_reflows.js
+++ b/browser/base/content/test/performance/browser_windowopen_reflows.js
@@ -77,16 +77,26 @@ if (Services.appinfo.OS == "WINNT") {
     }
   );
 }
 
 if (Services.appinfo.OS == "WINNT" || Services.appinfo.OS == "Darwin") {
   EXPECTED_REFLOWS.push(
     {
       stack: [
+        "verticalMargins@chrome://browser/content/browser-tabsintitlebar.js",
+        "_update@chrome://browser/content/browser-tabsintitlebar.js",
+        "init@chrome://browser/content/browser-tabsintitlebar.js",
+        "handleEvent@chrome://browser/content/tabbrowser.xml",
+      ],
+      times: 2, // This number should only ever go down - never up.
+    },
+
+    {
+      stack: [
         "rect@chrome://browser/content/browser-tabsintitlebar.js",
         "_update@chrome://browser/content/browser-tabsintitlebar.js",
         "init@chrome://browser/content/browser-tabsintitlebar.js",
         "handleEvent@chrome://browser/content/tabbrowser.xml",
       ],
       times: 4, // This number should only ever go down - never up.
     },
   );