Bug 1355764 - Replace window drag space above tabs with space at the start of the tab strip. r?johannh
MozReview-Commit-ID: 5mpLTfOs3NR
--- 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')