Open Bug 1128209 Opened 7 years ago Updated 4 years ago

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

Categories

(DevTools :: Inspector, enhancement, P2)

35 Branch
x86_64
Windows 7
enhancement

Tracking

(Not tracked)

People

(Reporter: grepmore, Unassigned)

References

Details

(Whiteboard: [btpp-fix-later])

Attachments

(2 files, 3 obsolete files)

Attached image 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
Component: Untriaged → Developer Tools: Inspector
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?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(odvarko)
Flags: needinfo?(hholmes)
(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
Flags: needinfo?(odvarko)
(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.
Flags: needinfo?(hholmes)
Summary: Box-model highlighter without lines → Box model shown with command pick could be less obtrusive and more useful
Triaging (filter on CLIMBING SHOES).
Priority: -- → P3
Whiteboard: [btpp-backlog]
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.)
Attached image box-model-in-page-mockup.png (obsolete) —
Attachment #8742417 - Attachment is obsolete: true
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?
(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.
Assignee: nobody → gl
Status: NEW → ASSIGNED
Severity: normal → enhancement
Priority: P3 → P2
Whiteboard: [btpp-backlog] → [btpp-fix-later]
Attached image box-model-in-page-mockup.png (obsolete) —
Seemed like margin+border could use better contrast, and now the text color for margin/border/padding passes AA on the box model mockups.
Attachment #8742600 - Attachment is obsolete: true
Will it be possible to change the colors for myself (about:config etc.)?
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
Attachment #8751936 - Flags: review?(pbrosset)
Attachment #8751936 - Flags: a11y-review?(yzenevich)
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.
No longer blocks: 1108325
No longer depends on: 1263768
See Also: → 1108325, 1263768
Summary: Box model shown with command pick could be less obtrusive and more useful → Guides shouldn't be shown around the box model shown with command pick
Attachment #8751936 - Flags: review?(pbrosset)
Attachment #8751936 - Flags: a11y-review?(yzenevich)
For info, the BoxModelHighlighter already exposes an option to hide the guides:
highlighter.show(node, {hideGuides: true});
Assignee: gl → nobody
Status: ASSIGNED → NEW
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.