1128209 - Guides shouldn't be shown around the box model shown with command pick

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Nick]

Attachment: highlighter.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20150122214805

Steps to reproduce:

Please make it possible, to disable the lines in the box-model highlighter so that it looks like in firebug v2. Would be nice to be able to disable the box with the element name/dimensions too.


Actual results:

How it looks:
https://wiki.mozilla.org/images/7/77/Box-model-highlighter-screenshot.png


Expected results:

How it should look like:
see attached file

Comment 1

[Patrick Brosset <:pbro>]

The highlighter API we use offers options to do this already, so it would be a simple addition. Having said this, those were added because they are thought to be helpful to the majority of people, and so adding new UI in the settings panel to turn them off would clutter the UI unnecessarily for them.

I can see 3 possible actions here:
- either we close the bug as WONTFIX if we believe this isn't a change that will benefit enough users,
- or, we make this something the Firebug theme does (see bug 1244054), comment 0 mentions firebug, so maybe when the firebug theme is used, then these things should be hidden (pinging Honza about this),
- or we introduce some prefs for people to hide these things, but with no additional UI (it would only be possible to change in about:config).

@Helen: what's your take on this?

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Patrick Brosset [:pbro] from comment #1)
> - or, we make this something the Firebug theme does (see bug 1244054),
> comment 0 mentions firebug, so maybe when the firebug theme is used, then
> these things should be hidden (pinging Honza about this),
Yes, this sounds good to me.

Honza

Comment 3

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

(In reply to Patrick Brosset [:pbro] from comment #1)
> The highlighter API we use offers options to do this already, so it would be
> a simple addition. Having said this, those were added because they are
> thought to be helpful to the majority of people, and so adding new UI in the
> settings panel to turn them off would clutter the UI unnecessarily for them.
> 
> I can see 3 possible actions here:
> - either we close the bug as WONTFIX if we believe this isn't a change that
> will benefit enough users,
> - or, we make this something the Firebug theme does (see bug 1244054),
> comment 0 mentions firebug, so maybe when the firebug theme is used, then
> these things should be hidden (pinging Honza about this),
> - or we introduce some prefs for people to hide these things, but with no
> additional UI (it would only be possible to change in about:config).
> 
> @Helen: what's your take on this?

I think taking this away without adding the functionality to add them back would be somewhat annoying. I love the look of it, but I think this needs more thought before we remove anything.

Comment 4

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).

Comment 5

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

Attachment: box-model-in-page-mockup.png

Comment 6

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

So, after playing around with some designs, I think removing the lines would be a nice subtraction. I've also mocked up different color combos; I'm not entirely sure how to break down everything I have in the spec sheet. We might use either this bug or bug 1108325 as a meta bug? (There are color changes, changes to the popup, and the removal of the lines.)

Comment 7

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

Attachment: box-model-in-page-mockup.png

Comment 8

[Matteo Ferretti [:zer0] [:matteo]]

Helen, I really like the new approach – and the new palette! – but what you think if, as follow up bug, we're also (re)enable the guides *only* if the rulers highlighter is enabled too?

Comment 9

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

(In reply to Matteo Ferretti [:zer0] [:matteo] from comment #8)
> Helen, I really like the new approach – and the new palette! – but what you
> think if, as follow up bug, we're also (re)enable the guides *only* if the
> rulers highlighter is enabled too?

I like the idea, and I'd like to chat about it further. If you could look over bug 1263768 when you get a chance, Matteo, it's my proposal for how to handle in-context rules for in-page elements.

Comment 10

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

Attachment: box-model-in-page-mockup.png

Seemed like margin+border could use better contrast, and now the text color for margin/border/padding passes AA on the box model mockups.

Comment 11

[Nick]

Will it be possible to change the colors for myself (about:config etc.)?

Comment 12

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

Attachment: box-model-in-page-mockup.png

Comment 13

[jonathan]

I'm investigating the coloring for Chrome DevTools currently as well based on user feedback. In my research so far [1], I've found the *current* Firefox coloring to be (in my opinion) the superior choice. The reason being it provides the most consistent coloring for users with different types of color blindness. I think this should be one of the factors upon deciding on a new color scheme and I'd also like to see if we can't get all the major tooling vendors to align with these. That way users get the same experience across each tool for such a critical component to designing.

The current proposed color scheme is mostly-stable with different common color blindness forms, however it still varies more heavily compared to the existing scheme.

I'm still very new to understanding colors for accessibility, but hopefully some of the existing work can help guide future designs. I'm still looking to get actual a11y experts into the discussion to help out as well since they've probably dealt with this kind of situation before.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=614722

Comment 14

[Patrick Brosset <:pbro>]

Let's keep this bug only to remove the guides (and figuring out if we keep them only when the rulers are displayed as comment 8 says), and let's move the new colors discussion and patch to bug 1108325.

Comment 15

[Patrick Brosset <:pbro>]

For info, the BoxModelHighlighter already exposes an option to hide the guides:
highlighter.show(node, {hideGuides: true});