Bug 1355764 - Replace window drag space above tabs with space at the start of the tab strip. r?johannh draft
authorDão Gottwald <dao@mozilla.com>
Thu, 01 Jun 2017 12:21:31 +0200
changeset 587581 ae9ea6b3159f140877e793d17cb61c18be526415
parent 587503 bdb2387396b4a74dfefb7c983733eed3625e906a
child 631318 d7a9cafc13a42a4d993a99b22e51a9b88b0f74d0
push id61758
push userdgottwald@mozilla.com
push dateThu, 01 Jun 2017 10:21:49 +0000
reviewersjohannh
bugs1355764
milestone55.0a1
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')