[CrOverrides]: Migrate existing overrides to Lit

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.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,36 +5,56 @@
 
 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 {
  $: {
  button: HTMLElement
  };
 }
 
-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;
+}
+`;
+ }
+
+ override render() {
+ return getHtml.bind(this)();
  }
 
- static get properties() {
+ 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.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,37 +5,41 @@
 
 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 {
  $: {
  toggle: HTMLElement
  }
 }
 
-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 }))
  }