Decouple MWB styles from InfiniteList component

Fixed: 1147535
Change-Id: If8ad3df877d1baa5ce32c7199b50ff4d886555dd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2585994
Commit-Queue: Roman Arora <romanarora@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837884}

chrome/browser/resources/tab_search/app.html

@@ -51,19 +51,19 @@
     </defs>
   </svg>
 </iron-iconset-svg>
-<tab-search-search-field id="searchField" autofocus clear-label="$i18n{clearSearch}"
-    label="$i18n{searchTabs}" on-focus="onSearchFocus_"
-    on-keydown="onSearchKeyDown_" on-search-changed="onSearchChanged_"
+<tab-search-search-field id="searchField" autofocus
+    clear-label="$i18n{clearSearch}" label="$i18n{searchTabs}"
+    on-focus="onSearchFocus_" on-keydown="onSearchKeyDown_"
+    on-search-changed="onSearchChanged_"
     search-result-text="[[searchResultText_]]">
 </tab-search-search-field>
 <div hidden="[[!filteredOpenTabs_.length]]">
   <infinite-list id="tabsList" items="[[filteredOpenTabs_]]" >
-    <template>
+    <template is="dom-repeat">
       <tab-search-item id="[[item.tab.tabId]]" aria-label="[[ariaLabel_(item)]]"
-          class="mwb-list-item" data="[[item]]"
-          on-click="onItemClick_" on-close="onItemClose_"
-          on-focus="onItemFocus_" on-keydown="onItemKeyDown_" tabindex="0"
-          role="option">
+          class="mwb-list-item" data="[[item]]" on-click="onItemClick_"
+          on-close="onItemClose_" on-focus="onItemFocus_"
+          on-keydown="onItemKeyDown_" tabindex="0" role="option">
       </tab-search-item>
     </template>
   </infinite-list>

chrome/browser/resources/tab_search/app.js

@@ -266,9 +266,9 @@ export class TabSearchAppElement extends PolymerElement {
    * @private
    */
   onItemClick_(e) {
-    const tabIndex = e.currentTarget.parentNode.indexOf(e.currentTarget);
     const tabId = Number.parseInt(e.currentTarget.id, 10);
-    this.apiProxy_.switchToTab({tabId}, !!this.searchText_, tabIndex);
+    this.apiProxy_.switchToTab(
+        {tabId}, !!this.searchText_, /** @type {number} */ (e.model.index));
   }
 
   /**
@@ -277,9 +277,9 @@ export class TabSearchAppElement extends PolymerElement {
    */
   onItemClose_(e) {
     performance.mark('close_tab:benchmark_begin');
-    const tabIndex = e.currentTarget.parentNode.indexOf(e.currentTarget);
     const tabId = Number.parseInt(e.currentTarget.id, 10);
-    this.apiProxy_.closeTab(tabId, !!this.searchText_, tabIndex);
+    this.apiProxy_.closeTab(
+        tabId, !!this.searchText_, /** @type {number} */ (e.model.index));
     this.announceA11y_(loadTimeData.getString('a11yTabClosed'));
     listenOnce(this.$.tabsList, 'iron-items-changed', () => {
       performance.mark('close_tab:benchmark_end');
@@ -328,7 +328,7 @@ export class TabSearchAppElement extends PolymerElement {
     // Ensure that when a TabSearchItem receives focus, it becomes the selected
     // item in the list.
     /** @type {!InfiniteList} */ (this.$.tabsList).selected =
-        e.currentTarget.parentNode.indexOf(e.currentTarget);
+        /** @type {number} */ (e.model.index);
   }
 
   /** @private */

chrome/browser/resources/tab_search/infinite_list.html

-<style include="mwb-shared-style">
+<style>
   :host {
     display: block;
-  }
-
-  #container {
     max-height: var(--list-max-height);
     overflow-x: hidden;
     overflow-y: auto;
     position: relative;
   }
 </style>
-<div id="container" on-scroll="onScroll_">
-  <div id="items">
+<div id="items">
   <iron-selector id="selector" on-keydown="onKeyDown_"
       on-iron-items-changed="updateScrollerSize_"
       on-iron-select="onSelectedChanged_" role="listbox"
       selected-class="selected">
+    <slot></slot>
   </iron-selector>
-  </div>
 </div>

chrome/browser/resources/tab_search/infinite_list.js

@@ -17,12 +17,9 @@
  * fill the view.
  */
 
-/* TODO(crbug.com/1147535): Decouple MWB style from component */
-import 'chrome://resources/cr_elements/mwb_shared_style.js';
-import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert, assertInstanceof} from 'chrome://resources/js/assert.m.js';
 import {listenOnce} from 'chrome://resources/js/util.m.js';
 import {afterNextRender, DomRepeat, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -85,7 +82,12 @@ export class InfiniteList extends PolymerElement {
   /** @override */
   ready() {
     super.ready();
-    this.ensureTemplatized_();
+
+    this.domRepeat_ = assertInstanceof(
+        this.firstChild, DomRepeat,
+        'infinite-list requires a dom-repeat child to be provided in light-dom');
+
+    this.addEventListener('scroll', () => this.onScroll_());
   }
 
   /** @private */
@@ -137,35 +139,16 @@ export class InfiniteList extends PolymerElement {
     }
   }
 
-  /**
-   * Verifies a light-dom template has been provided and initializes a DomRepeat
-   * component with the given template.
-   * @private
-   */
-  ensureTemplatized_() {
-    // The user provided light-dom template to use when stamping DOM items.
-    const template =
-        /** @type {!HTMLTemplateElement} */ (this.querySelector('template'));
-
-    assert(
-        template,
-        'infinite-list requires a template to be provided in light-dom');
-
-    this.domRepeat_ = new DomRepeat();
-    this.domRepeat_.appendChild(template);
-    this.$.selector.appendChild(this.domRepeat_);
-  }
-
   /**
    * Adds additional DOM items as needed to fill the view based on user scroll
    * interactions.
    * @private
    */
   onScroll_() {
-    if (this.$.container.scrollTop > 0 &&
+    if (this.scrollTop > 0 &&
         this.domRepeat_.items.length !== this.items.length) {
       const aboveScrollTopItemCount =
-          Math.round(this.$.container.scrollTop / this.domItemAverageHeight_());
+          Math.round(this.scrollTop / this.domItemAverageHeight_());
 
       // Ensure we have sufficient items to fill the current scroll position and
       // a full view following our current position.
@@ -225,7 +208,7 @@ export class InfiniteList extends PolymerElement {
     if (this.domRepeat_ && this.items) {
       const domItemAvgHeight = this.domItemAverageHeight_();
       const aboveScrollTopItemCount = domItemAvgHeight !== 0 ?
-          Math.round(this.$.container.scrollTop / domItemAvgHeight) :
+          Math.round(this.scrollTop / domItemAvgHeight) :
           0;
 
       this.domRepeat_.set('items', []);
@@ -274,7 +257,7 @@ export class InfiniteList extends PolymerElement {
       }
 
       const previousItem = selector.items[selector.selected - 1];
-      if (previousItem.offsetTop < this.$.container.scrollTop) {
+      if (previousItem.offsetTop < this.scrollTop) {
         /** @type {!Element} */ (previousItem)
             .scrollIntoView({behavior: 'smooth', block: 'nearest'});
         return;
@@ -283,7 +266,7 @@ export class InfiniteList extends PolymerElement {
       const nextItem =
           selector.items[/** @type {number} */ (selector.selected) + 1];
       if (nextItem.offsetTop + nextItem.offsetHeight >
-          this.$.container.scrollTop + this.offsetHeight) {
+          this.scrollTop + this.offsetHeight) {
         /** @type {!Element} */ (nextItem).scrollIntoView(
             {behavior: 'smooth', block: 'nearest'});
       }

chrome/browser/ui/webui/tab_search/tab_search_ui_browsertest.cc

@@ -61,7 +61,7 @@ class TabSearchUIBrowserTest : public InProcessBrowserTest {
 IN_PROC_BROWSER_TEST_F(TabSearchUIBrowserTest, InitialTabItemsListed) {
   const std::string tab_items_js =
       "const tabItems = document.querySelector('tab-search-app').shadowRoot"
-      "    .getElementById('tabsList').shadowRoot"
+      "    .getElementById('tabsList')"
       "    .querySelectorAll('tab-search-item');";
   int tab_item_count =
       content::EvalJs(webui_contents_.get(), tab_items_js + "tabItems.length",
@@ -82,7 +82,8 @@ IN_PROC_BROWSER_TEST_F(TabSearchUIBrowserTest, SwitchToTabAction) {
 
   const std::string tab_item_js = base::StringPrintf(
       "document.querySelector('tab-search-app').shadowRoot"
-      "    .getElementById('tabsList').shadowRoot.getElementById('%s')",
+      "    .getElementById('tabsList')"
+      "    .querySelector('tab-search-item[id=\"%s\"]')",
       base::NumberToString(tab_id).c_str());
   ASSERT_TRUE(content::ExecJs(webui_contents_.get(), tab_item_js + ".click()",
                               content::EXECUTE_SCRIPT_DEFAULT_OPTIONS,
@@ -98,7 +99,8 @@ IN_PROC_BROWSER_TEST_F(TabSearchUIBrowserTest, CloseTabAction) {
 
   const std::string tab_item_button_js = base::StringPrintf(
       "document.querySelector('tab-search-app').shadowRoot"
-      "    .getElementById('tabsList').shadowRoot.getElementById('%s')"
+      "    .getElementById('tabsList')"
+      "    .querySelector('tab-search-item[id=\"%s\"]')"
       "    .shadowRoot.getElementById('closeButton')",
       base::NumberToString(tab_id).c_str());
   ASSERT_TRUE(content::ExecJs(webui_contents_.get(),

chrome/test/data/webui/tab_search/BUILD.gn

@@ -37,7 +37,10 @@ js_library("fuzzy_search_test") {
 }
 
 js_library("infinite_list_test") {
-  deps = [ "..:chai_assert" ]
+  deps = [
+    "..:chai_assert",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
 

chrome/test/data/webui/tab_search/infinite_list_test.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {InfiniteList, TabSearchItem} from 'chrome://tab-search/tab_search.js';
 
 import {assertEquals, assertGT, assertNotEquals, assertTrue} from '../../chai_assert.js';
@@ -10,8 +11,35 @@ import {flushTasks, waitAfterNextRender} from '../../test_util.m.js';
 import {generateSampleTabsFromSiteNames, sampleSiteNames} from './tab_search_test_data.js';
 import {assertTabItemAndNeighborsInViewBounds, disableScrollIntoViewAnimations} from './tab_search_test_helper.js';
 
-suite('InfniteListTest', () => {
-  const CHUNK_ITEM_COUNT = 7;
+const CHUNK_ITEM_COUNT = 7;
+
+class TestApp extends PolymerElement {
+  static get properties() {
+    return {
+      /** @private {number} */
+      chunkItemCount_: {
+        type: Number,
+        value: CHUNK_ITEM_COUNT
+      }
+    };
+  }
+
+  static get template() {
+    return html`
+    <infinite-list id="list" chunk-item-count="[[chunkItemCount_]]">
+      <template is="dom-repeat">
+        <tab-search-item id="[[item.tab.tabId]]"
+            style="display: flex;height: 56px" data="[[item]]" tabindex="0"
+            role="option">
+        </tab-search-item>
+      </template>
+    </infinite-list>`;
+  }
+}
+
+customElements.define('test-app', TestApp);
+
+suite('InfiniteListTest', () => {
   /** @type {!InfiniteList} */
   let infiniteList;
 
@@ -21,20 +49,19 @@ suite('InfniteListTest', () => {
    * @param {!Array<!tabSearch.mojom.Tab>} sampleData
    */
   async function setupTest(sampleData) {
-    document.head.insertAdjacentHTML(
-        'beforeend', `<style>html{--list-max-height: 280px}</style>`);
-
-    document.body.innerHTML = `
-    <infinite-list id="list" chunk-item-count="${CHUNK_ITEM_COUNT}">
-      <template>
-        <tab-search-item id="[[item.tab.tabId]]" class="mwb-list-item"
-            data="[[item]]" tabindex="0" role="option">
-        </tab-search-item>
-      </template>
-    </infinite-list>`;
+    document.head.insertAdjacentHTML('beforeend', `
+    <style>
+    html {
+      --list-max-height: 280px;
+    }
+    </style>`);
+
+    const testApp = document.createElement('test-app');
+    document.body.innerHTML = '';
+    document.body.appendChild(testApp);
 
-    infiniteList =
-        /** @type {!InfiniteList} */ (document.querySelector('#list'));
+    infiniteList = /** @type {!InfiniteList} */ (
+        testApp.shadowRoot.querySelector('#list'));
     infiniteList.items = sampleData;
     await flushTasks();
   }
@@ -44,7 +71,7 @@ suite('InfniteListTest', () => {
    */
   function queryRows() {
     return /** @type {!NodeList<!HTMLElement>} */ (
-        infiniteList.shadowRoot.querySelectorAll('tab-search-item'));
+        infiniteList.querySelectorAll('tab-search-item'));
   }
 
   /**
@@ -61,8 +88,7 @@ suite('InfniteListTest', () => {
     const tabItems = sampleTabItems(sampleSiteNames());
     await setupTest(tabItems);
 
-    const container = infiniteList.shadowRoot.getElementById('container');
-    assertEquals(0, container.scrollTop);
+    assertEquals(0, infiniteList.scrollTop);
 
     const itemHeightStyle =
         getComputedStyle(document.head).getPropertyValue('--mwb-item-height');
@@ -70,7 +96,7 @@ suite('InfniteListTest', () => {
 
     const tabItemHeight = Number.parseInt(
         itemHeightStyle.substring(0, itemHeightStyle.length - 2), 10);
-    assertEquals(tabItemHeight * tabItems.length, container.scrollHeight);
+    assertEquals(tabItemHeight * tabItems.length, infiniteList.scrollHeight);
   });
 
   test('SelectedIndex', async () => {
@@ -78,8 +104,7 @@ suite('InfniteListTest', () => {
     const tabItems = sampleTabItems(siteNames);
     await setupTest(tabItems);
 
-    const container = infiniteList.shadowRoot.getElementById('container');
-    assertEquals(0, container.scrollTop);
+    assertEquals(0, infiniteList.scrollTop);
     assertEquals(CHUNK_ITEM_COUNT, queryRows().length);
 
     // Assert that upon changing the selected index to a non previously rendered
@@ -93,7 +118,7 @@ suite('InfniteListTest', () => {
     assertEquals(2 * CHUNK_ITEM_COUNT, domTabItems.length);
 
     // Assert that the view scrolled to show the selected item.
-    const afterSelectionScrollTop = container.scrollTop;
+    const afterSelectionScrollTop = infiniteList.scrollTop;
     assertNotEquals(0, afterSelectionScrollTop);
 
     // Assert that on replacing the list items, the currently selected index
@@ -105,15 +130,14 @@ suite('InfniteListTest', () => {
     assertNotEquals(null, theSelectedTabItem);
 
     // Assert the selected item is still visible in the view.
-    assertEquals(afterSelectionScrollTop, container.scrollTop);
+    assertEquals(afterSelectionScrollTop, infiniteList.scrollTop);
   });
 
   test('NavigateDownShowsPreviousAndFollowingListItems', async () => {
     const tabItems = sampleTabItems(sampleSiteNames());
     await setupTest(tabItems);
 
-    const tabsDiv = /** @type {!HTMLElement} */
-        (infiniteList.shadowRoot.querySelector('#container'));
+    const tabsDiv = /** @type {!HTMLElement} */ (infiniteList);
     // Assert that the tabs are in a overflowing state.
     assertGT(tabsDiv.scrollHeight, tabsDiv.clientHeight);
 
@@ -133,8 +157,7 @@ suite('InfniteListTest', () => {
     const tabItems = sampleTabItems(sampleSiteNames());
     await setupTest(tabItems);
 
-    const tabsDiv = /** @type {!HTMLElement} */
-        (infiniteList.shadowRoot.querySelector('#container'));
+    const tabsDiv = /** @type {!HTMLElement} */ (infiniteList);
     // Assert that the tabs are in a overflowing state.
     assertGT(tabsDiv.scrollHeight, tabsDiv.clientHeight);
 

chrome/test/data/webui/tab_search/tab_search_app_focus_test.js

@@ -52,7 +52,7 @@ suite('TabSearchAppFocusTest', () => {
 
     const tabSearchItems = /** @type {!NodeList<!HTMLElement>} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelectorAll('tab-search-item'));
+             .querySelectorAll('tab-search-item'));
 
     tabSearchItems[0].focus();
     // Once an item is focused, arrow keys should change focus too.
@@ -86,7 +86,7 @@ suite('TabSearchAppFocusTest', () => {
 
     const tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item'));
+             .querySelector('tab-search-item'));
     tabSearchItem.focus();
 
     keyDownOn(tabSearchItem, 0, [], 'Enter');
@@ -103,14 +103,13 @@ suite('TabSearchAppFocusTest', () => {
     await setupTest(generateSampleDataFromSiteNames(sampleSiteNames()));
 
     const tabsDiv = /** @type {!HTMLElement} */
-        (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('#container'));
+        (tabSearchApp.shadowRoot.querySelector('#tabsList'));
     // Assert that the tabs are in a overflowing state.
     assertGT(tabsDiv.scrollHeight, tabsDiv.clientHeight);
 
     const tabItems = /** @type {!NodeList<HTMLElement>} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelectorAll('tab-search-item'));
+             .querySelectorAll('tab-search-item'));
     for (let i = 0; i < tabItems.length; i++) {
       tabItems[i].focus();
 

chrome/test/data/webui/tab_search/tab_search_app_test.js

@@ -34,7 +34,7 @@ suite('TabSearchAppTest', () => {
    */
   function queryRows() {
     return tabSearchApp.shadowRoot.querySelector('#tabsList')
-        .shadowRoot.querySelectorAll('tab-search-item');
+        .querySelectorAll('tab-search-item');
   }
 
   /**
@@ -98,7 +98,7 @@ suite('TabSearchAppTest', () => {
 
     const tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item'));
+             .querySelector('tab-search-item'));
     tabSearchItem.click();
     const [tabInfo] = await testProxy.whenCalled('switchToTab');
     assertEquals(tabData.tabId, tabInfo.tabId);
@@ -229,7 +229,7 @@ suite('TabSearchAppTest', () => {
     verifyTabIds(queryRows(), [1, 5, 6, 2, 3, 4]);
     let tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item[id="1"]'));
+             .querySelector('tab-search-item[id="1"]'));
     assertEquals('Google', tabSearchItem.data.tab.title);
     assertEquals('https://www.google.com', tabSearchItem.data.tab.url);
     const updatedTab = /** @type {!Tab} */ ({
@@ -245,7 +245,7 @@ suite('TabSearchAppTest', () => {
     verifyTabIds(queryRows(), [1, 5, 6, 2, 3, 4]);
     tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item[id="1"]'));
+             .querySelector('tab-search-item[id="1"]'));
     assertEquals(updatedTab.title, tabSearchItem.data.tab.title);
     assertEquals(updatedTab.url, tabSearchItem.data.tab.url);
     assertEquals('example.com', tabSearchItem.data.hostname);
@@ -305,7 +305,7 @@ suite('TabSearchAppTest', () => {
     // Click the first element with tabId 1.
     let tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item[id="1"]'));
+             .querySelector('tab-search-item[id="1"]'));
     tabSearchItem.click();
 
     // Assert switchToTab() was called appropriately for an unfiltered tab list.
@@ -320,7 +320,7 @@ suite('TabSearchAppTest', () => {
     // Click the first element with tabId 6.
     tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item[id="6"]'));
+             .querySelector('tab-search-item[id="6"]'));
     tabSearchItem.click();
 
     // Assert switchToTab() was called appropriately for an unfiltered tab list.
@@ -343,7 +343,7 @@ suite('TabSearchAppTest', () => {
     // Click the only remaining element with tabId 2.
     tabSearchItem = /** @type {!HTMLElement} */
         (tabSearchApp.shadowRoot.querySelector('#tabsList')
-             .shadowRoot.querySelector('tab-search-item[id="2"]'));
+             .querySelector('tab-search-item[id="2"]'));
     tabSearchItem.click();
 
     // Assert switchToTab() was called appropriately for a tab list fitlered by
@@ -437,7 +437,7 @@ suite('TabSearchAppTest', () => {
       tabSearchApp.shadowRoot.querySelector('#searchField'),
       tabSearchApp.shadowRoot.querySelector('#tabsList'),
       tabSearchApp.shadowRoot.querySelector('#tabsList')
-          .shadowRoot.querySelector('tab-search-item'),
+          .querySelector('tab-search-item'),
       tabSearchApp.shadowRoot.querySelector('#feedback-footer'),
     ];
 

tools/perf/page_sets/tab_search/tab_search_story.py

@@ -231,7 +231,6 @@ class TabSearchStoryScrollUpAndDown(TabSearchStory):
 
 SCROLL_ELEMENT_FUNCTION = '''
 document.querySelector('tab-search-app').shadowRoot.getElementById('tabsList')
-.shadowRoot.getElementById('container')
 '''
 
 MEASURE_FRAME_TIME_SCRIPT = '''

ui/webui/resources/cr_elements/mwb_shared_style.html

 <template>
   <style>
     ::-webkit-scrollbar-thumb {
-      background: var(--google-grey-refresh-300);
-    }
-
-    /* TODO(crbug.com/1110109): Add WCAG compliant dark mode support. */
-    @media (prefers-color-scheme: dark) {
-      ::-webkit-scrollbar-thumb {
-        background: var(--google-grey-refresh-500);
-      }
+      background-color: var(--mwb-scrollbar-thumb-color);
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background: var(--google-grey-refresh-500);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      ::-webkit-scrollbar-thumb:hover {
-        background: var(--google-grey-refresh-300);
-      }
+      background-color: var(--mwb-scrollbar-thumb-hover-color);
     }
 
     ::-webkit-scrollbar-track {
-      background: var(--mwb-background-color);
+      background-color: var(--mwb-scrollbar-track-color);
     }
 
     ::-webkit-scrollbar {
-      width: 4px;
+      width: var(--mwb-scrollbar-width);
     }
 
     .mwb-list-item {

ui/webui/resources/cr_elements/mwb_shared_vars.html

@@ -11,6 +11,10 @@
       --mwb-list-item-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
       --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.14);
       --mwb-primary-text-font-size: 13px;
+      --mwb-scrollbar-thumb-color: var(--google-grey-refresh-300);
+      --mwb-scrollbar-thumb-hover-color: var(--google-grey-refresh-500);
+      --mwb-scrollbar-track-color: var(--mwb-background-color);
+      --mwb-scrollbar-width: 4px;
       --mwb-secondary-text-font-size: 12px;
     }
 
@@ -21,6 +25,8 @@
         --mwb-icon-button-hover-background-color: rgba(255, 255, 255, 0.1);
         --mwb-list-item-hover-background-color: rgb(55, 56, 58); /* #37383a */
         --mwb-list-item-selected-background-color: rgb(68, 69, 71); /* #444547 */
+        --mwb-scrollbar-thumb-color: var(--google-grey-refresh-500);
+        --mwb-scrollbar-thumb-hover-color: var(--google-grey-refresh-300);
       }
     }
   </style>