818033 - [toolbox] Implement Shorlander's visual design

Status: RESOLVED FIXED

(DevTools :: General, defect, P1)

Description

[Paul Rouget [:paul]]

Live mockup is located here: http://people.mozilla.com/~shorlander/files/devTools-toolbox-i02/devTools-toolbox-i02.html (enable the new flexbox model to see this mockup: layout.css.flexbox.enabled -> true)

We can divide this mockup in 3 sections:
1) toolbox toolbar/tabs
2) inspector
3) developer toolbar

The scope of this bug is only about the toolbars. Not the content of the tool (markup view and rule view in this mockup)

About 1),

The toolbox toolbar should not use common.css and have its own style. common.css is a stylesheet shared by all the tools to ensure they have a shared look (button, toolbars, search fields, …). The toolbox doesn't need it. Not using common.css will make our work easier (we can start working on 1), then work on 2)).

For 2),

This mockup uses a "flat design". We need mockups for the other tools as well, because most of the work will happen on common.css and will affect all the tools. 

For example: in the inspector, we see that the tool toolbar doesn't have any padding anymore. That means that the buttons in the other tools (web console and debugger) won't have room around them. This won't be possible as they have borders in the current implementation.

We need mockups for the other tools, or a design for all the in-tools controls (textbox, searchbox, toolbarbutton, toolbarbutton with no text but only icon, dropdown menu, button + dropdown menu).

This also covers the sidebar.

For 3),

this can be done in parallel. It might have some impact on the Gcli (position of the panel).

Comment 1

[Paul Rouget [:paul]]

WIP: http://i.imgur.com/JbKhP.png (work is happening on github: https://github.com/joewalker/devtools-window/pull/325)

Comment 2

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

(In reply to Paul Rouget [:paul] from comment #1)
> WIP: http://i.imgur.com/JbKhP.png (work is happening on github:
> https://github.com/joewalker/devtools-window/pull/325)

Quite nice!

Comment 3

[Heather Arthur [:harth]]

Attachment: Theme for toolbox chrome

This patch implements the toolbox-only theme (no theming for the individual tools).

It's missing new icons for the side-dock, bottom-dock, and profiler buttons.

Comment 4

[Paul Rouget [:paul]]

https://tbpl.mozilla.org/?tree=Try&rev=fbb46f9a9750

Comment 5

[Paul Rouget [:paul]]

Comment on attachment 694727 [details] [diff] [review]
Theme for toolbox chrome

in *stripe/devtoos/toolbox.css:

>+window {
>+  color: hsl(0,0%,10%);
>+}

If you hard-code the font color, you also need to hard-code the background color.
Or maybe you want to move "color:…" where you set the background color.

> #toolbox-dock-window {
>-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");

Has this file been deleted and removed from jar.mn?

>+#toolbox-controls-separator {
>+  width: 3px;
>+  height: 26px;

Can you avoid using `height`?

>+  background-size: 1px 32px;

Later in this code, you use % for the background width.
I think it's better in this case.

Comment 6

[Paul Rouget [:paul]]

I'll finish this review as soon as my builds are done.

Comment 7

[Paul Rouget [:paul]]

A couple of remarks (testing on Linux but might be true on all the platforms):

- remove the outline of the selected tab: http://i.imgur.com/dT9nv.png
- there's a one-pixel movement when you select a new tab. It's like the selected tab is one pixel wider.
- is it normal that the undock button and the close button are brighter than these others when :hover?

Comment 8

[Paul Rouget [:paul]]

The glow is one pixel to high when the window is undocked: http://i.imgur.com/XVUA7.png

Comment 9

[Paul Rouget [:paul]]

The first tab should not have a left border.

Comment 10

[Girish Sharma [:Optimizer]]

nit: the left margin is greater than the right margin in the tab.

Comment 11

[Paul Rouget [:paul]]

(In reply to Girish Sharma [:Optimizer] from comment #10)
> nit: the left margin is greater than the right margin in the tab.

Which platform? Screenshot?

Comment 12

[Girish Sharma [:Optimizer]]

(In reply to Paul Rouget [:paul] from comment #11)
> (In reply to Girish Sharma [:Optimizer] from comment #10)
> > nit: the left margin is greater than the right margin in the tab.
> 
> Which platform? Screenshot?

using this image only : http://i.imgur.com/XVUA7.png . don't know if it is meant to be like that only, but it looks a bit right shifted.

Comment 13

[Heather Arthur [:harth]]

Thanks for the feedback Paul and Girish. I'll fix your nits Paul.


1) there's a one-pixel movement

okay, that must be Linux and maybe Win

2) the undock button and the close button are brighter than these others when :hover.

I'll change that, thanks

3) The glow is one pixel to high when the window is undocked.

The glow was one pixel above the tab when docked (so you could only see the hazy part, not the top solid blue line), somehow, before. I might need help figuring out what a possible culprit is.

4) nit: the left margin is greater than the right margin in the tab.

I know what that is. I'd just committed a change for that, but forgot to push and it didn't get in the patch, my bad.

I'll try all of these when I get to my work computers in a few hours.

Comment 14

[Heather Arthur [:harth]]

Attachment: toolbox theme, updated to comments

I think this patch covers all the comments. Paul, I can't see the moving by 1px issue when selecting a tab, what system did you see that on?

Comment 15

[Paul Rouget [:paul]]

Comment on attachment 695099 [details] [diff] [review]
toolbox theme, updated to comments

Looking at the patch, dock-window.png is still part of the repo.

r+ with that fixed (can you land it?)

> Paul, I can't see the moving by 1px issue when selecting a tab, what system did you see that on?

I'll file a bug if I still see this.

Comment 16

[Heather Arthur [:harth]]

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

Comment 17

[Panos Astithas (he/him) [:past] (please ni?)]

https://hg.mozilla.org/mozilla-central/rev/4cd6a880978c