[Release] Stylem

[adesh]

You don't need "http" bit in domain.

[lunario]

Thank you, but even without that bit it won't work

[coffeebreak]

the goal being to have grayscale on all sites except openstreetmap as it breaks the layout

I don't know regex and couldn't figure out how to remove "http" entirely, but changing the http in your expression to https seems to do what you want.
(openstreetmap.org appears to use https exclusively with no fallback to http.)

Code: Select all

@-moz-document regexp('(?!https://www\\.openstreetmap\\.org).*') {
html {
  filter: grayscale(100%);
}
}

This worked also:

Code: Select all

@-moz-document regexp('(?!(http|https)://www\\.openstreetmap\\.org).*') {
html {
  filter: grayscale(100%);
}
}

[lunario]

Thanks a lot!

[Lew Rockwell Fan]

Is this the place to post feature suggestions?
I have one, based on the Ffx extension "Stylus" (which you might want to look at it and run on Ffx a bit just to get a feel for the UI).

- On a drop down menu from the toolbar icon, under sub-menus for each theme active on that page, add some items:
1. Exclude this domain
2. Exclude this url
3. Exclude regex based on this url, which would open a regex edit window with the url text already in the editor, along with some regex examples.
4. Clone & Edit with External Editor - which would first ask you for the name of the new version, then create it and open it with the editor set in prefs.
5. Rename this theme.
6. Delete this theme.

"Stylus" has the first 2 of these, and although I've persistently experimented a lot with all similar extensions I've found over years with both PM and Ffx, it is the first I've found better for me than the plain old "toggle colors" button, specifically because of these 2 features.

They let me use a global theme as a default and easily except domains or pages. The only way to do this otherwise is hand editing the global theme and using regexes. While that can work, it's way too tedious to be practical, at least for us mere mortals who do regexes by iteration of a try-fail-try-fail cycle about eleventy-seven times before succeeding. As I exclude more websites by manual editing, those regexes grow longer and longer and harder to read. So I pretty much gave up on theming extensions (I'm just using the toggle colors button on PM now) before I tried Stylus, and that's what made the difference. I'm not dissing your effort with Stylem - it's better than Stylish, but, for me, this, with at least the first 2 items, would make it practical.

[vannilla]

Stylem always throws an error when starting, when it tries to access the extension with ID "{46551EC9-40F0-4e47-8E18-8E5CF550CFB8}".
Since the "addon" argument passed to the callback is an actual object only when that extension is installed, would it be possible to place a guard against null/undefined values, so as to not print any error message in the console?
Something like:

Code: Select all

if (!addon) {
  return;
}

Always seeing that error is a bit annoying and some times I was tricked by it while troubleshooting some unrelated issues.
Thanks.

[Lootyhoof]

Stylem always throws an error when starting, when it tries to access the extension with ID "{46551EC9-40F0-4e47-8E18-8E5CF550CFB8}".
Since the "addon" argument passed to the callback is an actual object only when that extension is installed, would it be possible to place a guard against null/undefined values, so as to not print any error message in the console?

This is the check Stylem performs to make sure that Stylish is not currently enabled (as the two will clash). Unfortunately, it seems that returning from that function will still log to console in your case, as the extension does not exist. I'm also not aware of a more elegant way to check for the extension's existence.

[JustOff]

Sorry, but may I ask what made you make this change? There were no errors before that.

[Lootyhoof]

Sorry, but may I ask what made you make this change? There were no errors before that.

I integrated the patch from here, to make it behave better on other applications.

[Moonchild]

Sorry, but may I ask what made you make this change? There were no errors before that.

Checking the pref isn't really a reliable way to check the states of add-ons, IIUC.

As for the console error, why not simply use a try/catch instead?

[vannilla]

This is the check Stylem performs to make sure that Stylish is not currently enabled (as the two will clash). Unfortunately, it seems that returning from that function will still log to console in your case, as the extension does not exist. I'm also not aware of a more elegant way to check for the extension's existence.

The error message I get is that "addon" is null on line 23. In that line the code tries to access "userDisabled", but since "addon" is null it generates an error.
Actually I haven't tried the fix(?) myself so I don't know what happens, but I suppose anything else than a stacktrace might at least make the error clearer that it's from Stylem snd not the browser/the website.

[JustOff]

Sorry, but may I ask what made you make this change? There were no errors before that.

Checking the pref isn't really a reliable way to check the states of add-ons, IIUC.

It works great for classic XUL extensions, but not for bootstrap ones, not to mention WebExtensions, if that version of Stylish caused the issue in Waterfox.

I integrated the patch from here, to make it behave better on other applications.

Thank you, I'll try to offer you a more accurate check for all browsers you support. Perhaps even "if (!addon || addon.userDisabled)" is enough.

[Lootyhoof]

Stylem has been updated to v2.2.6.

What's new?
- change first run URL to be the repository's wiki
- revert disabler change from 2.2.5
- adjust supported applications
- minor CSS cleanup

I'll try to offer you a more accurate check for all browsers you support.

I dropped Waterfox support, so I reverted this anyway.

[back2themoon]

Thank you for the wonderful Stlylem! If possible, please consider adding a configurable shortcut for toggling "Turn all styles on".

[back2themoon]

For the keyboard shortcut, this solution is easy and works. Just use the code below instead, in step 6:

Code: Select all

let prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
let key = 'extensions.stylem.styleRegistrationEnabled';
prefs.setBoolPref(key, ! prefs.getBoolPref(key));

[Utnapishtim]

Long time user, thanks for porting this to Pale Moon It's a great help in navigating the web with JS mostly turned off

Here's something that puzzles me: making rules for "svg" elements doesn't work. For example I often go to inspect element and add svg {display:none} on sites littered with huge logos where I don't wanna turn on CSS (e.g. Urban Dictionary). This never works when I add it as a Stylem rule (incidentally also doesn't work in Stylish or any other fork)

There's always a workaround, e.g. for UD: .svgicon {display:none} but it'd be nicer to be able to use the svg element itself

[Gumboots]

Hi. Great extension. I use it quite a lot, including for handy testing of new ideas. One question though. How easy, or not, would it be to customise the editor presentation?

Reason I ask is because for coding in Notepad++ I use a customised version of its Obsidian style, which I find the most useful all-rounder. The default stark white background in Stylem's editor is ok if you are working on a light style, but the glaring contrast between it and a dark style makes editing and colour balancing more difficult than I would prefer. If the editor can be re-styled to something darker or more neutral I think this would be much better.*

I have had a bit of a look through the GitHub repo, but haven't been able to make much sense of the contents yet. Any pointers would be appreciated.

---

*BTW, I edited Pale Moon's about:config to set a default window background of #92ADB0, which is a very mellow colour that plays nicely with most things. It even plays nicely with sites that are coded by people who (ahem) can't be bothered setting their own background declaration for the html or body tags because (grumble) they just know it will always be white.

[Lootyhoof]

Stylem uses the Developer Tools as its editing component by default. If you open the Developer Tools (F12/Ctrl+Shift+I) and change the theme to dark it should change in Stylem too.

[Gumboots]

Cool. That's much better. Thanks. Although it would still be handy if the syntax highlighting could be changed to differentiate between tags, id's, classes, and properties. At the moment tags and id's share the same colour, as do classes and properties. But that is getting into editing the dev tools rather than your extension.

[Gumboots]

One point: I've set devtools.toolbox.zoomValue to 1.25 in about:config, which boosts code font size in the dev tools to a handy level for my eyesight and monitor. However, it has no apparent effect on font size in Stylem's editor. I know it's possible to temporarily increase it with Ctrl+ but that resets to default zoom in every new window.

Is there an easy way of permanently increasing font size inside Stylem?

ETA: Noticed another bug.

Although Stylem generally picks up the dev tools dark theme, it does not pick up the text colour for selected text. The selection background appears, but the text itself remains at its default colour. IOW, it's mid-grey on a blue background, instead of being white on a blue background. The result that the text is almost illegible when selected.

Admittedly this is a pretty minor bug, because you can argue that anyone should know what text they're selecting, but better legibility would still be a UX improvement.