Larz/linux scrollbar

src/index.html

@@ -31,7 +31,7 @@
 
     <!-- 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">
+    <link rel="stylesheet" href="styles/brackets_scrollbars.css">
 
     <!-- NOTE: All scripts must be external for Chrome App support: http://developer.chrome.com/apps/app_csp.html -->
 

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,102 @@
+/*
+ * Copyright (c) 2012 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 {
+        background-color: rgba(0,0,0,0);
+        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;
+    }
+
+    /* The data URIs for the thumb were generated from the Fireworks files in
+     * styles/vertical-thumb-fw-outline.png and styles/horiz-thumb-fw-outline.png.
+     */
+    :hover::-webkit-scrollbar-thumb:vertical,
+    :focus::-webkit-scrollbar-thumb:vertical {
+        -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAUCAYAAABf2RdVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA0LzIzLzEyckCqugAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAACPSURBVCiR7ZIhDoNAEEXfkJCsxKBJimTPwA3mDHvqsXWrquqaIH5FKUk3XKAJT87789U3SQkYgZ5fNuABvDpgrLUOOefZzBYzW3LOc6112J/pgL6UMkZE+lZERCqlHO0m6WZmCydICuDencmWK/Tfoc3dn63YbxsAkpKkyd1XwD/eV0nT7jBJAO2Ej+kCvAFNxTqyZCNcEQAAAABJRU5ErkJggg==") 9 0;
+        border-color: transparent;
+        border-width: 9px 0;
+        min-height: 20px;
+    }
+
+    :hover::-webkit-scrollbar-thumb:horizontal,
+    :focus::-webkit-scrollbar-thumb:horizontal {
+        -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA0LzIzLzEyckCqugAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAACLSURBVCiRrdIxCgIxEEbhfxYFOyuxCCLazjGmTu6YKyRV7hFLCzshlcXCQoqxMWCd5B3gqx6pKgAcAJwA7NFfBVB2P+zsnLvGGI89kois3vtijAGp6sU5d+vFWsy85ZyfpKp3IuIRrKWqj2UG9N8CoFprP6MQM28NLCGE1wgqImtK6Q2g0uxtGjitL9E6N1T9Wl8CAAAAAElFTkSuQmCC") 0 9;
+        border-color: transparent;
+        border-width: 0 9px;
+        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 rgba(0, 0, 0, 0);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: none;
+    }
+
+    ::-webkit-scrollbar-thumb:window-inactive {
+        box-shadow: 0 0 0 5px @custom-scrollbar-thumb-inactive inset;
+    }
+}

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