Bug 1349552 - Part 1 - Add optional drag space on top of the tabstrip. r=dao
authorJohann Hofmann <jhofmann@mozilla.com>
Sun, 10 Sep 2017 20:36:55 +0200
changeset 430070 dc5821333286089cfc603222d217e12bbf059a1b
parent 430069 6e518f62807b0569c2aaae56be3bf6b7de83889b
child 430071 9debb84b682ceccb6d9c6dd7ab2cf1a3ea2dfe00
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1349552
milestone57.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 1349552 - Part 1 - Add optional drag space on top of the tabstrip. r=dao MozReview-Commit-ID: 5e4pHZ7TDCb
browser/app/profile/firefox.js
browser/base/content/browser.js
browser/themes/osx/browser.css
browser/themes/shared/browser.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -459,16 +459,20 @@ pref("browser.tabs.loadBookmarksInBackgr
 pref("browser.tabs.loadBookmarksInTabs", false);
 pref("browser.tabs.tabClipWidth", 140);
 #ifdef UNIX_BUT_NOT_MAC
 pref("browser.tabs.drawInTitlebar", false);
 #else
 pref("browser.tabs.drawInTitlebar", true);
 #endif
 
+// Offer additional drag space to the user. The drag space
+// will only be shown if browser.tabs.drawInTitlebar is true.
+pref("browser.tabs.extraDragSpace", false);
+
 // 0 - Disable the tabbar session restore button.
 // 1 - Enable the tabbar session restore button.
 // 2 - Control group. The tabbar session restore button is disabled,
 // but we will record data on other session restore usage.
 // To be enabled with shield.
 pref("browser.tabs.restorebutton", 0);
 
 // When tabs opened by links in other tabs via a combination of
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1316,16 +1316,20 @@ var gBrowserInit = {
     // Certain kinds of automigration rely on this notification to complete
     // their tasks BEFORE the browser window is shown. SessionStore uses it to
     // restore tabs into windows AFTER important parts like gMultiProcessBrowser
     // have been initialized.
     Services.obs.notifyObservers(window, "browser-window-before-show");
 
     gUIDensity.init();
 
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      gDragSpaceObserver.init();
+    }
+
     let isResistFingerprintingEnabled = gPrefService.getBoolPref("privacy.resistFingerprinting");
 
     // Set a sane starting width/height for all resolutions on new profiles.
     if (isResistFingerprintingEnabled) {
       // When the fingerprinting resistance is enabled, making sure that we don't
       // have a maximum window to interfere with generating rounded window dimensions.
       document.documentElement.setAttribute("sizemode", "normal");
     } else if (!document.documentElement.hasAttribute("width")) {
@@ -1804,16 +1808,20 @@ var gBrowserInit = {
     gSync.uninit();
 
     gExtensionsNotifications.uninit();
 
     Services.obs.removeObserver(gPluginHandler.NPAPIPluginCrashed, "plugin-crashed");
 
     gUIDensity.uninit();
 
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      gDragSpaceObserver.uninit();
+    }
+
     try {
       gBrowser.removeProgressListener(window.XULBrowserWindow);
       gBrowser.removeTabsProgressListener(window.TabsProgressListener);
     } catch (ex) {
     }
 
     PlacesToolbarHelper.uninit();
 
@@ -5574,16 +5582,48 @@ var gTabletModePageCounter = {
     }
   },
 };
 
 function displaySecurityInfo() {
   BrowserPageInfo(null, "securityTab");
 }
 
+// Adds additional drag space to the window by listening to
+// the corresponding preference.
+var gDragSpaceObserver = {
+  pref: "browser.tabs.extraDragSpace",
+
+  init() {
+    this.update();
+    gPrefService.addObserver(this.pref, this);
+  },
+
+  uninit() {
+    gPrefService.removeObserver(this.pref, this);
+  },
+
+  observe(aSubject, aTopic, aPrefName) {
+    if (aTopic != "nsPref:changed" || aPrefName != this.pref) {
+      return;
+    }
+
+    this.update();
+  },
+
+  update() {
+    if (gPrefService.getBoolPref(this.pref)) {
+      document.documentElement.setAttribute("extradragspace", "true");
+    } else {
+      document.documentElement.removeAttribute("extradragspace");
+    }
+    TabsInTitlebar.updateAppearance(true);
+  },
+};
+
 // Updates the UI density (for touch and compact mode) based on the uidensity pref.
 var gUIDensity = {
   MODE_NORMAL: 0,
   MODE_COMPACT: 1,
   MODE_TOUCH: 2,
   uiDensityPref: "browser.uidensity",
   autoTouchModePref: "browser.touchmode.auto",
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -86,29 +86,34 @@
   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 {
-  min-height: calc(var(--tab-min-height) - var(--tab-toolbar-navbar-overlap));
+  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
 }
 
 /**
  * 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: 6px;
+  /*
+   * To vertically center the window controls, we place them at half the
+   * height of the tabstrip ((tab height + drag space) / 2) - half the height
+   * of the window controls (16px / 2).
+   * */
+  margin-top: calc((var(--tab-min-height) + var(--space-above-tabbar)) / 2 - 8px);
 }
 
 #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;
 }
 
 /** End titlebar **/
@@ -897,16 +902,17 @@ html|span.ac-emphasize-text-url {
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;
   text-shadow: @loweredShadow@;
 }
 
+#main-window[tabsintitlebar] > #titlebar:not(:-moz-lwtheme),
 :root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: -moz-mac-vibrancy-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
 }
 
 #tabbrowser-tabs {
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -13,16 +13,25 @@
 %endif
 {
   padding-inline-start: 40px;
 }
 %endif
 
 %include downloads/indicator.inc.css
 
+:root {
+  /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
+  --space-above-tabbar: 0px;
+}
+
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+  --space-above-tabbar: 8px;
+}
+
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -517,21 +517,21 @@
      device pixels (bug 477157), so we also set a width to match the margin. */
   width: 1px;
   box-sizing: border-box;
   opacity: 0.2;
 }
 
 %ifdef CAN_DRAW_IN_TITLEBAR
 %ifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
 %else
-:root[tabsintitlebar] .tabbrowser-tab::after,
-:root[tabsintitlebar] .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before
 %endif
 {
   border-image: none;
 }
 %endif
 
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -65,16 +65,21 @@
 }
 
 /* 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;
 }
 
+:root[sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
+  margin-top: var(--space-above-tabbar);
+}
+
 #navigator-toolbox,
 #navigator-toolbox > toolbar {
   -moz-appearance: none;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);