chrome-devtools-frontend 1.0.1625079 → 1.0.1625854

package/front_end/panels/application/application.ts

@@ -13,7 +13,6 @@ import * as DeviceBoundSessionsModel from './DeviceBoundSessionsModel.js';
 import * as DeviceBoundSessionsTreeElement from './DeviceBoundSessionsTreeElement.js';
 import * as DeviceBoundSessionsView from './DeviceBoundSessionsView.js';
 import * as DOMStorageItemsView from './DOMStorageItemsView.js';
-import * as DOMStorageModel from './DOMStorageModel.js';
 import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
 import * as ExtensionStorageModel from './ExtensionStorageModel.js';
 import * as FrameDetailsView from './FrameDetailsView.js';
@@ -58,7 +57,6 @@ export {
   DeviceBoundSessionsTreeElement,
   DeviceBoundSessionsView,
   DOMStorageItemsView,
-  DOMStorageModel,
   ExtensionStorageItemsView,
   ExtensionStorageModel,
   FrameDetailsView,

package/front_end/panels/console/ConsolePrompt.ts

@@ -190,7 +190,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.editorSetForTest();
 
     // Record the console tool load time after the console prompt constructor is complete.
-    Host.userMetrics.panelLoaded('console', 'DevTools.Launch.Console');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('console', 'DevTools.Launch.Console');
   }
 
   private eagerSettingChanged(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -571,9 +571,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.consoleMessages = [];
     this.consoleGroupStarts = [];
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    this.aiCodeCompletionConfig =
-        AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionEnabled(devtoolsLocale.locale) ? {
+    this.aiCodeCompletionConfig = AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionAvailable() ?
+        {
           completionContext: {
             getPrefix: this.getConsoleMessageHistory.bind(this),
             additionalFiles: [{
@@ -597,7 +596,7 @@ export class ConsoleView extends UI.Widget.VBox implements
           onResponseReceived: this.#onAiCodeCompletionResponseReceived.bind(this),
           panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE,
         } :
-                                                                                                              undefined;
+        undefined;
 
     this.prompt = new ConsolePrompt(this.aiCodeCompletionConfig);
     this.prompt.show(this.promptElement);

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -11,9 +11,7 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import type {StylesContainer} from './StylesContainer.js';
 
 const UIStrings = {
   /**
@@ -403,153 +401,3 @@ export class ShadowSwatchPopoverHelper extends Common.ObjectWrapper.ObjectWrappe
     delete this.originalPropertyText;
   }
 }
-
-export class FontEditorSectionManager {
-  private readonly treeElementMap: Map<string, StylePropertyTreeElement>;
-  private readonly swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper;
-  private readonly section: StylePropertiesSection;
-  private stylesContainer: StylesContainer|null;
-  private fontEditor: InlineEditor.FontEditor.FontEditor|null;
-  private scrollerElement: Element|null;
-  private readonly boundFontChanged:
-      (event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>) => void;
-  private readonly boundOnScroll: () => void;
-  private readonly boundResized: () => void;
-  constructor(
-      swatchPopoverHelper: InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper, section: StylePropertiesSection) {
-    this.treeElementMap = new Map();
-
-    this.swatchPopoverHelper = swatchPopoverHelper;
-
-    this.section = section;
-
-    this.stylesContainer = null;
-
-    this.fontEditor = null;
-
-    this.scrollerElement = null;
-
-    this.boundFontChanged = this.fontChanged.bind(this);
-    this.boundOnScroll = this.onScroll.bind(this);
-    this.boundResized = this.fontEditorResized.bind(this);
-  }
-
-  private fontChanged(event: Common.EventTarget.EventTargetEvent<InlineEditor.FontEditor.FontChangedEvent>): void {
-    const {propertyName, value} = event.data;
-    const treeElement = this.treeElementMap.get(propertyName);
-    void this.updateFontProperty(propertyName, value, treeElement);
-  }
-
-  private async updateFontProperty(propertyName: string, value: string, treeElement?: StylePropertyTreeElement):
-      Promise<void> {
-    if (treeElement?.treeOutline && treeElement.valueElement && treeElement.property.parsedOk &&
-        treeElement.property.range) {
-      let elementRemoved = false;
-      treeElement.valueElement.textContent = value;
-      treeElement.property.value = value;
-      let styleText;
-      const propertyName = treeElement.property.name;
-      if (value.length) {
-        styleText = treeElement.renderedPropertyText();
-      } else {
-        styleText = '';
-        elementRemoved = true;
-        this.fixIndex(treeElement.property.index);
-      }
-      this.treeElementMap.set(propertyName, treeElement);
-      await treeElement.applyStyleText(styleText, true);
-      if (elementRemoved) {
-        this.treeElementMap.delete(propertyName);
-      }
-    } else if (value.length) {
-      const newProperty = this.section.addNewBlankProperty();
-      if (newProperty) {
-        newProperty.property.name = propertyName;
-        newProperty.property.value = value;
-        newProperty.updateTitle();
-        await newProperty.applyStyleText(newProperty.renderedPropertyText(), true);
-        this.treeElementMap.set(newProperty.property.name, newProperty);
-      }
-    }
-    this.section.onpopulate();
-    this.swatchPopoverHelper.reposition();
-    return;
-  }
-
-  private fontEditorResized(): void {
-    this.swatchPopoverHelper.reposition();
-  }
-
-  private fixIndex(removedIndex: number): void {
-    for (const treeElement of this.treeElementMap.values()) {
-      if (treeElement.property.index > removedIndex) {
-        treeElement.property.index -= 1;
-      }
-    }
-  }
-
-  private createPropertyValueMap(): Map<string, string> {
-    const propertyMap = new Map<string, string>();
-    for (const fontProperty of this.treeElementMap) {
-      const propertyName = (fontProperty[0]);
-      const treeElement = fontProperty[1];
-      if (treeElement.property.value.length) {
-        propertyMap.set(propertyName, treeElement.property.value);
-      } else {
-        this.treeElementMap.delete(propertyName);
-      }
-    }
-    return propertyMap;
-  }
-
-  registerFontProperty(treeElement: StylePropertyTreeElement): void {
-    const propertyName = treeElement.property.name;
-    if (this.treeElementMap.has(propertyName)) {
-      const treeElementFromMap = this.treeElementMap.get(propertyName);
-      if (!treeElement.overloaded() || (treeElementFromMap?.overloaded())) {
-        this.treeElementMap.set(propertyName, treeElement);
-      }
-    } else {
-      this.treeElementMap.set(propertyName, treeElement);
-    }
-  }
-
-  async showPopover(iconElement: Element, stylesContainer: StylesContainer): Promise<void> {
-    if (this.swatchPopoverHelper.isShowing()) {
-      this.swatchPopoverHelper.hide(true);
-      return;
-    }
-    this.stylesContainer = stylesContainer;
-    const propertyValueMap = this.createPropertyValueMap();
-    this.fontEditor = new InlineEditor.FontEditor.FontEditor(propertyValueMap);
-    this.fontEditor.addEventListener(InlineEditor.FontEditor.Events.FONT_CHANGED, this.boundFontChanged);
-    this.fontEditor.addEventListener(InlineEditor.FontEditor.Events.FONT_EDITOR_RESIZED, this.boundResized);
-    this.swatchPopoverHelper.show(this.fontEditor, iconElement, this.onPopoverHidden.bind(this));
-    this.scrollerElement = iconElement.enclosingNodeOrSelfWithClass('style-panes-wrapper');
-    if (this.scrollerElement) {
-      this.scrollerElement.addEventListener('scroll', this.boundOnScroll, false);
-    }
-
-    this.stylesContainer.setEditingStyle(true);
-  }
-
-  private onScroll(): void {
-    this.swatchPopoverHelper.hide(true);
-  }
-
-  private onPopoverHidden(): void {
-    if (this.scrollerElement) {
-      this.scrollerElement.removeEventListener('scroll', this.boundOnScroll, false);
-    }
-    this.section.onpopulate();
-    if (this.fontEditor) {
-      this.fontEditor.removeEventListener(InlineEditor.FontEditor.Events.FONT_CHANGED, this.boundFontChanged);
-    }
-    this.fontEditor = null;
-    if (this.stylesContainer) {
-      this.stylesContainer.setEditingStyle(false);
-    }
-    this.section.resetToolbars();
-    this.section.onpopulate();
-  }
-}

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
@@ -55,7 +54,6 @@ import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -1233,12 +1231,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
-      const icon = new Icon();
-      icon.name = 'small-status-dot';
-      icon.style.color = 'var(--icon-error)';
-      icon.classList.add('extra-small');
-      icon.style.setProperty('vertical-align', 'middle');
-      this.setLeadingIcons([icon]);
+      this.setLeadingIcons([
+        html`<devtools-icon class="extra-small" name="small-status-dot" style="color:var(--icon-error); vertical-align:middle"></devtools-icon>`
+      ]);
       this.listItemNode.classList.add('detached-elements-detached-node');
       this.listItemNode.style.setProperty('display', '-webkit-box');
       this.listItemNode.setAttribute('title', 'Retained Node');
@@ -2375,7 +2370,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private addNewAttribute(): boolean {
     // Cannot just convert the textual html into an element without
     // a parent node. Use a temporary span container for the HTML.
-    const container = document.createElement('span');
+    const container = document.createDocumentFragment();
 
     Lit.render(renderAttribute({name: ' ', value: ''}, null, false, this.nodeInternal), container);
     const attr = container.firstElementChild as HTMLElement;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -39,7 +39,6 @@ import * 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 Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
@@ -54,7 +53,6 @@ import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
-import {FontEditorSectionManager} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
@@ -166,9 +164,6 @@ export class StylePropertiesSection {
   private showAllButton: Buttons.Button.Button;
   protected selectorElement: HTMLSpanElement;
   private readonly newStyleRuleToolbar: UI.Toolbar.Toolbar|undefined;
-  private readonly fontEditorToolbar: UI.Toolbar.Toolbar|undefined;
-  private readonly fontEditorSectionManager: FontEditorSectionManager|undefined;
-  private readonly fontEditorButton: UI.Toolbar.ToolbarButton|undefined;
   private selectedSinceMouseDown: boolean;
   private readonly elementToSelectorIndex = new WeakMap<Element, number>();
   navigable: boolean|null|undefined;
@@ -309,31 +304,6 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.editable) {
-      this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
-      this.fontEditorSectionManager = new FontEditorSectionManager(this.stylesContainer.swatchPopoverHelper(), this);
-      this.fontEditorButton =
-          new UI.Toolbar.ToolbarButton('Font Editor', 'custom-typography', undefined, 'font-editor');
-      this.fontEditorButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-        this.onFontEditorButtonClicked();
-      }, this);
-      this.fontEditorButton.element.addEventListener('keydown', event => {
-        if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
-          event.consume(true);
-          this.onFontEditorButtonClicked();
-        }
-      }, false);
-      this.fontEditorToolbar.appendToolbarItem(this.fontEditorButton);
-
-      if (this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Inline) {
-        if (this.newStyleRuleToolbar) {
-          this.newStyleRuleToolbar.classList.add('shifted-toolbar');
-        }
-      } else {
-        this.fontEditorToolbar.classList.add('font-toolbar-hidden');
-      }
-    }
-
     this.selectorElement.addEventListener('click', this.handleSelectorClick.bind(this), false);
     this.selectorElement.setAttribute(
         'jslog', `${VisualLogging.cssRuleHeader('selector').track({click: true, change: true})}`);
@@ -409,31 +379,6 @@ export class StylePropertiesSection {
     return this.sectionIdx;
   }
 
-  registerFontProperty(treeElement: StylePropertyTreeElement): void {
-    if (this.fontEditorSectionManager) {
-      this.fontEditorSectionManager.registerFontProperty(treeElement);
-    }
-    if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.classList.remove('font-toolbar-hidden');
-      if (this.newStyleRuleToolbar) {
-        this.newStyleRuleToolbar.classList.add('shifted-toolbar');
-      }
-    }
-  }
-
-  resetToolbars(): void {
-    if (this.stylesContainer.swatchPopoverHelper().isShowing() ||
-        this.styleInternal.type === SDK.CSSStyleDeclaration.Type.Inline) {
-      return;
-    }
-    if (this.fontEditorToolbar) {
-      this.fontEditorToolbar.classList.add('font-toolbar-hidden');
-    }
-    if (this.newStyleRuleToolbar) {
-      this.newStyleRuleToolbar.classList.remove('shifted-toolbar');
-    }
-  }
-
   static createRuleOriginNode(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, linkifier: Components.Linkifier.Linkifier,
       rule: SDK.CSSRule.CSSRule|null): LitTemplate {
@@ -678,12 +623,6 @@ export class StylePropertiesSection {
     }
   }
 
-  private onFontEditorButtonClicked(): void {
-    if (this.fontEditorSectionManager && this.fontEditorButton) {
-      void this.fontEditorSectionManager.showPopover(this.fontEditorButton.element, this.stylesContainer);
-    }
-  }
-
   style(): SDK.CSSStyleDeclaration.CSSStyleDeclaration {
     return this.styleInternal;
   }

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -8,7 +8,6 @@ import * 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 Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
@@ -1599,20 +1598,6 @@ export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
   }
 }
 
-// clang-format off
-export class FontRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FontMatch) {
-  // clang-format on
-  constructor(readonly treeElement: StylePropertyTreeElement) {
-    super();
-  }
-
-  override render(match: SDK.CSSPropertyParserMatchers.FontMatch, context: RenderingContext): Node[] {
-    this.treeElement.section().registerFontProperty(this.treeElement);
-    const {nodes} = Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context);
-    return nodes;
-  }
-}
-
 // clang-format off
 export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.GridTemplateMatch) {
   // clang-format on
@@ -2462,9 +2447,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
             this.getComputedStyles() ?? new Map(), this.getComputedStyleExtraFields()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
-      renderers.push(new FontRenderer(this));
-    }
     this.listItemElement.removeChildren();
     const matchedResult = this.property.parseValue(this.matchedStyles(), this.computedStyles);
     this.valueElement = Renderer.renderValueElement(this.property, matchedResult, renderers).valueElement;
@@ -3610,9 +3592,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     // This occurs when deleting the last index of a StylePropertiesSection as this.style._allProperties array gets updated
     // before we index it when setting the value for updatedProperty
     const deleteProperty = majorChange && !styleText.length;
-    if (deleteProperty) {
-      this.#parentSection.resetToolbars();
-    } else if (!deleteProperty && updatedProperty) {
+    if (!deleteProperty && updatedProperty) {
       this.property = updatedProperty;
     }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -32,9 +32,8 @@ export class StylesAiCodeCompletionProvider {
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
-      throw new Error('AI code completion feature in Styles is not enabled.');
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()) {
+      throw new Error('AI code completion feature in Styles is not available.');
     }
     this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -82,7 +81,10 @@ export class StylesAiCodeCompletionProvider {
   async #updateAiCodeCompletionState(): Promise<void> {
     const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
     const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
-    const isEnabled = this.#aiCodeCompletionSetting.get();
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance().locale;
+    const isEnabled =
+        AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale) &&
+        this.#aiCodeCompletionSetting.get();
     if (isAvailable && isEnabled) {
       this.#setupAiCodeCompletion();
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -275,8 +275,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     });
 
-    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
-    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+    if (AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesAvailable()) {
       this.aiCodeCompletionConfig = {
         completionContext: {},
         generationContext: {},
@@ -1045,7 +1044,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.swatchPopoverHelper().reposition();
 
     // Record the elements tool load time after the sidepane has loaded.
-    Host.userMetrics.panelLoaded('elements', 'DevTools.Launch.Elements');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelLoaded('elements', 'DevTools.Launch.Elements');
 
     this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED, {hasMatchedStyles: false});
   }

package/front_end/panels/elements/stylesSidebarPane.css

@@ -217,10 +217,6 @@
   width: 100%;
 }
 
-.font-toolbar-hidden {
-  visibility: hidden;
-}
-
 .sidebar-separator {
   background-color: var(--sys-color-surface2);
   padding: 0 5px;
@@ -262,10 +258,6 @@
 
     --toolbar-height: 16px;
   }
-
-  &.shifted-toolbar {
-    padding-right: 32px;
-  }
 }
 
 .styles-pane:not(.is-editing-style)

package/front_end/panels/emulation/AdvancedApp.ts

@@ -13,7 +13,7 @@ import {type Bounds, Events, InspectedPagePlaceholder} from './InspectedPagePlac
 
 let appInstance: AdvancedApp;
 
-export class AdvancedApp implements Common.App.App {
+export class AdvancedApp implements UI.App.App {
   private rootSplitWidget!: UI.SplitWidget.SplitWidget;
   private deviceModeView!: DeviceModeWrapper;
   private inspectedPagePlaceholder!: InspectedPagePlaceholder;
@@ -188,7 +188,7 @@ globalThis.Emulation.AdvancedApp = AdvancedApp;
 
 let advancedAppProviderInstance: AdvancedAppProvider;
 
-export class AdvancedAppProvider implements Common.AppProvider.AppProvider {
+export class AdvancedAppProvider implements UI.AppProvider.AppProvider {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): AdvancedAppProvider {
@@ -200,7 +200,7 @@ export class AdvancedAppProvider implements Common.AppProvider.AppProvider {
     return advancedAppProviderInstance;
   }
 
-  createApp(): Common.App.App {
+  createApp(): UI.App.App {
     return AdvancedApp.instance();
   }
 }