1192429 - Add toolbar buttons to markup view

Status: REOPENED

(DevTools :: Inspector, enhancement, P3)

Description

[Tim Nguyen :ntim]

Attachment: Chrome's toolbar screenshot

Chrome Canary has a quick access toolbar next to the inspector breadcrumbs (with the Material Design experiment enabled).
Provides handy options such as :
- Hide/Unhide element that toggles visibility: hidden on an element
- Edit as HTML
- Toggle HTML-related breakpoints
- Lock pseudo-classes
- A performance highlighter menu as well (not sure if this even makes sense in the markup view, but I guess they needed to put this somewhere)

Comment 1

[Brian Grinstead [:bgrins]]

Seems pretty cool and could be a nice way to surface the 'rulers' feature, among others (rather than it being a hidden feature).  As far as real-estate, maybe the search box could be hidden by default and then the left-most button could be 'search' which would show it (it would also become active and focused when pressing ctrl+f)

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Brian Grinstead [:bgrins] from comment #1)
> Seems pretty cool and could be a nice way to surface the 'rulers' feature,
> among others (rather than it being a hidden feature).  As far as
> real-estate, maybe the search box could be hidden by default and then the
> left-most button could be 'search' which would show it (it would also become
> active and focused when pressing ctrl+f)

I think this works for inspector-specific features. Does that include rulers? They seem tied to RDV as well.

Note for later: when the UX hire starts we should put this as part of a toolbox UX review:
* what tools should be top-level in the toolbox and on by default
* similarly, which top-level tools can be hidden by default
* what tools should instead be exposed via specific tools, eg design-oriented tools.

Comment 3

[Patrick Brosset <:pbro>]

(In reply to Jeff Griffiths (:canuckistani) from comment #2)
> Note for later: when the UX hire starts we should put this as part of a
> toolbox UX review:
> * what tools should be top-level in the toolbox and on by default
> * similarly, which top-level tools can be hidden by default
> * what tools should instead be exposed via specific tools, eg
> design-oriented tools.
Definitely want to be part of this discussion. Very interesting.

A markup-view toolbar could also be a good way to surface to hidden-for-a-long-time Geometry Editor thing which, in time, I intend to turn into a tool to edit elements' size and position in content.

Comment 4

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 5

[BMO Automation]

Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.