Open Bug 1330425 Opened 5 years ago Updated 3 years ago

Reorganize RDM toolbars to support multiple viewports


(DevTools :: Responsive Design Mode, defect, P2)



(firefox53 affected)

Tracking Status
firefox53 --- affected


(Reporter: jryans, Unassigned)


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


(Whiteboard: [rdm-v2])


(2 files)

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.
Priority: -- → P2
Whiteboard: [rdm-v2]
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
Attached image 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.
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!
Product: Firefox → DevTools
No longer blocks: rdm-ux
You need to log in before you can comment on or make changes to this bug.