chrome-devtools-frontend 1.0.940255 → 1.0.942095

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -5,8 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as Legacy from '../../../ui/legacy/legacy.js';
+import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -34,30 +33,9 @@ const UIStrings = {
   */
   locateAffectedElements: 'Locate the affected elements in the Elements panel',
   /**
-  *@description Title of the "Preview feature" reminder box
-  */
-  previewFeature: 'Preview feature',
-  /**
-  *@description Sentence to convey the feature is being actively worked on and we are looking for feedback
-  *@example {https://goo.gle/css-overview-feedback} PH1
-  */
-  activelyWorkingAndLookingForS: 'Our team is actively working on this feature and we are looking for your {PH1}!',
-  /**
-  *@description Link text of the inline anchor to navigate to a feedback page
-  */
-  feedbackInline: 'feedback',
-  /**
-  *@description Title of the section to the quick start video and documentation to CSS Overview panel
-  */
-  videoAndDocumentation: 'Video and documentation',
-  /**
   *@description Title of the link to the quick start video and documentation to CSS Overview panel
   */
   quickStartWithCSSOverview: 'Quick start: get started with the new CSS Overview panel',
-  /**
-  *@description Link text of the standalone button to navigate to a feedback page
-  */
-  feedbackStandalone: 'Feedback',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/components/CSSOverviewStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -77,13 +55,6 @@ export class OverviewStartRequestedEvent extends Event {
 export class CSSOverviewStartView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #feedbackLink: HTMLElement;
-
-  constructor() {
-    super();
-    this.#feedbackLink =
-        Legacy.XLink.XLink.create(FEEDBACK_LINK, i18nString(UIStrings.feedbackInline), 'devtools-link');
-  }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
@@ -121,32 +92,16 @@ export class CSSOverviewStartView extends HTMLElement {
             ${i18nString(UIStrings.captureOverview)}
           </${Buttons.Button.Button.litTagName}>
         </div>
-        <section class="preview-feature">
-          <h1 class="preview-header">
-            <${IconButton.Icon.Icon.litTagName} class="preview-icon" .data=${{
-                iconName: 'ic_preview_feature',
-                width: '24px',
-                height: '24px',
-                color: 'var(--color-primary)',
-              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-              ${i18nString(UIStrings.previewFeature)}
-          </h1>
-          <div class="feedback-prompt">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.activelyWorkingAndLookingForS, {PH1: this.#feedbackLink})}</div>
-          <div class="resources">
-            <div class="thumbnail-wrapper">
-              <${IconButton.Icon.Icon.litTagName} .data=${{
-                iconName: 'preview_feature_video_thumbnail',
-                width: '144px',
-                height: '92px',
-              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-            </div>
-            <div>
-              <h1 class="video-doc-header">${i18nString(UIStrings.videoAndDocumentation)}</h1>
-              <x-link class="devtools-link" href=${DOC_LINK}>${i18nString(UIStrings.quickStartWithCSSOverview)}</x-link>
-            </div>
-          </div>
-        </section>
-        <x-link class="feedback-standalone" href=${FEEDBACK_LINK}>${i18nString(UIStrings.feedbackStandalone)}</x-link>
+        <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${{
+            feedbackUrl: FEEDBACK_LINK,
+            quickStartUrl: DOC_LINK,
+            quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
+          } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
+        </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
+        <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${{
+          feedbackUrl: FEEDBACK_LINK,
+          } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
+        </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -120,15 +120,8 @@ h1 {
   margin-bottom: 2px;
 }
 
-.feedback-standalone {
-  width: fit-content;
-  padding: 0.5em;
+devtools-feedback-button {
   align-self: flex-end;
-  color: var(--color-primary);
-  border: 1px solid var(--color-details-hairline);
-  border-radius: 2px;
-  text-decoration: none;
-  font-weight: bold;
 }
 
 .resources .devtools-link {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -38,10 +38,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
@@ -679,8 +679,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isEditable = this.hasEditableNode();
     // clang-format off
     if (isEditable && !this.editing) {
-      // Eagerly load CodeMirror to avoid a delay when opening the "Edit as HTML" editor when the user actually clicks on it
-      import('../../ui/components/text_editor/text_editor.js');
       contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this));
     }
     // clang-format on
@@ -1026,9 +1024,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     });
 
-    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
-    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
-    const {html} = await CodeMirror.html();
     const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
       doc: initialValue,
       extensions: [
@@ -1050,8 +1045,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         ]),
         TextEditor.Config.baseConfiguration(initialValue),
         TextEditor.Config.autocompletion,
-        html(),
-        TextEditor.Config.domWordWrap,
+        CodeMirror.html.html(),
+        TextEditor.Config.domWordWrap.instance(),
         CodeMirror.EditorView.theme({
           '&.cm-editor': {maxHeight: '300px'},
           '.cm-scroller': {overflowY: 'auto'},

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -65,7 +65,3 @@
 .close::after {
   transform: rotate(-45deg);
 }
-
-:host-context(.-theme-with-dark-background) input[type="checkbox"] {
-  filter: invert(80%);
-}

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

@@ -47,11 +47,11 @@ const UIStrings = {
   /**
   *@description Command that shows measuring rulers next to the emulated device.
   */
-  showRulers: 'Show rulers',
+  showRulers: 'Show rulers in the Device Mode toolbar',
   /**
   *@description Command that hides measuring rulers next to the emulated device.
   */
-  hideRulers: 'Hide rulers',
+  hideRulers: 'Hide rulers in the Device Mode toolbar',
   /**
   *@description Command that shows a frame (like a picture frame) around the emulated device.
   */

package/front_end/panels/issues/IssueKindView.ts

@@ -14,10 +14,17 @@ import * as Components from './components/components.js';
 
 const UIStrings = {
   /**
-    * @description Menu entry for hiding all current issues belonging to a particular kind.
-    * @example {Page Errors} PH1
+    * @description Menu entry for hiding all current Page Errors.
     */
-  hideAllCurrent: 'Hide all current {PH1}',
+  hideAllCurrentPageErrors: 'Hide all current Page Errors',
+  /**
+    * @description Menu entry for hiding all current Breaking Changes.
+    */
+  hideAllCurrentBreakingChanges: 'Hide all current Breaking Changes',
+  /**
+    * @description Menu entry for hiding all current Page Errors.
+    */
+  hideAllCurrentImprovements: 'Hide all current Improvements',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/IssueKindView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -70,6 +77,17 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     return this.kind;
   }
 
+  getHideAllCurrentKindString(): Common.UIString.LocalizedString {
+    switch (this.kind) {
+      case IssuesManager.Issue.IssueKind.PageError:
+        return i18nString(UIStrings.hideAllCurrentPageErrors);
+      case IssuesManager.Issue.IssueKind.Improvement:
+        return i18nString(UIStrings.hideAllCurrentImprovements);
+      case IssuesManager.Issue.IssueKind.BreakingChange:
+        return i18nString(UIStrings.hideAllCurrentBreakingChanges);
+    }
+  }
+
   private appendHeader(): void {
     const header = document.createElement('div');
     header.classList.add('header');
@@ -93,7 +111,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     const hideAvailableIssuesBtn = new Components.HideIssuesMenu.HideIssuesMenu();
     hideAvailableIssuesBtn.classList.add('hide-available-issues');
     hideAvailableIssuesBtn.data = {
-      menuItemLabel: i18nString(UIStrings.hideAllCurrent, {PH1: IssuesManager.Issue.getIssueKindName(this.kind)}),
+      menuItemLabel: this.getHideAllCurrentKindString(),
       menuItemAction: (): void => {
         const setting = IssuesManager.IssuesManager.getHideIssueByCodeSetting();
         const values = setting.get();

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

@@ -35,8 +35,6 @@ let loadedIssuesModule: (typeof Issues|undefined);
 
 async function loadIssuesModule(): Promise<typeof Issues> {
   if (!loadedIssuesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/issues');
     loadedIssuesModule = await import('./issues.js');
   }
   return loadedIssuesModule;

package/front_end/panels/layers/module.json

@@ -1,5 +1,4 @@
 {
   "dependencies": [
-    "panels/layer_viewer"
   ]
 }

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -74,6 +74,10 @@ input[type="radio"]:focus {
   outline-width: 2px;
 }
 
+:host-context(.-theme-with-dark-background) input[type="radio"] {
+  accent-color: var(--color-checkbox-accent-color);
+}
+
 .lighthouse-radio-text {
   margin-left: 3px;
 }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -30,8 +29,6 @@ let loadedMediaModule: (typeof Media|undefined);
 
 async function loadMediaModule(): Promise<typeof Media> {
   if (!loadedMediaModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/media');
     loadedMediaModule = await import('./media.js');
   }
   return loadedMediaModule;

package/front_end/panels/network/NetworkLogView.ts

@@ -1548,6 +1548,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         footerSection.appendItem(i18nString(UIStrings.copyAllAsCurlCmd), this.copyAllCurlCommand.bind(this, 'win'));
         footerSection.appendItem(i18nString(UIStrings.copyAllAsCurlBash), this.copyAllCurlCommand.bind(this, 'unix'));
       } else {
+        footerSection.appendItem(
+            i18nString(UIStrings.copyAsPowershell), this.copyPowerShellCommand.bind(this, request), disableIfBlob);
         footerSection.appendItem(
             i18nString(UIStrings.copyAsFetch), this.copyFetchCall.bind(this, request, FetchStyle.Browser),
             disableIfBlob);
@@ -1556,6 +1558,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
             disableIfBlob);
         footerSection.appendItem(
             i18nString(UIStrings.copyAsCurl), this.copyCurlCommand.bind(this, request, 'unix'), disableIfBlob);
+        footerSection.appendItem(i18nString(UIStrings.copyAllAsPowershell), this.copyAllPowerShellCommand.bind(this));
         footerSection.appendItem(
             i18nString(UIStrings.copyAllAsFetch), this.copyAllFetchCall.bind(this, FetchStyle.Browser));
         footerSection.appendItem(

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -331,7 +331,8 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
 
     this.splitWidget.setSidebarWidget(new SourceFrame.ResourceSourceFrame.ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
-            this.request.url(), Common.ResourceType.resourceTypes.WebSocket, content)));
+            this.request.url(), Common.ResourceType.resourceTypes.WebSocket, content),
+        ''));
   }
 
   private onFrameDeselected(): void {

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
@@ -117,8 +116,6 @@ let loadedNetworkModule: (typeof Network|undefined);
 
 async function loadNetworkModule(): Promise<typeof Network> {
   if (!loadedNetworkModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/network');
     loadedNetworkModule = await import('./network.js');
   }
   return loadedNetworkModule;

package/front_end/panels/profiler/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
+    "ui/legacy"
   ]
 }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -26,8 +25,6 @@ let loadedSecurityModule: (typeof Security|undefined);
 
 async function loadSecurityModule(): Promise<typeof Security> {
   if (!loadedSecurityModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/security');
     loadedSecurityModule = await import('./security.js');
   }
   return loadedSecurityModule;

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import breakpointEditDialogStyles from './breakpointEditDialog.css.js';
@@ -60,37 +60,23 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
   private readonly typeSelector: UI.Toolbar.ToolbarComboBox;
   private placeholderCompartment: CodeMirror.Compartment;
 
-  static async create(
+  constructor(
       editorLineNumber: number,
       oldCondition: string,
       preferLogpoint: boolean,
       onFinish: (arg0: {committed: boolean, condition: string}) => Promise<void>,
-      ): Promise<BreakpointEditDialog> {
-    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
-    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
+  ) {
+    super(true);
+
     const editorConfig = [
-      (await CodeMirror.javascript()).javascriptLanguage,
+      CodeMirror.javascript.javascriptLanguage,
       TextEditor.Config.baseConfiguration(oldCondition || ''),
       TextEditor.Config.autocompletion,
       CodeMirror.EditorView.lineWrapping,
       TextEditor.Config.showCompletionHint,
-      await TextEditor.JavaScript.completion(),
+      TextEditor.JavaScript.completion(),
       TextEditor.JavaScript.argumentHints(),
     ];
-    return new BreakpointEditDialog(
-        editorLineNumber, oldCondition, preferLogpoint, onFinish, TextEditor, CodeMirror, editorConfig);
-  }
-
-  constructor(
-      editorLineNumber: number,
-      oldCondition: string,
-      preferLogpoint: boolean,
-      onFinish: (arg0: {committed: boolean, condition: string}) => Promise<void>,
-      modTextEditor: typeof TextEditor,
-      readonly modCodeMirror: typeof CodeMirror,
-      editorConfig: CodeMirror.Extension,
-  ) {
-    super(true);
 
     this.onFinish = onFinish;
     this.finished = false;
@@ -119,7 +105,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
 
     const content = oldCondition || '';
     const finishIfComplete = (view: CodeMirror.EditorView): boolean => {
-      if (modTextEditor.JavaScript.isExpressionComplete(view.state)) {
+      if (TextEditor.JavaScript.isExpressionComplete(view.state)) {
         this.finishEditing(true, this.editor.state.doc.toString());
         return true;
       }
@@ -135,8 +121,8 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
         run: finishIfComplete,
       },
       {
-        ...modCodeMirror.standardKeymap.find(binding => binding.key === 'Enter') as CodeMirror.KeyBinding,
         key: 'Shift-Enter',
+        run: CodeMirror.insertNewlineAndIndent,
       },
       {
         key: 'Escape',
@@ -147,17 +133,17 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
       },
     ];
 
-    this.placeholderCompartment = new modCodeMirror.Compartment();
+    this.placeholderCompartment = new CodeMirror.Compartment();
 
     const editorWrapper = this.contentElement.appendChild(document.createElement('div'));
     editorWrapper.classList.add('condition-editor');
 
-    this.editor = new modTextEditor.TextEditor.TextEditor(modCodeMirror.EditorState.create({
+    this.editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
       doc: content,
       selection: {anchor: 0, head: content.length},
       extensions: [
         this.placeholderCompartment.of(this.getPlaceholder()),
-        modCodeMirror.keymap.of(keymap),
+        CodeMirror.keymap.of(keymap),
         editorConfig,
       ],
     }));
@@ -185,7 +171,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     if (type === BreakpointType.Breakpoint) {
       this.finishEditing(true, '');
     } else {
-      this.editor.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
+      this.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
       this.updateTooltip();
     }
   }
@@ -198,10 +184,10 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
   private getPlaceholder(): CodeMirror.Extension {
     const type = this.breakpointType;
     if (type === BreakpointType.Conditional) {
-      return this.modCodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
+      return CodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
     }
     if (type === BreakpointType.Logpoint) {
-      return this.modCodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX));
+      return CodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX));
     }
     return [];
   }