Merge pull request #5083 from adobe/larz/linux-scrollbar-sqaushed

Larz/linux scrollbar

Author: jasonsanjose

src/index.html

@@ -29,10 +29,6 @@
 
     <!-- CSS/LESS -->
 
-    <!-- Temporary CSS for unobtrusive scrollbars. This can't live in LESS because it uses
-         nonstandard WebKit-specific syntax. -->
-    <link rel="stylesheet" href="styles/quiet-scrollbars.css">
-
     <!-- NOTE: All scripts must be external for Chrome App support: http://developer.chrome.com/apps/app_csp.html -->
 
     <!-- Warn about failed cross origin requests in Chrome -->

src/styles/brackets.less

@@ -65,10 +65,6 @@ html, body {
     backface-visibility: hidden;
 }
 
-body {
-    height: 100%;
-}
-
 .resizing-container {
     position: absolute;
     top: 0;

src/styles/brackets_scrollbars.less

@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+/* Temporary implementation of unobtrusive scrollbars.
+   FUTURE: These currently rely on nonstandard WebKit styles, and don't have all the right behavior.
+   Longer-term, we'll need to implement custom scrollbars. */
+
+.platform-mac .quiet-scrollbars,
+.platform-win .quiet-scrollbars,
+.platform-linux .quiet-scrollbars {
+
+    ::-webkit-scrollbar {
+        width: 9px;
+        height: 9px;
+    }
+
+    ::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        box-shadow: none;
+        border: none;
+    }
+
+    /* This looks like a dupe, but without it the thumb doesn't fade in
+     * properly, probably due to flakiness in how these styles are handled
+     * in the build of WebKit that's in CEF.
+     */
+    ::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    :hover::-webkit-scrollbar-thumb,
+    :focus::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
+        border: 2px solid transparent;
+    }
+
+    :hover::-webkit-scrollbar-thumb:vertical,
+    :focus::-webkit-scrollbar-thumb:vertical {
+        min-height: 20px;
+    }
+
+    :hover::-webkit-scrollbar-thumb:horizontal,
+    :focus::-webkit-scrollbar-thumb:horizontal {
+        min-width: 20px;
+    }
+}
+
+.platform-linux {
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+    }
+
+    ::-webkit-scrollbar-track:vertical {
+        margin: 0 0 8px 0;
+    }
+
+    ::-webkit-scrollbar-track:horizontal {
+        margin: 0 8px 0 0;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        box-shadow: 0 0 0 4px @custom-scrollbar-thumb inset;
+        border: 2px solid transparent;
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: none;
+    }
+
+    ::-webkit-scrollbar-thumb:window-inactive {
+        box-shadow: 0 0 0 5px @custom-scrollbar-thumb-inactive inset;
+    }
+}

src/styles/brackets_shared.less

@@ -58,5 +58,8 @@
 // Codemirror styling overrides
 @import url(brackets_codemirror_override.less);
 
-// styling for file tree
+// Styling for file tree
 @import url(jsTreeTheme.less);
+
+// Styling for scrollbars
+@import url(brackets_scrollbars.less);

src/styles/brackets_theme_default.less

@@ -107,13 +107,17 @@
 @open-working-file-name-highlight: #8fddff;
 @open-working-file-ext-highlight: #8fddff;
 
-/* Selection colors */
+/* selection colors */
 @selection-color-focused: #D9EFF7;
 @selection-color-unfocused: #e9e9e9;
 
 /* background color of the line that has the cursor */
 @activeline-bgcolor: #e6e9e9;
 
+/* custom scrollbar colors */
+@custom-scrollbar-thumb: rgba(0, 0, 0, 0.24);
+@custom-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);
+
 /* Code font formatting
  *
  * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that