Building from source results in tinted terminal and solid color preferences window.

[sadata7]

When I run the distributed AppImage, the startup ("Welcome back, user") and terminal windows have a black background, like this:

However, when I build from source, the startup and terminal windows are heavily tinted green. The major issue, however. is the preferences window (settings.json) displays as a solid block of the foreground color. See attached screenshots. Any ideas?

[GitSquared]

Wow, that looks odd. If you have some webdev skills, maybe you could try opening the Chromium dev tools with ctrl+shift+i while running edex from source, and check if you see anything that could cause this? (maybe a css prop or something).

[sadata7]

Ah, Ctrl-Shift-I―that's how you get the dev tools (I figured F12 had been purposely disabled or wasn't available in the Electron wrapper). I don't have a dev environment set up and don't really know how to run from source (I guess node.js server would need to be running?). Not a problem as Ctrl-Shift-I works even if edex-ui is launched from the AppImage, and I can compare between your distributed AppImage and the problematic one built on my machine.

Anyway, it looks like the issue is related to augmented.css, specifically, a class named 'exe'. If I remove 'exe' from the following lines, everything looks fine again, except that the window borders are missing from the terminal and the modals.

For terminal:
<section id="main_shell" style="" augmented-ui="bl-clip tr-clip exe">

For preferences.js modal:
<div id="modal_MBTUua809TASRdlYvUDQ7" class="modal_popup info custom focus" style="z-index:501;" augmented-ui="tr-clip bl-clip exe">

It seems as if the issue is caused by the window borders because, if I toggle the various border styles off, then everything becomes visible (albeit with no border). I can simulate the same effect on your official build by increasing the border size (e.g. --aug-border: 50vh) of any div or modal until it fills in the window. However, I don't believe it's actually the size of the border that's causing the issue. I think it might have to do with the clipping region for the inset not working. On your build, I see the following:

Note that it refers to line 1187. On my build, I see this:

Note that 1) the class selectors are different; 2) there are no 'px' units for the coordinates; 3) it refers to line 1; and, 4) that the clip-path is invalid (actual message is "Invalid property value"). Given the difference in line numbers, is it possible that minification of the css during the build process is the cause of the problem? Also, why is it not minified in your build if we're using the same build process?

Anyway, at this point, I went to the augmented-ui project and downloaded the latest CSS file:

https://github.com/propjockey/augmented-ui/blob/master/augmented-ui.css

I renamed the existing augmented.css and data-augmented.css in src/node_modules/augmented and just made two copies of the latest augmented-ui.css file and renamed as augmented.css and data-augmented.css.

I didn't actually expect this to work, because the two original files, while similar in size, were different by about 1.5 KB (the files are identical except that all classes are prefixed with 'data-' in one). Also, the new file is considerably larger, although I just assumed that it's because it's the unminified version. However, after building, there was no difference and the issue was still occurring. Then I realized that it was just pulling the existing minified files from the existing prebuild-src folder. So, I deleted that folder (actually just renamed with .OLD extension) and rebuilt. It created a new prebuild-src folder and two files that were identical in size to the original files in your src/node_modules/augmented-ui folder. Note that these are about 20 KB larger than the ones in the previous prebuild-src (see below):

Below is the new prebuild-src/node_modules/augmented-ui folder. Note that these are the same file size as the original files (see the file renamed with the .OLD extension in above screenshot) in the src folder. I did a diff on each of the new files with their corresponding .OLD files, and they are identical. This means that it's not actually minifying the updated augmented-ui.css files that I copied into the src folder. So, where is it getting the unminified CSS for these?

I ran the new build and everything works perfectly now and there is no longer an "invalid property" error on the clip-path attribute and it now references line 1187):

So, it seems like the 70+ KB CSS files were the cause of the problem. These files were minified without carriage-return/line-feeds (i.e. everything in single line). What's not clear is why they got minified the first time I built but, after deleting prebuild-src, they did not get minified on subsequent builds (and they now match the behavior of your official build). Also, I'd be interested in knowing where it's pulling the unminified versions of the CSS from, because it's clearly not coming from src/node_modules/augmented. Thanks for any light you can shed on this.

[sadata7]

I just did a clean checkout to a new folder to see if I could reproduce the original issue. After doing npm install and npm run build-linux I get the 90+ KB augmented CSS files. If I do a subsequent npm run build-linux I end up with the minified 70+ KB files that cause the issue. So it seems that the initial build does not minify the CSS files (which is good, because the minification seems to break the augmented-ui styles).

[GitSquared]

This is because minification needs to be ran before installing deps, not after (which the build-linux script does, unless you run it twice without cleaning up folders). Otherwise it will indeed attempt to minify dependency files which we can't guarantee to work smoothly.

Note that you don't need to build from source yourself:

• you can run directly from the source code with npm run install-linux && npm start
• if you need a single executable / binary, and need something more recent than the latest release, we build artifacts for each commit in CI. Click on a commit and scroll down below the run logs to find downloadable bins.