860175 - On netmonitor examining the specific details of a network action leads to bad overlapping display

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P1)

Description

[Mark Banner (:standard8)]

Attachment: Screenshort of bad overlap

Having a narrow window and displaying the specific details of a network action leads to some really bad looking overlap and not being able to see all of the columns - see the attached screenshot.

Comment 1

[Victor Porof [:vporof][:vp]]

Apparently this is a xul <toolbar> issue. Under very extreme conditions, the same thing happens in the inspector.

Comment 3

[Victor Porof [:vporof][:vp]]

Attachment: v1

Comment 4

[Victor Porof [:vporof][:vp]]

Ok, all of this overlapping is really awful, marking as P1.

Comment 5

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 738438 [details] [diff] [review]
v1

Review of attachment 738438 [details] [diff] [review]:
-----------------------------------------------------------------

I want to play with this to see what it looks like, but should be good.

::: browser/devtools/netmonitor/netmonitor-view.js
@@ +603,5 @@
> +      ];
> +
> +      // Flush headers.
> +      columns.forEach(([, attribute]) => table.removeAttribute(attribute));
> +      let availableWidth = toolbar.getBoundingClientRect().width;

curious if this causes any slowdown due to calculating frame offsets here. Any noticeable difference?

::: browser/devtools/netmonitor/netmonitor.xul
@@ +45,5 @@
>          <label id="requests-menu-waterfall-label"
>                 class="plain requests-menu-header requests-menu-waterfall"
>                 value="&netmonitorUI.toolbar.waterfall;"
>                 crop="end"/>
> +        <spacer id="toolbar-spacer" flex="1"/>

not a terribly specific id. Maybe netmonitor-toolbar-spacer?

::: browser/themes/linux/devtools/netmonitor.css
@@ +92,5 @@
>    font-weight: 600;
>  }
>  
>  .requests-menu-file {
> +  width: 18vw;

are we using viewport percentages anywhere else in our css? That was a new one on me, I admit.

how'd you come to 18 of them?

Comment 6

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 738438 [details] [diff] [review]
v1

Review of attachment 738438 [details] [diff] [review]:
-----------------------------------------------------------------

yeah, this works well!

Comment 7

[Victor Porof [:vporof][:vp]]

(In reply to Rob Campbell [:rc] (:robcee) from comment #5)
> 
> curious if this causes any slowdown due to calculating frame offsets here.
> Any noticeable difference?
> 

Not that I noticed. This doesn't really allow stuff to be painted, it's mostly just letting the layer know that hey, just calculate widths regardless of hidden things.

> ::: browser/devtools/netmonitor/netmonitor.xul
> @@ +45,5 @@
> >          <label id="requests-menu-waterfall-label"
> >                 class="plain requests-menu-header requests-menu-waterfall"
> >                 value="&netmonitorUI.toolbar.waterfall;"
> >                 crop="end"/>
> > +        <spacer id="toolbar-spacer" flex="1"/>
> 
> not a terribly specific id. Maybe netmonitor-toolbar-spacer?

Wokay.

> 
> ::: browser/themes/linux/devtools/netmonitor.css
> @@ +92,5 @@
> >    font-weight: 600;
> >  }
> >  
> >  .requests-menu-file {
> > +  width: 18vw;
> 
> are we using viewport percentages anywhere else in our css? That was a new
> one on me, I admit.
> 

Yup, common.inc.css. (although I was the one that evangelized them there; I think they work amazing in this case).

> how'd you come to 18 of them?

It felt good and gave a reasonably airy feel to the list.

Comment 8

[Victor Porof [:vporof][:vp]]

https://hg.mozilla.org/integration/fx-team/rev/ca1f0cbdff36

Comment 9

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/ca1f0cbdff36