Migrate extensions sidebar override to use Lit

Chromium change: https://source.chromium.org/chromium/chromium/src/+/b926b290454f361d1ca67ee185a41a32aed62f0d commit b926b290454f361d1ca67ee185a41a32aed62f0d Author: rbpotter <rbpotter@chromium.org> Date: Wed Oct 2 20:53:24 2024 +0000 Extensions: Migrate sidebar and toolbar to Lit Bug: 40943652
brave · Oct 28, 2024 · e229d29 · e229d29
1 parent 1ef7fcf
commit e229d29
Showing 1 changed file with 26 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,36 @@
 // 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`
+  <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;
+    }
 
-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;
+    }
+  </style>
   `
 )