909251 - DevTools Themes - Improve UI for timeline in netmonitor

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect)

Description

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

The current colorscheme is a little hard to use. We should have better colors.

Comment 1

[Brian Grinstead [:bgrins]]

I'm trying to figure out what the different colors in a mockup like this mean: https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail].  The different colors seem to be for MIME type, while opacity is indicating different states.  Right now we have different colors for the different request states (blocked, dns, connect, send, wait, recieve).

I'm thinking of proceeding by just replacing the existing colors with the new theme colors, while removing shadows / making it match the theme more closely.  I could also change the functionality if we could specify it a little bit more than is done in this single mockup.

Comment 2

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

I don't think that mockup was ever finalized. Furthermore, we don't have a light theme mockup yet, so maybe we should wait a bit before starting work on this?

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Victor Porof [:vp] from comment #2)
> I don't think that mockup was ever finalized. Furthermore, we don't have a
> light theme mockup yet, so maybe we should wait a bit before starting work
> on this?

Maybe I should do this under a different bug, but I'm wanting to at least get a white background version done to unblock Bug 957117.  I found this bug # in this comment: https://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/netmonitor.inc.css#345, so started on it here.

Darrin has mentioned that he'd like this tab to match at least somewhat before moving forward with the light toolbars - maybe we could come to a consensus about how much it should match?  I'll post a couple of screenshots with current state and my current WIP for this.

Comment 4

[Brian Grinstead [:bgrins]]

Attachment: current-wip-light-network-panel.png

Comment 5

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

Switching to the new colors *and* making the waterfall look good is the main issue here.

Comment 6

[Brian Grinstead [:bgrins]]

OK, I will open a new bug for switching to the new theme colors.

Comment 7

[Brian Grinstead [:bgrins]]

Breaking the light / dark theming into Bug 958231

Comment 8

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

Attachment: sideshow WIP

WIP patch.

Comment 9

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

Attachment: dark theme

Comment 10

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

Attachment: light theme

Comment 11

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

As an experiment, how would the waterfall look if those lines would be even thinner, by 2 or 4px? It might look neat! I wonder what Paul and Darrin think. Paul did a timeline mockup a long time ago that used very thin lines and looked amazing.

Comment 12

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

Paul, where's that timeline thing you made? Also, see comment 11.

Comment 13

[Girish Sharma [:Optimizer]]

I also suggested 9 px instead of 12

and here is the timeline : https://bug777847.bugzilla.mozilla.org/attachment.cgi?id=646265

Comment 14

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

TODO:

12:23 < victorporof|away> robcee: if we're going with a square looking 
                          waterfall, the start and end "caps" nodes should be 
                          removed
12:23 < victorporof|away> they were there just for the roundness at the edges
12:24 < victorporof|away> robcee: see 
http://dxr.mozilla.org/mozilla-central/source/browser/devtools/netmonitor/netmonitor-view.js#1100
12:24 < victorporof|away> "Make the start cap inherit the aspect of the first 
                          timing box"
12:24 < victorporof|away> they'll be redundant now

Comment 15

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

Attachment: sideshow

updated, removed comments, tests pass.

TBD, followup for different shapes for status bubbles.

timings boxes don't line up flush with start of waterfall. I'd expect first request to start at 0ms and think we're missing 4px of cap padding.

Comment 16

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

Comment on attachment 8370992 [details] [diff] [review]
sideshow

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

I <3 this! Thank you Rob, everything is pretty now and makes me want to hug my laptop when using the Network Monitor. Scrolling is also much faster!

To make the timing boxes align to the left, make the 4px start padding in .requests-menu-subitem.requests-menu-waterfall be 0px instead.

I'd love for the colors to be a slight idea more transparent, to allow the timing lines underneath to be more visible, but that's just my gripe. Please let's get some user feedback on this.

::: browser/themes/shared/devtools/netmonitor.inc.css
@@ +194,4 @@
>  }
>  
>  .theme-light box.requests-menu-status[code^="4"] {
> +  background-color: rgba(237, 38, 85, 1);

Please add a comment specifying which color is this.

Comment 17

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Comment on attachment 8369632 [details]
dark theme

such pretty
very flat
no haloz
wow

Comment 18

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

Attachment: sideshow

Comment 19

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

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

Comment 20

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

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

Comment 21

[Ryan VanderMeulen [:RyanVM]]

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

Comment 22

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

Comment on attachment 8371599 [details] [diff] [review]
sideshow

[Approval Request Comment]
Bug caused by (feature/regressing bug #): bad styling
User impact if declined: users will be subjected to ugliness
Testing completed (on m-c, etc.): on m-c for a week+
Risk to taking this patch (and alternatives if risky): minimal. Mostly style changes.
String or IDL/UUID changes made by this patch: n/a

Comment 23

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/91bead7b6825

Comment 24

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

hey Sylvestre,

just curious why this was marked tracking-firefox29: -. It's checked into Aurora 29 and my understanding was that we used those flags to keep track of bugs fixed in which release.

bug 968924 was marked tracking29+ by comparison.

Comment 25

[Sylvestre Ledru [:Sylvestre]]

Tracking flags are used to keep track of the release critical bugs. This bug is fixed, uplifted in aurora, low risk and already merged. So, I didn't see the point to track it (and I should have done the same with the other one :)