Custom CSS - how to troubleshoot possible errors?

[itisafrickinhighlander]

I have prepared a custom CSS code to inject into ElectronMail. It is working when injecting it via developer console in FF and also when adding it via Stylus extension, however when I copy it over to Custom CSS in Electron Mail, hit update, nothing happens. I try restart of an app, also doesn't work. I tried to grep "css" in log.log, but there is no mention of it.

Is there a way I can toubleshoot a possible error there?

Here is also the aforementioned CSS code:

/*TOPBAR*/
.header {
    padding: .4rem 1.5rem 1rem 0;
    height: 6rem;
}
span.relative:nth-child(1) > button:nth-child(1) {
    visibility: hidden;
}

/*SIDEBAR*/
.navigation__link, .navigation__link--groupHeader {
    padding: .2rem .7em .4rem .8rem;
}
:root {
    --width-sidebar: 21rem;
}
.navigation__counterItem {
    background: #31353d;
    padding: .2rem .3em 0;
    border-radius: 0.2rem;
}

/*MAIN TOOLBAR*/
.toolbar {
  height: 4rem;
}

/*EMAIL LIST*/
.items-column-list {
    width: var(--width-conversation-column,calc(30% + var(--width-sidebar, 24rem)*0.35));
}
.item-container {
    height: 6rem;
}
.pill-icon > * {
    color: black;
    scale: 1.1;
}
.pill-icon-attachment {
    background-color: transparent;
}

/*PREVIEW PANE*/
.message-conversation-summary {
    padding: .6em 1.2em 0 .9em;
}
div.scroll-if-needed:nth-child(2) {
  padding-top: 0;
}
.lh-standard {
    line-height: 1.3;
    font-size: x-large;
}
.mb1 {
    margin-bottom: .5em;
}
.border-bottom {
    border-bottom: none;
}
.container-to {
    font-weight: bold;
}
.item-icon, .item-icon-compact {
    font-size: 1.2rem;
    font-weight: normal;
}
div.pm-group-buttons:nth-child(1) {
  order: 1;
}
div.pt0-5:nth-child(4) {
  justify-content: right;
}
div.pt0-5:nth-child(5) {
  justify-content: right;
}
.pm-group-buttons > .pm-group-button.pm-button--primary:not(:last-child) {
    border-right-color: var(--bgcolor-main-area,#dde6ec);
}
.pm-group-buttons > .pm-group-button.pm-button--primary {
    border-color: #dde6ec;
    background-color: white;
    color: #373737;
}
.icon-20p {
    width: 31px;
    height: 16px;
}
.border-top {
    border: none;
}
.pt0-5 {
    padding-top: 0;
}

/*COMPOSER WINDOW*/
.composer {
  right: 8px !important;
  height: 800px;
  width: calc((100% + var(--width-sidebar, 19rem)) * 0.40);
}

I have also tried to apply just a single snippet, e.g.

.toolbar {
  height: 4rem;
}

not even this works. Is it possible there is an underlying issue of some sort?

Update: I have just noticed there is one part which works, it is

span.relative:nth-child(1) > button:nth-child(1) {
    visibility: hidden;
}

it hides "Special Offer" button (probably "Upgrade" for free users as well).

[vladimiry]

restart of an app

This should not be required.

Is there a way I can toubleshoot a possible error there?

Errors should be logged. If not logged then were not produced. There is no related code in the app that would be ignoring/suppressing the errors (would be a very bad practice).

The app doesn't log the custom css content. It only puts removing custom css / inserting custom css-like records to the log file in verbose mode. The app also logs the browser console messages of warn + error levels. So maybe enable the warn log level in the app (or any other level other that error, since it's the lowest level) and see if something useful gets into the log file (warn messages are those lines that browsers print to dev console in yellow color).

Update: I have just noticed there is one part which works, it is

So it gets applied at least. The applying mechanism is at the @electron side. I initially thought I will dynamically generate the <link rel="stylesheet" type="text/css">-like tag and put it into the DOM/head but noticed @electron has built-in method for this purpose, it's https://www.electronjs.org/docs/api/webview-tag#webviewinsertcsscss (see <webview>.insertCSS(css)). So if some css works in regular browser but doesn't work in webview then so far I tend to think it's @electron's / upstream issue.

[itisafrickinhighlander]

Do you reckon it is a bug or just a lack of proper implementation? I did also notice there is a couple of small things which were also applied, e.g. reordering and justifying of email control buttons (filter, move, label, unread, remove, reply/all/forward) or applying bold for From:/To: in email details, but nothing else, so resizing of anything wasn't applied at all, manipulating with icons (removing background, rescaling) and adding/removing padding of some elements either didn't work.

[vladimiry]

.toolbar { height: 4rem; }

not even this works. Is it possible there is an underlying issue of some sort?

I just tested that selector and I see in dev console that it's marked as injected stylesheet. I then made the selector more specific by transforming it to .content-container .toolbar and then the height: 4rem rule got applied since it took priority over default/proton .toolbar selector's rules.

[itisafrickinhighlander]

If I understand it correctly then, this is a matter of conflicts between Electron/Chromium and PM client?

And with that...adding !important to every single entry fixed this, it is working now. It is dirty as hell, but it works.

[vladimiry]

It looks more like a need to prioritize the stylesheets selectors since it appears that the proton's selectors take priority on injected stylesheet selectors (the kind of styles normally applied by browser extensions/addons). So just define more specific selectors and it should work fine then.

[itisafrickinhighlander]

If I may to slightly re-open the topic. I haven't found the way to adopt CSS as a whole to this, so I had to stick with !important arguments, however there is one section I cannot overcome

.composer {
    right: 8px !important;
    height: 700px; 
    width: calc((100% + var(--width-sidebar, 19rem)) * 0.40);
}

which is changing composer window and height: 700px; will be ignored as expected, but I cannot use !important argument there or else I will break the minimize window functionality (I would basically tell it to stay at 700px height no matter what, it would be the same if I did it so in the browser). Would you mind me asking if you see how I could address .composer without interfering with some built-in CSS in Electron?

[vladimiry]

I will break the minimize window functionality

You can see in the dev console that the .composer element dynamically gets composer--is-minimized / composer--is-maximized classes. So try something like this:

.composer:not(.composer--is-minimized) {
...
}

[itisafrickinhighlander]

Works perfectly, thank you very much.