Devtools UX: Add elements toolbar with breadcrumbs

Devtools UX: Add elements toolbar with breadcrumbs

This change adds an elements toolbar to the material design UX in Devtools.
The bar contains the breadcrumbs and a global settings button.

BUG=494836
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=196466

[samli, 2015-06-01 09:56:39]

samli@chromium.org changed reviewers:
+ pfeldman@chromium.org

[samli, 2015-06-01 09:56:40]

PTAL. Screenshot: http://imgur.com/SNlm5KP

[samli, 2015-06-01 10:22:51]

On 2015/06/01 at 09:56:40, samli wrote:
> PTAL. Screenshot: http://imgur.com/SNlm5KP

Updated screenshot, which increases the arrow margin by decreasing the text
padding so width remains unchanged: http://i.imgur.com/AIZqpLi.png

[pfeldman, 2015-06-01 16:20:33]

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsBreadcrumbs.js (right):

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsBreadcrumbs.js:226: const leftMargin
= Runtime.experiments.isEnabled("materialDesign") ? 7 : 0;
Can we do this using css?

[pfeldman, 2015-06-01 16:33:13]

pfeldman@chromium.org changed reviewers:
+ maxwalker@chromium.org

[pfeldman, 2015-06-01 16:33:50]

Design-wise, breadcrumbs' presence in the UI is now too strong. It is a
secondary feature that should not stand out with the huge blue selection area.
Is there a way we could fix it? Underline selection? Subtle selection color?

[samli, 2015-06-02 05:00:24]

Re: design

I'll let maxwalker@ take this one.

My 2c: The screenshots I took were of crazy large selectors without the context
of the page. The current breadcrumbs implementation uses the same blue selection
area and that area is exactly the same as before (in fact 1px smaller on the
sides). So the only difference is that the breadcrumbs are at the top and
there's more white-space.

Perhaps we should land this and re-discuss as polish when we graduate from
experiments.

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsBreadcrumbs.js (right):

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsBreadcrumbs.js:226: const leftMargin
= Runtime.experiments.isEnabled("materialDesign") ? 7 : 0;
On 2015/06/01 16:20:33, pfeldman wrote:
> Can we do this using css?

No. I don't want to impact the actual width of the element due to background
changes on selection/hover. I can getComputedStyle and get the marginLeft, but
that seems redundant.

[maxwalker, 2015-06-02 09:33:12]

> My 2c: The screenshots I took were of crazy large selectors without the
context
> of the page. The current breadcrumbs implementation uses the same blue
selection
> area and that area is exactly the same as before (in fact 1px smaller on the
> sides). So the only difference is that the breadcrumbs are at the top and
> there's more white-space.
> 
> Perhaps we should land this and re-discuss as polish when we graduate from
> experiments.

SGTM! I have tried alternative selection styles with varying levels of
obtrusiveness (see attachment). I think the current style (blue background)
works well because of the visual connection to the DOM (same selection style for
nodes) and because it is very clear and bold. Now living at the top, the
selected breadcrumb can also be seen as a kind of heading which would also speak
for a bold representation. If this design turns out to be too prominent, I could
alternatively imagine something subtle like the bottommost version. My
impression was that everything in between adds noise to the toolbar without
being very clear.

http://f.cl.ly/items/3A1K2T3O2I2B0l3Z2931/Breadcrumbs.png

[pfeldman, 2015-06-02 10:53:34]

Well, my problem with it is exactly its being clear and bold.

From the new mock I like new variations 2, 3, and 5. Number 4 would work if the
underline was right beneath the text baseline.

[pfeldman, 2015-06-02 10:54:53]

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsBreadcrumbs.js (right):

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsBreadcrumbs.js:226: const leftMargin
= Runtime.experiments.isEnabled("materialDesign") ? 7 : 0;
Please don't use getComputedStyle and I don't understand why you can't achieve
this via changes to CSS / DOM.

[paulirish1, 2015-06-02 19:57:19]

> http://f.cl.ly/items/3A1K2T3O2I2B0l3Z2931/Breadcrumbs.png


Agree that #1 is too bold and overpowers the rest of the toolbar/tabstrip when
its infrequently important info.

I like #2, #3, and the last (subtle colored chevron).

[samli, 2015-06-03 03:29:06]

Went with #3.

Screenshot (blue is selected, underline is hover):
http://i.imgur.com/iKbKIjD.png

[samli, 2015-06-03 03:31:52]

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
File Source/devtools/front_end/elements/ElementsBreadcrumbs.js (right):

https://codereview.chromium.org/1158133004/diff/40001/Source/devtools/front_e...
Source/devtools/front_end/elements/ElementsBreadcrumbs.js:226: const leftMargin
= Runtime.experiments.isEnabled("materialDesign") ? 7 : 0;
On 2015/06/02 at 10:54:52, pfeldman wrote:
> Please don't use getComputedStyle and I don't understand why you can't achieve
this via changes to CSS / DOM.

Done.

[maxwalker, 2015-06-03 09:00:44]

> Number 4 would work if the underline was right beneath the text baseline.

> I like #2, #3, and the last (subtle colored chevron).

> Went with #3. Screenshot (blue is selected, underline is hover).

A link-style underline is not the right choice IMO, because our breadcrumbs
aren't links. They do not take you to another place like a link does (e.g. in
Styles).
I also like the last version (subtle colored chevron). It's visible, but doesn't
dominate the whole toolbar.

Additionally I just noted two things when playing around with the prototype:
1. The hover effect should be very very subtle, because it can be annoying to
see it every time you move the cursor to the navigation bar.
2. There already is visual feedback on hover: the element is highlighted on the
page.

So after that I would suggest to use very subtle effects for both states:
Selected: colored chevron
Hover: darken font-color ( hsl(0, 0%, 35%) -> hsl(0, 0%, 20%) )

Thanks for bringing this up, Pavel!

[pfeldman, 2015-06-03 09:20:25]

> Thanks for bringing this up, Pavel!

Thank you for following up and making sure the tool is excellent!

[pfeldman, 2015-06-03 12:24:56]

lgtm

[samli, 2015-06-03 23:59:14]

The CQ bit was checked by samli@chromium.org

[samli, 2015-06-03 23:59:14]

The patchset sent to the CQ was uploaded after l-g-t-m from
pfeldman@chromium.org
Link to the patchset: https://codereview.chromium.org/1158133004/#ps80001
(title: " ")

[commit-bot: I haz the power, 2015-06-03 23:59:32]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1158133004/80001

[commit-bot: I haz the power, 2015-06-04 00:06:59]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2015-06-04 00:07:01]

Try jobs failed on following builders:
  mac_blink_compile_dbg on tryserver.blink (JOB_FAILED,
http://build.chromium.org/p/tryserver.blink/builders/mac_blink_compile_dbg/bu...)

[samli, 2015-06-04 00:42:51]

The CQ bit was checked by samli@chromium.org

[samli, 2015-06-04 00:42:51]

The patchset sent to the CQ was uploaded after l-g-t-m from
pfeldman@chromium.org
Link to the patchset: https://codereview.chromium.org/1158133004/#ps100001
(title: " ")

[commit-bot: I haz the power, 2015-06-04 00:43:03]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1158133004/100001

[commit-bot: I haz the power, 2015-06-04 01:07:13]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2015-06-04 01:07:15]

Try jobs failed on following builders:
  linux_blink_rel on tryserver.blink (JOB_FAILED,
http://build.chromium.org/p/tryserver.blink/builders/linux_blink_rel/builds/6...)

[samli, 2015-06-04 06:24:31]

The CQ bit was checked by samli@chromium.org

[commit-bot: I haz the power, 2015-06-04 06:24:56]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1158133004/100001

[commit-bot: I haz the power, 2015-06-04 06:47:35]

Committed patchset #6 (id:100001) as
https://src.chromium.org/viewvc/blink?view=rev&revision=196466