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

Issue 792748 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Polymer WebUI styling broken when updating Polymer from 1.9.1 to 1.11.1

Project Member Reported by dpa...@chromium.org, Dec 7 2017

Issue description

At https://chromium-review.googlesource.com/c/chromium/src/+/809889 I am attempting to update Polymer from 1.9.1 to 1.11.1.

Unfortunately it seems that something changed in Polymer with regards to how <style> tags are applied that is causing various styling issues. It is more obvious when building with optimize_webui=false, but there are some test failures (within cr-dialog's tests) even with optimized_webui=true.

A fairly easy repro example is the following
1) Navigate to chrome://resources/cr_elements/cr_dialog/cr_dialog.html.
   A blank page should be displayed.
2) Open the DevTools and paste the following in the console.

let d = document.createElement('dialog', 'cr-dialog');
document.body.appendChild(d);
d.showModal();

Expected (see expected.png attachement).
You should see a properly styled (even though empty) dialog.

Actual (see actual.png attachement)
An unstyled dialog is shown. Somehow all styles have been dropped, and default browser styling for <dialog> is used. 

I am suspecting https://github.com/Polymer/polymer/commit/36e9310f67fdf2b9d92a1ac21e20698e14f95c97, but I could be wrong. There are some other styling related commits too.
 
settings_broken.png
27.3 KB View Download
extensions_broken.png
43.6 KB View Download
actual.png
666 bytes View Download
expected.png
2.1 KB View Download

Comment 1 by dpa...@chromium.org, Dec 11 2017

After further debugging, I've identified the culprit commit as https://github.com/Polymer/polymer/commit/1cc06fc2dbdcda872abd16afbd842d9581a2ab26. Still not sure exactly how it affects WebUI, will keep investigating.

Comment 2 by dpa...@chromium.org, Dec 12 2017

Finally managed to get a minimal repro and filed https://github.com/Polymer/polymer/issues/4984 on the Polymer side.

Comment 3 by dpa...@chromium.org, Dec 13 2017

A fix has landed on the Polymer side, see [1]. Waiting for automated tests to pass, and will update the original CL to roll to 1.11.2 (or whichever is the next version number), once that version is available.

[1] https://github.com/Polymer/polymer/commit/9f3ff4e24b962f0dbe272b02642be34c0abb2c5b
Project Member

Comment 4 by bugdroid1@chromium.org, Dec 16 2017

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

commit e4229d9e4b668fa11489c152df51e0dfa37d0902
Author: dpapad <dpapad@chromium.org>
Date: Sat Dec 16 03:40:31 2017

WebUI: Update Polymer version 1.9.1 -> 1.11.2

Latest version includes a fix that allows breaking lines  within the include
attribute of a <style include="...">..</style> tag.

Bug:  792748 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I67f56530565b028864d99d980e2bbeefa136c916
Reviewed-on: https://chromium-review.googlesource.com/809889
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#524578}
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/bower.json
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/components-chromium/polymer/bower.json
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/components-chromium/polymer/polymer-extracted.js
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/components-chromium/polymer/polymer-micro-extracted.js
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/components-chromium/polymer/polymer-mini-extracted.js
[modify] https://crrev.com/e4229d9e4b668fa11489c152df51e0dfa37d0902/third_party/polymer/v1_0/components_summary.txt

Comment 5 by dpa...@chromium.org, Dec 21 2017

Status: Fixed (was: Assigned)

Sign in to add a comment