stylus icon indicating copy to clipboard operation
stylus copied to clipboard

Ability to Theme Devtools

Open Mixter213 opened this issue 4 years ago • 7 comments

Other Extensions like below themes devtools https://microsoftedge.microsoft.com/addons/detail/atom-one-dark-devtools-th/bchcjmlpcenaieccjjfhkfaemokpchlk?hl=en-US and https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo?hl=en-US

Devtools is something you look at for majority of your time. I think this would be a perfect thing for stylus to theme.

You use to go through and enable the custom flag "Developer Tools experiments" but now its integrated into the devtools directly as a setting in experiments in the left panel, "Allow custom UI themes".

Mixter213 avatar Jul 12 '21 18:07 Mixter213

As someone who rolls their own stylus devtools theme via extension this would b great (I don't know why I hadn't thought of this earlier)

disco0 avatar Jul 13 '21 10:07 disco0

There are several serious problems:

  • It's Chrome-only.
  • It's Stylus-only, unless we somehow coordinate with other userstyle managers.
  • Method of telling Stylus that this style is for devtools - is it a new checkbox? But we have enough of those already in the editor. And what's so damn important about devtools that it should have its own checkbox? Also what to do with sections, which aren't supported for devtools style? Or should we add a new item in the applies-to selector e.g. "devtools theme" so that a section can be marked and then all such sections would be joined into one style? But yet again it'd be an extra nonstandard thing in a standard place.
  • It's unclear how to share such styles via online repositories i.e. they all need to support this explicitly.

I definitely won't work on this and I think this should be implemented by a dedicated extension. I don't mind though if someone else convincingly solves all the problems.

tophf avatar Jul 13 '21 17:07 tophf

  • Yes crhomium based only, includes chrome, firefox, edge, and whatever uses chromium

  • stylus only. that is indeed the intention with my request, to be made and used with stylus

  • narcolepticinsomniac gave me an extension that references 2 css files, I was thinking you could reference them, and select it via stylus editor "applies to" section, add a devtools as an option.

  • its not extremely important, but then again styling anything isn't important its there to better experience for whatever webpage youre on.

  • as for sharing the styles via online repositories, it would just be named as Devtools - name or even name - devtools or however they choose to name it.

Mixter213 avatar Jul 15 '21 23:07 Mixter213

When I said "convincingly solves all the problems" I meant in a technical sense. Also, Firefox is not Chromium-based.

tophf avatar Jul 16 '21 02:07 tophf

As an example of such technical problem-solving let's look at url-prefix("devtools://").

  1. It's still Chromium-only but hopefully Firefox will add theming to their devtools someday.
  2. It seems simple enough to be adopted by other userstyle managers if they want.
  3. Use a standard "applies-to" with a dummy URL for devtools: url-prefix("devtools://")
  4. Publishing would work right away. Sites like userstyles.world can optionally detect such sections and show an icon/tag.

This allows userstyles to provide a devtools theme in addition to the page theme, which may be good/desirable, but some users wouldn't want it so a checkbox would be necessary, in which case we're probably blocked on #827. Another unsolved problem is discoverability of the feature.

tophf avatar Jul 16 '21 19:07 tophf

4\. Sites like userstyles.world can optionally detect such sections and show an icon/tag.

Seeing devtools is something different from normal websites it would be optimal to have a "custom" prefix like devtools:// or having some other hardcoded value so we don't have to go all crazy detecting this kind of styles apart from normal userstyles.

Also a good look would be given to the category so it would be discover-able in the inline-search, if that is even possible as you can't open the stylus popup in the devtools.

FYI ^ @vednoc

Gusted avatar Jul 16 '21 19:07 Gusted

FYI ^ @vednoc

Oh yeah, which reminds me that we need to normalize the data for categories. That is a requirement in order to implement style categories. As for icons, they can be set easily based on which category they're a part of.

vednoc avatar Jul 16 '21 20:07 vednoc