front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

// Copyright 2020 The Chromium Authors
// 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 SDK from '../../../core/sdk/sdk.js';

const UIStrings = {
  /**
   * @description Text in elements breadcrumbs of the Elements panel. Indicates that an HTML element
   * is a text node, meaning it contains text only and no other HTML elements.
   */
  text: '(text)',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/elements/components/ElementsBreadcrumbsUtils.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

export type UserScrollPosition = 'start'|'middle'|'end';

export interface Crumb {
  title: CrumbTitle;
  selected: boolean;
  node: SDK.DOMModel.DOMNode;
}

export interface CrumbTitle {
  main: string;
  extras: {id?: string, classes?: string[]};
}

export const crumbsToRender =
    (crumbs: readonly SDK.DOMModel.DOMNode[], selectedNode: SDK.DOMModel.DOMNode|null): Crumb[] => {
      if (!selectedNode) {
        return [];
      }

      return crumbs
          .filter(crumb => {
            return crumb.nodeType() !== Node.DOCUMENT_NODE;
          })
          .map(crumb => {
            return {
              title: determineElementTitle(crumb),
              selected: crumb.id === selectedNode.id,
              node: crumb,
            };
          })
          .reverse();
    };

const makeCrumbTitle = (main: string, extras = {}): CrumbTitle => {
  return {
    main,
    extras,
  };
};

export const determineElementTitle = (domNode: SDK.DOMModel.DOMNode): CrumbTitle => {
  const nodeType = domNode.nodeType();
  switch (nodeType) {
    case Node.ELEMENT_NODE: {
      const pseudoType = domNode.pseudoType();
      if (pseudoType) {
        return makeCrumbTitle('::' + pseudoType);
      }
      const crumbTitle = makeCrumbTitle(domNode.nodeNameInCorrectCase());

      const id = domNode.getAttribute('id');
      if (id) {
        crumbTitle.extras.id = id;
      }

      const classAttribute = domNode.getAttribute('class');
      if (classAttribute) {
        const classes = new Set(classAttribute.split(/\s+/));
        crumbTitle.extras.classes = Array.from(classes);
      }

      return crumbTitle;
    }

    case Node.TEXT_NODE:
      return makeCrumbTitle(i18nString(UIStrings.text));
    case Node.COMMENT_NODE:
      return makeCrumbTitle('<!-->');
    case Node.DOCUMENT_TYPE_NODE:
      return makeCrumbTitle('<!doctype>');
    case Node.DOCUMENT_FRAGMENT_NODE:
      return makeCrumbTitle(domNode.shadowRootType() ? '#shadow-root' : domNode.nodeNameInCorrectCase());
    default:
      return makeCrumbTitle(domNode.nodeNameInCorrectCase());
  }
};