Closed Bug 1678949 Opened 5 months ago Closed 2 months ago

Improve UI for color scheme simulation

Categories

(DevTools :: Inspector, enhancement)

enhancement

Tracking

(firefox87 fixed)

RESOLVED FIXED
87 Branch
Tracking Status
firefox87 --- fixed

People

(Reporter: sebo, Assigned: nchevobbe)

References

Details

Attachments

(1 file)

The button for switching between the different color simulation modes only changes its colors at the moment. It doesn't provide a tooltip or any other hint besides that.

This makes it very hard to distinguish between the disabled state and the two simulation modes. This is especially true when the Devtools are using the dark theme because there basically only the brush icon changes its colors.

To improve that, I suggest to either replace the toggle button by one that opens a selection menu similar to the panel settings menus or let it open an options panel like :hov or .cls buttons.

Sebastian

Blocks: 1679408
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED

Transform the cycle-button UI into two distinct button,
one for toggling light mode, and the other to toggle dark mode.
Specific tooltip are displayed on each button, and clicking
on one while the other is enabled will disable the active button.
The existing test is adapted to this new UI.

Blocks: 1692472
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/3abd0ac72cad
[devtools] Improve UI for color scheme simulation. r=jdescottes.
Duplicate of this bug: 1606486

Thank you very much for the patch, Nicolas! I just saw screenshots so far, though the changed UI is definitely way better than the three-state cycle button.

Sebastian

Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 87 Branch
Duplicate of this bug: 1592284
You need to log in before you can comment on or make changes to this bug.