Bug 1375335 - Fix window control height calculation on Windows 10. r=dao draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 09 Aug 2017 14:36:01 +0100
changeset 645911 d5e741cc4ca897ef125ab3e807bc009cd540ade6
parent 645674 3bfcbdf5c6c381d5a8febb5c209e27a69fb89f9b
child 726071 f477efee6433193d7ed49c1f279fd04ff972e1e6
push id73933
push userbmo:jhofmann@mozilla.com
push dateMon, 14 Aug 2017 13:39:28 +0000
reviewersdao
bugs1375335
milestone57.0a1
Bug 1375335 - Fix window control height calculation on Windows 10. r=dao This commit: - Makes the window controls have exactly the same height as tabs when the menubar is hidden, and have the same height as the menubar when it is shown. This requires us to remove the menubar height before flushing layout in case it is shown, since we need its original height for the calculation. - Removes the top margin between the menu bar and the window border that was present on Windows 10 and makes it apply on Windows 7 only. The border was causing miscalculations of the window control height, which could have been handled in browser-tabsintitlebar.js, but since it's not part of the Photon spec we decide to remove it entirely. - Makes window control height calculations ignore vertical tabs toolbar margins. The only margin it has right now is -1px and the calculation code doesn't work right with negative margins. MozReview-Commit-ID: HJXxUUJFX8x
browser/base/content/browser-tabsintitlebar.js
browser/base/content/test/performance/browser_windowopen_reflows.js
browser/themes/windows/browser-aero.css
--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -143,23 +143,29 @@ var TabsInTitlebar = {
     let menubar = $("toolbar-menubar");
 
     if (allowed) {
       // We set the tabsintitlebar attribute first so that our CSS for
       // tabsintitlebar manifests before we do our measurements.
       document.documentElement.setAttribute("tabsintitlebar", "true");
       updateTitlebarDisplay();
 
+      // Reset the custom titlebar height if the menubar is shown,
+      // because we will want to calculate its original height.
+      if (AppConstants.isPlatformAndVersionAtLeast("win", "10.0") &&
+          (menubar.getAttribute("inactive") != "true" ||
+          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 full height of the tabs toolbar:
-      let tabsToolbar = $("TabsToolbar");
-      let tabsStyles = window.getComputedStyle(tabsToolbar);
-      let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles);
+      // Get the height of the tabs toolbar:
+      let tabsHeight = rect($("TabsToolbar")).height;
       // 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;
@@ -171,22 +177,22 @@ var TabsInTitlebar = {
         fullMenuHeight = verticalMargins(menuStyles) + menuHeight;
       }
 
       // And get the height of what's in the titlebar:
       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 && window.windowState == window.STATE_MAXIMIZED) {
-          titlebarContentHeight = Math.max(titlebarContentHeight, fullTabsHeight);
+        if (!menuHeight) {
+          titlebarContentHeight = tabsHeight;
           $("titlebar-buttonbox").style.height = titlebarContentHeight + "px";
-        } else {
-          $("titlebar-buttonbox").style.removeProperty("height");
         }
       }
 
       // 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) {
         // Calculate the difference between the titlebar's height and that of the menubar
@@ -209,17 +215,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 = fullTabsHeight + fullMenuHeight;
+      let tabAndMenuHeight = tabsHeight + 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
@@ -84,26 +84,16 @@ if (Services.appinfo.OS == "WINNT" || Se
       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.
     },
-
-    {
-      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.
-    }
   );
 }
 
 /*
  * This test ensures that there are no unexpected
  * uninterruptible reflows when opening new windows.
  */
 add_task(async function() {
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -2,19 +2,21 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
-@media not all and (-moz-windows-classic) {
-  #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
-    margin-top: 1px;
+@media (-moz-os-version: windows-win7) {
+  @media not all and (-moz-windows-classic) {
+    #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar {
+      margin-top: 1px;
+    }
   }
 }
 
 @media (-moz-windows-default-theme) {
   .sidebar-header,
   #sidebar-header {
     -moz-appearance: none;
     border-bottom: none;
@@ -76,26 +78,21 @@
       #titlebar-buttonbox,
       .titlebar-button {
         -moz-appearance: none !important;
       }
 
       .titlebar-button {
         border: none;
         margin: 0 !important;
-        padding: 10px 17px;
+        padding: 8px 17px;
         -moz-context-properties: stroke;
         stroke: var(--titlebar-text-color);
       }
 
-      :root[sizemode=maximized] .titlebar-button {
-        padding-top: 8px;
-        padding-bottom: 8px;
-      }
-
       .titlebar-button > .toolbarbutton-icon {
         width: 12px;
         height: 12px;
       }
 
       #titlebar-min {
         list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
       }