Theme management (enso-org/ide#1390)

Original commit: enso-org/ide@c8bfe42

ide/CHANGELOG.md

@@ -82,6 +82,12 @@
 - [Geo Map visualization recognizes columns regardless of their name letter
   case][1392]. This allows visualizing tables with columns like `LONGITUDE` or
   `Longitude`, where previously only `longitude` was recognized.
+- [It is possible now to switch themes][1390]. Also, theme manager was
+  integrated with the FRP event engine, which was a long-standing issue in the
+  IDE. Themes management was exposed to JavaScript with the `window.theme`
+  variable. It is even possible to change and develop themes live by editing
+  theme variables directly in the Chrome Inspector. Use the following command to
+  start: `theme.snapshot("t1"); theme.get("t1").interactiveMode()`.
 
 #### EnsoGL (rendering engine)
 
@@ -91,26 +97,27 @@ If you're interested in the enhancements and fixes made to the Enso compiler,
 you can find their release notes
 [here](https://github.com/enso-org/enso/blob/main/RELEASES.md).
 
-[479]: https://github.com/enso-org/ide/issues/479
+[1064]: https://github.com/enso-org/ide/pull/1064
 [1209]: https://github.com/enso-org/ide/pull/1209
 [1291]: https://github.com/enso-org/ide/pull/1291
-[1314]: https://github.com/enso-org/ide/pull/1314
-[1313]: https://github.com/enso-org/ide/pull/1313
 [1311]: https://github.com/enso-org/ide/pull/1311
-[1064]: https://github.com/enso-org/ide/pull/1064
+[1313]: https://github.com/enso-org/ide/pull/1313
+[1314]: https://github.com/enso-org/ide/pull/1314
 [1316]: https://github.com/enso-org/ide/pull/1316
 [1318]: https://github.com/enso-org/ide/pull/1318
+[1328]: https://github.com/enso-org/ide/pull/1328
 [1355]: https://github.com/enso-org/ide/pull/1355
 [1332]: https://github.com/enso-org/ide/pull/1332
 [1341]: https://github.com/enso-org/ide/pull/1341
-[1328]: https://github.com/enso-org/ide/pull/1328
 [1341]: https://github.com/enso-org/ide/pull/1341
 [1348]: https://github.com/enso-org/ide/pull/1348
 [1353]: https://github.com/enso-org/ide/pull/1353
 [1384]: https://github.com/enso-org/ide/pull/1384
 [1385]: https://github.com/enso-org/ide/pull/1385
-[1393]: https://github.com/enso-org/ide/pull/1393
+[1390]: https://github.com/enso-org/ide/pull/1390
 [1392]: https://github.com/enso-org/ide/pull/1392
+[1393]: https://github.com/enso-org/ide/pull/1393
+[479]: https://github.com/enso-org/ide/issues/479
 [1335]: https://github.com/enso-org/ide/pull/1335
 [1358]: https://github.com/enso-org/ide/pull/1358
 [1377]: https://github.com/enso-org/ide/pull/1377

ide/build/cmd.js

@@ -1,5 +1,16 @@
-let spawn = require('child_process').spawn
-let exec  = require('child_process').exec
+const https = require('https')
+const spawn = require('child_process').spawn
+const exec  = require('child_process').exec
+
+function download(url) {
+    return new Promise((resolve,reject) => {
+        https.get(url,(res) => {
+            let data = ""
+            res.on("data", (chunk) => data += chunk)
+            res.on("end", () => resolve(data))
+        }).on("error", (error) => reject(error))
+    })
+}
 
 function section(title) {
     let border = '-'.repeat(8 + title.length)
@@ -70,4 +81,27 @@ async function get_npm_lts_version_of (name) {
     return version
 }
 
-module.exports = {section,run,run_read,check_version,get_npm_info,get_npm_lts_version_of,with_cwd}
+async function get_node_dist_index() {
+    let index = await download('https://nodejs.org/dist/index.json')
+    return JSON.parse(index)
+}
+
+async function get_node_lts_version() {
+    let index = await get_node_dist_index()
+    let newest = null
+    for (let entry of index) {
+        if (entry.lts !== false) {
+            newest = entry
+            break
+        }
+    }
+    if (!newest) {
+        throw "Cannot fetch the info about node LTS version."
+    }
+    let node = newest.version
+    let npm  = newest.npm
+    return [node,npm]
+}
+
+module.exports = {section,run,run_read,check_version,get_npm_info,get_npm_lts_version_of,with_cwd,
+    get_node_dist_index,get_node_lts_version}

ide/run

@@ -15,10 +15,9 @@ async function init () {
         cmd.section('Version Validation')
         console.log("Use the `" + skip_validation + "` flag to skip it.")
         console.log("Querying npm for the latest LTS versions.")
-        let node_lts_version = await cmd.get_npm_lts_version_of('node')
-        let npm_lts_version  = await cmd.get_npm_lts_version_of('npm')
+        let [node_lts_version,npm_lts_version] = await cmd.get_node_lts_version()
         console.log("Checking versions of installed packages.")
-        await cmd.check_version('node',`v${node_lts_version}`)
+        await cmd.check_version('node',node_lts_version)
         await cmd.check_version('npm',npm_lts_version)
         await cmd.check_version('rustc','1.40.0-nightly',{
             preprocess:(v)=>v.substring(6,20)

ide/src/config.yaml

@@ -2,7 +2,11 @@
 # to control the IDE, like the `main` function, and also the configuration object.
 windowAppScopeName: "enso"
 
-# The configuration object nested inside of the `windowAppScopeName` object, containing all
+# The configuration object nested inside of the `windowAppScopeName` object containing all
 # startup configuration options. See usages of this variable to learn more about available
 # options.
 windowAppScopeConfigName: "config"
+
+# The configuration object nested inside of the `windowAppScopeName` object containing theming
+# utilities and allowing for runtime theme modification.
+windowAppScopeThemeName: "theme"

ide/src/js/lib/common/src/loader.js

@@ -9,7 +9,7 @@ import * as svg        from './svg'
 // === ProgressIndicator ===
 // =========================
 
-let bg_color     = "#f6f3f1"
+let bg_color     = "rgb(247,246,246)"
 let loader_color = "#303030"
 let top_layer_index = 1000
 

ide/src/js/lib/content/src/index.js

@@ -419,7 +419,7 @@ async function reportCrash(message) {
 
 function style_root() {
     let root = document.getElementById('root')
-    root.style.backgroundColor = '#f6f3f1'
+    root.style.backgroundColor = 'rgb(247,246,246)'
 }
 
 /// Waits for the window to finish its show animation. It is used when the website is run in