chrome-devtools-frontend
Version:
Chrome DevTools UI
143 lines (122 loc) • 4.69 kB
text/typescript
// Copyright 2021 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable rulesdir/no-lit-render-outside-of-view, rulesdir/inject-checkbox-styles */
import './SettingDeprecationWarning.js';
import type * as Common from '../../../core/common/common.js';
import * as Host from '../../../core/host/host.js';
import * as i18n from '../../../core/i18n/i18n.js';
import * as Lit from '../../lit/lit.js';
import * as VisualLogging from '../../visual_logging/visual_logging.js';
import * as Buttons from '../buttons/buttons.js';
import * as Input from '../input/input.js';
import settingCheckboxStyles from './settingCheckbox.css.js';
const {html, Directives: {ifDefined}} = Lit;
const UIStrings = {
/**
*@description Text that is usually a hyperlink to more documentation
*/
learnMore: 'Learn more',
} as const;
const str_ = i18n.i18n.registerUIStrings('ui/components/settings/SettingCheckbox.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export interface SettingCheckboxData {
setting: Common.Settings.Setting<boolean>;
textOverride?: string;
}
/**
* A simple checkbox that is backed by a boolean setting.
*/
export class SettingCheckbox extends HTMLElement {
readonly #shadow = this.attachShadow({mode: 'open'});
#setting?: Common.Settings.Setting<boolean>;
#changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
#textOverride?: string;
set data(data: SettingCheckboxData) {
if (this.#changeListenerDescriptor && this.#setting) {
this.#setting.removeChangeListener(this.#changeListenerDescriptor.listener);
}
this.#setting = data.setting;
this.#textOverride = data.textOverride;
this.#changeListenerDescriptor = this.#setting.addChangeListener(() => {
this.#render();
});
this.#render();
}
icon(): Lit.TemplateResult|undefined {
if (!this.#setting) {
return undefined;
}
if (this.#setting.deprecation) {
return html`<devtools-setting-deprecation-warning .data=${
this.#setting.deprecation}></devtools-setting-deprecation-warning>`;
}
const learnMore = this.#setting.learnMore();
if (learnMore && learnMore.url) {
const url = learnMore.url;
const data: Buttons.Button.ButtonData = {
iconName: 'help',
variant: Buttons.Button.Variant.ICON,
size: Buttons.Button.Size.SMALL,
jslogContext: `${this.#setting.name}-documentation`,
title: i18nString(UIStrings.learnMore),
};
const handleClick = (event: MouseEvent): void => {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
event.consume();
};
return html`<devtools-button
class=learn-more
=${handleClick}
.data=${data}></devtools-button>`;
}
return undefined;
}
#render(): void {
if (!this.#setting) {
throw new Error('No "Setting" object provided for rendering');
}
const icon = this.icon();
const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
const disabledReasons = this.#setting.disabledReasons();
const reason = disabledReasons.length ?
html`
<devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
Buttons.Button.Size.SMALL} title=${ifDefined(disabledReasons.join('\n'))} =${
onclick}></devtools-button>
` :
Lit.nothing;
Lit.render(
html`
<style>${Input.checkboxStyles}</style>
<style>${settingCheckboxStyles}</style>
<p>
<label title=${title}>
<input
type="checkbox"
.checked=${disabledReasons.length ? false : this.#setting.get()}
?disabled=${this.#setting.disabled()}
=${this.#checkboxChanged}
jslog=${VisualLogging.toggle().track({click: true}).context(this.#setting.name)}
aria-label=${this.#setting.title()}
/>
${this.#textOverride || this.#setting.title()}${reason}
</label>
${icon}
</p>`,
this.#shadow, {host: this});
}
#checkboxChanged(e: Event): void {
this.#setting?.set((e.target as HTMLInputElement).checked);
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
composed: false,
}));
}
}
customElements.define('setting-checkbox', SettingCheckbox);
declare global {
interface HTMLElementTagNameMap {
'setting-checkbox': SettingCheckbox;
}
}