chrome-devtools-frontend 1.0.927127 → 1.0.927419

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

@@ -10,6 +10,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
+import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import * as UI from '../../legacy.js';
 
 const UIStrings = {
@@ -37,9 +38,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private loadTimeout: number;
   private refreshListWithCurrentResult!: (() => void)|undefined;
   private dialog!: UI.Dialog.Dialog|undefined;
-  private query!: string|undefined;
-  private readonly promptElement: HTMLElement;
-  private readonly prompt: UI.TextPrompt.TextPrompt;
+  private query = '';
+  private readonly inputBoxElement: TextPrompt.TextPrompt.TextPrompt;
   private readonly hintElement: HTMLElement;
   private readonly bottomElementsContainer: HTMLElement;
   private readonly progressElement: HTMLElement;
@@ -48,7 +48,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   private list: UI.ListControl.ListControl<number>;
   private readonly itemElementsContainer: HTMLDivElement;
   private notFoundElement: HTMLElement;
-  private prefix: string;
+  private prefix = '';
   private provider: Provider|null;
   private readonly queryChangedCallback?: (arg0: string) => void;
 
@@ -66,15 +66,11 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     UI.ARIAUtils.markAsCombobox(this.contentElement);
     this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
 
-    this.promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
-    UI.ARIAUtils.setAccessibleName(this.promptElement, i18nString(UIStrings.quickOpenPrompt));
-    this.promptElement.setAttribute('spellcheck', 'false');
-    this.promptElement.setAttribute('contenteditable', 'plaintext-only');
-    this.prompt = new UI.TextPrompt.TextPrompt();
-    this.prompt.initialize(() => Promise.resolve([]));
-    const promptProxy = this.prompt.attach(this.promptElement);
-    promptProxy.addEventListener('input', this.onInput.bind(this), false);
-    promptProxy.classList.add('filtered-list-widget-prompt-element');
+    this.inputBoxElement = new TextPrompt.TextPrompt.TextPrompt();
+    this.inputBoxElement.data = {ariaLabel: i18nString(UIStrings.quickOpenPrompt), prefix: '', suggestion: ''};
+    this.inputBoxElement.addEventListener(
+        TextPrompt.TextPrompt.PromptInputEvent.eventName, this.onInput.bind(this), false);
+    this.contentElement.appendChild(this.inputBoxElement);
 
     this.hintElement = this.contentElement.createChild('div', 'filtered-list-widget-hint');
 
@@ -89,15 +85,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.bottomElementsContainer.appendChild(this.itemElementsContainer);
     this.itemElementsContainer.addEventListener('click', this.onClick.bind(this), false);
     UI.ARIAUtils.markAsListBox(this.itemElementsContainer);
-    UI.ARIAUtils.setControls(this.promptElement, this.itemElementsContainer);
-    UI.ARIAUtils.setAutocomplete(this.promptElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
+    UI.ARIAUtils.setControls(this.inputBoxElement, this.itemElementsContainer);
+    UI.ARIAUtils.setAutocomplete(this.inputBoxElement, UI.ARIAUtils.AutocompleteInteractionModel.list);
 
     this.notFoundElement = this.bottomElementsContainer.createChild('div', 'not-found-text');
     this.notFoundElement.classList.add('hidden');
 
-    this.setDefaultFocusedElement(this.promptElement);
+    this.setDefaultFocusedElement(this.inputBoxElement);
 
-    this.prefix = '';
     this.provider = provider;
     this.queryChangedCallback = queryChangedCallback;
   }
@@ -138,6 +133,14 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     return false;
   }
 
+  setCommandPrefix(commandPrefix: string): void {
+    this.inputBoxElement.setPrefix(commandPrefix);
+  }
+
+  setCommandSuggestion(suggestion: string): void {
+    this.inputBoxElement.setSuggestion(suggestion);
+  }
+
   setHintElement(hint: string): void {
     this.hintElement.textContent = hint;
   }
@@ -146,7 +149,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
    * Sets the text prompt's accessible title. By default, it is "Quick open prompt".
    */
   setPromptTitle(title: string): void {
-    UI.ARIAUtils.setAccessibleName(this.promptElement, title);
+    UI.ARIAUtils.setAccessibleName(this.inputBoxElement, title);
   }
 
   showAsDialog(dialogTitle?: string): void {
@@ -190,7 +193,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuerySelectedRange(startIndex: number, endIndex: number): void {
-    this.prompt.setSelectedRange(startIndex, endIndex);
+    this.inputBoxElement.setSelectedRange(startIndex, endIndex);
   }
 
   private attachProvider(): void {
@@ -203,12 +206,8 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.itemsLoaded(this.provider);
   }
 
-  private value(): string {
-    return this.prompt.text().trim();
-  }
-
   private cleanValue(): string {
-    return this.value().substring(this.prefix.length);
+    return this.query.substring(this.prefix.length);
   }
 
   wasShown(): void {
@@ -290,7 +289,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (toElement) {
       toElement.classList.add('selected');
     }
-    UI.ARIAUtils.setActiveDescendant(this.promptElement, toElement);
+    UI.ARIAUtils.setActiveDescendant(this.inputBoxElement, toElement);
   }
 
   private onClick(event: Event): void {
@@ -307,15 +306,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   setQuery(query: string): void {
-    this.prompt.focus();
-    this.prompt.setText(query);
+    this.query = query;
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(query);
     this.queryChanged();
-    this.prompt.autoCompleteSoon(true);
     this.scheduleFilter();
   }
 
   private tabKeyPressed(): boolean {
-    const userEnteredText = this.prompt.text();
+    const userEnteredText = this.query;
     let completion;
     for (let i = this.promptHistory.length - 1; i >= 0; i--) {
       if (this.promptHistory[i] !== userEnteredText && this.promptHistory[i].startsWith(userEnteredText)) {
@@ -326,9 +325,9 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     if (!completion) {
       return false;
     }
-    this.prompt.focus();
-    this.prompt.setText(completion);
-    this.prompt.setDOMSelection(userEnteredText.length, completion.length);
+    this.inputBoxElement.focus();
+    this.inputBoxElement.setText(completion);
+    this.inputBoxElement.setSelectedRange(userEnteredText.length, completion.length);
     this.scheduleFilter();
     return true;
   }
@@ -360,7 +359,6 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     this.progressBarElement.classList.remove('filtered-widget-progress-fade', 'hidden');
 
     const query = this.provider.rewriteQuery(this.cleanValue());
-    this.query = query;
 
     const filterRegex = query ? Platform.StringUtilities.filterRegex(query) : null;
 
@@ -468,14 +466,15 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
     }
   }
 
-  private onInput(): void {
+  private onInput(event: TextPrompt.TextPrompt.PromptInputEvent): void {
+    this.query = event.data;
     this.queryChanged();
     this.scheduleFilter();
   }
 
   private async queryChanged(): Promise<void> {
     if (this.queryChangedCallback) {
-      await this.queryChangedCallback(this.value());
+      await this.queryChangedCallback(this.query);
     }
     if (this.provider) {
       this.provider.queryChanged(this.cleanValue());
@@ -521,7 +520,7 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
   }
 
   private selectItem(itemIndex: number|null): void {
-    this.promptHistory.push(this.value());
+    this.promptHistory.push(this.query);
     if (this.promptHistory.length > 100) {
       this.promptHistory.shift();
     }
@@ -603,8 +602,9 @@ export function getRegisteredProviders(): ProviderRegistration[] {
   return registeredProviders;
 }
 export interface ProviderRegistration {
-  provider: () => Promise<Provider>;
-  title?: (() => string);
   prefix: string;
   iconName: string;
+  provider: () => Promise<Provider>;
+  titlePrefix: (() => string);
+  titleSuggestion?: (() => string);
 }

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

@@ -36,10 +36,15 @@ export class HelpQuickOpen extends Provider {
   private addProvider(extension: {
     prefix: string,
     iconName: string,
-    title?: () => string,
+    titlePrefix: () => string,
+    titleSuggestion?: () => string,
   }): void {
-    if (extension.title) {
-      this.providers.push({prefix: extension.prefix || '', iconName: extension.iconName, title: extension.title()});
+    if (extension.titleSuggestion) {
+      this.providers.push({
+        prefix: extension.prefix || '',
+        iconName: extension.iconName,
+        title: extension.titlePrefix() + ' ' + extension.titleSuggestion(),
+      });
     }
   }
 
@@ -84,6 +89,7 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'ic_command_help',
-  title: undefined,
   provider: () => Promise.resolve(HelpQuickOpen.instance()),
+  titlePrefix: () => 'Help',
+  titleSuggestion: undefined,
 });

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

@@ -21,15 +21,18 @@ export const history: string[] = [];
 
 export class QuickOpenImpl {
   private prefix: string|null;
-  private readonly query: string;
-  private readonly providers: Map<string, () => Promise<Provider>>;
   private readonly prefixes: string[];
+  private providers: Map<string, {
+    provider: () => Promise<Provider>,
+    titlePrefix: (() => string),
+    titleSuggestion?: (() => string),
+  }>;
   private filteredListWidget: FilteredListWidget|null;
+
   constructor() {
     this.prefix = null;
-    this.query = '';
-    this.providers = new Map();
     this.prefixes = [];
+    this.providers = new Map();
     this.filteredListWidget = null;
 
     getRegisteredProviders().forEach(this.addProvider.bind(this));
@@ -48,18 +51,27 @@ export class QuickOpenImpl {
   private addProvider(extension: {
     prefix: string,
     provider: () => Promise<Provider>,
+    titlePrefix: () => string,
+    titleSuggestion?: (() => string),
   }): void {
     const prefix = extension.prefix;
     if (prefix === null) {
       return;
     }
     this.prefixes.push(prefix);
-    this.providers.set(prefix, extension.provider);
+    this.providers.set(prefix, {
+      provider: extension.provider,
+      titlePrefix: extension.titlePrefix,
+      titleSuggestion: extension.titleSuggestion,
+    });
   }
 
   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('');
+      }
       return;
     }
 
@@ -68,8 +80,13 @@ export class QuickOpenImpl {
       return;
     }
     this.filteredListWidget.setPrefix(prefix);
+    const titlePrefixFunction = this.providers.get(prefix)?.titlePrefix;
+    this.filteredListWidget.setCommandPrefix(titlePrefixFunction ? titlePrefixFunction() : '');
+    const titleSuggestionFunction = this.providers.get(prefix)?.titleSuggestion;
+    this.filteredListWidget.setCommandSuggestion(titleSuggestionFunction ? titleSuggestionFunction() : '');
+
     this.filteredListWidget.setProvider(null);
-    const providerFunction = this.providers.get(prefix);
+    const providerFunction = this.providers.get(prefix)?.provider;
     if (!providerFunction) {
       return;
     }

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -27,13 +27,12 @@
   font-size: inherit;
 }
 
-.filtered-list-widget-input {
-  white-space: pre;
-  height: 18px;
-  margin-top: 12px;
-  overflow: hidden;
-  flex: auto;
-  border: 1px solid transparent;
+devtools-text-prompt {
+  flex: 0 0 40px;
+  font-size: 14px;
+  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  line-height: 16px;
+  padding: 12px;
 }
 
 .filtered-list-widget-hint {
@@ -246,7 +245,7 @@
     color: HighlightText;
   }
 
-  .filtered-list-widget-input {
+  devtools-text-prompt {
     border-color: ButtonText;
   }
 }

package/front_end/ui/legacy/filter.css

@@ -164,6 +164,7 @@
     forced-color-adjust: none;
     background: ButtonFace;
     box-shadow: var(--legacy-focus-ring-inactive-shadow);
+    color: fieldtext;
   }
 
   .filter-input-container:hover,

package/inspector_overlay/main.ts

@@ -21,6 +21,7 @@ import {PersistentOverlay} from './tool_persistent.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import screenshotStyle from './tool_screenshot.css'; // eslint-disable-line rulesdir/es_modules_import
 import {ScreenshotOverlay} from './tool_screenshot.js';
+import type {ScreenshotToolMessage} from './tool_screenshot.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import sourceOrderStyle from './tool_source_order.css'; // eslint-disable-line rulesdir/es_modules_import
 import {SourceOrderOverlay} from './tool_source_order.js';
@@ -30,7 +31,7 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|string): void};
+    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|string): void};
   }
 }
 

package/inspector_overlay/tool_screenshot.ts

@@ -4,6 +4,13 @@
 
 import {Overlay} from './common.js';
 
+export type ScreenshotToolMessage = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
 let anchor: {x: number, y: number}|null = null;
 let position: {x: number, y: number}|null = null;
 
@@ -56,7 +63,7 @@ export class ScreenshotOverlay extends Overlay {
     if (anchor && position) {
       const rect = currentRect();
       if (rect.width >= 5 && rect.height >= 5) {
-        this.window.InspectorOverlayHost.send(JSON.stringify(rect));
+        this.window.InspectorOverlayHost.send(rect);
       }
     }
     cancel();

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.927127"
+  "version": "1.0.927419"
 }