From 21ba5d9dea55ad147953979ddae611c8688a9cdb Mon Sep 17 00:00:00 2001
From: Emerick Rogul <erogul@brave.com>
Date: Mon, 28 Oct 2024 10:36:14 -0400
Subject: [PATCH] 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
---
 .../extensions/brave_overrides/side_bar.ts    | 53 +++++++++----------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/browser/resources/extensions/brave_overrides/side_bar.ts b/browser/resources/extensions/brave_overrides/side_bar.ts
index 11bbf4fdc444..dfb057004dff 100644
--- 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;
+  }
   `
 )