Bug 1471163 - Remove devtools floating scrollbars and set scrollbar-color on Linux; r=jdescottes
authorFlorens Verschelde <florens@fvsch.com>
Sun, 14 Oct 2018 17:14:10 +0000
changeset 441221 5f44f57c4ae734a8c9ac490c4e520c703365beae
parent 441216 4a230b07f0cbf48e87dcb4265ea2d00893bb1b62
child 441222 5a54f333b855138687b5b71e33c1c6144fc7fbe5
push id34857
push usernerli@mozilla.com
push dateMon, 15 Oct 2018 22:19:32 +0000
treeherdermozilla-central@c1ee6c65f85b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1471163
milestone64.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 1471163 - Remove devtools floating scrollbars and set scrollbar-color on Linux; r=jdescottes Remove the floating scrollbar implementation used on Linux now that CSS scrollbar-color landed for Linux. Also force scrollbar-color for the DevTools light theme on Linux, to avoid visual conflicts with dark GTK themes. Differential Revision: https://phabricator.services.mozilla.com/D7858
devtools/client/jar.mn
devtools/client/shared/theme-switching.js
devtools/client/sourceeditor/codemirror/mozilla.css
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/floating-scrollbars-dark-theme.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -199,17 +199,16 @@ devtools.jar:
     skin/images/debugger-toggleBreakpoints.svg (themes/images/debugger-toggleBreakpoints.svg)
     skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
     skin/images/dock-side-left.svg (themes/images/dock-side-left.svg)
     skin/images/dock-side-right.svg (themes/images/dock-side-right.svg)
     skin/images/dock-undock.svg (themes/images/dock-undock.svg)
     skin/images/jump-definition.svg (themes/images/jump-definition.svg)
     skin/images/tracer-icon.png (themes/images/tracer-icon.png)
     skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
-    skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
     skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
     skin/inspector.css (themes/inspector.css)
     skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
     skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
     skin/images/debugging-tabs.svg (themes/images/debugging-tabs.svg)
     skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
     skin/images/globe.svg (themes/images/globe.svg)
     skin/images/sad-face.svg (themes/images/sad-face.svg)
--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -28,32 +28,16 @@
   // to have per-platform CSS working correctly.
   if (documentElement.getAttribute("no-theme") === "true") {
     return;
   }
 
   const devtoolsStyleSheets = new WeakMap();
   let gOldTheme = "";
 
-  function forceStyle() {
-    const computedStyle = window.getComputedStyle(documentElement);
-    if (!computedStyle) {
-      // Null when documentElement is not ready. This method is anyways not
-      // required then as scrollbars would be in their state without flushing.
-      return;
-    }
-    // Save display value
-    const display = computedStyle.display;
-    documentElement.style.display = "none";
-    // Flush
-    window.getComputedStyle(documentElement).display;
-    // Restore
-    documentElement.style.display = display;
-  }
-
   /*
    * Notify the window that a theme switch finished so tests can check the DOM
    */
   function notifyWindow() {
     window.dispatchEvent(new CustomEvent("theme-switch-complete", {}));
   }
 
   /*
@@ -84,36 +68,16 @@
 
     const loadEvents = [];
     for (const url of newThemeDef.stylesheets) {
       const {styleSheet, loadPromise} = appendStyleSheet(document, url);
       devtoolsStyleSheets.get(newThemeDef).push(styleSheet);
       loadEvents.push(loadPromise);
     }
 
-    if (os !== "win" && os !== "mac") {
-      // Windows & Mac always use native scrollbars, Linux still uses custom floating
-      // scrollbar implementation.
-      try {
-        const StylesheetUtils = require("devtools/shared/layout/utils");
-        const SCROLLBARS_URL = "chrome://devtools/skin/floating-scrollbars-dark-theme.css";
-        if (!Services.appShell.hiddenDOMWindow
-          .matchMedia("(-moz-overlay-scrollbars)").matches) {
-          if (newTheme == "dark") {
-            StylesheetUtils.loadSheet(window, SCROLLBARS_URL, "agent");
-          } else if (oldTheme == "dark") {
-            StylesheetUtils.removeSheet(window, SCROLLBARS_URL, "agent");
-          }
-          forceStyle();
-        }
-      } catch (e) {
-        console.warn("customize scrollbar styles is only supported in firefox");
-      }
-    }
-
     Promise.all(loadEvents).then(() => {
       // Unload all stylesheets and classes from the old theme.
       if (oldThemeDef) {
         for (const name of oldThemeDef.classList) {
           documentElement.classList.remove(name);
         }
 
         for (const sheet of devtoolsStyleSheets.get(oldThemeDef) || []) {
--- a/devtools/client/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/sourceeditor/codemirror/mozilla.css
@@ -84,32 +84,16 @@
   cursor: text;
   height: 100%;
 }
 
 .CodeMirror-gutters {
   cursor: default;
 }
 
-/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0
-height when floating scrollbars are active. Make sure that this value is equal
-to the maximum of `min-height` specific to the `scrollbar[orient="horizontal"]`
-selector in floating-scrollbar-light.css across all platforms. */
-.CodeMirror-hscrollbar {
-  min-height: 10px;
-}
-
-/* This is to avoid the fake vertical scrollbar div of codemirror to go 0
-width when floating scrollbars are active. Make sure that this value is equal
-to the maximum of `min-width` specific to the `scrollbar[orient="vertical"]`
-selector in floating-scrollbar-light.css across all platforms. */
-.CodeMirror-vscrollbar {
-  min-width: 10px;
-}
-
 .cm-trailingspace {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==");
   opacity: 0.75;
   background-position: left bottom;
   background-repeat: repeat-x;
 }
 
 .cm-highlight {
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -33,16 +33,32 @@
 :root[platform="win"] {
   --monospace-font-family: Consolas, monospace;
 }
 
 :root[platform="linux"] {
   --monospace-font-family: monospace;
 }
 
+/**
+ * Customize the dark theme's scrollbar colors to avoid excessive contrast.
+ */
+:root.theme-dark {
+  scrollbar-color: var(--theme-body-color-inactive) var(--theme-splitter-color);
+}
+
+/**
+ * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
+ * between the light theme and the selected GTK theme (see bug 1471163).
+ * This removes GTK scrollbars and uses a fallback design (see bug 1464723).
+ */
+:root[platform="linux"].theme-light {
+  scrollbar-color: var(--theme-body-color-inactive) var(--grey-20);
+}
+
 .devtools-monospace {
   font-family: var(--monospace-font-family);
   font-size: var(--theme-code-font-size);
 }
 
 /**
  * Override wrong system font from forms.css
  * Bug 1458224: buttons use a wrong default font-size on Linux
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -22,23 +22,16 @@ body {
   color: var(--theme-body-color);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-:root[platform="win"],
-:root[platform="mac"] {
-  /* Set colors for native scrollbars on Windows dark theme */
-  /* Other platforms support for scrollbar theming is Bug 1460109 */
-  scrollbar-color: var(--theme-body-color-inactive) var(--theme-splitter-color);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
deleted file mode 100644
--- a/devtools/client/themes/floating-scrollbars-dark-theme.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
-   inside a <select> are excluded (including them hides the select arrow on
-   Windows).  We want to include both the root scrollbars for the document as
-   well as any overflow: scroll elements within the page, while excluding
-   <select>. */
-*|*:not(html|select) > scrollbar {
-  -moz-appearance: none !important;
-  position: relative;
-  background-color: transparent;
-  background-image: none;
-  z-index: 2147483647;
-  padding: 2px;
-  pointer-events: auto;
-}
-
-*|*:root[platform="mac"] > scrollbar,
-*|*:root[platform="mac"] *|*:not(html|select) > scrollbar {
-  border: none;
-}
-
-/* Scrollbar code will reset the margin to the correct side depending on
-   where layout actually puts the scrollbar */
-*|*:not(html|select) > scrollbar[orient="vertical"] {
-  margin-left: -10px;
-  min-width: 10px;
-  max-width: 10px;
-}
-
-*|*:not(html|select) > scrollbar[orient="horizontal"] {
-  margin-top: -10px;
-  min-height: 10px;
-  max-height: 10px;
-}
-
-*|*:not(html|select) > scrollbar thumb {
-  background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
-  -moz-appearance: none !important;
-  border-width: 0px !important;
-  border-radius: 3px !important;
-}
-
-*|*:root[platform="mac"] > scrollbar slider,
-*|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
-  -moz-appearance: none !important;
-}
-
-*|*:root[platform="linux"] > scrollbar scrollbarbutton,
-*|*:root[platform="linux"] > scrollbar gripper,
-*|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton,
-*|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper {
-  display: none;
-}