chrome-devtools-frontend/front_end/panels/elements/MarkerDecorator.ts

Chrome DevTools UI

// Copyright 2018 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 * as i18n from '../../core/i18n/i18n.js';
import type * as Platform from '../../core/platform/platform.js';
import type * as SDK from '../../core/sdk/sdk.js';

import {PseudoStateMarkerDecorator} from './ElementsPanel.js';

const UIStrings = {
  /**
   *@description Title of the Marker Decorator of Elements
   */
  domBreakpoint: 'DOM Breakpoint',
  /**
   *@description Title of the Marker Decorator of Elements
   */
  elementIsHidden: 'Element is hidden',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/elements/MarkerDecorator.ts', UIStrings);
const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);

export interface MarkerDecorator {
  decorate(node: SDK.DOMModel.DOMNode): {
    title: string,
    color: string,
  }|null;
}

export class GenericDecorator implements MarkerDecorator {
  private readonly title: string;
  private readonly color: string;

  constructor(extension: {
    marker: string,
    title: () => string,
    color: string,
  }) {
    if (!extension.title || !extension.color) {
      throw new Error(`Generic decorator requires a color and a title: ${extension.marker}`);
    }
    this.title = extension.title();
    this.color = (extension.color);
  }

  decorate(_node: SDK.DOMModel.DOMNode): {
    title: string,
    color: string,
  }|null {
    return {title: this.title, color: this.color};
  }
}

const domBreakpointData = {
  marker: 'breakpoint-marker',
  title: i18nLazyString(UIStrings.domBreakpoint),
  color: 'var(--sys-color-primary-bright)',
};

const elementIsHiddenData = {
  marker: 'hidden-marker',
  title: i18nLazyString(UIStrings.elementIsHidden),
  color: 'var(--sys-color-neutral-bright)',
};

export function getRegisteredDecorators(): MarkerDecoratorRegistration[] {
  return [
    {
      ...domBreakpointData,
      decorator: () => new GenericDecorator(domBreakpointData),
    },
    {
      ...elementIsHiddenData,
      decorator: () => new GenericDecorator(elementIsHiddenData),
    },
    {
      decorator: PseudoStateMarkerDecorator.instance,
      marker: 'pseudo-state-marker',
      title: undefined,
      color: undefined,
    },
  ];
}
export interface MarkerDecoratorRegistration {
  decorator: () => MarkerDecorator;
  marker: string;
  color?: string;
  title?: (() => Platform.UIString.LocalizedString);
}