Tampermonkey: FOUC and other theming issues

[narcolepticinsomniac]

Hey, since you seem to be fixing stuff with the quickness lately, I'm gonna keep trying my luck. =) You've got FOUC issues with the default dark theme, and user CSS theming, on main internal pages, and the popup. The default dark theme is noticeably slower in the popup, and also has the Chromium transition bug issue, which is specific to the popup in Chromium, but quite common in FF as well. This is how we fix it.

Screen record

I hadn't checked the default dark theme in a while, but besides the injection issues, it could use some help. I did a big overhaul a while back, on the theme I use which yours is based on. I checked backwards compatibility in all major browsers going back pretty far at the time. I've occasionally made little improvements since then. A lot of improvements for editor styling as well.

You should give it a shot. You can just load as user CSS over the default light theme, since that's how I use it.

[derjanb]

Sorry for the late reply, but I've been traveling the last few days. I'll work on this.

[derjanb]

I've incorporated your changes in the "darker" theme. Thanks for sharing.
Also a reload of 4.9.6076's options page now should look a lot smoother. I'm not sure regarding the transition problem, but all CSS code is loaded earlier so that the problem might be solved?

[narcolepticinsomniac]

FOUC

Integrated themes now appear to load seamlessly. User CSS seems a bit faster than it was, but it's often still late to the party. Screen record

...regarding the transition problem, but all CSS code is loaded earlier so that the problem might be solved?

LGTM. I'm occasionally getting an error preventing the popup from loading its content at all though:

There's a few issues with the theme integration:

We've got overflow on html because of my piss-poor hack to make the editor scrollbar tight to the right side of the viewport. I almost always prefer to be able to blindly swipe all the way to the right and click to scroll. When I tried to align the TM editor to allow for this, one of those inexplicable 1px table gaps prevented it, so I went the lazy route and expanded the parent 1px and hid overflow-x on html.

Obviously, you left out the hidden overflow rule, and for good reason, because it's terrible. I found a better way to eliminate the gap:

Delete:

.darker .tv {
    width: calc(100% + 1px) !important;
}

and add:

.darker .tv_content {
    min-width: 100vw !important;
}

We've also got issues with CM selectors. They work as user CSS because the selectors all use .cm-s-default as a parent, but when integrated, that selector switches to .cm-s-default-dark, so no editor theming is being applied currently. Not sure if you wanna change that to .cm-s-default-darker for continuity now that you've added an alternative, but I suppose it doesn't really matter since they should never have a conflict. Regardless, a text-replace on those selectors should do the trick.

Somewhat related, the same selector should be added to the CM diff, and added to the corresponding diff CSS. The whole idea is to use those parent selectors to only change the default dark, so users can switch to the other integrated CM editor themes without any conflicts.

Last, but not least, the changes to the scrollbar selectors are an issue. Overflow in the popup produces a default white scrollbar because the overflow is on body, and the selectors are now (body).darker ::-webkit-scrollbar. Simplest fix is probably switching the theme classes to be set on html instead.

[narcolepticinsomniac]

Got the update today, and I only see a couple minor details left.

Switch:

.darker img[src^="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"]

to:

.darker .nameNicon64 img[src$="+LB7zYrG4d7y2gL9ef73+ev31+uv1P/v6f+Xwu/VNHO2qAAAAAElFTkSuQmCC"]

The selector was too broad.

Switch:

.darker .tv_content {
    min-width: 100vw !important;
}

to:

.darker .tv_content:not(:only-child) {
    min-width: 100vw !important;
}

Excludes diff editors so scrollbars don't overlap.

Otherwise, LGTM. Integrated themes load seamlessly, and the popup appears to be loading nicely. User CSS is still a bit late on page load, if you ever get around to it.

[narcolepticinsomniac]

Oh yeah, just remembered - you should probably add some simple dark scrollbar styling for versions of Firefox which support it. If it's not supported, it'll just be ignored. Something like:

* {
    scrollbar-color: hsl(0, 0%, 30%) hsl(0, 0%, 18%) !important;
    scrollbar-width: auto !important;
}

[narcolepticinsomniac]

I checked backwards compatibility in all major browsers going back pretty far at the time.

Should've rechecked. I don't use FF much, but when checking dark scrollbars, I noticed some of the FF specific styling wasn't working. Turns out, in the last year or so FF dropped and added support for pretty much all the properties I was using in media queries to detect browsers.

I downloaded the darker.css file loaded in TM, fixed the queries, and all the previously mentioned minor details, including dark scrollbars in FF. Fixed version here.

[derjanb]

Thanks. BTW: I've invited you to the tampermonkey-layout repo so that you can modify the styles directly there.

[derjanb]

Fixed version here.

4.9.6088 includes your changes with one change to not reference inputs by their name attribute for better i18n support.

[narcolepticinsomniac]

My bad, man. =)