| OLD | NEW |
| 1 Sky Style Language | 1 Sky Style Language |
| 2 ================== | 2 ================== |
| 3 | 3 |
| 4 Planed changes | 4 Planed changes |
| 5 -------------- | 5 -------------- |
| 6 | 6 |
| 7 Add //-to-end-of-line comments to be consistent with the script | 7 Add //-to-end-of-line comments to be consistent with the script |
| 8 language. | 8 language. |
| 9 | 9 |
| 10 | 10 |
| (...skipping 251 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 262 | +-- StringStyleValue* | 262 | +-- StringStyleValue* |
| 263 | | | | 263 | | | |
| 264 | | +-- AnimatableStringStyleValue* | 264 | | +-- AnimatableStringStyleValue* |
| 265 | | | 265 | | |
| 266 | +-- ObjectStyleValue | 266 | +-- ObjectStyleValue |
| 267 | | 267 | |
| 268 +-- PrimitiveValuesListStyleValue* | 268 +-- PrimitiveValuesListStyleValue* |
| 269 */ | 269 */ |
| 270 ``` | 270 ``` |
| 271 | 271 |
| 272 The types marked with * in the list above are not part of sky:core, | 272 The types marked with * in the list above are not part of dart:sky, |
| 273 and are only shown here to illustrate what kinds of extensions are | 273 and are only shown here to illustrate what kinds of extensions are |
| 274 possible and where they would fit. | 274 possible and where they would fit. |
| 275 | 275 |
| 276 TODO(ianh): consider removing 'StyleValue' from these class names | 276 TODO(ianh): consider removing 'StyleValue' from these class names |
| 277 | 277 |
| 278 ```javascript | 278 ```javascript |
| 279 abstract class StyleNode { | 279 abstract class StyleNode { |
| 280 abstract void markDirty(); | 280 abstract void markDirty(); |
| 281 } | 281 } |
| 282 | 282 |
| (...skipping 164 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 447 Boolean needsLayout = false; | 447 Boolean needsLayout = false; |
| 448 Boolean needsPaint = false; | 448 Boolean needsPaint = false; |
| 449 // PropertyHandle propertyHandle; // assigned by registerProperty | 449 // PropertyHandle propertyHandle; // assigned by registerProperty |
| 450 // Integer dependencyBit; // assigned by StyleValueResolverSettings.dependsOn(
) | 450 // Integer dependencyBit; // assigned by StyleValueResolverSettings.dependsOn(
) |
| 451 } | 451 } |
| 452 typedef PropertyHandle Integer; | 452 typedef PropertyHandle Integer; |
| 453 PropertyHandle registerProperty(PropertySettings propertySettings); | 453 PropertyHandle registerProperty(PropertySettings propertySettings); |
| 454 // registers a property with the given settings, and returns an integer >= 0 | 454 // registers a property with the given settings, and returns an integer >= 0 |
| 455 // that can be used to refer to this property | 455 // that can be used to refer to this property |
| 456 | 456 |
| 457 // sky:core exports a bunch of style grammars so that people can extend them | 457 // dart:sky exports a bunch of style grammars so that people can extend them |
| 458 attribute StyleGrammar PositiveLengthOrInfinityStyleGrammar; // resolves to Leng
thStyleValue | 458 attribute StyleGrammar PositiveLengthOrInfinityStyleGrammar; // resolves to Leng
thStyleValue |
| 459 attribute StyleGrammar PositiveLengthOrAutoStyleGrammar; // resolves to LengthSt
yleValue or IdentifierStyleValue (with value 'auto') | 459 attribute StyleGrammar PositiveLengthOrAutoStyleGrammar; // resolves to LengthSt
yleValue or IdentifierStyleValue (with value 'auto') |
| 460 attribute StyleGrammar PositiveLengthStyleGrammar; // resolves to LengthStyleVal
ue | 460 attribute StyleGrammar PositiveLengthStyleGrammar; // resolves to LengthStyleVal
ue |
| 461 attribute StyleGrammar NumberGrammar; // resolves to NumericStyleValue | 461 attribute StyleGrammar NumberGrammar; // resolves to NumericStyleValue |
| 462 attribute StyleGrammar ColorGrammar; // resolves to ColorStyleValue | 462 attribute StyleGrammar ColorGrammar; // resolves to ColorStyleValue |
| 463 attribute StyleGrammar DisplayStyleGrammar; // resolves to ObjectStyleValue | 463 attribute StyleGrammar DisplayStyleGrammar; // resolves to ObjectStyleValue |
| 464 ``` | 464 ``` |
| 465 | 465 |
| 466 Inline Styles | 466 Inline Styles |
| 467 ------------- | 467 ------------- |
| (...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 557 class Rule { | 557 class Rule { |
| 558 constructor (); | 558 constructor (); |
| 559 attribute SelectorQuery selector; // O(1) | 559 attribute SelectorQuery selector; // O(1) |
| 560 attribute String pseudoElement; // O(1) | 560 attribute String pseudoElement; // O(1) |
| 561 attribute StyleDeclaration styles; // O(1) | 561 attribute StyleDeclaration styles; // O(1) |
| 562 } | 562 } |
| 563 ``` | 563 ``` |
| 564 | 564 |
| 565 Each frame, at some defined point relative to requestAnimationFrame(), | 565 Each frame, at some defined point relative to requestAnimationFrame(), |
| 566 if a Rule has started applying, or a Rule stopped applying, to an | 566 if a Rule has started applying, or a Rule stopped applying, to an |
| 567 element, sky:core calls thatElement.style.clearFrameStyles() and then, | 567 element, dart:sky calls thatElement.style.clearFrameStyles() and then, |
| 568 for each Rule that now applies, calls | 568 for each Rule that now applies, calls |
| 569 thatElement.style.addFrameStyles() with the relevant StyleDeclaration | 569 thatElement.style.addFrameStyles() with the relevant StyleDeclaration |
| 570 and pseudoElement from each such Rule. | 570 and pseudoElement from each such Rule. |
| 571 | 571 |
| 572 | 572 |
| 573 Cascade | 573 Cascade |
| 574 ------- | 574 ------- |
| 575 | 575 |
| 576 Simultaneously walk the tree rooted at the application Document, | 576 Simultaneously walk the tree rooted at the application Document, |
| 577 taking into account shadow trees and child distribution, and the tree | 577 taking into account shadow trees and child distribution, and the tree |
| (...skipping 175 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 753 any element that only contains text node children, the "text" property | 753 any element that only contains text node children, the "text" property |
| 754 is set accordingly. For elements with mixed text node and non-text | 754 is set accordingly. For elements with mixed text node and non-text |
| 755 node children, each run of text nodes is represented as a separate | 755 node children, each run of text nodes is represented as a separate |
| 756 Node with the "text" property set accordingly and the styles set as if | 756 Node with the "text" property set accordingly and the styles set as if |
| 757 the Node inherited everything inheritable from its parent. | 757 the Node inherited everything inheritable from its parent. |
| 758 | 758 |
| 759 | 759 |
| 760 Layout | 760 Layout |
| 761 ------ | 761 ------ |
| 762 | 762 |
| 763 sky:core registers 'display' as follows: | 763 dart:sky registers 'display' as follows: |
| 764 | 764 |
| 765 ```javascript | 765 ```javascript |
| 766 { | 766 { |
| 767 name: 'display', | 767 name: 'display', |
| 768 grammar: sky.DisplayStyleGrammar, | 768 grammar: sky.DisplayStyleGrammar, |
| 769 inherited: false, | 769 inherited: false, |
| 770 initialValue: sky.BlockLayoutManager, | 770 initialValue: sky.BlockLayoutManager, |
| 771 needsManager: true, | 771 needsManager: true, |
| 772 } | 772 } |
| 773 ``` | 773 ``` |
| 774 | 774 |
| 775 The following API is then used to add new layout manager types to 'display': | 775 The following API is then used to add new layout manager types to 'display': |
| 776 | 776 |
| 777 ```javascript | 777 ```javascript |
| 778 void registerLayoutManager(String displayValue, LayoutManagerConstructor? layout
Manager); | 778 void registerLayoutManager(String displayValue, LayoutManagerConstructor? layout
Manager); |
| 779 ``` | 779 ``` |
| 780 | 780 |
| 781 sky:core by default registers: | 781 dart:sky by default registers: |
| 782 | 782 |
| 783 - 'block': sky.BlockLayoutManager | 783 - 'block': sky.BlockLayoutManager |
| 784 - 'paragraph': sky.ParagraphLayoutManager | 784 - 'paragraph': sky.ParagraphLayoutManager |
| 785 - 'inline': sky.InlineLayoutManager | 785 - 'inline': sky.InlineLayoutManager |
| 786 - 'none': null | 786 - 'none': null |
| 787 | 787 |
| 788 | 788 |
| 789 Layout managers inherit from the following API: | 789 Layout managers inherit from the following API: |
| 790 | 790 |
| 791 ```javascript | 791 ```javascript |
| (...skipping 270 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1062 ``` | 1062 ``` |
| 1063 | 1063 |
| 1064 The other elements don't have any default styles. | 1064 The other elements don't have any default styles. |
| 1065 | 1065 |
| 1066 These declarations are all shared between all the elements (so e.g. if | 1066 These declarations are all shared between all the elements (so e.g. if |
| 1067 you reach in and change the declaration that was added to a ``span`` | 1067 you reach in and change the declaration that was added to a ``span`` |
| 1068 element, you're going to change the styles of all the other | 1068 element, you're going to change the styles of all the other |
| 1069 default-hidden elements). (In other words, in the code snippets above, | 1069 default-hidden elements). (In other words, in the code snippets above, |
| 1070 the ``d`` variable is initialised in shared code, and only the | 1070 the ``d`` variable is initialised in shared code, and only the |
| 1071 addStyles() call is per-element.) | 1071 addStyles() call is per-element.) |
| OLD | NEW |