Re: random() CSS3 - Wire Crypto.getRandomValues() into CSS - Similar to calc()

[Dan Zulla]

One more comparison of what code looks like when random() exists and one what it looks like, and how much work it is, when it doesn't.

Dan & Isabelle

Am 08. März 2017 um 15:17 schrieb Dan Zulla <dzu...@icloud.com>:

Hi,

Got a suggestion in regards to CSS3. Isabelle (CC) and I are currently attempting to wire @mozilla/.../random-generator (The thing in Crypto.getRandomValues()), into layout/style.
We started to make some samples like a sea of flowers or a sea with changing blue tones. See screenshots attached. Or clouds with random animation speeds, sizes, and grey tones.  
We saw that calc() is similarly usable in most CSS contexts, so we started to duplicate several header files and read through parser implementation of calc(), linear-gradiant(); looked into attr(). Recompiled with added random(), but it's not doing anything yet. We saw SCSS/Sass specifications, but it doesn't seem to be anywhere near implemented yet, and we would like random() now. 
 
What we would like it to do, simply (but not limited to) for the purpose of art, without the need for any JS, is this:
Up front said: With 5s or 2s we mean a time value like (or exactly, the same C++/Mozilla type used in animation-duration), like sampling rate, telling Firefox when to update color/height/etc. (any css attribute expecting anything that can easily be randomly generated, such as 5-100px or so, or a HEX color.)

// time in seconds [optional]; sampling rate or: time until next random pick happens and DOM gets automatically updated, similar to animation-duration

- cssattribute: random(selection1,selection2,selection3, [time in s])
- cssattribute: random(range1-range2, [time in s])

- color: random([hex color code / range part 1][-,][hex color code / range part 2], [time duration until the next update happens, like animation-duration second.]);
- color: random(#ff0-blue, [3s]); // time is optional
- color: random(#fff-blue, 3s);
- color: random(yellow-orange, 1s)  // - is a parsed delimiter, expressing: from 20px to 25px, not meant as sub(20px,25px)
- width: random(10px-50px, 4s)
- font-size: random(20px-25px, 3s)
- height: random(21px-50px)
- .some_i_tag { icon: (random(&#10047,&#10049,...));   } // selection of unicode flowers; we realize there is no icon: yet, but you get the point.
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500)
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500, 0.5s)

time (as in animation-duration, like 5s) (is a function argument of that type is available)
"-" is used as a delimiter if it is a range (from a light blue, to a dark blue; or from 50px-200px)
"," is used as a separator of n function parameters, as usual.

We were wondering whether there is a Python script that would allow addition of new CSS3 functions, adds the parser functions to files, and makes an empty C++ function wrapper. 

Thx!
Dan & Isabelle

[Dan Zulla]

[Daniel Holbert]

Hi Dan & Isabelle,

Firstly: I think you meant to include some screenshots, but they didn't
make it into the final post. (perhaps because they were file-attachments
and maybe this list doesn't accept attachments? not sure) Would you mind
posting those screenshots somewhere on the web & including links to them
here, to help get your proposal across? (maybe via https://imgur.com/ or
anywhere)

In any case -- if I understand correctly, you're saying you'd like to
modify Firefox so that it'll accept syntax like...

<div style="color: random(yellow-orange, 1s)">Hello</div>

...and you'd like that to make the text "Hello" change to a different
random "color" value (between yellow and orange), every 1 second. (and
hold that color for a second, and then snap to another random color
value, etc.)

Is that correct?

That's a pretty complicated change, and I don't think it'd be easy to
do. Especially the dynamically-changing-style parts (snapping between
different random colors) would be hard to integrate cleanly. Our
rendering engine basically assumes that the same CSS & content will
always produce the same rendering -- and your random() proposal seems to
violate that assumption. (CSS Animations are one sort-of exception to
this rule, but CSS Animations are quite complex under the hood, and
there'd be a very high bar to adding something brand-new with similar
dynamic behavior to CSS Animations.)

I suspect you'd find it's easier (and more maintainable) to implement
this sort of thing in JavaScript, rather than by patching the browser
internals itself. Even if your goal is to eventually get this into
browsers, a JS version would be a good way to demonstrate the use-case
and to (eventually, if it's successful) prompt browsers to standardize &
integrate some version of the syntax down the line.

(Also, on that topic -- is this proposal something you're hoping to see
actually integrated as part of shipping Firefox browsers eventually, or
just as a feature in your own locally-patched-and-compiled version of
Firefox? Because: if you'd like to see it as a shipping feature, we'd
ultimately want to see it standardized via the w3c's CSS Working Group
-- though I suspect their response would be similar to what I said
above, at this point.)

Thanks for your interest!
~Daniel

On 3/8/17 6:20 AM, Dan Zulla wrote:
> One more comparison of what code looks like when random() exists and one
> what it looks like, and how much work it is, when it doesn't.
>
> Dan & Isabelle
>
>
>
> Am 08. März 2017 um 15:17 schrieb Dan Zulla <dzu...@icloud.com>:
>

> _______________________________________________
> dev-tech-layout mailing list
> dev-tec...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-tech-layout

[Dan Zulla]

More than a colorful blinking "Hello" - Less than https://threejs.org/ or a Vertex Shader.

Shall be in Firefox, publicly added, of course.

Here are the images: https://imgur.com/a/7HkA2

Dan

[Daniel Holbert]

On 03/08/2017 08:46 PM, Dan Zulla wrote:
> More than a colorful blinking "Hello" - Less
> than https://threejs.org/ or a Vertex Shader.

That's... enigmatic. :) Doesn't really clarify what you're going for.

So it looks like the use-cases here are:
- content that dynamically snaps between random CSS property values
(within requested ranges)
- content that just has static, randomly-generated CSS values (like
your flowers screenshots, I think -- those don't involve any "time in
seconds" args so I assume they're meant to be static?)

> Shall be in Firefox, publicly added, of course.

Thanks - I appreciate that intention. I was mostly asking because I
want to be sure you're aware: before anything like this could be checked
into Firefox's source tree, it would absolutely need to be going through
the standards process with the CSSWG, & it'd need to have some support
from other browser vendors. See this page for more thoughts & reasons
around that: https://wiki.mozilla.org/WebAPI/ExposureGuidelines

Basically: even if we at Mozilla were super on-board with this proposal,
we want the web platform to be interoperable, so we don't want to take
new platform features until we know that other vendors are interested in
implementing them.

We also want new features to have strong use-cases that aren't addressed
by the current web platform. I'm not really seeing that here -- the
use-case is kind of neat, but it's also pretty niche, *and* it's
something that you can already satisfy by simply generating your styles
on the fly in JS. So to me, this doesn't seem like it really merits a
new complication to CSS (& adding a new primitive type to all CSS
properties).

(*Also*, as bz mentioned on Twitter: we happen to be switching out our
CSS engine for a new one written in Rust this year, so we're especially
hesitant to accept new nontrivial CSS features right now.)

SO, bottom line: you seem interested to dive right into implementing
this in Firefox right away, which is admirable, but I think that's
unlikely to be productive at this stage. If you really want to push this
forward, I'd encourage you to try to come up with a JS-based demo (and
perhaps just a JS-based implementation). If you're really wanting it to
be a CSS feature, consider reaching out to the CSS Working Group for
feedback & to see if anyone there is interested in helping push this as
a CSS feature. (I'm skeptical that you'll have much luck there, for a
lot of the reasons I outlined above -- but that's who you'd really need
to talk to, if you really wanted to get this into CSS.)

Thanks,
~Dnaiel

[Dan Zulla]

Writing a CSS Parser in Javascript, for an accurate playground/demo, is equally meh as diving right into Firefox.

We should make scripts/constraint-based programming tools that make implementation of new features an easy and funny thing to do. And I still don't like that Rust is already a build dependency. Who made that decision?

Dan

[Daniel Holbert]

On 03/08/2017 11:11 PM, Dan Zulla wrote:
> Writing a CSS Parser in Javascript, for an accurate playground/demo, is
> equally meh as diving right into Firefox.

I wasn't suggesting that you write a CSS Parser in JavaScript.

I imagine your JS demo would probably want to build on top of
preexisting JS libraries for working with CSS, and/or you might want to
use a more restricted set of properties & more resticted/convenient
syntax for your proof-of-concept. Something like that.

> We should make scripts/constraint-based programming tools that make
> implementation of new features an easy and funny thing to do.

That's a worthy goal. Unfortunately it can't really be that simple, for
new features that break invariants that the engine depends on (and that
modify the rendering behavior of pretty much every CSS property). Those
sorts of changes are going to require serious architectural work.

You might be interested in reading about CSS Houdini, though:
https://github.com/w3c/css-houdini-drafts/wiki
https://github.com/w3c/css-houdini-drafts/wiki/specs

That set of specs (when finalized/implemented) will expose more
low-level CSS primitives/APIs to web developers, so they can prototype
CSS features on their own, using JavaScript. It'll be a while before
it's shipping, though (a few parts of it might arrive in Firefox later
this year, at the earliest). So I suspect it's not what you want to use
for this project.

> And I
> still don't like that Rust is already a build dependency. Who made that
> decision?

Yeah, you expressed that on Twitter, too. It confuses me that this
upsets you, but I don't want to be drawn into a debate / side-discussion
about it.

You can read more about some motivation/background here, if you're
interested:
https://hacks.mozilla.org/2016/07/shipping-rust-in-firefox/

~Daniel

[Daniel Holbert]

On 03/09/2017 09:40 PM, Dan Zulla wrote:
> Is there a proper way to do this with Mozilla rather than as somebody
> who is writing on a semi-public list?

Proper way to do what with Mozilla?

[Daniel Holbert]

On 03/09/2017 09:43 PM, Dan Zulla wrote:
> Add CSS3 random() before like June?

Still not clear. You want to "add" it...
- as a polyfill/demo-JS-implementation? That's up to you & whoever else
you can get interested in helping. :)

- ...as a CSS feature specced by the CSSWG? You'd want to propose it on
the working group mailing list, which is:
www-...@w3.org
Archives at http://lists.w3.org/Archives/Public/www-style/

~Daniel

[Dan Zulla]

Add CSS3 random() before like June?

[Dan Zulla]

Is there a proper way to do this with Mozilla rather than as somebody who is writing on a semi-public list?

Dan

[Dan Zulla]

Still thinking.

Am 10. März 2017 um 06:48 schrieb Daniel Holbert <dhol...@mozilla.com>:

On 03/09/2017 09:43 PM, Dan Zulla wrote:

Add CSS3 random() before like June?

Still not clear. You want to "add" it...

[Dan Zulla]

Messaged to the list. Needs approval. Would like to continue here with Firefox anyways. Maybe you know someone who has written significant portions of code of CSS3 animations?

I like Mozilla style and what has been accomplished. Also -moz features, such as -moz-element, even if - security relevant.

I was close to extracting Pixels.

[Manish Goregaokar]

> Also -moz features, such as -moz-element, even if - security relevant.

We don't want to add more of these. If we were to, they would either be
something being used internally in XUL (unlikely for this feature), or
features that are on track to standardization. Though I don't think we
create new -moz prefixes anymore, and instead pref-gate things.

As far as I can tell the only way to get this feature in is to get it
specced with tentative approval from a standards body.

-Manish Goregaokar

[Manish Goregaokar]

Maybe it is, but that's very off topic for this list.

-Manish Goregaokar

On Sat, Mar 11, 2017 at 10:56 AM, Dan Zulla <dzu...@icloud.com> wrote:

> I understand that, yet, disregarding the dust - and with dust, I mean
> oldness - currently happening on web standards and current browser --
>
> We haven't quite reached a level of low-to-high bandwidth streaming
> anything-onto-any device mobile/desktop 3G/Fiber/Any Bandwidth GPU rendered
> quality web/3D gaming/etc. stuff over the Web yet. Sure, WebGL/3D
> Canvas/ThreeJS exists, but...
>
> Relevant features such as background-transparency for things like filter()
> and things like random(), along with other things, seem increasingly hard
> to implement, along with lengthy discussion such as this one, and C++ stuff
> seems increasingly hard to modify/extend/ask questions about without
> getting on mailing lists.
>
> Mozilla financially supported scholarships and venture capital / seed
> funding / project funding budgets seem like zero to non-existent, and stuff
> - everything - is slow-to-boringly non existent..
>
> Maybe time for a change of course at Mozilla? And with change-of-course I
> mean an entirely new web browsing experience and approach, very different
> from anything near to HTTP, HTML, CSS and Javascript.
>
> Dan
>
>
>
>
>
> Am 11. März 2017 um 18:47 schrieb Manish Goregaokar <manis...@gmail.com
> >:

[Dan Zulla]

[Dan Zulla]

It's just a matter of talking to each other in a developer format, I guess. There is a very expensive Mozilla building close to the pier in San Francisco, either rented or owned by Mozilla. Doors that are closed to dev's and VC's who are uninvited.

What's the correct list to get invited, on topic, to change stuff? I inherently feel like i I just show up to bring by some proposals, I get kicked out very soon.

Dan

Am 11. März 2017 um 19:58 schrieb Manish Goregaokar <manis...@gmail.com>:

Maybe it is, but that's very off topic for this list.

-Manish Goregaokar

On Sat, Mar 11, 2017 at 10:56 AM, Dan Zulla <dzu...@icloud.com> wrote: