chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/ui/components/text_editor/config.ts

@@ -0,0 +1,264 @@
+// 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.
+
+import * as Common from '../../../core/common/common.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
+
+import {editorTheme} from './theme.js';
+
+const LINES_TO_SCAN_FOR_INDENTATION_GUESSING = 1000;
+
+const UIStrings = {
+  /**
+  *@description Label text for the editor
+  */
+  codeEditor: 'Code editor',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/text_editor/config.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const empty: CM.Extension = [];
+
+export const dynamicSetting = CM.Facet.define<DynamicSetting<unknown>>();
+
+// The code below is used to wire up dynamic settings to editors. When
+// you include one of these objects in an editor configuration, the
+// TextEditor class will take care of listening to changes in the
+// setting, and updating the configuration as appropriate.
+
+export class DynamicSetting<T> {
+  compartment = new CM.Compartment();
+  extension: CM.Extension;
+
+  constructor(
+      readonly settingName: string,
+      private readonly getExtension: (value: T, state: CM.EditorState) => CM.Extension,
+  ) {
+    this.extension = [this.compartment.of(empty), dynamicSetting.of(this as DynamicSetting<unknown>)];
+  }
+
+  sync(state: CM.EditorState, value: T): CM.StateEffect<unknown>|null {
+    const cur = this.compartment.get(state);
+    const needed = this.getExtension(value, state);
+    return cur === needed ? null : this.compartment.reconfigure(needed);
+  }
+
+  static bool(name: string, enabled: CM.Extension, disabled: CM.Extension = empty): DynamicSetting<boolean> {
+    return new DynamicSetting<boolean>(name, val => val ? enabled : disabled);
+  }
+}
+
+export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.keymap.of([{
+  key: 'Tab',
+  run: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentMore(view) : false,
+  shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
+}]));
+
+export const bracketMatching = DynamicSetting.bool('textEditorBracketMatching', CM.bracketMatching());
+
+export function guessIndent(doc: CM.Text): string {
+  const values: {[indent: string]: number} = Object.create(null);
+  let scanned = 0;
+  for (let cur = doc.iterLines(1, Math.min(doc.lines + 1, LINES_TO_SCAN_FOR_INDENTATION_GUESSING)); !cur.next().done;) {
+    let space = (/^\s*/.exec(cur.value) as string[])[0];
+    if (space.length === cur.value.length || !space.length) {
+      continue;
+    }
+    if (space[0] === '\t') {
+      space = '\t';
+    } else if (/[^ ]/.test(space)) {
+      continue;
+    }
+    scanned++;
+    values[space] = (values[space] || 0) + 1;
+  }
+  const minOccurrence = scanned * 0.05;
+  const sorted = Object.entries(values).filter(e => e[1] > minOccurrence).sort((a, b) => a[1] - b[1]);
+  return sorted.length ? sorted[0][0] : Common.Settings.Settings.instance().moduleSetting('textEditorIndent').get();
+}
+
+const cachedIndentUnit: {[indent: string]: CM.Extension} = Object.create(null);
+
+function getIndentUnit(indent: string): CM.Extension {
+  let value = cachedIndentUnit[indent];
+  if (!value) {
+    value = cachedIndentUnit[indent] = CM.indentUnit.of(indent);
+  }
+  return value;
+}
+
+export const autoDetectIndent = new DynamicSetting<boolean>('textEditorAutoDetectIndent', (on, state) => {
+  return on ? CM.Prec.override(getIndentUnit(guessIndent(state.doc))) : empty;
+});
+
+function matcher(decorator: CM.MatchDecorator): CM.Extension {
+  return CM.ViewPlugin.define(
+      view => ({
+        decorations: decorator.createDeco(view),
+        update(u): void {
+          this.decorations = decorator.updateDeco(u, this.decorations);
+        },
+      }),
+      {
+        decorations: v => v.decorations,
+      });
+}
+
+const WhitespaceDeco = new Map<string, CM.Decoration>();
+
+function getWhitespaceDeco(space: string): CM.Decoration {
+  const cached = WhitespaceDeco.get(space);
+  if (cached) {
+    return cached;
+  }
+  const result = CM.Decoration.mark({
+    attributes: space === '\t' ? {
+      class: 'cm-highlightedTab',
+    } :
+                                 {class: 'cm-highlightedSpaces', 'data-display': '·'.repeat(space.length)},
+  });
+  WhitespaceDeco.set(space, result);
+  return result;
+}
+
+const showAllWhitespace = matcher(new CM.MatchDecorator({
+  regexp: /\t| +/g,
+  decoration: (match: RegExpExecArray): CM.Decoration => getWhitespaceDeco(match[0]),
+  boundary: /\S/,
+}));
+
+const showTrailingWhitespace = matcher(new CM.MatchDecorator({
+  regexp: /\s+$/g,
+  decoration: CM.Decoration.mark({class: 'cm-trailingWhitespace'}),
+  boundary: /\S/,
+}));
+
+export const showWhitespace = new DynamicSetting<string>('showWhitespacesInEditor', value => {
+  if (value === 'all') {
+    return showAllWhitespace;
+  }
+  if (value === 'trailing') {
+    return showTrailingWhitespace;
+  }
+  return empty;
+});
+
+export const allowScrollPastEof = DynamicSetting.bool('allowScrollPastEof', CM.scrollPastEnd());
+
+export const indentUnit = new DynamicSetting<string>('textEditorIndent', getIndentUnit);
+
+export const domWordWrap = DynamicSetting.bool('domWordWrap', CM.EditorView.lineWrapping);
+
+function detectLineSeparator(text: string): CM.Extension {
+  if (/\r\n/.test(text) && !/(^|[^\r])\n/.test(text)) {
+    return CM.EditorState.lineSeparator.of('\r\n');
+  }
+  return [];
+}
+
+const baseKeymap = CM.keymap.of([
+  {key: 'Ctrl-m', run: CM.cursorMatchingBracket, shift: CM.selectMatchingBracket},
+  {key: 'Mod-/', run: CM.toggleComment},
+  {key: 'Mod-d', run: CM.selectNextOccurrence},
+  {key: 'Alt-ArrowLeft', mac: 'Ctrl-ArrowLeft', run: CM.cursorSubwordBackward, shift: CM.selectSubwordBackward},
+  {key: 'Alt-ArrowRight', mac: 'Ctrl-ArrowRight', run: CM.cursorSubwordForward, shift: CM.selectSubwordForward},
+  ...CM.closeBracketsKeymap,
+  ...CM.standardKeymap,
+  ...CM.historyKeymap,
+]);
+
+function themeIsDark(): boolean {
+  const setting = Common.Settings.Settings.instance().moduleSetting('uiTheme').get();
+  return setting === 'systemPreferred' ? window.matchMedia('(prefers-color-scheme: dark)').matches : setting === 'dark';
+}
+
+const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
+
+export function baseConfiguration(text: string): CM.Extension {
+  return [
+    editorTheme,
+    themeIsDark() ? dummyDarkTheme : [],
+    CM.highlightSpecialChars(),
+    CM.history(),
+    CM.drawSelection(),
+    CM.EditorState.allowMultipleSelections.of(true),
+    CM.indentOnInput(),
+    CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+    CM.closeBrackets(),
+    baseKeymap,
+    tabMovesFocus,
+    bracketMatching,
+    indentUnit,
+    CM.Prec.fallback(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
+    detectLineSeparator(text),
+    CM.tooltips({position: 'absolute'}),
+  ];
+}
+
+class CompletionHint extends CM.WidgetType {
+  constructor(readonly text: string) {
+    super();
+  }
+
+  eq(other: CompletionHint): boolean {
+    return this.text === other.text;
+  }
+
+  toDOM(): HTMLElement {
+    const span = document.createElement('span');
+    span.className = 'cm-completionHint';
+    span.textContent = this.text;
+    return span;
+  }
+}
+
+export const showCompletionHint = CM.ViewPlugin.fromClass(class {
+  decorations: CM.DecorationSet = CM.Decoration.none;
+  currentHint: string|null = null;
+
+  update(update: CM.ViewUpdate): void {
+    const top = this.currentHint = this.topCompletion(update.state);
+    if (!top) {
+      this.decorations = CM.Decoration.none;
+    } else {
+      this.decorations = CM.Decoration.set(
+          [CM.Decoration.widget({widget: new CompletionHint(top), side: 1}).range(update.state.selection.main.head)]);
+    }
+  }
+
+  topCompletion(state: CM.EditorState): string|null {
+    const completions = CM.currentCompletions(state);
+    if (!completions.length) {
+      return null;
+    }
+    const {label} = completions[0];
+    if (label.length > 100 || label.indexOf('\n') > -1) {
+      return null;
+    }
+    const pos = state.selection.main.head;
+    const lineBefore = state.doc.lineAt(pos);
+    if (pos !== lineBefore.to) {
+      return null;
+    }
+    const textBefore = lineBefore.text.slice(0, pos - lineBefore.from);
+    for (let i = label.length - 1; i > 0; i--) {
+      if (textBefore.endsWith(label.slice(0, i)) && !/\w/.test(textBefore.charAt(textBefore.length - i - 1))) {
+        return label.slice(i);
+      }
+    }
+    return null;
+  }
+}, {decorations: p => p.decorations});
+
+export function contentIncludingHint(view: CM.EditorView): string {
+  const plugin = view.plugin(showCompletionHint);
+  let content = view.state.doc.toString();
+  if (plugin && plugin.currentHint) {
+    const {head} = view.state.selection.main;
+    content = content.slice(0, head) + plugin.currentHint + content.slice(head);
+  }
+  return content;
+}

package/front_end/{panels/console/components/components.ts → ui/components/text_editor/text_editor.ts}

@@ -2,8 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as SidebarDeprecation from './SidebarDeprecation.js';
-
-export {
-  SidebarDeprecation,
-};
+export * as Config from './config.js';
+export * as TextEditor from './TextEditor.js';

package/front_end/ui/components/text_editor/theme.ts

@@ -0,0 +1,113 @@
+// 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.
+
+import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
+
+export const editorTheme = CM.EditorView.theme({
+  '&.cm-editor': {
+    color: 'color: var(--color-text-primary)',
+  },
+
+  '.cm-scroller': {
+    lineHeight: '1.2em',
+    fontFamily: 'var(--source-code-font-family)',
+    fontSize: 'var(--source-code-font-size)',
+  },
+
+  '.cm-panels, .cm-tooltip': {
+    backgroundColor: 'var(--color-background-elevation-1)',
+  },
+
+  '.cm-selectionMatch': {
+    backgroundColor: 'var(--color-selection-highlight)',
+  },
+
+  '.cm-cursor': {
+    borderLeft: '1px solid var(--color-background-inverted)',
+  },
+
+  '&.cm-readonly .cm-cursor': {
+    display: 'none',
+  },
+
+  '.cm-cursor-secondary': {
+    borderLeft: '1px solid var(--color-secondary-cursor)',
+  },
+
+  '.cm-selectionBackground': {
+    background: 'var(--color-editor-selection-selection)',
+  },
+
+  '&.cm-focused .cm-selectionBackground': {
+    background: 'var(--color-editor-selection)',
+  },
+
+  '.cm-gutters': {
+    borderRight: '1px solid var(--color-details-hairline)',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'var(--color-background)',
+  },
+
+  '.cm-lineNumbers .cm-gutterElement': {
+    color: 'var(--color-line-number)',
+    padding: '0 3px 0 9px',
+  },
+
+  '&:focus-within .cm-matchingBracket': {
+    color: 'inherit',
+    backgroundColor: 'var(--color-matching-bracket-background)',
+    borderBottom: '1px solid var(--color-matching-bracket-underline)',
+  },
+
+  '&:focus-within .cm-nonmatchingBracket': {
+    backgroundColor: 'var(--color-nonmatching-bracket-background)',
+    borderBottom: '1px solid var(--color-nonmatching-bracket-underline)',
+  },
+
+  '.cm-trailingWhitespace': {
+    backgroundColor: 'var(--color-error-text)',
+  },
+
+  '.cm-highlightedTab': {
+    display: 'inline-block',
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      borderBottom: '1px solid var(--color-text-secondary)',
+      position: 'absolute',
+      left: '5%',
+      bottom: '50%',
+      width: '90%',
+      pointerEvents: 'none',
+    },
+  },
+
+  '.cm-highlightedSpaces:before': {
+    color: 'var(--color-text-secondary)',
+    content: 'attr(data-display)',
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+
+  '.cm-placeholder': {
+    color: 'var(--color-text-secondary)',
+  },
+
+  '.cm-completionHint': {
+    color: 'var(--color-text-secondary)',
+  },
+
+  '.cm-highlightedLine': {
+    animation: 'cm-fading-highlight 2s 0s',
+  },
+
+  '@keyframes cm-fading-highlight': {
+    from: {
+      backgroundColor: 'var(--color-highlighted-line)',
+    },
+    to: {
+      backgroundColor: 'transparent',
+    },
+  },
+});

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -0,0 +1,144 @@
+// 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.
+
+import * as Platform from '../../../core/platform/platform.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+
+import textPromptStyles from './textPrompt.css.js';
+
+export interface TextPromptData {
+  ariaLabel: string;
+  prefix: string;
+  suggestion: string;
+}
+
+export class PromptInputEvent extends Event {
+  static readonly eventName = 'promptinputchanged';
+  data: string;
+
+  constructor(value: string) {
+    super(PromptInputEvent.eventName);
+    this.data = value;
+  }
+}
+
+export class TextPrompt extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-text-prompt`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private ariaLabelText = '';
+  private prefixText = '';
+  private suggestionText = '';
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [textPromptStyles];
+  }
+
+  set data(data: TextPromptData) {
+    this.ariaLabelText = data.ariaLabel;
+    this.prefixText = data.prefix;
+    this.suggestionText = data.suggestion;
+    this.render();
+  }
+
+  get data(): TextPromptData {
+    return {
+      ariaLabel: this.ariaLabelText,
+      prefix: this.prefixText,
+      suggestion: this.suggestionText,
+    };
+  }
+
+  focus(): void {
+    this.input().focus();
+  }
+
+  private input(): HTMLElement {
+    const inputElement = this.shadow.querySelector('.text-prompt-input');
+    if (!inputElement) {
+      throw new Error('Expected an input element!');
+    }
+    return /** @type {!HTMLElement} */ inputElement as HTMLElement;
+  }
+
+  moveCaretToEndOfInput(): void {
+    this.setSelectedRange(this.text().length, this.text().length);
+  }
+
+  onInput(): void {
+    this.dispatchEvent(new PromptInputEvent(this.text().trim()));
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
+      event.preventDefault();
+    }
+  }
+
+  setSelectedRange(startIndex: number, endIndex: number): void {
+    if (startIndex < 0) {
+      throw new RangeError('Selected range start must be a nonnegative integer');
+    }
+    const textContentLength = this.text().length;
+    if (endIndex > textContentLength) {
+      endIndex = textContentLength;
+    }
+    if (endIndex < startIndex) {
+      endIndex = startIndex;
+    }
+    const inputBox = this.input();
+    const range = document.createRange();
+    range.setStart(inputBox, startIndex);
+    range.setEnd(inputBox, endIndex);
+    const selection = window.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+
+  setPrefix(prefix: string): void {
+    this.prefixText = prefix;
+    this.render();
+  }
+
+  setSuggestion(suggestion: string): void {
+    this.suggestionText = suggestion;
+    this.render();
+  }
+
+  setText(text: string): void {
+    this.input().textContent = text;
+    if (this.input().hasFocus()) {
+      this.moveCaretToEndOfInput();
+      this.input().scrollIntoView();
+    }
+  }
+
+  private text(): string {
+    return this.input().textContent || '';
+  }
+
+  private render(): void {
+    const output = LitHtml.html`
+      <span class="prefix">${this.prefixText}</span>
+      <input aria-label=${this.ariaLabelText}>
+        <div class="text-prompt-input" spellcheck="false" contenteditable="plaintext-only" @keydown=${
+        this.onKeyDown} @input=${this.onInput} suggestion=" ${this.suggestionText}"></div>
+      </input>`;
+    LitHtml.render(output, this.shadow, {host: this});
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-text-prompt', TextPrompt);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-text-prompt': TextPrompt;
+  }
+
+  interface HTMLElementEventMap {
+    'promptinputchanged': PromptInputEvent;
+  }
+}

package/front_end/ui/components/text_prompt/textPrompt.css

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+:host {
+  white-space: pre;
+  overflow: hidden;
+  display: inline-flex;
+}
+
+.prefix {
+  color: var(--color-primary);
+}
+
+input {
+  width: 0;
+  border: none;
+  outline: none;
+}
+
+.text-prompt-input {
+  border: none;
+  outline: none;
+  display: inline;
+  flex: 1 0 auto;
+}
+
+.text-prompt-input::after {
+  content: attr(suggestion);
+  color: var(--color-background-highlight);
+}

package/front_end/ui/components/text_prompt/text_prompt.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 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.
+
+import * as TextPrompt from './TextPrompt.js';
+
+export {
+  TextPrompt,
+};

package/front_end/ui/legacy/ARIAUtils.ts

@@ -462,23 +462,26 @@ function hideFromLayout(element: HTMLElement): void {
 
 let alertElement: HTMLElement|undefined;
 
-function createAriaAlertElement(): HTMLElement {
-  const element = document.body.createChild('div') as HTMLElement;
-  hideFromLayout(element);
-  element.setAttribute('role', 'alert');
-  element.setAttribute('aria-atomic', 'true');
-  return element;
+export function alertElementInstance(): HTMLElement {
+  if (!alertElement) {
+    const element = document.body.createChild('div') as HTMLElement;
+    hideFromLayout(element);
+    element.setAttribute('role', 'alert');
+    element.setAttribute('aria-atomic', 'true');
+    alertElement = element;
+  }
+  return alertElement;
 }
+
 /**
  * This function is used to announce a message with the screen reader.
  * Setting the textContent would allow the SR to access the offscreen element via browse mode
  */
 export function alert(message: string): void {
-  if (!alertElement) {
-    alertElement = createAriaAlertElement();
-  }
+  const element = alertElementInstance();
+
   // We first set the textContent to blank so that the string will announce even if it is replaced
   // with the same string.
-  alertElement.textContent = '';
-  alertElement.textContent = Platform.StringUtilities.trimEndWithMaxLength(message, 10000);
+  element.textContent = '';
+  element.textContent = Platform.StringUtilities.trimEndWithMaxLength(message, 10000);
 }

package/front_end/ui/legacy/TabbedPane.ts

@@ -70,6 +70,10 @@ const UIStrings = {
   *@description Text on a menu option to close all the drawers except Console when right click on a drawer title
   */
   closeAll: 'Close all',
+  /**
+  *@description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
+  */
+  previewFeature: 'Preview feature',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -224,9 +228,9 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   appendTab(
       id: string, tabTitle: string, view: Widget, tabTooltip?: string, userGesture?: boolean, isCloseable?: boolean,
-      index?: number): void {
+      isPreviewFeature?: boolean, index?: number): void {
     const closeable = typeof isCloseable === 'boolean' ? isCloseable : Boolean(this.closeableTabs);
-    const tab = new TabbedPaneTab(this, id, tabTitle, closeable, view, tabTooltip);
+    const tab = new TabbedPaneTab(this, id, tabTitle, closeable, Boolean(isPreviewFeature), view, tabTooltip);
     tab.setDelegate((this.delegate as TabbedPaneTabDelegate));
     console.assert(!this.tabsById.has(id), `Tabbed pane already contains a tab with id '${id}'`);
     this.tabsById.set(id, tab);
@@ -966,6 +970,7 @@ export type EventTypes = {
 
 export class TabbedPaneTab {
   closeable: boolean;
+  previewFeature = false;
   private readonly tabbedPane: TabbedPane;
   idInternal: string;
   private titleInternal: string;
@@ -980,8 +985,11 @@ export class TabbedPaneTab {
   private delegate?: TabbedPaneTabDelegate;
   private titleElement?: HTMLElement;
   private dragStartX?: number;
-  constructor(tabbedPane: TabbedPane, id: string, title: string, closeable: boolean, view: Widget, tooltip?: string) {
+  constructor(
+      tabbedPane: TabbedPane, id: string, title: string, closeable: boolean, previewFeature: boolean, view: Widget,
+      tooltip?: string) {
     this.closeable = closeable;
+    this.previewFeature = previewFeature;
     this.tabbedPane = tabbedPane;
     this.idInternal = id;
     this.titleInternal = title;
@@ -1107,6 +1115,12 @@ export class TabbedPaneTab {
       this.titleElement = titleElement;
     }
 
+    if (this.previewFeature) {
+      const previewIcon = this.createPreviewIcon();
+      tabElement.appendChild(previewIcon);
+      tabElement.classList.add('preview');
+    }
+
     if (this.closeable) {
       const closeIcon = this.createCloseIconButton();
       tabElement.appendChild(closeIcon);
@@ -1148,6 +1162,21 @@ export class TabbedPaneTab {
     return closeIconContainer;
   }
 
+  private createPreviewIcon(): HTMLDivElement {
+    const previewIcon = document.createElement('div');
+    previewIcon.classList.add('preview-icon');
+    const closeIcon = new IconButton.Icon.Icon();
+    closeIcon.data = {
+      iconName: 'ic_preview_feature',
+      color: 'var(--override-tabbed-pane-preview-icon-color)',
+      width: '14px',
+    };
+    previewIcon.appendChild(closeIcon);
+    previewIcon.setAttribute('title', i18nString(UIStrings.previewFeature));
+    previewIcon.setAttribute('aria-label', i18nString(UIStrings.previewFeature));
+    return previewIcon;
+  }
+
   private isCloseIconClicked(element: HTMLElement): boolean {
     return element?.classList.contains('tabbed-pane-close-button') ||
         element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;