WebUI Tab Strip: Style scrollbar on non-ChromeOS

Example of what it might look like on Linux: https://imgur.com/a/j0VmU6q Change-Id: I044b1fcb8154e15211f89cee7d1b8b8d1725a604 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2106761 Commit-Queue: John Lee <johntlee@chromium.org> Reviewed-by: dpapad <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#751523}

WebUI Tab Strip: Style scrollbar on non-ChromeOS
Example of what it might look like on Linux: https://imgur.com/a/j0VmU6q Change-Id: I044b1fcb8154e15211f89cee7d1b8b8d1725a604 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2106761 Commit-Queue: John Lee <johntlee@chromium.org> Reviewed-by: dpapad <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#751523}
b8d75335 · John Lee · Commit Bot · baad1e40 · b8d75335 · b8d75335
Commit b8d75335 authored Mar 18, 2020 by John Lee Committed by Commit Bot Mar 18, 2020
3 changed files
--- a/chrome/browser/resources/tab_strip/tab_strip.html
+++ b/chrome/browser/resources/tab_strip/tab_strip.html
@@ -29,6 +29,32 @@
        padding: 0;
        width: 100%;
      }
+
+<if expr="not chromeos">
+      /* ChromeOS is the only platform that can be guaranteed to have overlay
+       * scrollbars, so override the styles of native scrollbars for other
+       * platforms. */
+      html ::-webkit-scrollbar {
+        display: block;
+        height: 4px;
+      }
+
+      ::-webkit-scrollbar-track,
+      ::-webkit-scrollbar,
+      ::-webkit-scrollbar-track-piece {
+        background: var(--tabstrip-background-color);
+      }
+
+      ::-webkit-scrollbar {
+        display: none;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: rgba(var(--tabstrip-scrollbar-thumb-color-rgb), .7);
+        border-inline-end: solid 16px var(--tabstrip-background-color);
+        border-inline-start: solid 16px var(--tabstrip-background-color);
+      }
+</if>
    </style>
  </head>
  <body>

--- a/chrome/browser/resources/tab_strip/tab_strip_resources.grd
+++ b/chrome/browser/resources/tab_strip/tab_strip_resources.grd
@@ -16,7 +16,8 @@
          name="IDR_TAB_STRIP_HTML"
          file="tab_strip.html"
          type="chrome_html"
-          compress="gzip"/>
+          compress="gzip"
+          preprocess="true"/>
      <structure
          name="IDR_TAB_STRIP_TABS_API_PROXY_JS"
          file="tabs_api_proxy.js"

--- a/chrome/browser/ui/webui/tab_strip/tab_strip_ui_handler.cc
+++ b/chrome/browser/ui/webui/tab_strip/tab_strip_ui_handler.cc
@@ -562,6 +562,13 @@ void TabStripUIHandler::HandleGetThemeColors(const base::ListValue* args) {
                       ui::NativeTheme::GetInstanceForWeb()->GetSystemColor(
                           ui::NativeTheme::kColorId_FocusedBorderColor)));

+#if !defined(OS_CHROMEOS)
+  colors.SetString(
+      "--tabstrip-scrollbar-thumb-color-rgb",
+      color_utils::SkColorToRgbString(color_utils::GetColorWithMaxContrast(
+          embedder_->GetColor(ThemeProperties::COLOR_FRAME_ACTIVE))));
+#endif
+
  ResolveJavascriptCallback(callback_id, colors);
 }