1754664 - Double clicking header value select a portion of the header name

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[josh]

Attachment: Screen Shot 2022-02-10 at 3.38.30 pm.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:97.0) Gecko/20100101 Firefox/97.0

Steps to reproduce:

1. Open devtools network inspector
2. Navigate to mozilla.org
3. In the devtools network inspector, select the request for https://www.mozilla.org
4. In the Request Headers panel, scroll down to a header such as x-frame-options: DENY
5. Double click the value DENY

Actual results:

A part of the header name (options) was selected as well as the value

Expected results:

Only the header value should have been selected.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Netmonitor' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Patrick Demers]

I will fix this.

Currently, the colon is being added in TreeView.css (line 37). The described behavior occurs anywhere a tree is rendered. There is not a word-breaking character between the key and value since content added through CSS is not a part of the regular DOM.

A simple option to fix this is add the colon in LabelCell.js (line 69) when renderSuffix is falsy and remove the colon from CSS. This would break tests because the colon is now included in the HTML, but they could be easily modified to expect this new behavior.

This would also change behavior when copying and pasting since the colon would be included. Personally, I would prefer this when using dev tools.

:bomsy does this approach sound logical to you or do you have an alternative method you would recommend?

Comment 3

[Hubert Boma Manilla (:bomsy)]

Sure. i agree lets go that direction.

I'm assigning to you.

Thanks

Comment 4

[Patrick Demers]

Attachment: Bug 1754664: Display colon in tree key-value pair using JS instead of CSS r=bomsy

Comment 5

[Patrick Demers]

Adding my comment from Phabricator here...

Wed, Feb 16, 6:28 PM
I just discovered that multiple different CSS files revert the content of .treeTable .treeLabelCell::after back to "".

Example of this:

// devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css:485
.network-monitor .security-panel .treeTable .treeLabelCell::after,
.network-monitor .treeTable .tree-section .treeLabelCell::after {
content: "";
}

I will continue to stew about the best way to implement this change, since it can't happen on all instances of .treeTable .treeLabelCell. Any insight you have would be appreciated :bomsy.

Also, thank you for helping me get started on my journey contributing to Mozilla!

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Comment 7

[josh]

I'm going to try to pick this up, probably persuing a similar method as the previous contributor.

One thing I noticed is that fixing this makes apparent that there's another secret bug with header selection. The .treeValueCell has a leading 39px padding which overlaps the .treeLabelCell which prevents the last ~30px of the label from being selected.

https://i.imgur.com/VLAe8Ve.png

That padding (and the negative margin) on the label could be removed, but then it changes how long header values are wrapped (the padding so so wrapped values appear aligned under the label, rather than the [?] icon). It might be possible to fiddle with z-index to leave the padding to mitigate this, but I'll continue to investigate early next week.

Comment 8

[josh]

Attachment: WIP: Bug 1754664 - Fix double clicking netmonitor header value selecting name r=bomsy

r=bomsy

Moves the colon seperator into the JS/HTML rather than as a CSS psuedo
element. Also raises the z-index of the header label to prevent the
value from overlapping it.