|
|
Chromium Code Reviews
DescriptionMD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API)
BUG=669592
R=dpapad@chromium.org
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
Review-Url: https://codereview.chromium.org/2691393005
Cr-Commit-Position: refs/heads/master@{#452727}
Committed: https://chromium.googlesource.com/chromium/src/+/8c3875d433e85fc3868d5aa1f0350c0127175973
Patch Set 1 : will-change: paper-ripple; #Patch Set 2 : ownerDocument #
Total comments: 15
Patch Set 3 : dpapad@ review #
Total comments: 8
Patch Set 4 : . #Patch Set 5 : closure #Patch Set 6 : closure #Patch Set 7 : closure #
Total comments: 4
Patch Set 8 : oka@ review #Patch Set 9 : fix some quirks #
Messages
Total messages: 62 (46 generated)
Patchset #1 (id:1) has been deleted
Patchset #1 (id:20001) has been deleted
Description was changed from ========== WIP: paper-ripple that's resistant to JS jank (via web animations API) COMMIT=false ========== to ========== WIP: paper-ripple that's resistant to JS jank (via web animations API) COMMIT=false BUG=669592 ==========
Description was changed from ========== WIP: paper-ripple that's resistant to JS jank (via web animations API) COMMIT=false BUG=669592 ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 ==========
Patchset #1 (id:40001) has been deleted
Description was changed from ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org ==========
dbeam@chromium.org changed reviewers: + dpapad@chromium.org
Patchset #1 (id:60001) has been deleted
Description was changed from ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 ==========
dbeam@chromium.org changed reviewers: - dpapad@chromium.org
Patchset #1 (id:80001) has been deleted
Patchset #1 (id:100001) has been deleted
Patchset #1 (id:120001) has been deleted
Description was changed from ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org ==========
dbeam@chromium.org changed reviewers: + dpapad@chromium.org
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
Patchset #2 (id:160001) has been deleted
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
The CQ bit was unchecked by commit-bot@chromium.org
Dry run: Try jobs failed on following builders: win_chromium_rel_ng on master.tryserver.chromium.win (JOB_FAILED, http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_...)
https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (right): https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:3: var MAX_RADIUS = 300; Can we add units (px, ms), either in the variable name, or in a comment. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:6: Polymer({ Should this file be using JSDoc annotations similar to the rest of our Settings code? https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:25: this.ripples = []; Should we be declaring properties before we assign to them (ripples, keyEventTarget)? Augmenting an object in |created| is a bit odd. We talked about this before but I don't remember if we reached a resolution. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:43: this.async(function() { this.upAction(); }.bind(this), 1); Nit: Can you add a comment explaining why the delay is 1 and not zero? Is there a difference? https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:77: var distance = function(x1, y1, x2, y2) { Can this function be moved outside _showRipple? It is not referencing anything from the outer scope anyway. This will make it such that it is not unnecessarily redefined every time showRipple is called. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:98: var endTranslate = (roundedCenterX() - radius) + 'px, ' + Nit: This usage of var relies on JS's hoisting behavior, which makes endTranslate available in the outer scope, but it would not work if you replace var with let. Can we do the following which does not rely on hoisting? var endTranslate; if (...) { endTranslate = ...; } else endTranslate = ...; } // use endTranslate here. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:106: ripple.style.height = ripple.style.width = 2 * radius + 'px'; Nit: Mixing arithmetic operators with numbers and strings is fragile. Example: '' + 2 + 3 + 'px'; // '23px' Can we add parentheses to make it more robust? ripple.style.height = ripple.style.width = (2 * radius) + 'px';
https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (right): https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:3: var MAX_RADIUS = 300; On 2017/02/22 18:48:10, dpapad wrote: > Can we add units (px, ms), either in the variable name, or in a comment. Done. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:25: this.ripples = []; On 2017/02/22 18:48:10, dpapad wrote: > Should we be declaring properties before we assign to them (ripples, > keyEventTarget)? Augmenting an object in |created| is a bit odd. We talked about > this before but I don't remember if we reached a resolution. there's no functional difference to v8 where is the style rule you're referring to? https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:43: this.async(function() { this.upAction(); }.bind(this), 1); On 2017/02/22 18:48:10, dpapad wrote: > Nit: Can you add a comment explaining why the delay is 1 and not zero? Is there > a difference? Done. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:77: var distance = function(x1, y1, x2, y2) { On 2017/02/22 18:48:10, dpapad wrote: > Can this function be moved outside _showRipple? It is not referencing anything > from the outer scope anyway. This will make it such that it is not unnecessarily > redefined every time showRipple is called. Done. https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:98: var endTranslate = (roundedCenterX() - radius) + 'px, ' + On 2017/02/22 18:48:10, dpapad wrote: > Nit: This usage of var relies on JS's hoisting behavior, which makes > endTranslate available in the outer scope, but it would not work if you replace > var with let. Can we do the following which does not rely on hoisting? > > var endTranslate; > if (...) { > endTranslate = ...; > } else > endTranslate = ...; > } > > // use endTranslate here. but this doesn't use let and hoisting's not going to change. the style guide also says "always use var".[1] by the same speculative logic, if somebody removed the var they'd get globals. [1] https://google.github.io/styleguide/javascriptguide.xml?showone=var#var https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:106: ripple.style.height = ripple.style.width = 2 * radius + 'px'; On 2017/02/22 18:48:10, dpapad wrote: > Nit: Mixing arithmetic operators with numbers and strings is fragile. > > Example: > '' + 2 + 3 + 'px'; // '23px' > > Can we add parentheses to make it more robust? > ripple.style.height = ripple.style.width = (2 * radius) + 'px'; Done.
https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (right): https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:25: this.ripples = []; On 2017/02/22 at 20:19:14, Dan Beam wrote: > On 2017/02/22 18:48:10, dpapad wrote: > > Should we be declaring properties before we assign to them (ripples, > > keyEventTarget)? Augmenting an object in |created| is a bit odd. We talked about > > this before but I don't remember if we reached a resolution. > > there's no functional difference to v8 That is arguable, 1) see "hidden classes" at https://github.com/v8/v8/wiki/Design%20Elements#fast-property-access. 2) see the "why" section at https://google.github.io/styleguide/javascriptguide.xml?showone=Method_and_pr... > > where is the style rule you're referring to? https://codereview.chromium.org/2691393005/diff/180001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:98: var endTranslate = (roundedCenterX() - radius) + 'px, ' + On 2017/02/22 at 20:19:14, Dan Beam wrote: > On 2017/02/22 18:48:10, dpapad wrote: > > Nit: This usage of var relies on JS's hoisting behavior, which makes > > endTranslate available in the outer scope, but it would not work if you replace > > var with let. Can we do the following which does not rely on hoisting? > > > > var endTranslate; > > if (...) { > > endTranslate = ...; > > } else > > endTranslate = ...; > > } > > > > // use endTranslate here. > > but this doesn't use let and hoisting's not going to change. the style guide also says "always use var".[1] by the same speculative logic, if somebody removed the var they'd get globals. > > [1] https://google.github.io/styleguide/javascriptguide.xml?showone=var#var Fair enough. https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (right): https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:3: var MAX_RADIUS_PX = 300; There are references in this file still using the previous names. https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:64: /** @param {Event=} e */ Does this pass compilation? IIRC optional params must be name with the prefix "opt_" https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:156: opacity: [getComputedStyle(ripple).opacity, 0], Is it necessary to pass the current value? Will it just work if you only pass the destination value? https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html (right): https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html:89: transform: translate3d(0, 0, 0); /* for rounded corners */ Isn't translate3d(0,0,0) a no-op? I guess I am not understanding the comment here.
https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (right): https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:3: var MAX_RADIUS_PX = 300; On 2017/02/22 21:07:26, dpapad wrote: > There are references in this file still using the previous names. Done. https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:64: /** @param {Event=} e */ On 2017/02/22 21:07:26, dpapad wrote: > Does this pass compilation? IIRC optional params must be name with the prefix > "opt_" that's no longer the case "not prefixed with opt_" https://google.github.io/styleguide/jsguide.html#features-functions-parameters https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:156: opacity: [getComputedStyle(ripple).opacity, 0], On 2017/02/22 21:07:26, dpapad wrote: > Is it necessary to pass the current value? Will it just work if you only pass > the destination value? partial keyframes (only a "to" value) are not supported, using getComputedStyle() allows customizing the ripple's opacity in CSS https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html (right): https://codereview.chromium.org/2691393005/diff/200001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html:89: transform: translate3d(0, 0, 0); /* for rounded corners */ On 2017/02/22 21:07:26, dpapad wrote: > Isn't translate3d(0,0,0) a no-op? I guess I am not understanding the comment > here. copied the URL from the original paper-ripple implementation (that you can refer to on the left of the diff)
Patchset #4 (id:220001) has been deleted
LGTM. There are some compilation errors to be fixed though (pasting below). ## /usr/local/google/home/dpapad/workspace/chromium1/src/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:47: ERROR - actual parameter 1 of PolymerElement.prototype.listen does not match formal parameter ## found : (EventTarget|null) ## required: EventTarget ## this.listen(this.keyEventTarget, 'up', 'uiUpAction'); ## ^^^^^^^^^^^^^^^^^^^ ## ## /usr/local/google/home/dpapad/workspace/chromium1/src/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:48: ERROR - actual parameter 1 of PolymerElement.prototype.listen does not match formal parameter ## found : (EventTarget|null) ## required: EventTarget ## this.listen(this.keyEventTarget, 'down', 'uiDownAction'); ## ^^^^^^^^^^^^^^^^^^^
Description was changed from ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation ==========
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
The CQ bit was unchecked by commit-bot@chromium.org
Dry run: Try jobs failed on following builders: closure_compilation on master.tryserver.chromium.linux (JOB_FAILED, http://build.chromium.org/p/tryserver.chromium.linux/builders/closure_compila...)
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
The CQ bit was unchecked by commit-bot@chromium.org
Dry run: Try jobs failed on following builders: closure_compilation on master.tryserver.chromium.linux (JOB_FAILED, http://build.chromium.org/p/tryserver.chromium.linux/builders/closure_compila...)
dbeam@chromium.org changed reviewers: + yawano@chromium.org
+yawano@ for ui/file_manager/ PaperRippleElement#animate() existing was allowing FileRipple#animate() to pass closure compilation because closure has this weird "attempt to guess what this thing is from it's API" behavior. removing PaperRippleElement#animate() changed that, and I had to add the Web Animations API externs. Closure was still getting confused, so I made some small changes. please let me know if this is OK. https://codereview.chromium.org/2691393005/diff/300001/third_party/polymer/v1... File third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js (left): https://codereview.chromium.org/2691393005/diff/300001/third_party/polymer/v1... third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js:550: animate: function() { see here ^
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
ui/file_manager lgtm
The CQ bit was unchecked by commit-bot@chromium.org
Dry run: Try jobs failed on following builders: linux_chromium_rel_ng on master.tryserver.chromium.linux (JOB_FAILED, http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)
oka@chromium.org changed reviewers: + oka@chromium.org
https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... File ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp (right): https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp:32: '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-ripple/compiled_resources2.gyp:paper-ripple-extracted', Could you remove this line?
https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... File ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp (right): https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp:32: '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-ripple/compiled_resources2.gyp:paper-ripple-extracted', On 2017/02/23 06:40:43, oka wrote: > Could you remove this line? (I've locally confirmed that code compiles after this line is removed.)
https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... File ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp (right): https://codereview.chromium.org/2691393005/diff/300001/ui/file_manager/file_m... ui/file_manager/file_manager/foreground/elements/compiled_resources2.gyp:32: '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-ripple/compiled_resources2.gyp:paper-ripple-extracted', On 2017/02/23 06:41:30, oka wrote: > On 2017/02/23 06:40:43, oka wrote: > > Could you remove this line? > > (I've locally confirmed that code compiles after this line is removed.) Done.
lgtm Thank you!
The CQ bit was checked by dbeam@chromium.org to run a CQ dry run
Dry run: CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
The CQ bit was unchecked by commit-bot@chromium.org
Dry run: This issue passed the CQ dry run.
The CQ bit was checked by dbeam@chromium.org
The patchset sent to the CQ was uploaded after l-g-t-m from dpapad@chromium.org, yawano@chromium.org, oka@chromium.org Link to the patchset: https://codereview.chromium.org/2691393005/#ps340001 (title: "fix some quirks")
CQ is trying da patch. Follow status at https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...
CQ is committing da patch.
Bot data: {"patchset_id": 340001, "attempt_start_ts": 1487904827471620,
"parent_rev": "952fab9efa69cf3d0cc2a003762deec638199cdf", "commit_rev":
"8c3875d433e85fc3868d5aa1f0350c0127175973"}
Message was sent while issue was closed.
Description was changed from ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation ========== to ========== MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API) BUG=669592 R=dpapad@chromium.org CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2691393005 Cr-Commit-Position: refs/heads/master@{#452727} Committed: https://chromium.googlesource.com/chromium/src/+/8c3875d433e85fc3868d5aa1f035... ==========
Message was sent while issue was closed.
Committed patchset #9 (id:340001) as https://chromium.googlesource.com/chromium/src/+/8c3875d433e85fc3868d5aa1f035...
Message was sent while issue was closed.
On 2017/02/24 02:59:31, commit-bot: I haz the power wrote: > Committed patchset #9 (id:340001) as > https://chromium.googlesource.com/chromium/src/+/8c3875d433e85fc3868d5aa1f035... Shouldn't we modify bower.json somehow so that reproduce.sh doesn't overwrite the custom paper-ripple files? (I tried locally and they were indeed overwritten).
Message was sent while issue was closed.
On 2017/02/24 19:03:36, stevenjb wrote: > On 2017/02/24 02:59:31, commit-bot: I haz the power wrote: > > Committed patchset #9 (id:340001) as > > > https://chromium.googlesource.com/chromium/src/+/8c3875d433e85fc3868d5aa1f035... > > Shouldn't we modify bower.json somehow so that reproduce.sh doesn't overwrite > the custom paper-ripple files? (I tried locally and they were indeed > overwritten). what would you modify it to...? |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
