chrome-devtools-frontend 1.0.928589 → 1.0.929998

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -274,6 +274,14 @@ export class UserAgentClientHintsForm extends HTMLElement {
     this.dispatchEvent(new ClientHintsChangeEvent());
     this.brandsModifiedAriaMessage = i18nString(UIStrings.deletedBrand);
     this.render();
+
+    // after deleting a brand row, focus on next Brand input if available,
+    // otherwise focus on the "Add Brand" button
+    let nextFocusElement = this.shadowRoot?.getElementById(`brand-${index + 1}-input`);
+    if (!nextFocusElement) {
+      nextFocusElement = this.shadowRoot?.getElementById('add-brand-button');
+    }
+    (nextFocusElement as HTMLElement)?.focus();
   };
 
   private handleAddBrandClick = (): void => {
@@ -455,6 +463,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
             type="text"
             @input="${handleBrandBrowserChange}"
             .value="${brand}"
+            id="brand-${index + 1}-input"
             placeholder="${i18nString(UIStrings.brandName)}"
             aria-label="${i18nString(UIStrings.brandNameAriaLabel, {
         PH1: index + 1,
@@ -495,6 +504,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
         class="add-container full-row"
         role="button"
         tabindex="0"
+        id="add-brand-button"
+        aria-label="${i18nString(UIStrings.addBrand)}"
         @click="${this.handleAddBrandClick}"
         @keypress="${this.handleAddBrandKeyPress}"
       >

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -178,7 +178,8 @@ export class DebuggerPlugin extends Plugin {
   private readonly boundGutterClick:
       (arg0: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>) => void;
   private readonly breakpointDecorations: Set<BreakpointDecoration>;
-  private readonly decorationByBreakpoint: Map<Bindings.BreakpointManager.Breakpoint, BreakpointDecoration>;
+  private readonly decorationByBreakpoint:
+      Map<Bindings.BreakpointManager.Breakpoint, Map<string, BreakpointDecoration>>;
   private readonly possibleBreakpointsRequested: Set<number>;
   private scriptFileForDebuggerModel:
       Map<SDK.DebuggerModel.DebuggerModel, Bindings.ResourceScriptMapping.ResourceScriptFile>;
@@ -1585,7 +1586,14 @@ export class DebuggerPlugin extends Plugin {
       decoration.element.addEventListener('contextmenu', this.inlineBreakpointContextMenu.bind(this, decoration), true);
       this.breakpointDecorations.add(decoration);
     }
-    this.decorationByBreakpoint.set(breakpoint, decoration);
+
+    let uiLocationsForBreakpoint = this.decorationByBreakpoint.get(breakpoint);
+    if (!uiLocationsForBreakpoint) {
+      uiLocationsForBreakpoint = new Map();
+      this.decorationByBreakpoint.set(breakpoint, uiLocationsForBreakpoint);
+    }
+    uiLocationsForBreakpoint.set(uiLocation.id(), decoration);
+
     this.updateBreakpointDecoration(decoration);
     if (breakpoint.enabled() && !lineDecorations.length) {
       this.possibleBreakpointsRequested.add(editorLocation.lineNumber);
@@ -1645,11 +1653,22 @@ export class DebuggerPlugin extends Plugin {
       return;
     }
     const {breakpoint, uiLocation} = event.data;
-    const decoration = this.decorationByBreakpoint.get(breakpoint);
+
+    const uiLocationsForBreakpoint = this.decorationByBreakpoint.get(breakpoint);
+    if (!uiLocationsForBreakpoint) {
+      return;
+    }
+
+    const decoration = uiLocationsForBreakpoint.get(uiLocation.id());
+    uiLocationsForBreakpoint.delete(uiLocation.id());
+
+    if (uiLocationsForBreakpoint.size === 0) {
+      this.decorationByBreakpoint.delete(breakpoint);
+    }
+
     if (!decoration) {
       return;
     }
-    this.decorationByBreakpoint.delete(breakpoint);
 
     const editorLocation = this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
     decoration.breakpoint = null;

package/front_end/panels/sources/FilteredUISourceCodeListProvider.ts

@@ -123,7 +123,7 @@ export class FilteredUISourceCodeListProvider extends QuickOpen.FilteredListWidg
     const fileNameIndex = fullDisplayName.lastIndexOf('/');
 
     titleElement.textContent = uiSourceCode.displayName() + (this.queryLineNumberAndColumnNumber || '');
-    this.renderSubtitleElement(subtitleElement, fullDisplayName);
+    this.renderSubtitleElement(subtitleElement, fullDisplayName.substring(0, fileNameIndex + 1));
     /** @type {!HTMLElement} */ UI.Tooltip.Tooltip.install((subtitleElement as HTMLElement), fullDisplayName);
     const ranges = [];
     for (let i = 0; i < indexes.length; ++i) {

package/front_end/ui/components/helpers/get-stylesheet.ts

@@ -53,4 +53,8 @@ export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'ui/legacy/suggestBox.css',
   'ui/legacy/treeoutline.css',
   'ui/legacy/softContextMenu.css',
+  'ui/legacy/splitWidget.css',
+  'ui/legacy/components/source_frame/jsonView.css',
+  'ui/legacy/searchableView.css',
+  'ui/legacy/toolbar.css',
 ];

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

@@ -54,12 +54,12 @@ export class TextPrompt extends HTMLElement {
     this.input().focus();
   }
 
-  private input(): HTMLElement {
-    const inputElement = this.shadow.querySelector('.text-prompt-input');
+  private input(): HTMLInputElement {
+    const inputElement = this.shadow.querySelector<HTMLInputElement>('input');
     if (!inputElement) {
       throw new Error('Expected an input element!');
     }
-    return /** @type {!HTMLElement} */ inputElement as HTMLElement;
+    return inputElement;
   }
 
   moveCaretToEndOfInput(): void {
@@ -67,6 +67,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   onInput(): void {
+    this.suggestion().textContent = this.text();
     this.dispatchEvent(new PromptInputEvent(this.text().trim()));
   }
 
@@ -87,15 +88,7 @@ export class TextPrompt extends HTMLElement {
     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);
-    }
+    this.input().setSelectionRange(startIndex, endIndex);
   }
 
   setPrefix(prefix: string): void {
@@ -109,24 +102,33 @@ export class TextPrompt extends HTMLElement {
   }
 
   setText(text: string): void {
-    this.input().textContent = text;
+    this.input().value = text;
+    this.suggestion().textContent = this.text();
+
     if (this.input().hasFocus()) {
       this.moveCaretToEndOfInput();
       this.input().scrollIntoView();
     }
   }
 
+  private suggestion(): HTMLSpanElement {
+    const suggestionElement = this.shadow.querySelector<HTMLSpanElement>('.suggestion');
+    if (!suggestionElement) {
+      throw new Error('Expected an suggestion element!');
+    }
+    return suggestionElement;
+  }
+
   private text(): string {
-    return this.input().textContent || '';
+    return this.input().value || '';
   }
 
   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>`;
+      <span class="prefix">${this.prefixText} </span>
+      <span class="text-prompt-input"><input aria-label=${this.ariaLabelText} spellcheck="false" @input=${
+        this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion="${
+        this.suggestionText}"></span></span>`;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -7,27 +7,38 @@
 :host {
   white-space: pre;
   overflow: hidden;
-  display: inline-flex;
+  display: flex;
 }
 
 .prefix {
+  flex: none;
   color: var(--color-primary);
 }
 
-input {
-  width: 0;
-  border: none;
-  outline: none;
+.text-prompt-input {
+  flex: auto;
+  position: relative;
 }
 
-.text-prompt-input {
+.text-prompt-input input {
+  width: 100%;
   border: none;
   outline: none;
-  display: inline;
-  flex: 1 0 auto;
+  position: absolute;
+  left: 0;
+  padding: 0;
+  z-index: 2;
+  background-color: transparent;
+}
+
+.text-prompt-input .suggestion {
+  color: transparent;
+  position: absolute;
+  left: 0;
+  z-index: 1;
 }
 
-.text-prompt-input::after {
+.text-prompt-input .suggestion::after {
   content: attr(suggestion);
   color: var(--color-background-highlight);
 }

package/front_end/ui/legacy/Infobar.ts

@@ -103,6 +103,7 @@ export class Infobar {
     this.closeContainer = this.mainRow.createChild('div', 'infobar-close-container');
     this.toggleElement = createTextButton(
         i18nString(UIStrings.learnMore), this.onToggleDetails.bind(this), 'link-style devtools-link hidden');
+    this.toggleElement.setAttribute('role', 'link');
     this.closeContainer.appendChild(this.toggleElement);
     this.closeButton = this.closeContainer.createChild('div', 'close-button', 'dt-close-button');
     // @ts-ignore This is a custom element defined in UIUitls.js that has a `setTabbable` that TS doesn't

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -54,6 +54,7 @@ export class CSSLength extends HTMLElement {
   private onUnitChange(event: Event): void {
     this.length.unit = (event.target as HTMLInputElement).value as LengthUnit;
     this.dispatchEvent(new ValueChangedEvent(`${this.length.value}${this.length.unit}`));
+    this.dispatchEvent(new DraggingFinishedEvent());
     this.render();
   }
 
@@ -81,15 +82,16 @@ export class CSSLength extends HTMLElement {
     if (targetDocument) {
       targetDocument.addEventListener('mousemove', this.onDraggingValue, {capture: true});
       targetDocument.addEventListener('mouseup', (event: MouseEvent) => {
+        targetDocument.removeEventListener('mousemove', this.onDraggingValue, {capture: true});
+
         if (!this.isDraggingValue) {
           return;
         }
 
         event.preventDefault();
         event.stopPropagation();
-        targetDocument.removeEventListener('mousemove', this.onDraggingValue, {capture: true});
         this.isDraggingValue = false;
-        this.dispatchEvent(new ValueChangedEvent(`${this.length.value}${this.length.unit}`));
+        this.dispatchEvent(new DraggingFinishedEvent());
       }, {once: true, capture: true});
     }
   }

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -84,6 +84,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.itemElementsContainer.classList.add('container');
     this.bottomElementsContainer.appendChild(this.itemElementsContainer);
     this.itemElementsContainer.addEventListener('click', this.onClick.bind(this), false);
+    this.itemElementsContainer.addEventListener('mouseover', this.onMouseOver.bind(this), false);
     UI.ARIAUtils.markAsListBox(this.itemElementsContainer);
     UI.ARIAUtils.setControls(this.inputBoxElement, this.itemElementsContainer);
     UI.ARIAUtils.setAutocomplete(this.inputBoxElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
@@ -232,10 +233,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.refreshListWithCurrentResult = undefined;
   }
 
-  private onEnter(_event: Event): void {
+  private onEnter(event: Event): void {
     if (!this.provider) {
       return;
     }
+    event.preventDefault();
     const selectedIndexInProvider = this.provider.itemCount() ? this.list.selectedItem() : null;
 
     this.selectItem(selectedIndexInProvider);
@@ -305,6 +307,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     }
   }
 
+  private onMouseOver(event: Event): void {
+    const item = this.list.itemForNode((event.target as Node | null));
+    if (item === null) {
+      return;
+    }
+    this.list.selectItem(item);
+  }
+
   setQuery(query: string): void {
     this.query = query;
     this.inputBoxElement.focus();
@@ -488,22 +498,22 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private onKeyDown(keyboardEvent: KeyboardEvent): void {
     let handled = false;
     switch (keyboardEvent.key) {
-      case 'Enter':
+      case Platform.KeyboardUtilities.ENTER_KEY:
         this.onEnter(keyboardEvent);
         return;
-      case 'Tab':
+      case Platform.KeyboardUtilities.TAB_KEY:
         handled = this.tabKeyPressed();
         break;
-      case 'ArrowUp':
+      case Platform.KeyboardUtilities.ArrowKey.UP:
         handled = this.list.selectPreviousItem(true, false);
         break;
-      case 'ArrowDown':
+      case Platform.KeyboardUtilities.ArrowKey.DOWN:
         handled = this.list.selectNextItem(true, false);
         break;
-      case 'PageUp':
+      case Platform.KeyboardUtilities.PageKey.UP:
         handled = this.list.selectItemPreviousPage(false);
         break;
-      case 'PageDown':
+      case Platform.KeyboardUtilities.PageKey.DOWN:
         handled = this.list.selectItemNextPage(false);
         break;
     }

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -68,23 +68,23 @@ export class QuickOpenImpl {
 
   private async queryChanged(query: string): Promise<void> {
     const prefix = this.prefixes.find(prefix => query.startsWith(prefix));
-    if (typeof prefix !== 'string' || this.prefix === prefix) {
-      if (query !== prefix && this.filteredListWidget) {
-        this.filteredListWidget.setCommandSuggestion('');
-      }
+    if (typeof prefix !== 'string') {
       return;
     }
 
-    this.prefix = prefix;
     if (!this.filteredListWidget) {
       return;
     }
     this.filteredListWidget.setPrefix(prefix);
     const titlePrefixFunction = this.providers.get(prefix)?.titlePrefix;
     this.filteredListWidget.setCommandPrefix(titlePrefixFunction ? titlePrefixFunction() : '');
-    const titleSuggestionFunction = this.providers.get(prefix)?.titleSuggestion;
+    const titleSuggestionFunction = (query === prefix) && this.providers.get(prefix)?.titleSuggestion;
     this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? titleSuggestionFunction() : '');
 
+    if (this.prefix === prefix) {
+      return;
+    }
+    this.prefix = prefix;
     this.filteredListWidget.setProvider(null);
     const providerFunction = this.providers.get(prefix)?.provider;
     if (!providerFunction) {

package/front_end/ui/legacy/tabbedPane.css

@@ -154,6 +154,7 @@
 /**
  * In light-mode we have a blue border to show the active pane, and we don't change the background color. In dark mode we do not show the border, so we instead change the background color.
  */
+/* stylelint-disable no-descending-specificity */
 .-theme-with-dark-background .tabbed-pane-header-tab.selected,
 :host-context(.-theme-with-dark-background) .tabbed-pane-header-tab.selected {
   --override-tabbed-dark-mode-bg-color: rgb(0 0 0);
@@ -161,6 +162,12 @@
   background-color: var(--override-tabbed-dark-mode-bg-color);
 }
 
+.-theme-with-dark-background .tabbed-pane-header-tab.selected,
+:host-context(.-theme-with-dark-background) .tabbed-pane-header-tab.selected:focus {
+  background-color: var(--color-background-elevation-0);
+}
+/* stylelint-enable no-descending-specificity */
+
 .tabbed-pane-header-tab.dragging {
   --override-dragging-box-shadow-color: rgb(0 0 0 / 37%);
 
@@ -265,6 +272,7 @@
   cursor: pointer !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/* stylelint-disable no-descending-specificity */
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
   --override-vertical-tab-selected-border-color: #666;
 
@@ -278,6 +286,7 @@
 :host-context(.-theme-with-dark-background) .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-header-tab.selected {
   --override-vertical-tab-selected-border-color: rgb(153 153 153);
 }
+/* stylelint-enable no-descending-specificity */
 
 .tabbed-pane-tab-slider {
   height: 2px;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.928589"
+  "version": "1.0.929998"
 }

package/scripts/javascript_natives/index.js

@@ -51,28 +51,33 @@ function parseTSFunction(func, node) {
   storeMethod(node.name.text, func.name.escapedText, args);
 }
 
-glob('../../../../blink/renderer/+(core|modules)/**/*.idl', {cwd: process.env.PWD}, function(er, files) {
-  for (const file of files) {
-    if (file.includes('testing')) {
-      continue;
-    }
-    const data = fs.readFileSync(path.join(process.env.PWD, file), 'utf8');
-    const lines = data.split('\n');
-    const newLines = [];
-    for (line of lines) {
-      if (!line.includes(' attribute ')) {
-        newLines.push(line);
-      }
-    }
+// Assume the DevTools front-end repository is at
+// `devtools/devtools-frontend`, where `devtools` is on the same level
+// as `chromium`. This matches `scripts/npm_test.js`.
+glob(
+    '../../../../chromium/src/third_party/blink/renderer/+(core|modules)/**/*.idl', {cwd: process.env.PWD},
+    function(er, files) {
+      for (const file of files) {
+        if (file.includes('testing')) {
+          continue;
+        }
+        const data = fs.readFileSync(path.join(process.env.PWD, file), 'utf8');
+        const lines = data.split('\n');
+        const newLines = [];
+        for (const line of lines) {
+          if (!line.includes(' attribute ')) {
+            newLines.push(line);
+          }
+        }
 
-    try {
-      WebIDL2.parse(newLines.join('\n')).forEach(walk);
-    } catch (e) {
-      // console.error(file);
-    }
-  }
-  WebIDL2
-      .parse(`
+        try {
+          WebIDL2.parse(newLines.join('\n')).forEach(walk);
+        } catch (e) {
+          // console.error(file);
+        }
+      }
+      WebIDL2
+          .parse(`
   namespace console {
     void assert(optional boolean condition = false, any... data);
     void clear();
@@ -96,8 +101,8 @@ glob('../../../../blink/renderer/+(core|modules)/**/*.idl', {cwd: process.env.PW
     void warn(any... data);
   };
 `).forEach(walk);
-  postProcess();
-});
+      postProcess();
+    });
 
 function walk(thing, parent) {
   if (thing.type === 'interface') {
@@ -215,11 +220,12 @@ function postProcess() {
   }
 
   fs.writeFileSync(
-      path.join(__dirname, '..', '..', 'front_end', 'javascript_metadata', 'NativeFunctions.js'),
+      path.join(__dirname, '..', '..', 'front_end', 'models', 'javascript_metadata', 'NativeFunctions.js'),
       `// Copyright 2020 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.
 // Generated from ${path.relative(path.join(__dirname, '..', '..'), __filename)}
-export const NativeFunctions = ${JSON.stringify(functions)};
+
+export const NativeFunctions = ${JSON.stringify(functions, null, 2)};
 `);
 }

package/front_end/panels/css_overview/CSSOverviewStartView.ts

@@ -1,55 +0,0 @@
-// Copyright 2019 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 * as UI from '../../ui/legacy/legacy.js';
-
-import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
-
-import type {OverviewController} from './CSSOverviewController.js';
-import {Events} from './CSSOverviewController.js';
-
-const UIStrings = {
-  /**
-  *@description Label for the capture button in the CSS Overview Panel
-  */
-  captureOverview: 'Capture overview',
-  /**
-  *@description Title of the CSS Overview Panel
-  */
-  cssOverview: 'CSS Overview',
-};
-const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewStartView.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class CSSOverviewStartView extends UI.Widget.Widget {
-  private readonly controller: OverviewController;
-  constructor(controller: OverviewController) {
-    super();
-
-    this.controller = controller;
-    this.render();
-  }
-
-  private render(): void {
-    const startButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.captureOverview),
-        () => this.controller.dispatchEventToListeners(Events.RequestOverviewStart), '', true /* primary */);
-
-    this.setDefaultFocusedElement(startButton);
-
-    const fragment = UI.Fragment.Fragment.build`
-  <div class="vbox overview-start-view">
-  <h1>${i18nString(UIStrings.cssOverview)}</h1>
-  <div>${startButton}</div>
-  </div>
-  `;
-
-    this.contentElement.appendChild(fragment.element());
-    this.contentElement.style.overflow = 'auto';
-  }
-  wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([cssOverviewStartViewStyles]);
-  }
-}

package/front_end/panels/css_overview/cssOverviewStartView.css

@@ -1,29 +0,0 @@
-/**
- * Copyright 2019 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.
- */
-
-.overview-start-view {
-  overflow: hidden;
-  padding: 16px;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.overview-start-view h1 {
-  font-size: 16px;
-  text-align: center;
-  font-weight: normal;
-  margin: 0;
-  padding: 8px;
-}
-
-.overview-start-view div {
-  font-size: 12px;
-  text-align: center;
-  font-weight: normal;
-  margin: 0;
-  padding-bottom: 44px;
-}