Theme management #1390

wdanilo · 2021-03-26T00:43:28Z

Pull Request Description

This PR:

Improves theme manager. Now it is possible to switch themes, however, still, not all elements are updating while switching. It introduces a FrpStyleManager which handles theme switching inside FRP networks.
Fixes npm registry node-version issue.
Fixes 2 serious internal bugs - one double mut borrow panic, and one which was causing style sheet variables to be released to early and thus, theme corruption.
Introduces new color style management, including color::AnyFormat that can contain colors in any available format and has associated nice parsing and pretty-print options.
Allows themes to be loaded from string inputs.
Connects theme manager to JS and exposes functions to change, compare, clone, and inspect themes directly from JS Console and Chrome inspector (allowing to change theme properties with nice Chrome Inspector widgets).
Fixes several small bugs in IDE visuals
Fixes a light theme to look nicer, however, it will still be reworked slightly soon.

Checklist

Please include the following checklist in your PR:

The CHANGELOG.md was updated with the changes introduced in this PR.
The documentation has been updated if necessary.
All code conforms to the Rust style guide.
All code has automatic tests where possible.
All code has been profiled where possible.
All code has been manually tested in the IDE.
All code has been manually tested in the "debug/interface" scene.
All code has been manually tested by the PR owner against our test scenarios.
All code has been manually tested by at least one reviewer against our test scenarios.

farmaazon · 2021-03-29T12:53:51Z

build/run.js

+    // The following ignore list is the same as in `src/rust/.gitignore`, but are written with
+    // qualified paths. This is a test if this will prevent some infinite-loop compilation with the
+    // Cargo Watch tool. If so, an error should be reported to their bugtracker.
+    let args = ['watch', '-i', 'src/rust/target', '-i', 'src/rust/ensogl/msdf-sys/msdfgen_wasm.js', '-i', 'src/rust/ide/parser/pkg/', '-s', `${target}`]


long line. Does the prettier fix that?

farmaazon · 2021-03-29T12:55:12Z

src/js/lib/content/src/index.html

@@ -33,6 +33,7 @@
        <script type="module" src="/assets/run.js" defer></script>
    </head>
    <body>
+        <div id="colors-debug" style="--graph_editor-node-background:rgb(255 0 0); --graph_editor-node-shadow:rgb(0 0 0);  --graph_editor-node-shadow-exponent:2.0;"></div>


What is this for? Can you add a comment?

farmaazon · 2021-03-29T12:55:49Z

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

+//        for (let name of logsFns) {
+//            this.raw[name] = console[name]
+//            console[name] = (...args) => {
+//                this.handle(name,args)
+//            }
+//        }


Why is it commented?

uncommented

farmaazon · 2021-03-29T12:56:45Z

src/rust/ensogl/example/src/complex_shape_system.rs

@@ -0,0 +1,102 @@
+//! Example scene showing simple usage of a shape system.


The file name is complex_shape_system, but the docs says about "simple usage". Who is right?

The file name.

farmaazon · 2021-03-29T13:00:24Z

src/rust/ensogl/lib/core/src/data/color/gradient.rs

-    InvExponent(f32),
-}
+    InvExponent(exp:f32) inv_exponent,
+}


farmaazon · 2021-03-29T13:19:03Z

src/rust/ensogl/lib/core/src/display/shape/primitive/style_watch.rs

+
+impl StyleWatchFrp {
+    /// Constructor.
+    #[allow(trivial_casts)]


Why do we allow trivial_casts here?

Otherwise thsidoesnt compile let callback = Rc::new(RefCell::new(Box::new(||{}) as Box<dyn Fn()>)); And I don't see a way to make it nicer.

So put that in the comment, so nobody will need to check that in the future :)

farmaazon · 2021-03-29T15:04:59Z

src/rust/ensogl/lib/core/src/display/style/theme.rs

+        // TODO[WD]: This impl should be uncommented, and the `self.update()` line removed,
+        //   but now it causes project name to be red (to be investigated).
+        // // First theme set can skip lazy change, as this is normally done on app startup.
+        // // It will also make the startup faster, as the theme will not be updated on the next
+        // // frame, which would make all shaders re-compile.
+        // if self.initialized.get() {
+        //     self.initialized.set(true);
+        //     self.update()
+        // }


Will you investigate it in this PR? If not, please add an issue.

farmaazon · 2021-03-30T06:46:50Z

src/rust/ide/view/graph-editor/src/component/edge.rs

@@ -32,7 +32,7 @@ const ARROW_SIZE_Y       : f32 = 20.0;
 const HOVER_EXTENSION    : f32 = 10.0;

 const MOUSE_OFFSET       : f32 = 2.0;
-const NODE_PADDING       : f32 = node::SHADOW_SIZE;
+const NODE_PADDING       : f32 = 10.0; // node::SHADOW_SIZE;


commented code.

farmaazon · 2021-03-30T06:47:44Z

src/rust/ide/view/graph-editor/src/component/node/input/port.rs

@@ -132,7 +132,7 @@ ensogl::define_endpoints! {
        set_hover            (bool),
        set_connected        (bool,Option<Type>),
        set_parent_connected (bool),
-        set_definition_type  (Option<Type>),
+        set_definition_type   (Option<Type>),


unnecessary space.

its ok in code. Git shows that strangely

farmaazon · 2021-03-30T06:49:57Z

src/rust/ide/view/src/project.rs

+        // FIXME[WD]: Think how to refactor it, as it needs to be done before model, as we do not
+        //   want shader recompilation. Model uses styles already.


I think this is important and should be fixed in this PR.

This should be done after all styles are connected and theme manager works 100% correct. Now its impossible to be designed correctly IMO.

Original commit: enso-org/ide@c8bfe42

wdanilo added 15 commits March 24, 2021 21:34

Refactoring

596daf8

Ficing node and npm version check

6bc93ec

Fixing stylesheet update procedures

1b46157

Adding theme switching to nodes

d039a9f

Wip

c25f318

wip

98d0d48

wip

2bb8315

wip

fb3182a

Adding auto-generated file to gitignore

6ebd48f

wip

4d7b589

Fixing stylesheet recomputation bug

d8ae1e7

wip

ef1c89c

wip

acdc84a

Merge branch 'develop' into wip/wd/themes

7db966a

linting

ca55c76

wdanilo requested a review from farmaazon March 29, 2021 11:01

wdanilo marked this pull request as ready for review March 29, 2021 11:01

wdanilo added 5 commits March 30, 2021 03:04

refactoring

646aa5d

Linting

392a537

minor changes

dcce69c

Adding docs

3a71a6e

Improving colors

94f8d20

farmaazon approved these changes Mar 30, 2021

View reviewed changes

wdanilo and others added 4 commits March 30, 2021 11:22

Improving shadow

aa5406f

Applying review

f9adea9

Merge branch 'develop' into wip/wd/themes

3b3b849

prettify changelog

dc0229a

farmaazon merged commit c8bfe42 into develop Mar 30, 2021

farmaazon deleted the wip/wd/themes branch March 30, 2021 14:16

mwu-tow pushed a commit to enso-org/enso that referenced this pull request Oct 30, 2021

Theme management (enso-org/ide#1390)

86d9e6b

Original commit: enso-org/ide@c8bfe42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme management #1390

Theme management #1390

wdanilo commented Mar 26, 2021 •

edited

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021 •

edited

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021 •

edited

farmaazon Mar 30, 2021

farmaazon Mar 29, 2021

wdanilo Mar 30, 2021

farmaazon Mar 30, 2021

wdanilo Mar 30, 2021

farmaazon Mar 30, 2021

wdanilo Mar 30, 2021

farmaazon Mar 30, 2021

wdanilo Mar 30, 2021

		@@ -0,0 +1,102 @@
		//! Example scene showing simple usage of a shape system.

		// FIXME[WD]: Think how to refactor it, as it needs to be done before model, as we do not
		// want shader recompilation. Model uses styles already.

Theme management #1390

Theme management #1390

Conversation

wdanilo commented Mar 26, 2021 • edited

Pull Request Description

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wdanilo Mar 30, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wdanilo Mar 30, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wdanilo commented Mar 26, 2021 •

edited

wdanilo Mar 30, 2021 •

edited

wdanilo Mar 30, 2021 •

edited