MD Settings: Experiment replacing paper-header-panel with CSS only solution |
|||||||||||||
Issue descriptionpaper-header-panel adds a scroll listener to determine when to show/hide the shadow near the top of the panel, see [1]. Scroll listeners are expensive and can make the page feel less responsive than it can be (see timeline attachments). There seem to exist equivalent CSS only solutions to achieve the same effect, using background-image and background-attachment, see [2]. It is probably worth experimenting with removing paper-header-panel in favor of a CSS only solution in MD Settings. [1] https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel-extracted.js?l=188,216-225,229-230 [2] http://codepen.io/tinystride/pen/bcEJv
,
Mar 8 2017
,
Mar 13 2017
,
Mar 21 2017
I am experimenting with this.
,
Mar 21 2017
So the experiment can be seen at https://codereview.chromium.org/2184863002. Visual fidelity I managed to get it very close, but it is not exact. There is one main difference (see attachments), where in the CSS only solution, because we are using background-image to implement the shadow effect, the white cards are appearing on top of the shadow. Perceived speed Scrolling very quickly on my workstation does feel "lighter" with the CSS only solution. Looking at the JS profile during scrolling, there is no JS running at all during scrolling, compared to lot of JS scroll handlers in the paper-header-panel solution (see attachments). Size reduction Other than that, we also get some small size savings. vulcanized.html: 379032 -> 376648, 0.6% reduction in size crisper.js: 400031 -> 397273, 0.6% reduction in size
,
Mar 21 2017
I wonder if we could do something tricky with a box-shadow on #container::before or cr-toolbar::after, so it appears over the cards.
,
Mar 21 2017
I made a simplified example that resembles settings layout at https://jsfiddle.net/uy143dsL/3/. Feel free to experiment further. Some of my quick attempts to add an overlay div that holds the background-image have not been successful.
,
Mar 21 2017
Is that bottom shadow intentional? (it shows up in the actual patch, too)
,
Mar 21 2017
Yes, I left it there, even though paper-header-panel only had it in the top. It can be easily removed.
,
Mar 21 2017
Here's a version using box-shadow with :after. https://jsfiddle.net/uy143dsL/4/ Problem is the transition is ugly -- when the scroll position is between [1,11]pixels you see artifacts. Alternatively CSS scroll snap points might've helped if they were ready... https://www.chromestatus.com/feature/5721832506261504
,
Mar 22 2017
Transition can be improved by adding gradient to :before element and making it 3x size of :after https://jsfiddle.net/uy143dsL/8/
,
Mar 25 2017
Followed the suggestion by esprehn@ and experimented with IntersertionObserver. I think this is very promising (100% visual fidelity to paper-header-panel), and instead of 'scroll' event handlers we get a notification as necessary (scrolled to top, not scrolled to top). See it live at https://jsfiddle.net/zjL8709b/2/.
,
Mar 30 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/76f1910f47754bd6ff8aa1666b5eb2c3760fd106 commit 76f1910f47754bd6ff8aa1666b5eb2c3760fd106 Author: dpapad <dpapad@chromium.org> Date: Thu Mar 30 01:31:36 2017 Roll closure compiler Change log: https://github.com/google/closure-compiler/compare/b2f2d2f3309c7ee61816e068050651af27bccdfa...f9c738eb53fb5cd1d475871ef16c6d1cca19b815 chrome_extensions.js: a3f41820d1260b0d7ed13acac526b803ac6c1870 -> 04dad454b5797074b803c0bab27f1aa87e19d562 BUG= 699302 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation R=dbeam@chromium.org Review-Url: https://codereview.chromium.org/2786793002 . Cr-Commit-Position: refs/heads/master@{#460617} [modify] https://crrev.com/76f1910f47754bd6ff8aa1666b5eb2c3760fd106/third_party/closure_compiler/README.chromium [modify] https://crrev.com/76f1910f47754bd6ff8aa1666b5eb2c3760fd106/third_party/closure_compiler/compiler/compiler.jar [modify] https://crrev.com/76f1910f47754bd6ff8aa1666b5eb2c3760fd106/third_party/closure_compiler/externs/chrome_extensions.js [modify] https://crrev.com/76f1910f47754bd6ff8aa1666b5eb2c3760fd106/ui/webui/resources/js/cr/ui/context_menu_handler.js [modify] https://crrev.com/76f1910f47754bd6ff8aa1666b5eb2c3760fd106/ui/webui/resources/js/cr/ui/tree.js
,
Mar 30 2017
|
|||||||||||||
►
Sign in to add a comment |
|||||||||||||
Comment 1 by dpa...@chromium.org
, Mar 7 2017