Skip to content
Permalink
Browse files
Web Inspector: Network Tab: initiated resource should only be highlig…
…hted when a row is hovered

https://bugs.webkit.org/show_bug.cgi?id=243866

Reviewed by Patrick Angle.

* Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView.prototype._highlightRelatedResourcesForHoveredResource):
(WI.NetworkTableContentView.prototype._entryForResource):
* Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css:
(.network-table.highlight-initiated > .table li:not(:hover, .selected, .initiated) .cell): Renamed from `body.shift-key-pressed .network-table > .table:hover li:not(:hover, .selected, .initiated) .cell`.
(.network-table.highlight-initiated > .table li:not(:hover, .selected, .initiated) .cell > *): Renamed from `body.shift-key-pressed .network-table > .table:hover li:not(:hover, .selected, .initiated) .cell > *`.
(.network-table.highlight-initiated > .table li.initiated .cell.name::after): Renamed from `body.shift-key-pressed .network-table > .table:hover li.initiated .cell.name::after`.
Apply a CSS class manually instead of using the global `.shift-key-pressed`, as that is set whenever
the shift key is pressed regardless of where the mouse is on the screen. Doing it manually means we
can better control when it's set, such as only when there's a row underneath the cursor. This way,
errant presses of the shift key won't suddenly cause the entire table to dim.

Canonical link: https://commits.webkit.org/253476@main
  • Loading branch information
dcrousso committed Aug 16, 2022
1 parent dfc6c1f commit 06e6a494bd4c5d7af45af5eab181b56e4234b79b
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 5 deletions.
@@ -97,16 +97,16 @@
cursor: pointer;
}

body.shift-key-pressed .network-table > .table:hover li:not(:hover, .selected, .initiated) .cell {
.network-table.highlight-initiated > .table li:not(:hover, .selected, .initiated) .cell {
color: var(--text-color-transparent);
}

body.shift-key-pressed .network-table > .table:hover li:not(:hover, .selected, .initiated) .cell > * {
.network-table.highlight-initiated > .table li:not(:hover, .selected, .initiated) .cell > * {
color: var(--text-color);
opacity: 0.4;
}

body.shift-key-pressed .network-table > .table:hover li.initiated .cell.name::after {
.network-table.highlight-initiated > .table li.initiated .cell.name::after {
display: inline-block;
float: right;
width: 4px;
@@ -1587,9 +1587,12 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie

_highlightRelatedResourcesForHoveredResource()
{
let highlightInitiated = !isNaN(this._hoveredRowIndex) && WI.modifierKeys.shiftKey;
this.element.classList.toggle("highlight-initiated", highlightInitiated);

let needsRestyle = false;

if (isNaN(this._hoveredRowIndex) || !WI.modifierKeys.shiftKey) {
if (!highlightInitiated) {
for (let entry of this._activeCollection.entries) {
if (entry.rowClassNames.length)
needsRestyle = true;
@@ -1994,7 +1997,7 @@ WI.NetworkTableContentView = class NetworkTableContentView extends WI.ContentVie

let rowClassNames = [];

if (this._hoveredRowIndex) {
if (!isNaN(this._hoveredRowIndex) && WI.modifierKeys.shiftKey) {
let hoveredEntry = this._activeCollection.filteredEntries[this._hoveredRowIndex];
if (hoveredEntry?.resource?.initiatedResources.includes(resource))
rowClassNames.push("initiated");

0 comments on commit 06e6a49

Please sign in to comment.