Bug 255069 - Web Inspector: Restore Force dark/light appearance button
Summary: Web Inspector: Restore Force dark/light appearance button
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-05 17:15 PDT by Ricky de Laveaga
Modified: 2023-05-16 02:11 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ricky de Laveaga 2023-04-05 17:15:29 PDT
Web Inspector merged the Force Dark/Light Appearance button into the Override user preferences button. This makes something I do incessantly, toggling light/dark mode to check prefers-color-scheme support, at least 3 clicks instead of 1 with the new dropdown. This slows me down a lot.

Screenshots of the interface change are attached to this Mastodon post: https://mastodon.social/@rdela/110079943954775112

After some discussion in Slack, there seems to be a general recognition that force dark/light appearance is the most used action in this group. A proposed solution is to restore the Force dark/light appearance button (note the capitalization change to fit into the new style of capitalizing only the first word in the button name).

Thoughts from Anthony Ricaud:

- The print styles could be moved in this menu. And that menu could be renamed "Override media characteristics" or something like that?

- Switching to radio buttons would save a click.


Devin Rousso and I both agree with Anthony that the "Force print/Use default media styles" override should also move into the popup. "Override media styles" or "Override media preferences" are alternatives to "Override media characteristics" that came to mind, but I like all three. I am all for saving a click with radio buttons as well.

Finally, our very good print icon may warrant investigating whether each row in the popup should have an icon in front.
Comment 1 Radar WebKit Bug Importer 2023-04-12 17:16:24 PDT
<rdar://problem/107966979>
Comment 2 Razvan Caliman 2023-05-16 02:11:04 PDT
Hello Ricky!

Thank you for taking the time to voice your concern!

I can understand the process to toggle the color scheme preference is now a bit more involved after moving the toggle to the User Preference Overrides popover. I know this takes a couple of clicks now and that may slow you down.

We deliberated on the change and didn't take it lightly. I assure you we thought about many aspects of this.

Ultimately, we decided to consolidate the user preference overrides into a popover for a few reasons:
- it logically groups user preferences together.
- it draws attention to the accessibility user preferences by co-locating them with the preference for color scheme.
- it allows us to grow the list of user preference overrides over time while saving space in the Elements tab.
- it creates space in the Elements tab for new tools (yes, we should also move the toggle print emulation).

We considered that moving the color scheme toggle might confuse developers. That's why the button that opens the popover uses the same icon that's found in macOS and iOS Settings panels for the Appearance section: to serve as a visual reminder of what's expected to be inside. Granted, this icon choice might be to the detriment for those explicitly looking for Accessibility, but we favored recall for Appearance / color scheme and relied on visual proximity to this popular preference to draw attention to the accessibility-related ones.

We also intentionally put the color scheme toggle as the first option in the popover. We anticipated this will be used frequently and we wanted to reduce the necessary mouse movement to toggle it. I do understand this isn't as straightforward as clicking on a single button.

We just fixed a bug (https://github.com/WebKit/WebKit/pull/13630) which should maintain the override for the color scheme user preference when reloading the page while Web Inspector is open. This should reduce the number of times you have to toggle it manually during a debugging session.

Expanding the user preference values into radio controls was considered and we prototyped it, but we decided against for a few reasons:
- there are varying numbers of possible values (2, 3, many) making horizontal layout and alignment between preferences difficult.
- the length of strings for values can vary a lot between languages making the popover disproportionately wide (laying them out vertically consumes a lot of space that we'd rather use to surface more user preferences before having to scroll and potentially miss them because scrollbars are not visible by default).

I really do appreciate your feedback and the time you put into writing it up. Your perspective as a web developer helps.
It's unlikely we'll revert the UI to move the toggle for color scheme back out, but I hope the reasons provided above help you understand the thinking behind why we made that UI choice.

I hope you find the new user preference overrides helpful, alongside the one you use frequently for color scheme. 
If there are others you'd like to have, please let us know by filing an issue.