[network] Clicking on 'View Headers' actually opens the 'Headers' tab
This CL extends the RequestActivated event by an optional Tab for the
NetworkItemView. For the 'View Headers' link we want to show the
'Headers' tab of the NetworkItemView.
Please note that we can't use the Revelaer for NetworkRequests as
the revealer requires an already open NetworkItemView which is not
the case for this workflow (looking at requests in the log view).
[email protected]
Bug: chromium:1060136
Change-Id: I868e03dfbc6086d44a60db3d63e2199eb17a3b82
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2097982
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Sigurd Schneider <[email protected]>
diff --git a/front_end/network/NetworkDataGridNode.js b/front_end/network/NetworkDataGridNode.js
index fe0be93..b3a2c9d 100644
--- a/front_end/network/NetworkDataGridNode.js
+++ b/front_end/network/NetworkDataGridNode.js
@@ -37,6 +37,7 @@
import * as SDK from '../sdk/sdk.js';
import * as UI from '../ui/ui.js';
+import {Tabs as NetworkItemViewTabs} from './NetworkItemView.js';
import {NetworkTimeCalculator} from './NetworkTimeCalculator.js'; // eslint-disable-line no-unused-vars
/** @enum {symbol} */
@@ -1025,7 +1026,7 @@
this._nameCell = cell;
cell.addEventListener('dblclick', this._openInNewTab.bind(this), false);
cell.addEventListener('click', () => {
- this.parentView().dispatchEventToListeners(Events.RequestActivated, /* showPanel */ true);
+ this.parentView().dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
});
let iconElement;
if (this._request.resourceType() === Common.ResourceType.resourceTypes.Image) {
@@ -1131,7 +1132,8 @@
}
if (displayShowHeadersLink) {
this._setTextAndTitleAndLink(cell, Common.UIString.UIString('(blocked:%s)', reason), 'View Headers', () => {
- this.parentView().dispatchEventToListeners(Events.RequestActivated, /* showPanel */ true);
+ this.parentView().dispatchEventToListeners(
+ Events.RequestActivated, {showPanel: true, tab: NetworkItemViewTabs.Headers});
});
} else {
this._setTextAndTitle(cell, Common.UIString.UIString('(blocked:%s)', reason));
diff --git a/front_end/network/NetworkItemView.js b/front_end/network/NetworkItemView.js
index 27c50a8..4e46f8b 100644
--- a/front_end/network/NetworkItemView.js
+++ b/front_end/network/NetworkItemView.js
@@ -46,8 +46,11 @@
/**
* @param {!SDK.NetworkRequest.NetworkRequest} request
* @param {!NetworkTimeCalculator} calculator
+ * @param {!Tabs=} initialTab If specified, will open `initalTab` when the view shows. Otherwise the tab that
+ * was last shown is opened. Note that specifying `initalTab` won't override the
+ * setting that stores the 'last opened tab' (similar to how revealers work).
*/
- constructor(request, calculator) {
+ constructor(request, calculator, initialTab) {
super();
this._request = request;
this.element.classList.add('network-item-view');
@@ -92,6 +95,9 @@
/** @type {?RequestCookiesView} */
this._cookiesView = null;
+
+ /** @type {!Tabs} */
+ this._initialTab = initialTab || this._resourceViewTabSetting.get();
}
/**
@@ -104,7 +110,7 @@
this._request.addEventListener(
SDK.NetworkRequest.Events.ResponseHeadersChanged, this._maybeAppendCookiesPanel, this);
this._maybeAppendCookiesPanel();
- this._selectTab();
+ this._selectTab(this._initialTab);
}
/**
@@ -129,13 +135,9 @@
}
/**
- * @param {string=} tabId
+ * @param {string} tabId
*/
_selectTab(tabId) {
- if (!tabId) {
- tabId = this._resourceViewTabSetting.get();
- }
-
if (!this.selectTab(tabId)) {
this.selectTab('headers');
}
diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js
index 48804d6..27b8625 100644
--- a/front_end/network/NetworkLogView.js
+++ b/front_end/network/NetworkLogView.js
@@ -763,7 +763,7 @@
this._dataGrid.element.addEventListener('mouseleave', () => this._setHoveredNode(null), true);
this._dataGrid.element.addEventListener('keydown', event => {
if (isEnterOrSpaceKey(event)) {
- this.dispatchEventToListeners(Events.RequestActivated, /* showPanel */ true);
+ this.dispatchEventToListeners(Events.RequestActivated, {showPanel: true});
event.consume(true);
}
});
@@ -1194,7 +1194,7 @@
}
_reset() {
- this.dispatchEventToListeners(Events.RequestActivated, /* showPanel */ false);
+ this.dispatchEventToListeners(Events.RequestActivated, {showPanel: false});
this._setHoveredNode(null);
this._columns.reset();
diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js
index 49301e7..ef4a324 100644
--- a/front_end/network/NetworkPanel.js
+++ b/front_end/network/NetworkPanel.js
@@ -40,7 +40,7 @@
import {BlockedURLsPane} from './BlockedURLsPane.js';
import {Events} from './NetworkDataGridNode.js';
-import {NetworkItemView} from './NetworkItemView.js';
+import {NetworkItemView, Tabs as NetworkItemViewTabs} from './NetworkItemView.js'; // eslint-disable-line no-unused-vars
import {FilterType, NetworkLogView} from './NetworkLogView.js'; // eslint-disable-line no-unused-vars
import {NetworkOverview} from './NetworkOverview.js';
import {NetworkSearchScope, UIRequestLocation} from './NetworkSearchScope.js'; // eslint-disable-line no-unused-vars
@@ -505,21 +505,24 @@
}
/**
- * @param {!Common.EventTarget.EventTargetEvent} event
+ * @param {!{data: *}} event
*/
_onRequestActivated(event) {
- const showPanel = /** @type {boolean} */ (event.data);
- if (showPanel) {
- this._showRequestPanel();
+ const eventData = /** @type {!{showPanel: boolean, tab: !NetworkItemViewTabs}} */ (event.data);
+ if (eventData.showPanel) {
+ this._showRequestPanel(eventData.tab);
} else {
this._hideRequestPanel();
}
}
- _showRequestPanel() {
+ /**
+ * @param {!NetworkItemViewTabs=} shownTab
+ */
+ _showRequestPanel(shownTab) {
this._clearNetworkItemView();
if (this._currentRequest) {
- this._createNetworkItemView();
+ this._createNetworkItemView(shownTab);
}
this._updateUI();
}
@@ -544,12 +547,15 @@
this._networkItemView = null;
}
}
-
- _createNetworkItemView() {
+ /**
+ * @param {!NetworkItemViewTabs=} initialTab
+ */
+ _createNetworkItemView(initialTab) {
if (!this._currentRequest) {
return;
}
- this._networkItemView = new NetworkItemView(this._currentRequest, this._networkLogView.timeCalculator());
+ this._networkItemView =
+ new NetworkItemView(this._currentRequest, this._networkLogView.timeCalculator(), initialTab);
this._networkItemView.leftToolbar().appendToolbarItem(new UI.Toolbar.ToolbarItem(this._closeButtonElement));
this._networkItemView.show(this._detailsWidget.element);
this._splitWidget.showBoth();
