[CrOverrides]: Migrate existing overrides to Lit (#25600)

ui/webui/resources/BUILD.gn

@@ -46,16 +46,18 @@ if (include_polymer) {
         "br_elements/br_toolbar/br_toolbar.ts",
         "br_elements/br_toolbar/br_toolbar_search_field.ts",
       ]
-
-      # All the cr_overrides we add should be included in the build.
-      foreach(cr_override, brave_override_cr_elements) {
-        web_component_files += [ "cr_elements/$cr_override/$cr_override.ts" ]
-      }
-
       non_web_component_files = [
         "polymer_overriding.ts",
         "lit_overriding.ts",
       ]
+
+      # All the cr_overrides we add should be included in the build.
+      foreach(cr_override, brave_override_cr_elements) {
+        non_web_component_files += [
+          "cr_elements/$cr_override/$cr_override.ts",
+          "cr_elements/$cr_override/$cr_override.html.ts",
+        ]
+      }
     }
 
     if (include_polymer) {

ui/webui/resources/cr_elements/cr_button/cr_button.html

@@ -1,26 +0,0 @@
-<!-- Copyright (c) 2024 The Brave Authors. All rights reserved.
- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
- <style>
-  :host {
-    display: inline-block;
-    height: min-content;
-  }
-
-  :host(.cancel-button) {
-    margin-inline-end: var(--leo-spacing-m);
-  }
-
-  leo-button {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-  }
- </style>
-<leo-button id="button" kind="outline" size="small">
-  <slot slot="icon-before" name="prefix-icon"></slot>
-  <slot></slot>
-  <slot slot="icon-after" name="suffix-icon"></slot>
-</leo-button>

ui/webui/resources/cr_elements/cr_button/cr_button.html.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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/.
+
+import { html } from '//resources/lit/v3_0/lit.rollup.js';
+import type { CrButtonElement } from './cr_button.js';
+
+export function getHtml(this: CrButtonElement) {
+  return html`
+<leo-button id="button" kind="outline" size="small">
+  <slot slot="icon-before" name="prefix-icon"></slot>
+  <slot></slot>
+  <slot slot="icon-after" name="suffix-icon"></slot>
+</leo-button>`;
+}
+
+

ui/webui/resources/cr_elements/cr_button/cr_button.ts

@@ -5,8 +5,8 @@
 
 import '//resources/brave/leo.bundle.js'
 
-import { PolymerElement } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import { getTemplate } from './cr_button.html.js';
+import {CrLitElement, css} from '//resources/lit/v3_0/lit.rollup.js';
+import {getHtml} from './cr_button.html.js';
 
 export interface CrButtonElement {
   $: {
@@ -14,27 +14,47 @@ export interface CrButtonElement {
   };
 }
 
-export class CrButtonElement extends PolymerElement {
+export class CrButtonElement extends CrLitElement {
   static get is() {
     return 'cr-button';
   }
 
-  static get template() {
-    return getTemplate();
+  static override get styles() {
+    return css`
+:host {
+  display: inline-block;
+  height: min-content;
+}
+
+:host(.cancel-button) {
+  margin-inline-end: var(--leo-spacing-m);
+}
+
+leo-button {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+`;
   }
 
-  static get properties() {
+  override render() {
+    return getHtml.bind(this)();
+  }
+
+  static override get properties() {
     return {
       disabled: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true,
+        reflect: true,
         observer: 'disabledChanged_'
       },
       class: {
         type: String,
         value: '',
-        reflectToAttribute: true,
+        reflect: true,
         observer: 'classChanged_'
       }
     };

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

@@ -1,7 +0,0 @@
-<!-- Copyright (c) 2024 The Brave Authors. All rights reserved.
- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
-<leo-toggle id="toggle" size="small" checked="{{checked}}" disabled="{{disabled}}" on-change="onChange_">
-  <slot></slot>
-</leo-toggle>

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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/.
+import { html } from '//resources/lit/v3_0/lit.rollup.js';
+import type { CrToggleElement } from './cr_toggle.js';
+
+export function getHtml(this: CrToggleElement) {
+  return html`
+<leo-toggle id="toggle" size="small" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.onChange_}">
+  <slot></slot>
+</leo-toggle>
+`
+}

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.ts

@@ -5,8 +5,8 @@
 
 import '//resources/brave/leo.bundle.js'
 
-import { PolymerElement } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import { getTemplate } from './cr_toggle.html.js';
+import {CrLitElement, css} from '//resources/lit/v3_0/lit.rollup.js';
+import { getHtml } from './cr_toggle.html.js';
 
 export interface CrToggleElement {
   $: {
@@ -14,28 +14,32 @@ export interface CrToggleElement {
   }
 }
 
-export class CrToggleElement extends PolymerElement {
+export class CrToggleElement extends CrLitElement {
   static get is() {
     return 'cr-toggle';
   }
 
-  static get template() {
-    return getTemplate();
+  static override get styles() {
+    return css``
   }
 
-  static get properties() {
+  override render() {
+    return getHtml.bind(this)();
+  }
+
+  static override get properties() {
     return {
       checked: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true,
+        reflect: true,
         notify: true,
       },
 
       disabled: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true,
+        reflect: true,
       },
     };
   }
@@ -45,7 +49,7 @@ export class CrToggleElement extends PolymerElement {
 
   // The Nala event looks a bit different to the Chromium one, so we need to
   // convert it.
-  private onChange_(e: { checked: boolean }) {
+  onChange_(e: { checked: boolean }) {
     this.checked = e.checked
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: e.checked }))
   }