To accomplish this, I made the following changes:
1) Material is now in charge of drawing the material shadows.
2) In order to mix in the style for the shadow, Element now takes a list of
Styles instead of a single style.
3) Update all clients of Element#style to understand that we now have a list.
4) Update components that drawer shadows to have Material do that work instead.
a) One exception: FloatingActionButton draws its own shadow because of its
crazy clip requirements. We'll probably want to find a better way for
FloatingActionButton to clip in the future.
I've also added a widgets-fn example to demo the fn material widgets.
This CL introduces a bug into Drawer whereby you can get ink splashes
everywhere in the drawer. In the future, we'll need to separate out the
different material aspects to get non-splashable materials.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/1003553002
Instead of MaterialComponent being a base class, components that want material
behavior simply create a MaterialComponent during their render function. This
approach gives the component more flexibility as to its structure and gives
MaterialComponent more flexibility has to how the components it generates are
related to the existing children.
Also, I've improved some of the event delegation code. There's no reason to
attach event handlers to the root component you emit during |render| because
the framework already delegates events from your root component to you.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/983903003
This CL factors EditableString out of EditableText and implements more of the
InputConnection functions. As a result, EditableText now basically works.
This CL also paves the way to make EditableText stateless by using
EditableString as its state object. However, there's still a bit more work to
do to make that a reality (e.g., factoring out the cursor blink timer and the
connection to the keyboard).
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/995073002
This patch allows for an initial delay before an animation begins and also adds an Animation class which encapsulates a value which is long-lived, can be explicitly set and also animated from its current value to another value.
BUG=
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/994143002
This patch changes the timing of the unmount call until after the component is removed (and marked as such) and allows setState to be called after this point. If this happens, setState will still invoke the closer to do any neccesary cleanup, but doesn't schedule the component for render
R=eseidel@chromium.org, eseidel
BUG=
Review URL: https://codereview.chromium.org/985853002
To test:
sky/tools/shelldb analyze sky/examples/stocks-fn/stocksapp.dart
It prints 600+ warnings about the "native" keyword, and after
this change only a couple warnings about missing library names
which I don't fully understand.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/987613002
It's awkward to work on fn.dart in the examples directory so this CL moves it
to /sky/framework. Also, I've merged the whole library into one file instead of
using the |part| mechanism. The whole thing isn't that big.
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/987463002
- Removed out-of-date README.md
- Moved fling-curve into the animation directory because it's part of the
animation behavior of the system.
- Moved view-configuration into the theme directory because it's a collection
of constants similar in flavor to the colors and the shadows. Eventually
we'll want to make the theme configurable and have these all together will
hopefully make that easier.
- Moved dom-serializer into tests/resources because it is used only by tests.
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/980423002
Previously, the two versions of this sample app had separate copies of the
stock data. This CL moves the common data to the common data directory so that
they can share. Also, I've switched the data files to be |dart| files rather
than |sky| files to make them easier to use from fn examples.
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/980953002
This CL removes a bunch of examples that don't actually work in the current
engine. I've also renamed example-element to custom-element and
example-scrollable to scrolling because the word "example" in the name is
redundant with the name of the directory.
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/980323003
This CL changes how events work in fn. Previously, event listeners were passed
in as constructor arguments. Now Nodes hold an |events| object, which contains
all the event registrations. When a Component renders, all its |events| are
copied onto the Node it produces. When an Element syncs, it walks its |events|
and adds them as event listeners on the underlying sky.Element.
The net result of this change is increased flexibility in how events are
registered. Now components don't need to enumerate all the possible events that
they support. Instead, the parent component can listen for whatever events it
likes.
Also, I've cleaned up the association between DrawerAnimation and Drawer. Now
the constructor for Drawer accepts an |animation| object and wires up its
internal event handlers itself instead of requiring the constructor to do all
the wiring.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/975863003
This CL adds license blocks and cleans up a number of Dart idioms in fn.
Specifically, I've marked several fields as |final| and used Map#putIfAbsent in
some appropriate places.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/973613004
If there is jank, we might not get a frame time that's just after the last
frame, which means we'll stop generating animation frames before hitting 1.0
exactly.
In this CL, we introduce state to takeWhile to cancel the stream after emitting the
1.0.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/975153002
This is just a proof of concept. If we like this direction, it will move out of the examples directory (likely re-written) and be committed in smaller pieces with unit tests and formal reviews.
TBR=abarth
BUG=
Review URL: https://codereview.chromium.org/971183002
I removed the green background and added display
of percent change (which is random for now).
I also display a random assortment of stocks every time
instead of always the top 100.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/950073002
This CL updates sky-box, sky-button, sky-checkbox, sky-input, and sky-radio to
work in Dart. We don't have a data binding system yet, so there's a bit more
plumbing in the code.
This CL adds support for sky-element@attributes, which lets you specify which
attributes your element supports. We use this information to synthesize getters
and setters for those attributes and to dispatch to mumbleChanged methods when
the attributes change.
I've also wrapped the widgets demo itself in a sky-scrollable so the whole
thing scrolls.
R=eseidel@chromium.org
Review URL: https://codereview.chromium.org/946813005
After this CL, you can use <sky-element> to describe custom elements. The
current iteration is very basic and is hardcoded to "example", but its a start.
This CL renames the |init| function to |_init| to prevent importers from
calling it directly. Also, we now pass the <script> element to |_init| to give
some context.
R=ojan@chromium.org, eseidel@chromium.org
Review URL: https://codereview.chromium.org/950493003
These now appear on internals as takeServicesProvidedToEmbedder and
takeServicesProvidedByEmbedder. When you call these functions, you get back the
raw int that represents the handle. We'll need to wrap them up inside the Dart
VM with the appropriate types. We can create a nice wrapper for that in a
future CL.
R=hansmuller@google.com, hansmuller@chromium.org
Review URL: https://codereview.chromium.org/944733002
two components: color-wheel, and color-picker which adds
a div that displays the selected color. Data binding is
used to connect the color-wheel's "color" property to the
sample div's background-color.
BUG=
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/872993006
Commit efc3afd428bd85fd3d12e0dc941b5eb7248ca30b broke it because
we'd computed an empty foreground layer. Now that background
painting is part of the foreground phase, we need to use the
background rect for clipping. As best I can tell, the
background rect is always >= the size of the foreground
rect, so it should be safe to use.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/876243002
Per the spec in modules.md the exports property should default to an
empty object. We lazy allocate it so that modules that just replace it
don't create the empty object and then throw it away.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/872043003
Instead of having a separate directory for every Sky element, we should just
put them in the general framework directory. Once the framework is more
complicated, we'll probably want to organize it a bit better, but for now there
aren't enough files to justify having so many directories.
R=esprehn@chromium.org
Review URL: https://codereview.chromium.org/874303003
We now only preserve the whitespace inside a <t> element inside
the parser. This removes the known n^2 from reattaching whitespace
which should make parsing and appending nodes faster. I also
removed the dead WhitespaceMode code from the parser, and made
the dom-seralizer.sky auto indent the markup so the test output
would be readable.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/867963006
We were cloning elements with all the attributes that contained
expressions like attrName="{{ foo }}" which meant we'd go through the
reflection process converting that value and also call the
attrNameChanged() callback and the attributeChanged() with the braced
string which the element didn't really want to know about.
After this patch we create a "clone source node" which is a copy of the
original element without the attributes that have the expressions and
use that when cloning, then we assign the properties using data binding
later.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/868973002
Previously, if you had a generated background image and a translucent (or
rounded) border, we would draw the image nine times because we would inflate
the fill rect to draw behind the border. With no-repeat, we only draw the image
once.
This saves 4.5% of record time on flights-app.
R=esprehn@chromium.org
Review URL: https://codereview.chromium.org/844193009
Instead of storing primitive values which makes the data
binding system throw away DOM each time we update each slot
lets just use objects and shift + pop. This means very little
data binding churn.
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/802153004
All reflected attributes two way bind on SkyElement, so now doing
<sky-element name="sky-input" attributes="value:string"> is enough
to get two way binding on the value attribute so users doing
<sky-input value="{{ inputValue }}"> will get the inputValue property
updated as the user types.
R=abarth@chromium.org, ojan@chromium.org
Review URL: https://codereview.chromium.org/850383002
Specs: introduce layoutDescendants() to avoid work when a layout
manager is unaffected by its childrens' intrinsic dimensions
Examples: update for layoutDescendants() change
Specs: add "lifetime" to resolver settings so that a transition can
avoid having to dirty every consumer of the property every frame when
it only needs to update the objects that are changing that frame
Specs: expose the parents on AbstractStyleDeclarationList subclasses
Specs: fix documentation around autoreap
Specs: fix definition of setProperty()
Specs: clean up the dimension-related logic of layout managers
Review URL: https://codereview.chromium.org/850593003
Log an error whenever an element has an unknown attribute in a template.
This means you can't use generic attributes like Polymer, but we
probably want to discourage that anyway since attribute selectors should
be avoided for most things.
R=ojan@chromium.org
Review URL: https://codereview.chromium.org/845523004
Prior to this change the magic sequence was '#!mojo:' and the url of the content handler app included mojo:. This works only for mojo: urls, but we want
other schemes. So, the magic sequence is now '#!mojo ' and 'mojo ' is not part of the resulting url.
R=aa@chromium.org
Review URL: https://codereview.chromium.org/821403003
Now inside the <template> of a SkyElement you can use
on-eventName="method" on any element to add event listeners.
For example you can write <sky-button on-click="handleClick">
and then define handleClick(event) on the element class that
contains the button.
In adding this and tests I also realized that property bindings
were not setup on the initial call to bind(), which is now
fixed in this patch (See change to Node.prototype.bind).
R=eseidel@google.com, rafaelw@chromium.org
Review URL: https://codereview.chromium.org/812713005
Eventually we'll want to replace these with something
fancier like polymer, but this exercise helped us
find several bugs in the engine as well as
removed one more blocker from using Sky to
replace mojo/views usage in mojo/examples.
R=esprehn@chromium.org
BUG=443439
Review URL: https://codereview.chromium.org/809233002
The syntax for implementing a SkyElement is now:
<sky-element name="element-name">
<template>
<!-- template here -->
</template>
<script>
module.exports = class extends SkyElement {
attached() {
// ...
}
// .. methods here ..
}.register();
</script>
</sky-element>
The register() static method on SkyElement subclasses calls
document.registerElement() and returns the generated constructor.
It uses the parent <sky-element>'s name attribute to set the name
of the element.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/788943003
actually telling your child to paint, you just say where it would
paint. The platform then takes care of making sure all the dirty nodes
have their paint() methods called.
Review URL: https://codereview.chromium.org/744843003
-Add RenderParagraph and display:paragraph. This is the only
render type that's allowed to contain inlines or text.
-If you put text nodes directly in a non-paragraph, wrap them
in an anonymous paragraph. This may not be the place we want
to end up, but it's a good stopgap to make it so we don't
crash in this case.
-Make StyleAdjuster force that non-paragraph blocks only contain
RenderBlock subclasses and that paragraphs and inlines only contain
inlines.
-Considerably simplify addChildIgnoringAnonymousColumnBlocks
now that we only create anonymous blocks for the case of
text nodes in non-paragraphs. Also get rid of the behavior
where we try to group multiple nodes into a single
anonymous block.
R=esprehn@chromium.org
Review URL: https://codereview.chromium.org/729693003
element; an example that uses that example to define some HTMLy
elements; and an example to use those HTMLy elements to display a
hello world doc. Highly incomplete WIP.
Review URL: https://codereview.chromium.org/698293003
that uses it looks nicer; this moves the complexity to places that
register elements without using 'class' (e.g. the internals of
frameworks that create elements for defining elements)
Review URL: https://codereview.chromium.org/699083005
parsed' callback; pass the element's module to the constructor when
constructing a custom element (these are rather experimental changes
and we may want to go a different way on this stuff)
Review URL: https://codereview.chromium.org/701873004
In mojom, there's a notion of a request/response pair. This CL teaches the JS
bindings not to GC a message pipe after a request has been issued but before
the response has been received.
R=hansmuller@chromium.org
Review URL: https://codereview.chromium.org/696373003
This has the following implications:
- There's no createElement() function any more. If you want to create
an element from script, you have to use its constructor.
- There's no async element registration. The parser will block until
all the imports are imported when you use a tag name of a custom
element that hasn't been registered yet, in case one of the imports
defines it.
- If you try to construct a non-registered element in markup, it
turns into an <error> element.
- <div>, <span>, and <error> are new built-in elements.
R=esprehn@chromium.org
Review URL: https://codereview.chromium.org/695423004
Previously we were using string concatenation to build up the directory
listing. Now we fetch some JSON from the server and use data binding to inflate
a directory listing.
This exmaple doesn't work yet because we're missing support for
template@repeat, but hopefully we'll get that soon.
Also, added support for setRequestHeader to XMLHttpRequest.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/688413005
I had to also register for the text/plain mime-type
which turned out to be harder than expected.
Mostly due to my confusion with mojo_shell
using last-argument-wins argument parsing.
R=ianh@google.com
Review URL: https://codereview.chromium.org/672363002