Devtools performance is slow with Polymer native custom properties |
||||||||
Issue descriptionChrome Version:Version 57.0.2987.8 dev OS: Ubuntu 14.04,windows Steps to reproduce: (1)Launch chrome and Navigate to the chrome://md-settings. (2)press f12. (3)Navigate between the html and body tabs in elements section observe video for reference. Expected result:Delay should not be seen while navigating between html and body tabs. Actual Result:Delay is seen while navigating between HTML and Body tabs. This is regression issue broken in M-54 Manual bisect info: ========================= Good Build-54.0.2830.0 Bad Build-54.0.2831.0
,
Jan 24 2017
Using the per-revision bisect providing the bisect results, Good build:54.0.2830.0 (Revision:412124). Bad build:54.0.2831.0 (Revision: 412405). You are probably looking for a change made after 412395 (known good), but no later than 412396 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/f58d358c77a3b28a0b579e1c3176ee7d37dc037f..af78369e67aadb067975e87f9aab642e80e0c172 From the CL above, assigning the issue to the concern owner @ tsergeant: ------------------ Could you please look into the issue, pardon me if it has nothing to do with your changes and if possible please assign it to concern owner. Review-Url: https://codereview.chromium.org/2252633002 Thanks..
,
Jan 24 2017
This is a problem with DevTools, not really anything to do with Settings. Here's a simple repro case: --- <head> <base href="https://polygit.org/polymer+:v1.6.1/components/"> <script> window.Polymer = { dom: 'shadow', lazyRegister: true, useNativeCSSProperties: true, }; </script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-styles/color.html"> <link rel="import" href="paper-styles/typography.html"> <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> </head> <body> <div>Hello world!</div> </body> --- Those 3 imports (color, typography, iron-flex-layout) cause 500-600 custom properties to be defined, which slows the devtools elements panel down to a crawl. Clicking between elements takes a few hundred milliseconds, as does responding to a keypress in the Styles tab. This used to be manageable since (as shown in the video), these custom properties would only be visible when the <html> tag was selected. However, following the change in https://codereview.chromium.org/2644703002, inherited custom properties are visible on all elements, making the sluggishness unavoidable. Removing these imports isn't really feasible for us right now, since they're baked into many of the Polymer paper elements. This is really impacting my ability to use DevTools, so I'd appreciate it if someone could look into it.
,
Feb 21 2017
Is there anyone looking into this? The performance degradation has made the DevTools very hard to use with Polymer-based WebUI pages.
,
Feb 21 2017
this is a bit of a bummer
,
Feb 27 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/edfbdf7b37591a2eede4f68d705deb867eb837e2 commit edfbdf7b37591a2eede4f68d705deb867eb837e2 Author: einbinder <einbinder@chromium.org> Date: Mon Feb 27 22:11:14 2017 DevTools: Don't show CSS variables in ComputedStyleWidget unless showing all BUG= 684341 Review-Url: https://codereview.chromium.org/2716593007 Cr-Commit-Position: refs/heads/master@{#453355} [modify] https://crrev.com/edfbdf7b37591a2eede4f68d705deb867eb837e2/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt [modify] https://crrev.com/edfbdf7b37591a2eede4f68d705deb867eb837e2/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
,
Feb 28 2017
Issue 687078 has been merged into this issue.
,
Apr 20 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/576dc51777e5447b043f45eb72bc54c9a7acf222 commit 576dc51777e5447b043f45eb72bc54c9a7acf222 Author: einbinder <einbinder@chromium.org> Date: Thu Apr 20 17:54:54 2017 DevTools: Throttle StylesSidebar layout updates Throttles height changes in property sections while editing. Throttles width changes in property sections on resize. BUG= 684341 Review-Url: https://codereview.chromium.org/2830803002 Cr-Commit-Position: refs/heads/master@{#466062} [modify] https://crrev.com/576dc51777e5447b043f45eb72bc54c9a7acf222/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js [modify] https://crrev.com/576dc51777e5447b043f45eb72bc54c9a7acf222/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
,
Nov 30 2017
I am still seeing this problem on the new MD Extensions page. Repro: 1) Turn on chrome://flags/#enable-md-extensions 2) Go to chrome://extensions 3) Inspect the page. See example screencast where I am checking/unchecking a few CSS properties quickly and there is a significant lag.
,
Dec 11 2017
,
Dec 10
|
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by brajkumar@chromium.org
, Jan 24 2017Status: Untriaged (was: Unconfirmed)