Reorganize RDM toolbars to support multiple viewports

NEW
Unassigned

Status

P2
normal
2 years ago
2 months ago

People

(Reporter: jryans, Unassigned)

Tracking

(Depends on: 1 bug, Blocks: 1 bug)

Trunk
Dependency tree / graph

Firefox Tracking Flags

(firefox53 affected)

Details

(Whiteboard: [rdm-v2])

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
At the moment, we have viewport controls strewn about in 3 places:

* Global toolbar
* Dimensions controls
* Viewport toolbar

Most controls currently in the global toolbar are actually per viewport, so they should be moved out to some common place with other per viewport things.

The current viewport toolbar seems to size constrained since it's inside the viewport border and the viewport can get quite small.

Bryan and I will discuss various ideas to rework the design to better support multiple viewports.
(Reporter)

Updated

2 years ago
Priority: -- → P2
Whiteboard: [rdm-v2]
(Reporter)

Comment 1

2 years ago
Additional notes from previous discussion:

* Close button should be removed from global toolbar, moved to some corner of overall UI
* Remove "Responsive Design Mode" name from toolbar
(Reporter)

Comment 2

2 years ago
Created attachment 8840466 [details]
musical-toolbars-2.png

_kud on IRC mentioned that the current layout is confusing, especially the placement of the device selector.  I shared this mockup, and they agreed it was an improvement.

Comment 3

2 years ago
Created attachment 8841114 [details]
Alternate concept with dark dev theme

I was just comparing the old and new RDM and picking the best of both to make the following mockup. Of course, this concept uses the dark theme, so interpret as needed for the light one.

The single-toolbar design satisfies users who were already complaining about the new UI using too many rows and not utilizing the white space available. It also ensures the controls look interactive, with larger hitboxes for the buttons, like the old style.

I drew it all up before looking at this ticket and the existing proposal. Feel free to take it or leave it, but I thought I'd share!
(Reporter)

Updated

a year ago
Blocks: 1411650

Updated

5 months ago
Product: Firefox → DevTools
No longer blocks: 1411650
You need to log in before you can comment on or make changes to this bug.