New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 608098 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Not on Chrome
Closed: Sep 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

CSS Custom Properties are hard to use from inside of Polymer elements

Project Member Reported by dpa...@chromium.org, Apr 29 2016

Issue description

Repro steps:
1) Turn off vulcanization and compile Chromium.
2) Go to chrome://downloads

The toolbar color is broken, because in the non-vulcanized version --md-background-color CSS var is not defined. Also there is a related warning in the console (see screenshot).
 
no_background.png
44.3 KB View Download

Comment 1 by dbeam@chromium.org, Apr 30 2016

Cc: dfreedm@chromium.org ajo@google.com
Components: UI>Browser>Downloads
that's an interesting difference between vulcanize and reality

ajo/dfreedm@: it seems like <link>s encountered in <template>s are ignored in Chrome while are inlined in vulcanized output.  just something to note (nothing about the user-facing downloads page is messed up, that's vulcanized).

Comment 2 by dbeam@chromium.org, May 5 2016

Cc: -dbeam@chromium.org tsergeant@chromium.org
Components: UI>Browser>History
Labels: -Pri-3 OS-Chrome OS-Linux OS-Mac OS-Windows Pri-2
Owner: dbeam@chromium.org
Status: Started (was: Untriaged)
Summary: CSS Custom Properties are hard to use from inside of Polymer elements (was: MD Downloads, non vulcanized version broken)
the fix for this coincides with unblocking the history page from using md_colors.css (our shared custom props file)

Comment 3 by dbeam@chromium.org, May 5 2016

Cc: sorvell@chromium.org

Comment 4 by dbeam@chromium.org, May 5 2016

correction: it's because the <link> was inside of shadow DOM, not a <template>

http://i.imgur.com/Gw9zEVg.png
Project Member

Comment 5 by bugdroid1@chromium.org, May 5 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/916c6e84f2a975baec9fc965c76653dcbfd939b4

commit 916c6e84f2a975baec9fc965c76653dcbfd939b4
Author: dbeam <dbeam@chromium.org>
Date: Thu May 05 19:35:07 2016

MD Downloads: fix unvulcanized build by adding <style no-process>

Vulcanize finds <link>s and inlines them. In this sense, it does what it
says on the tin. But, unfortunately, in this case the browser would not
have loaded <link href> inside of shadow DOM (i.imgur.com/Gw9zEVg.png).
So there's a behavioral difference between the vulcanized and
unvulcanized versions of downloads.

Additionally, all <style> inside of <dom-module>s are processed through
Polymer's CSS custom prop shim. In this case, it replaces unresolved(?)
variables with ''. This disables sharing of native custom properties
between history and downloads.

So I've added <style no-process>, which circumvents Polymer's CSS custom
prop shim. It's meant to be a minimal, temporary solution until the
Polymer team lands a better, more thorough alternative that bypasses the
shim everywhere for browsers that support CSS custom props (and possibly
@apply).

R=tsergeant@chromium.org
BUG= 608098 
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/1952123002
Cr-Commit-Position: refs/heads/master@{#391871}

[modify] https://crrev.com/916c6e84f2a975baec9fc965c76653dcbfd939b4/chrome/browser/resources/md_downloads/manager.html
[modify] https://crrev.com/916c6e84f2a975baec9fc965c76653dcbfd939b4/chrome/browser/resources/md_downloads/vulcanized.html
[modify] https://crrev.com/916c6e84f2a975baec9fc965c76653dcbfd939b4/third_party/polymer/v1_0/chromium.patch
[modify] https://crrev.com/916c6e84f2a975baec9fc965c76653dcbfd939b4/third_party/polymer/v1_0/components-chromium/polymer/polymer-extracted.js

Project Member

Comment 6 by bugdroid1@chromium.org, May 5 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ee1833f510be9a7da4eb75bfecbf4581f71ee193

commit ee1833f510be9a7da4eb75bfecbf4581f71ee193
Author: dbeam <dbeam@chromium.org>
Date: Thu May 05 21:37:14 2016

MD Downloads: move md_colors.css to useful place

Previously it was inside shadow DOM, which has no effect.

R=michaelpg@chromium.org
BUG= 608098 
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/1948023004
Cr-Commit-Position: refs/heads/master@{#391909}

[modify] https://crrev.com/ee1833f510be9a7da4eb75bfecbf4581f71ee193/chrome/browser/resources/md_downloads/manager.html
[modify] https://crrev.com/ee1833f510be9a7da4eb75bfecbf4581f71ee193/chrome/browser/resources/md_downloads/vulcanized.html

Comment 7 by dbeam@chromium.org, Jun 3 2016

Cc: dbeam@chromium.org
Owner: ----
Status: Available (was: Started)
we should probably just wait for https://github.com/Polymer/polymer/pull/3587 at this point
Owner: tsergeant@chromium.org
Status: Started (was: Available)
Since we're now using native custom properties in Polymer, we can remove the no-process hack. I'll send out a CL to do this shortly.
Project Member

Comment 9 by bugdroid1@chromium.org, Sep 27 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b8534fb568a8450d5a52589a73343735709d17cd

commit b8534fb568a8450d5a52589a73343735709d17cd
Author: tsergeant <tsergeant@chromium.org>
Date: Tue Sep 27 05:50:55 2016

MD WebUI: Remove <style no-process> from Polymer

<style no-process> was added in crrev.com/391871 as a temporary measure
to allow native custom properties to be used without being overridden by
Polymer's shim.

All Polymer pages now use native custom properties, so this bypass is no
longer necessary. This CL removes it from our Polymer checkout and the
MD History/Downloads pages, with no visible changes as a result.

BUG= 608098 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2370653002
Cr-Commit-Position: refs/heads/master@{#421119}

[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/chrome/browser/resources/md_downloads/manager.html
[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/chrome/browser/resources/md_downloads/vulcanized.html
[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/chrome/browser/resources/md_history/app.vulcanized.html
[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/third_party/polymer/v1_0/chromium.patch
[modify] https://crrev.com/b8534fb568a8450d5a52589a73343735709d17cd/third_party/polymer/v1_0/components-chromium/polymer/polymer-extracted.js

Status: Fixed (was: Started)

Sign in to add a comment