Bug 1355764 - Replace window drag space above tabs with space at the start of the tab strip. r=johannh
authorDão Gottwald <dao@mozilla.com>
Thu, 01 Jun 2017 12:21:31 +0200
changeset 412247 215cfdee973f3963aabde49296e2805697b4b108
parent 412246 6975992de12186bee51d03dc8a0fea965dbf8ed7
child 412248 6e9b45f7ed376eea83df779d60b3c4562b188a66
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1355764
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1355764 - Replace window drag space above tabs with space at the start of the tab strip. r=johannh MozReview-Commit-ID: 5mpLTfOs3NR
browser/components/resistfingerprinting/test/browser/head.js
browser/themes/linux/moz.build
browser/themes/osx/browser.css
browser/themes/osx/compacttheme.css
browser/themes/shared/browser.inc.css
browser/themes/shared/compacttheme.inc.css
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
browser/themes/windows/moz.build
--- a/browser/components/resistfingerprinting/test/browser/head.js
+++ b/browser/components/resistfingerprinting/test/browser/head.js
@@ -10,34 +10,37 @@
 async function calcMaximumAvailSize(aChromeWidth, aChromeHeight) {
   let chromeUIWidth;
   let chromeUIHeight;
   let testPath = "http://example.net/browser/browser/" +
                  "components/resistFingerprinting/test/browser/"
 
   // If the chrome UI dimensions is not given, we will calculate it.
   if (!aChromeWidth || !aChromeHeight) {
+    let win = await BrowserTestUtils.openNewBrowserWindow();
+
     let tab = await BrowserTestUtils.openNewForegroundTab(
-      gBrowser, testPath + "file_dummy.html");
+      win.gBrowser, testPath + "file_dummy.html");
 
     let contentSize = await ContentTask.spawn(tab.linkedBrowser, null, async function() {
       let result = {
         width: content.innerWidth,
         height: content.innerHeight
       };
 
       return result;
     });
 
     // Calculate the maximum available window size which is depending on the
     // available screen space.
-    chromeUIWidth = window.outerWidth - contentSize.width;
-    chromeUIHeight = window.outerHeight - contentSize.height;
+    chromeUIWidth = win.outerWidth - contentSize.width;
+    chromeUIHeight = win.outerHeight - contentSize.height;
 
     await BrowserTestUtils.removeTab(tab);
+    await BrowserTestUtils.closeWindow(win);
   } else {
     chromeUIWidth = aChromeWidth;
     chromeUIHeight = aChromeHeight;
   }
 
   let availWidth = window.screen.availWidth;
   let availHeight = window.screen.availHeight;
 
--- a/browser/themes/linux/moz.build
+++ b/browser/themes/linux/moz.build
@@ -3,9 +3,11 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # 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/.
 
 DIRS += ['communicator']
 
 JAR_MANIFESTS += ['jar.mn']
 
+DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1
+
 include('../tab-svgs.mozbuild')
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1,33 +1,33 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @import url("chrome://global/skin/");
 
 %include shared.inc
 %define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
-%define windowButtonMarginTop 11px
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 %include ../shared/browser.inc.css
 
 :root {
-  --space-above-tabbar: 9px;
   --tabs-toolbar-color: #333;
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 4px;
 %else
+  --space-above-tabbar: 9px;
+
   --toolbarbutton-border-radius: 3px;
 
   --toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
   --toolbarbutton-active-background: hsla(0,0%,0%,.02) linear-gradient(hsla(0,0%,0%,.12), transparent) border-box;
 
   --backbutton-border-color: rgba(0,0,0,0.2);
   --backbutton-background: linear-gradient(rgba(255,255,255,0.9),
                                            rgba(255,255,255,0.7)) repeat-x;
@@ -129,29 +129,37 @@ toolbar:-moz-lwtheme {
   height: 22px; /* The native titlebar on OS X is 22px tall. */
 }
 
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
  * tabstrip can overlap it.
  */
 #main-window[tabsintitlebar] > #titlebar {
+%ifndef MOZ_PHOTON_THEME
   min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
+%else
+  min-height: calc(var(--tab-min-height) - var(--tab-toolbar-navbar-overlap));
+%endif
 }
 
 /**
  * We also vertically center the window buttons.
  */
 #titlebar-buttonbox-container {
   -moz-box-align: start;
 }
 
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
-  margin-top: @windowButtonMarginTop@;
+%ifdef MOZ_PHOTON_THEME
+  margin-top: 6px;
+%else
+  margin-top: 11px;
+%endif
 }
 
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: 3px;
 }
 
 #main-window[customize-entered] > #titlebar {
@@ -1530,20 +1538,21 @@ toolbarbutton.chevron > .toolbarbutton-m
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   color: var(--tabs-toolbar-color);
   text-shadow: @loweredShadow@;
 }
 
+%ifndef MOZ_PHOTON_THEME
 #navigator-toolbox[inFullscreen] > #TabsToolbar {
   padding-top: var(--space-above-tabbar);
 }
-
+%endif
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }
 
 .tabs-newtab-button > .toolbarbutton-icon {
   padding: 6px 0 4px;
 }
 
@@ -2205,17 +2214,19 @@ html|*.addon-webext-perm-list {
     background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png");
   }
   #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
     background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png");
   }
 }
 
 #TabsToolbar > .private-browsing-indicator {
+%ifndef MOZ_PHOTON_THEME
   transform: translateY(calc(-1 * var(--space-above-tabbar)));
+%endif
   /* We offset by 38px for mask graphic, plus 4px to account for the
    * margin-left, which sums to 42px.
    */
   margin-right: -42px;
 }
 
 #main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"],
 #main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -23,22 +23,23 @@
   -moz-appearance: none !important;
 }
 
 /* Get rid of 1px bright strip at the top of window */
 #main-window[tabsintitlebar] #titlebar-content {
   background: var(--chrome-background-color);
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* Resize things so that the native titlebar is in line with the tabs */
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: 6px;
 }
-
+%endif
 /* Prevent the hover styling from on the identity icon from overlapping the
    urlbar border. */
 #identity-box {
   margin-top: -1px !important;
   margin-bottom: -1px !important;
   padding-top: 3px !important;
   padding-bottom: 3px !important;
 }
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -1,13 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 %ifdef MOZ_PHOTON_THEME
+%ifdef CAN_DRAW_IN_TITLEBAR
+/* Add space for dragging the window */
+%ifdef MENUBAR_CAN_AUTOHIDE
+:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar {
+  padding-inline-start: 40px;
+}
+%else
+:root[tabsintitlebar] #TabsToolbar {
+  padding-inline-start: 40px;
+}
+%endif
+%endif
+
 /* Go button */
 .urlbar-go-button {
   padding: 0 3px;
   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
 }
 
 .urlbar-go-button {
   -moz-image-region: rect(0, 42px, 14px, 28px);
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -4,17 +4,19 @@
 
 /* compacttheme.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
 :root {
   --tab-toolbar-navbar-overlap: 0px;
   --navbar-tab-toolbar-highlight-overlap: 0px;
+%ifndef MOZ_PHOTON_THEME
   --space-above-tabbar: 0px;
+%endif
   --toolbarbutton-text-shadow: none;
   --backbutton-urlbar-overlap: 0px;
   /* 18px icon + 2 * 5px padding + 1 * 1px border */
   --forwardbutton-width: 29px;
 }
 
 :root:-moz-lwtheme-brighttext {
   /* Chrome */
@@ -93,22 +95,23 @@ toolbar:-moz-lwtheme-darktext {
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
   --toolbarbutton-active-background: #d7d7d8 border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
 #main-window[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
-
+%endif
 /* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
 .tab-background-middle {
   border-left-width: 0;
   border-right-width: 0;
   margin: 0;
 }
 
 .tab-background,
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -333,21 +333,22 @@
 
     #main-window[sizemode=normal] #browser-bottombox {
       border: 1px solid @toolbarShadowColor@;
       border-top-style: none;
       background-clip: padding-box;
     }
   }
 
+%ifndef MOZ_PHOTON_THEME
   #main-window[sizemode=normal] #TabsToolbar {
     padding-left: 1px;
     padding-right: 1px;
   }
-
+%endif
   #appcontent:not(:-moz-lwtheme) {
     background-color: -moz-dialog;
   }
 }
 
 @media (-moz-windows-glass) {
   #main-window[sizemode=normal] #nav-bar {
     border-top-left-radius: 2.5px;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -12,23 +12,23 @@
 %include windowsShared.inc
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 
 %include ../shared/browser.inc.css
 
 :root {
   --titlebar-text-color: inherit;
 
-  --space-above-tabbar: 15px;
-
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 2px;
 %else
+  --space-above-tabbar: 15px;
+
   --toolbarbutton-border-radius: 1px;
 
   --toolbarbutton-hover-background: rgba(0,0,0,.1);
   --toolbarbutton-active-background: rgba(0,0,0,.15);
 
   --backbutton-border-color: var(--urlbar-border-color-hover);
   --backbutton-background: rgba(255,255,255,.15);
 
@@ -84,29 +84,30 @@ toolbar[brighttext] {
 }
 
 /* Hides the titlebar-placeholder underneath the window caption buttons when we
    are not autohiding the menubar. */
 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
   display: none;
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
   margin-top: 3px;
 }
 
 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
   margin-top: var(--space-above-tabbar);
 }
-
+%endif
 #navigator-toolbox,
 #navigator-toolbox > toolbar {
   -moz-appearance: none;
 }
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -67,20 +67,21 @@
 @media (min-resolution: 1.1dppx) {
   #TabsToolbar[brighttext] .tab-close-button:-moz-lwtheme-darktext:not([selected="true"]) {
     list-style-image: url("chrome://global/skin/icons/close@2x.png");
   }
 }
 
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
+%ifndef MOZ_PHOTON_THEME
   :root {
     --space-above-tabbar: 15px;
   }
-
+%endif
   /* It'd be nice if there was an element in the scrollbox's inner content
      that collapsed to the current width of the tabs. Since there isn't we
      need to handle overflowing and non-overflowing tabs separately.
 
      In the case of overflowing tabs, set a border-top on the entire container,
      otherwise we need to set it on each element individually */
   #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] {
     background-clip: padding-box;
--- a/browser/themes/windows/moz.build
+++ b/browser/themes/windows/moz.build
@@ -4,10 +4,11 @@
 # 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/.
 
 DIRS += ['communicator']
 
 JAR_MANIFESTS += ['jar.mn']
 
 DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1
+DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1
 
 include('../tab-svgs.mozbuild')