chrome-devtools-frontend 1.0.920568 → 1.0.922044

package/front_end/panels/network/RequestTimingView.ts

@@ -40,6 +40,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {Events} from './NetworkTimeCalculator.js';
 
+import networkingTimingTableStyles from './networkTimingTable.css.js';
+
 const UIStrings = {
   /**
   *@description Text used to label the time taken to receive an HTTP/2 Push message.
@@ -360,7 +362,6 @@ export class RequestTimingView extends UI.Widget.VBox {
   static createTimingTable(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator): Element {
     const tableElement = document.createElement('table');
     tableElement.classList.add('network-timing-table');
-    UI.Utils.appendStyle(tableElement, 'panels/network/networkTimingTable.css');
     const colgroup = tableElement.createChild('colgroup');
     colgroup.createChild('col', 'labels');
     colgroup.createChild('col', 'bars');
@@ -647,6 +648,7 @@ export class RequestTimingView extends UI.Widget.VBox {
     this.request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.refresh, this);
     this.calculator.addEventListener(Events.BoundariesChanged, this.refresh, this);
+    this.registerCSSFiles([networkingTimingTableStyles]);
     this.refresh();
   }
 

package/front_end/panels/network/forward/UIRequestLocation.ts

@@ -24,6 +24,7 @@ export enum UIRequestTabs {
   Cookies = 'cookies',
   EventSource = 'eventSource',
   Headers = 'headers',
+  Payload = 'payload',
   Initiator = 'initiator',
   Preview = 'preview',
   Response = 'response',

package/front_end/panels/network/module.json

@@ -8,8 +8,5 @@
     "panels/search",
     "ui/legacy/components/source_frame",
     "ui/legacy"
-  ],
-    "resources": [
-      "networkTimingTable.css"
   ]
 }

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

@@ -109,6 +109,11 @@ Network.RequestHTMLView = NetworkModule.RequestHTMLView.RequestHTMLView;
  */
 Network.RequestHeadersView = NetworkModule.RequestHeadersView.RequestHeadersView;
 
+/**
+ * @constructor
+ */
+Network.RequestPayloadView = NetworkModule.RequestPayloadView.RequestPayloadView;
+
 /**
  * @constructor
  */

package/front_end/panels/network/network.ts

@@ -46,6 +46,7 @@ import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
+import * as RequestPayloadView from './RequestPayloadView.js';
 import * as RequestPreviewView from './RequestPreviewView.js';
 import * as RequestResponseView from './RequestResponseView.js';
 import * as RequestTimingView from './RequestTimingView.js';
@@ -72,6 +73,7 @@ export {
   RequestHeadersView,
   RequestHTMLView,
   RequestInitiatorView,
+  RequestPayloadView,
   RequestPreviewView,
   RequestResponseView,
   RequestTimingView,

package/front_end/panels/network/requestPayloadTree.css

@@ -0,0 +1,130 @@
+/*
+ * Copyright 2016 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.
+ */
+
+.tree-outline {
+  padding-left: 0;
+
+  --override-error-background-color: #d93025;
+  --override-error-text-color: #fff;
+  --override-call-to-action-border-color: #f29900;
+  --override-header-highlight-background-color: #ffff78;
+}
+
+.-theme-with-dark-background .tree-outline,
+:host-context(.-theme-with-dark-background) .tree-outline {
+  --override-error-text-color: #000;
+  --override-call-to-action-border-color: rgb(255 166 13);
+  --override-header-highlight-background-color: rgb(135 135 0);
+}
+
+.tree-outline > ol {
+  padding-bottom: 5px;
+  border-bottom: solid 1px var(--color-details-hairline);
+}
+
+.tree-outline > .parent {
+  user-select: none;
+  font-weight: bold;
+  color: var(--color-text-primary);
+  margin-top: -1px;
+  display: flex;
+  align-items: center;
+  height: 26px;
+}
+
+.tree-outline li {
+  display: block;
+  padding-left: 5px;
+  line-height: 20px;
+}
+
+.tree-outline li:not(.parent) {
+  margin-left: 10px;
+}
+
+.tree-outline li:not(.parent)::before {
+  display: none;
+}
+
+.tree-outline li.expanded .payload-count {
+  display: none;
+}
+
+.tree-outline li .payload-toggle {
+  display: none;
+}
+
+.tree-outline li.expanded .payload-toggle {
+  display: inline;
+  margin-left: 30px;
+  font-weight: normal;
+  color: var(--color-text-primary);
+}
+
+.tree-outline li .header-toggle:hover {
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.tree-outline .payload-name {
+  color: var(--color-text-secondary);
+  display: inline-block;
+  margin-right: 0.25em;
+  font-weight: bold;
+  vertical-align: top;
+  white-space: pre-wrap;
+}
+
+.tree-outline .payload-separator {
+  user-select: none;
+}
+
+.tree-outline .payload-value {
+  display: inline;
+  margin-right: 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin-top: 1px;
+}
+
+.tree-outline .empty-request-payload {
+  color: var(--color-text-disabled);
+}
+
+.request-payload-show-more-button {
+  border: none;
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 12px;
+  font-family: sans-serif;
+  cursor: pointer;
+  margin: 0 4px;
+  padding: 2px 4px;
+}
+
+@media (forced-colors: active) {
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
+    background: Highlight;
+  }
+
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li::before {
+    background-color: ButtonText;
+  }
+
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent::before {
+    background-color: HighlightText;
+  }
+
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected *,
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent,
+  :host-context(.request-payload-tree) ol.tree-outline:not(.hide-selection-when-blurred) li.selected.parent span {
+    color: HighlightText;
+  }
+}
+
+.payload-decode-error {
+  color: var(--color-accent-red);
+}

package/front_end/panels/network/requestPayloadView.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2014 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.
+ */
+
+.request-payload-view {
+  user-select: text;
+  overflow: auto;
+}
+
+.request-payload-tree {
+  flex-grow: 1;
+  overflow-y: auto;
+  margin: 0;
+}

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -190,9 +190,9 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     this.overviewPane.selectRange(timeLeft, timeRight);
   }
 
-  onEntrySelected(event: Common.EventTarget.EventTargetEvent): void {
+  onEntrySelected(event: Common.EventTarget.EventTargetEvent<void|number>): void {
     if (event.data) {
-      const eventIndex = Number(event.data);
+      const eventIndex = event.data;
       this.mainPane.setSelectedEntry(eventIndex);
       if (eventIndex === -1) {
         this.entrySelected = false;
@@ -205,7 +205,7 @@ export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.Searchabl
     }
   }
 
-  onEntryInvoked(event: Common.EventTarget.EventTargetEvent): void {
+  onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): void {
     this.onEntrySelected(event);
     this.dispatchEventToListeners(PerfUI.FlameChart.Events.EntryInvoked, event.data);
   }

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -66,7 +66,8 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/ProfileLauncherView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ProfileLauncherView extends UI.Widget.VBox {
+export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) {
   readonly panel: ProfilesPanel;
   private contentElementInternal: HTMLElement;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
@@ -232,3 +233,7 @@ export class ProfileLauncherView extends UI.Widget.VBox {
 export enum Events {
   ProfileTypeSelected = 'ProfileTypeSelected',
 }
+
+export type EventTypes = {
+  [Events.ProfileTypeSelected]: ProfileType,
+};

package/front_end/panels/profiler/ProfileView.ts

@@ -413,7 +413,7 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     });
   }
 
-  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent): Promise<void> {
+  async onEntryInvoked(event: Common.EventTarget.EventTargetEvent<number>): Promise<void> {
     if (!this.dataProvider) {
       return;
     }

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -282,8 +282,8 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
     this.launcherView.profileFinished();
   }
 
-  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent): void {
-    this.selectedProfileType = (event.data as ProfileType);
+  onProfileTypeSelected(event: Common.EventTarget.EventTargetEvent<ProfileType>): void {
+    this.selectedProfileType = event.data;
     this.updateProfileTypeSpecificUI();
   }
 

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -45,13 +45,13 @@ export class InplaceFormatterEditorAction implements EditorAction {
     return inplaceFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
   }
 
-  private editorClosed(event: Common.EventTarget.EventTargetEvent): void {
-    const wasSelected = (event.data.wasSelected as boolean);
+  private editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
+    const {wasSelected} = event.data;
     if (wasSelected) {
       this.updateButton(null);
     }

package/front_end/panels/sources/ScriptFormatterEditorAction.ts

@@ -10,7 +10,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {EditorAction, SourcesView} from './SourcesView.js';
+import type {EditorAction, EditorClosedEvent, SourcesView} from './SourcesView.js';
 import {Events, registerEditorAction} from './SourcesView.js';
 
 const UIStrings = {
@@ -48,8 +48,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     return scriptFormatterEditorActionInstance;
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     this.updateButton(uiSourceCode);
 
     if (this.isFormattableScript(uiSourceCode) && this.pathsToFormatOnLoad.has(uiSourceCode.url()) &&
@@ -58,9 +58,8 @@ export class ScriptFormatterEditorAction implements EditorAction {
     }
   }
 
-  private async editorClosed(event: Common.EventTarget.EventTargetEvent): Promise<void> {
-    const uiSourceCode = (event.data.uiSourceCode as Workspace.UISourceCode.UISourceCode);
-    const wasSelected = (event.data.wasSelected as boolean);
+  private async editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): Promise<void> {
+    const {uiSourceCode, wasSelected} = event.data;
 
     if (wasSelected) {
       this.updateButton(null);

package/front_end/panels/sources/SourcesPanel.ts

@@ -643,8 +643,8 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
-  private editorSelected(event: Common.EventTarget.EventTargetEvent): void {
-    const uiSourceCode = (event.data as Workspace.UISourceCode.UISourceCode);
+  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
+    const uiSourceCode = event.data;
     if (this.editorView.mainWidget() &&
         Common.Settings.Settings.instance().moduleSetting('autoRevealInNavigator').get()) {
       this.revealInNavigator(uiSourceCode, true);
@@ -1111,10 +1111,9 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
       return;
     }
     const entry = items[0].webkitGetAsEntry();
-    if (!entry.isDirectory) {
-      return;
+    if (entry && entry.isDirectory) {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.upgradeDraggedFileSystemPermissions(entry.filesystem);
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.upgradeDraggedFileSystemPermissions(entry.filesystem);
   }
 }
 

package/front_end/panels/sources/SourcesView.ts

@@ -40,8 +40,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable,
-                                                           UI.SearchableView.Replaceable {
+export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+    implements TabbedEditorContainerDelegate, UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
   private placeholderOptionArray: {
     element: HTMLElement,
     handler: Function,
@@ -446,7 +446,10 @@ export class SourcesView extends UI.Widget.VBox implements TabbedEditorContainer
     this.updateToolbarChangedListener();
     this.updateScriptViewToolbarItems();
 
-    this.dispatchEventToListeners(Events.EditorSelected, this.editorContainer.currentFile());
+    const currentFile = this.editorContainer.currentFile();
+    if (currentFile) {
+      this.dispatchEventToListeners(Events.EditorSelected, currentFile);
+    }
   }
 
   private removeToolbarChangedListener(): void {
@@ -581,6 +584,16 @@ export  // TODO(crbug.com/1167717): Make this a const enum again
       EditorSelected = 'EditorSelected',
     }
 
+export interface EditorClosedEvent {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  wasSelected: boolean;
+}
+
+export type EventTypes = {
+  [Events.EditorClosed]: EditorClosedEvent,
+  [Events.EditorSelected]: Workspace.UISourceCode.UISourceCode,
+};
+
 /**
  * @interface
  */

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -51,7 +51,9 @@ import {ScriptOriginPlugin} from './ScriptOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
 
-export class UISourceCodeFrame extends SourceFrame.SourceFrame.SourceFrameImpl {
+export class UISourceCodeFrame extends
+    Common.ObjectWrapper.eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
+        SourceFrame.SourceFrame.SourceFrameImpl) {
   private uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
   private readonly diff: SourceFrame.SourceCodeDiff.SourceCodeDiff|undefined;
   private muteSourceCodeEvents: boolean;
@@ -919,3 +921,7 @@ function messageLevelComparator(a: Workspace.UISourceCode.Message, b: Workspace.
 export enum Events {
   ToolbarItemsChanged = 'ToolbarItemsChanged',
 }
+
+export type EventTypes = {
+  [Events.ToolbarItemsChanged]: void,
+};

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,17 +7,12 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  right: 6px;
+  right: 16px;
   cursor: pointer;
   opacity: 0%;
-  min-width: 20px;
 }
 
 .watch-expression-header:hover .watch-expression-delete-button {
-  opacity: 50%;
-}
-
-.watch-expression-header:hover .watch-expression-delete-button:hover {
   opacity: 100%;
 }
 
@@ -101,7 +96,7 @@ li.watch-expression-tree-item {
 }
 
 li.watch-expression-tree-item:hover {
-  background-color: var(--color-background-elevation-2);
+  background-color: var(--color-background-elevation-1);
 }
 
 .watch-expression-header:focus-visible {