Closed
Bug 818033
Opened 12 years ago
Closed 12 years ago
[toolbox] Implement Shorlander's visual design
Categories
(DevTools :: General, defect, P1)
Tracking
(Not tracked)
RESOLVED
FIXED
Firefox 20
People
(Reporter: paul, Assigned: harth)
References
(Blocks 1 open bug)
Details
Attachments
(1 file, 1 obsolete file)
(deleted),
patch
|
paul
:
review+
|
Details | Diff | Splinter Review |
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).
Reporter | ||
Comment 1•12 years ago
|
||
WIP: http://i.imgur.com/JbKhP.png (work is happening on github: https://github.com/joewalker/devtools-window/pull/325)
Reporter | ||
Updated•12 years ago
|
Priority: -- → P1
Comment 2•12 years ago
|
||
(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!
Updated•12 years ago
|
Assignee: nobody → fayearthur
Assignee | ||
Comment 3•12 years ago
|
||
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.
Attachment #694727 -
Flags: review?(paul)
Reporter | ||
Comment 4•12 years ago
|
||
Reporter | ||
Comment 5•12 years ago
|
||
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.
Reporter | ||
Comment 6•12 years ago
|
||
I'll finish this review as soon as my builds are done.
Reporter | ||
Comment 7•12 years ago
|
||
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?
Reporter | ||
Comment 8•12 years ago
|
||
The glow is one pixel to high when the window is undocked: http://i.imgur.com/XVUA7.png
Reporter | ||
Comment 9•12 years ago
|
||
The first tab should not have a left border.
Comment 10•12 years ago
|
||
nit: the left margin is greater than the right margin in the tab.
Reporter | ||
Comment 11•12 years ago
|
||
(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?
Reporter | ||
Updated•12 years ago
|
Attachment #694727 -
Flags: review?(paul)
Comment 12•12 years ago
|
||
(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.
Assignee | ||
Comment 13•12 years ago
|
||
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.
Assignee | ||
Comment 14•12 years ago
|
||
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?
Attachment #694727 -
Attachment is obsolete: true
Attachment #695099 -
Flags: review?(paul)
Reporter | ||
Comment 15•12 years ago
|
||
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.
Attachment #695099 -
Flags: review?(paul) → review+
Assignee | ||
Comment 16•12 years ago
|
||
Whiteboard: [fixed-in-fx-team]
Comment 17•12 years ago
|
||
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 20
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•