chrome-devtools-frontend 1.0.930993 → 1.0.932348

package/front_end/panels/changes/changesView.css

@@ -13,8 +13,9 @@
   overflow: auto;
 }
 
-.editor-container {
+.diff-container {
   flex: 1;
+  overflow: auto;
 }
 
 :focus.selected {
@@ -29,75 +30,7 @@
   --override-selected-color: rgb(0 0 0);
 }
 
-.CodeMirror-lines:not(:active) {
-  cursor: default !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.CodeMirror-line:hover {
-  --override-line-hover-background-color: rgb(0 0 255 / 5%);
-
-  cursor: default !important; /* stylelint-disable-line declaration-no-important */
-  background-color: var(--override-line-hover-background-color) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.CodeMirror .CodeMirror-linebackground.spacer {
-  --override-spacer-color: rgb(0 0 0 / 50%);
-  --override-spacer-background-color: rgb(0 0 255 / 10%);
-
-  text-align: center;
-  color: var(--override-spacer-color);
-  background-color: var(--override-spacer-background-color);
-}
-
-.-theme-with-dark-background .CodeMirror .CodeMirror-linebackground.spacer,
-:host-context(.-theme-with-dark-background) .CodeMirror .CodeMirror-linebackground.spacer {
-  --override-spacer-color: rgb(230 230 230 / 50%);
-}
-
-.CodeMirror .equal > span > span {
-  opacity: 50%;
-}
-
-.CodeMirror .CodeMirror-selectedtext:not(.CodeMirror-persist-highlight) {
-  opacity: 100%;
-}
-
-.CodeMirror .CodeMirror-linebackground.addition,
-.changes-diff-gutter-marker.addition {
-  --override-addition-background-color: hsl(144deg 55% 49% / 20%);
-
-  background-color: var(--override-addition-background-color);
-}
-
-.CodeMirror .CodeMirror-linebackground.deletion,
-.changes-diff-gutter-marker.deletion {
-  --override-deletion-background-color: rgb(255 0 0 / 20%);
-
-  background-color: var(--override-deletion-background-color);
-}
-
-.CodeMirror .addition .cm-inner-diff:not(.CodeMirror-selectedtext) {
-  --override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 30%);
-
-  background-color: var(--override-addition-inner-diff-background-color);
-}
-
-.CodeMirror .deletion .cm-inner-diff:not(.CodeMirror-selectedtext),
-.-theme-preserve {
-  --override-deletion-inner-diff-background-color: rgb(255 0 0 / 30%);
-
-  background-color: var(--override-deletion-inner-diff-background-color);
-}
-
 .changes-toolbar {
   background-color: var(--color-background-elevation-1);
   border-top: var(--legacy-divider-border);
 }
-
-.changes-diff-gutter {
-  width: 20px;
-}
-
-.changes-diff-gutter-marker {
-  text-align: center;
-}

package/front_end/panels/changes/module.json

@@ -4,4 +4,4 @@
     "panels/snippets",
     "ui/legacy"
   ]
-}
+}

package/front_end/panels/console/ConsolePinPane.ts

@@ -5,11 +5,11 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
+import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
@@ -55,12 +55,10 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementToConsolePin = new WeakMap<Element, ConsolePin>();
 
 export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
-  private readonly liveExpressionButton: UI.Toolbar.ToolbarButton;
   private pins: Set<ConsolePin>;
   private readonly pinsSetting: Common.Settings.Setting<string[]>;
-  constructor(liveExpressionButton: UI.Toolbar.ToolbarButton) {
+  constructor(private readonly liveExpressionButton: UI.Toolbar.ToolbarButton, private readonly focusOut: () => void) {
     super(true, 250);
-    this.liveExpressionButton = liveExpressionButton;
     this.contentElement.classList.add('console-pins', 'monospace');
     this.contentElement.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
 
@@ -124,7 +122,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   addPin(expression: string, userGesture?: boolean): void {
-    const pin = new ConsolePin(expression, this);
+    const pin = new ConsolePin(expression, this, this.focusOut);
     this.contentElement.appendChild(pin.element());
     this.pins.add(pin);
     this.savePins();
@@ -173,32 +171,33 @@ export class ConsolePin {
   private readonly pinPreview: HTMLElement;
   private lastResult: SDK.RuntimeModel.EvaluationResult|null;
   private lastExecutionContext: SDK.RuntimeModel.ExecutionContext|null;
-  private editor: UI.TextEditor.TextEditor|null;
+  private editor: TextEditor.TextEditor.TextEditor|null;
   private committedExpression: string;
   private hovered: boolean;
   private lastNode: SDK.RemoteObject.RemoteObject|null;
-  private readonly editorPromise: Promise<UI.TextEditor.TextEditor>;
+  private readonly editorPromise: Promise<TextEditor.TextEditor.TextEditor>;
   private consolePinNumber: number;
+  private deletePinIcon: UI.UIUtils.DevToolsCloseButton;
 
-  constructor(expression: string, pinPane: ConsolePinPane) {
+  constructor(expression: string, private readonly pinPane: ConsolePinPane, private readonly focusOut: () => void) {
     this.consolePinNumber = ++consolePinNumber;
-    const deletePinIcon = (document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton);
-    deletePinIcon.gray = true;
-    deletePinIcon.classList.add('close-button');
-    deletePinIcon.setTabbable(true);
+    this.deletePinIcon = document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton;
+    this.deletePinIcon.gray = true;
+    this.deletePinIcon.classList.add('close-button');
+    this.deletePinIcon.setTabbable(true);
     if (expression.length) {
-      deletePinIcon.setAccessibleName(i18nString(UIStrings.removeExpressionS, {PH1: expression}));
+      this.deletePinIcon.setAccessibleName(i18nString(UIStrings.removeExpressionS, {PH1: expression}));
     } else {
-      deletePinIcon.setAccessibleName(i18nString(UIStrings.removeBlankExpression));
+      this.deletePinIcon.setAccessibleName(i18nString(UIStrings.removeBlankExpression));
     }
-    self.onInvokeElement(deletePinIcon, event => {
+    self.onInvokeElement(this.deletePinIcon, event => {
       pinPane.removePin(this);
       event.consume(true);
     });
 
     const fragment = UI.Fragment.Fragment.build`
   <div class='console-pin'>
-  ${deletePinIcon}
+  ${this.deletePinIcon}
   <div class='console-pin-name' $='name'></div>
   <div class='console-pin-preview' $='preview'></div>
   </div>`;
@@ -224,61 +223,66 @@ export class ConsolePin {
       }
     }, false);
 
-    const createTextEditor = (factory: UI.TextEditor.TextEditorFactory): UI.TextEditor.TextEditor => {
-      this.editor = factory.createEditor({
-        devtoolsAccessibleName: i18nString(UIStrings.liveExpressionEditor),
-        lineNumbers: false,
-        lineWrapping: true,
-        mimeType: 'javascript',
-        autoHeight: true,
-        placeholder: i18nString(UIStrings.expression),
-        bracketMatchingSetting: undefined,
-        lineWiseCopyCut: undefined,
-        maxHighlightLength: undefined,
-        padBottom: undefined,
-        inputStyle: undefined,
-      });
-      this.editor.configureAutocomplete(
-          ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this.editor));
-      this.editor.widget().show(nameElement);
-      this.editor.widget().element.classList.add('console-pin-editor');
-      this.editor.widget().element.tabIndex = -1;
-      this.editor.setText(expression);
-      this.editor.widget().element.addEventListener('keydown', event => {
-        if (!this.editor) {
-          return;
-        }
-        if (event.key === 'Tab' && !this.editor.text()) {
-          event.consume();
-          return;
-        }
-        if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) {
-          this.editor.setText(this.committedExpression);
-        }
-      }, true);
-      this.editor.widget().element.addEventListener('focusout', _event => {
-        if (!this.editor) {
-          return;
-        }
-        const text = this.editor.text();
-        const trimmedText = text.trim();
-        if (text.length !== trimmedText.length) {
-          this.editor.setText(trimmedText);
-        }
-        this.committedExpression = trimmedText;
-        pinPane.savePins();
-        if (this.committedExpression.length) {
-          deletePinIcon.setAccessibleName(i18nString(UIStrings.removeExpressionS, {PH1: this.committedExpression}));
-        } else {
-          deletePinIcon.setAccessibleName(i18nString(UIStrings.removeBlankExpression));
-        }
-        this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
-      });
-      return this.editor;
-    };
+    // Prevent Esc from toggling the drawer
+    nameElement.addEventListener('keydown', event => {
+      if (event.key === 'Escape') {
+        event.consume();
+      }
+    });
+    this.editorPromise = this.createEditor(expression, nameElement);
+  }
+
+  async createEditor(expression: string, parent: HTMLElement): Promise<TextEditor.TextEditor.TextEditor> {
+    const CM = await import('../../third_party/codemirror.next/codemirror.next.js');
+    const TE = await import('../../ui/components/text_editor/text_editor.js');
+    this.editor = new TE.TextEditor.TextEditor(CM.EditorState.create({
+      doc: expression,
+      extensions: [
+        CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.liveExpressionEditor)}),
+        CM.EditorView.lineWrapping,
+        (await CM.javascript()).javascriptLanguage,
+        await TE.JavaScript.completion(),
+        TE.Config.showCompletionHint,
+        CM.placeholder(i18nString(UIStrings.expression)),
+        CM.keymap.of([
+          {
+            key: 'Escape',
+            run: (view: CodeMirror.EditorView): boolean => {
+              view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.committedExpression}});
+              this.focusOut();
+              return true;
+            },
+          },
+          {
+            key: 'Mod-Enter',
+            run: (): boolean => {
+              this.focusOut();
+              return true;
+            },
+          },
+        ]),
+        CM.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
+        TE.Config.baseConfiguration(expression),
+      ],
+    }));
+    parent.appendChild(this.editor);
+    return this.editor;
+  }
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-    this.editorPromise = Promise.resolve().then(() => createTextEditor(factory));
+  onBlur(editor: CodeMirror.EditorView): void {
+    const text = editor.state.doc.toString();
+    const trimmedText = text.trim();
+    this.committedExpression = trimmedText;
+    this.pinPane.savePins();
+    if (this.committedExpression.length) {
+      this.deletePinIcon.setAccessibleName(i18nString(UIStrings.removeExpressionS, {PH1: this.committedExpression}));
+    } else {
+      this.deletePinIcon.setAccessibleName(i18nString(UIStrings.removeBlankExpression));
+    }
+    editor.dispatch({
+      selection: {anchor: trimmedText.length},
+      changes: trimmedText !== text ? {from: 0, to: text.length, insert: trimmedText} : undefined,
+    });
   }
 
   setHovered(hovered: boolean): void {
@@ -300,9 +304,9 @@ export class ConsolePin {
   }
 
   async focus(): Promise<void> {
-    const editor = await this.editorPromise;
-    editor.widget().focus();
-    editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
+    const editor = this.editor || await this.editorPromise;
+    editor.editor.focus();
+    editor.editor.dispatch({selection: {anchor: editor.state.doc.length}});
   }
 
   appendToContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -317,7 +321,8 @@ export class ConsolePin {
     if (!this.editor) {
       return;
     }
-    const text = this.editor.textWithCurrentSuggestion().trim();
+    const TE = await import('../../ui/components/text_editor/text_editor.js');
+    const text = TE.Config.contentIncludingHint(this.editor.editor);
     const isEditing = this.pinElement.hasFocus();
     const throwOnSideEffect = isEditing && text !== this.committedExpression;
     const timeout = throwOnSideEffect ? 250 : undefined;

package/front_end/panels/console/ConsoleView.ts

@@ -461,17 +461,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
     this.showSettingsPaneSetting.addChangeListener(
         () => settingsPane.element.classList.toggle('hidden', !this.showSettingsPaneSetting.get()));
 
-    this.pinPane = new ConsolePinPane(liveExpressionButton);
+    this.pinPane = new ConsolePinPane(liveExpressionButton, () => this.prompt.focus());
     this.pinPane.element.classList.add('console-view-pinpane');
     this.pinPane.show(this.contentsElement);
-    this.pinPane.element.addEventListener('keydown', event => {
-      if ((event.key === 'Enter' &&
-           UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey((event as KeyboardEvent))) ||
-          event.keyCode === UI.KeyboardShortcut.Keys.Esc.code) {
-        this.prompt.focus();
-        event.consume();
-      }
-    });
 
     this.viewport = new ConsoleViewport(this);
     this.viewport.setStickToBottom(true);

package/front_end/panels/console/consolePinPane.css

@@ -62,12 +62,15 @@
 .console-pin-name,
 .console-pin-preview {
   width: 100%;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-height: 13px;
 }
 
+.console-pin-preview {
+  overflow: hidden;
+}
+
 .console-delete-pin {
   position: absolute;
   top: 8px;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -799,6 +799,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.lastRevealedProperty = null;
     }
 
+    this.swatchPopoverHelper().reposition();
+
     // Record the elements tool load time after the sidepane has loaded.
     Host.userMetrics.panelLoaded('elements', 'DevTools.Launch.Elements');
 
@@ -1947,7 +1949,6 @@ export class StylePropertiesSection {
     } else {
       this.showAllButton.classList.add('hidden');
     }
-    this.parentPane.swatchPopoverHelper().reposition();
   }
 
   isPropertyOverloaded(property: SDK.CSSProperty.CSSProperty): boolean {

package/front_end/panels/security/mainView.css

@@ -9,7 +9,6 @@
 }
 
 .security-main-view {
-  user-select: text;
   overflow-x: hidden;
   overflow-y: auto;
   /* crbug.com/1152736 Consider moving --toolbar-bg-color to theme colors */
@@ -23,6 +22,7 @@
 .security-summary-section-title {
   font-size: 15px;
   margin: 12px 16px;
+  user-select: text;
 }
 
 .lock-spectrum {
@@ -109,6 +109,7 @@
   font-size: 15px;
   background: var(--color-background);
   border-color: var(--color-background-elevation-1);
+  user-select: text;
 }
 
 .security-summary-secure .triangle-pointer,

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -40,7 +40,8 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
   private readonly lastSnippetIdentifierSetting: Common.Settings.Setting<number>;
   private readonly snippetsSetting: Common.Settings.Setting<Snippet[]>;
   constructor() {
-    super('snippet://', 'snippets');
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    super('snippet://' as Platform.DevToolsPath.UrlString, 'snippets');
     this.lastSnippetIdentifierSetting =
         Common.Settings.Settings.instance().createSetting('scriptSnippets_lastIdentifier', 0);
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);

package/front_end/panels/sources/NavigatorView.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): All casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -848,8 +850,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
 
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
-      const folderPath = Common.ParsedURL.ParsedURL.urlToPlatformPath(
-          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path),
+      const folderPath = Common.ParsedURL.ParsedURL.urlToRawPathString(
+          Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
+              Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openFolder),

package/front_end/panels/sources/SourcesPanel.ts

@@ -1230,9 +1230,36 @@ export class RevealingActionDelegate implements UI.ActionRegistration.ActionDele
       return false;
     }
     switch (actionId) {
-      case 'debugger.toggle-pause':
+      case 'debugger.toggle-pause': {
+        // This action can be triggered both on the DevTools front-end itself,
+        // or on the inspected target. If triggered on the DevTools front-end,
+        // it will take care of resuming.
+        //
+        // If triggered on the target, NOT in hosted mode:
+        //   * ..and the paused overlay is enabled:
+        //       => do not take any action here, as the paused overlay will resume
+        //   * ..and the paused overlay is disabled:
+        //       => take care of the resume here
+        // If triggered on the target in hosted mode:
+        //   * ..and the paused overlay is enabled:
+        //       => execution will not reach here, as shortcuts are not forwarded
+        //          and the paused overlay will resume
+        //   * ..and the paused overlay is disabled:
+        //       => overlay will not take care of resume, and neither will
+        //          DevTools as no shortcuts are forwarded from the target
+
+        // Do not trigger a resume action, if: the shortcut was forwarded and the
+        // paused overlay is enabled.
+        const actionHandledInPausedOverlay = context.flavor(UI.ShortcutRegistry.ForwardedShortcut) &&
+            !Common.Settings.Settings.instance().moduleSetting('disablePausedStateOverlay').get();
+        if (actionHandledInPausedOverlay) {
+          // Taken care of by inspector overlay: handled set to true to
+          // register user metric.
+          return true;
+        }
         panel.togglePause();
         return true;
+      }
     }
     return false;
   }

package/front_end/panels/sources/sources-meta.ts

@@ -523,10 +523,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   contextTypes() {
     return maybeRetrieveContextTypes(
-        Sources =>
-            [Sources.SourcesView.SourcesView,
-             UI.ShortcutRegistry.ForwardedShortcut,
-    ]);
+        Sources => [Sources.SourcesView.SourcesView, UI.ShortcutRegistry.ForwardedShortcut]);
   },
   options: [
     {

package/front_end/third_party/codemirror.next/bundle.ts

@@ -26,13 +26,14 @@ export {bracketMatching} from '@codemirror/matchbrackets';
 export {Range, RangeSet, RangeSetBuilder} from '@codemirror/rangeset';
 export {selectNextOccurrence} from '@codemirror/search';
 export {
-  Annotation, AnnotationType, Compartment, EditorSelection,
-  EditorState, EditorStateConfig, Extension, Facet, Prec, SelectionRange,
-  StateEffect, StateEffectType, StateField, Transaction, TransactionSpec
+  Annotation, AnnotationType, ChangeDesc, ChangeSet, ChangeSpec, Compartment,
+  EditorSelection, EditorState, EditorStateConfig, Extension, Facet, Prec,
+  SelectionRange, StateEffect, StateEffectType, StateField, Transaction,
+  TransactionSpec
 } from '@codemirror/state';
 export {StreamLanguage, StreamParser, StringStream} from '@codemirror/stream-parser';
 export {Line, Text, TextIterator} from '@codemirror/text';
-export {showTooltip, Tooltip, tooltips, TooltipView} from '@codemirror/tooltip';
+export {hoverTooltip, showTooltip, Tooltip, tooltips, TooltipView} from '@codemirror/tooltip';
 export {
   Command, Decoration, DecorationSet, drawSelection, EditorView,
   highlightSpecialChars, KeyBinding, keymap, MatchDecorator, placeholder,
@@ -42,6 +43,7 @@ export {
   NodeProp, NodeSet, NodeType, Parser, SyntaxNode, Tree, TreeCursor
 } from '@lezer/common';
 export {LRParser} from '@lezer/lr';
+export {StyleModule} from 'style-mod';
 
 export async function clojure() {
   return StreamLanguage.define((await import('@codemirror/legacy-modes/mode/clojure')).clojure);