chrome-devtools-frontend
Version:
Chrome DevTools UI
103 lines (82 loc) • 3.28 kB
text/typescript
// Copyright 2023 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.
import {
createElement,
Overlay,
} from './common.js';
import {generateLegibleTextColor} from './css_grid_label_helpers.js';
interface WindowControlsOverlayConfig {
selectedPlatform: string;
themeColor: string;
}
export class WindowControlsOverlay extends Overlay {
private windowsToolBar!: HTMLElement;
private linuxToolBar!: HTMLElement;
private macToolbarRight!: HTMLElement;
private macToolbarLeft!: HTMLElement;
constructor(window: Window, style: CSSStyleSheet[] = []) {
super(window, style);
}
override install() {
const windowLinuxToolbarIcons = ['chevron', 'ellipsis', 'minimize', 'maximize', 'close'];
const macLeftToolbarIcons = ['mac-close', 'mac-minimize', 'mac-maximize'];
const macRightToolbarIcons = ['mac-chevron', 'mac-ellipsis'];
this.windowsToolBar = createHiddenToolBarRow('windows', 'right', windowLinuxToolbarIcons);
this.linuxToolBar = createHiddenToolBarRow('linux', 'right', windowLinuxToolbarIcons);
this.macToolbarRight = createHiddenToolBarRow('mac', 'right', macRightToolbarIcons);
this.macToolbarLeft = createHiddenToolBarRow('mac', 'left', macLeftToolbarIcons);
this.document.body.append(this.windowsToolBar, this.linuxToolBar, this.macToolbarLeft, this.macToolbarRight);
super.install();
}
override uninstall() {
this.document.body.innerHTML = '';
super.uninstall();
}
drawWindowControlsOverlay(config: WindowControlsOverlayConfig) {
// Clear all overlays
this.clearOverlays();
// Display the Window Controls Overlay
if (config.selectedPlatform === 'Windows') {
revealElement(this.windowsToolBar);
} else if (config.selectedPlatform === 'Linux') {
revealElement(this.linuxToolBar);
} else if (config.selectedPlatform === 'Mac') {
revealElement(this.macToolbarLeft);
revealElement(this.macToolbarRight);
}
// Set the theme Color
this.document.documentElement.style.setProperty('--wco-theme-color', config.themeColor);
this.document.documentElement.style.setProperty('--wco-icon-color', generateLegibleTextColor(config.themeColor));
}
clearOverlays() {
hideElement(this.linuxToolBar);
hideElement(this.windowsToolBar);
hideElement(this.macToolbarLeft);
hideElement(this.macToolbarRight);
}
}
function hideElement(element: HTMLElement): void {
element.classList.add('hidden');
}
function revealElement(element: HTMLElement): void {
element.classList.remove('hidden');
}
function createDivOfIcons(icons: string[]): HTMLElement {
const toolbar = createElement('div');
for (const iconName of icons) {
const icon = createElement('div');
icon.id = iconName;
icon.classList.add('image');
toolbar.append(icon);
}
return toolbar;
}
function createHiddenToolBarRow(osType: string, location: string, icons: string[]): HTMLElement {
const toolbar = createDivOfIcons(icons);
toolbar.classList.add('image-group');
toolbar.classList.add(`image-group-${location}`);
toolbar.classList.add(`${osType}-${location}-image-group`);
toolbar.classList.add('hidden');
return toolbar;
}