1170617 - Consolidate the table styles across the developer tools

Status: NEW

(DevTools :: Shared Components, defect)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

In 1165576, the netmonitor theme was refreshed to https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail] [1].

There are still some tweaks that can be done to further improve the UX.

- The text font color should be grey like the tabs which is easier on the eyes. See mockup [1]. 

- The reload button isn't clear that it is a button because of the dark background in the button

- The background colors should be adjusted to the colors used in the mockup (@shorlander?) [1]

[1] https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/[e-mail]

Comment 1

[Tim Nguyen :ntim]

(In reply to Gabriel Luong [:gl] from comment #0)
> In 1165576, the netmonitor theme was refreshed to
> https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/
> [e-mail] [1].
> 
> There are still some tweaks that can be done to further improve the UX.
> 
> - The text font color should be grey like the tabs which is easier on the
> eyes. See mockup [1]. 
Yes, we should use var(--theme-body-color) (gray) here.

> - The reload button isn't clear that it is a button because of the dark
> background in the button
You are definitively right here.

> - The background colors should be adjusted to the colors used in the mockup
> (@shorlander?) [1]
>
> [1]
> https://people.mozilla.org/~shorlander/mockups/devTools/ux-refresh-2013/
> [e-mail]
FYI, I couldn't find this color anywhere here : https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors 
var(--theme-sidebar-background) is probably the nearest color here.

Comment 2

[Helen V. Holmes (:helenvholmes) (:✨)]

Tim's comments make sense to me. Tim, did you mean to assign this bug to me, or was there additional information you needed from me?

Comment 3

[Tim Nguyen :ntim]

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #2)
> Tim's comments make sense to me. Tim, did you mean to assign this bug to me,
> or was there additional information you needed from me?

Can you give a quick review of the Storage Inspector and Network monitor table styles ? There are some inconsistencies (text alignment, border around cells, ...), and it'd be nice if those were gone (and which styles we want to make common).

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: side-by-side-comparison.png

Comment 5

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: spec-sheet.png

Attached a side-by-side comparison of the current table in the Network Monitor and my design suggestions. (I also tweaked some background colors and such).

The broad strokes of the spec sheet are just that I think we should opt for some less-dramatic background colors for the table and everything should left-align to clean it up.

Comment 6

[Helen V. Holmes (:helenvholmes) (:✨)]

See-Also'ing two bugs that felt really relevant while I was designing, at least.

Comment 7

[Tim Nguyen :ntim]

Repurposing this bug, we have a lot of different table styles across the developer tools:
- The performance tool and the memory tool table styles
- the storage inspector table
- the netmonitor table.

Comment 8

[Helen V. Holmes (:helenvholmes) (:✨)]

For bug 1134073, there's some discussion about how one might want to be able to add/remove columns in a table.