Merge pull request #26256 from brave/cr131-followup-fix-extensions-si…

…debar-styles Migrate extensions sidebar override to use Lit
brave · Oct 28, 2024 · 38774a3 · 38774a3
2 parents 9b341ea + 21ba5d9
commit 38774a3
Showing 1 changed file with 24 additions and 29 deletions.
diff --git a/browser/resources/extensions/brave_overrides/side_bar.ts b/browser/resources/extensions/brave_overrides/side_bar.ts
@@ -3,39 +3,34 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
-// @ts-nocheck TODO(petemill): Define types and remove ts-nocheck
+import { injectStyle } from '//resources/brave/lit_overriding.js'
+import { css } from '//resources/lit/v3_0/lit.rollup.js'
+import { ExtensionsSidebarElement } from '../sidebar.js'
 
-import {RegisterStyleOverride} from 'chrome://resources/brave/polymer_overriding.js'
-import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
+injectStyle(ExtensionsSidebarElement, css`
+  .cr-nav-menu-item {
+    min-height: 20px !important;
+    border-end-end-radius: 0px !important;
+    border-start-end-radius: 0px !important;
+    box-sizing: content-box !important;
+  }
 
-RegisterStyleOverride(
-  'extensions-sidebar',
-  html`
-    <style>
-      .cr-nav-menu-item {
-        min-height: 20px !important;
-        border-end-end-radius: 0px !important;
-        border-start-end-radius: 0px !important;
-        box-sizing: content-box !important;
-      }
+  .cr-nav-menu-item:hover {
+    background: transparent !important;
+  }
 
-      .cr-nav-menu-item:hover {
-        background: transparent !important;
-      }
+  .cr-nav-menu-item[selected] {
+    --iron-icon-fill-color: var(--cr-link-color) !important;
+    color: var(--cr-link-color) !important;
+    background: transparent !important;
+  }
 
-      .cr-nav-menu-item[selected] {
-        --iron-icon-fill-color: var(--cr-link-color) !important;
-        color: var(--cr-link-color) !important;
-        background: transparent !important;
-      }
+  .cr-nav-menu-item iron-icon {
+    display: none !important;
+  }
 
-      .cr-nav-menu-item iron-icon {
-        display: none !important;
-      }
-
-      .cr-nav-menu-item cr-ripple {
-        display: none !important;
-      }
-    </style>
+  .cr-nav-menu-item cr-ripple {
+    display: none !important;
+  }
   `
 )