Commit 04df1bb9 authored by dpapad's avatar dpapad Committed by Commit Bot

WebUI Polymer3: Specify |assetpath| attribute in polymer_modulizer.

In Polymer3 relative CSS url()s inside style modules are resolved by default
with respect to the main HTML document, which results in incorrect URLs.

In Polymer2 these were resolved with respect to the location of the HTML file
hosting the style module, but in Polymer3 styles are hosted in JS.

Explicitly adding an |assetpath| attribute to auto-generated Polymer3
style modules fixes the issue.

Bug: 965770
Test: Use css_icons_css.m.js from a Polymer3 WebUI page. Verify that icons are properly displayed.
Change-Id: I12b3e9283bded368976469bdd7ab5e2ef0c79a3f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1838554
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: default avatarRebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702719}
parent 7753ec02
...@@ -379,9 +379,15 @@ def _process_style_module(js_file, html_file): ...@@ -379,9 +379,15 @@ def _process_style_module(js_file, html_file):
style_id = _extract_dom_module_id(html_file) style_id = _extract_dom_module_id(html_file)
# Add |assetpath| attribute so that relative CSS url()s are resolved
# correctly. Without this they are resolved with respect to the main HTML
# documents location (unlike Polymer2). Note: This is assuming that only style
# modules under ui/webui/resources/ are processed by polymer_modulizer(), for
# example cr_icons_css.html.
js_template = \ js_template = \
"""%(js_imports)s """%(js_imports)s
const styleElement = document.createElement('dom-module'); const styleElement = document.createElement('dom-module');
styleElement.setAttribute('assetpath', 'chrome://resources/');
styleElement.innerHTML = `%(html_template)s`; styleElement.innerHTML = `%(html_template)s`;
styleElement.register('%(style_id)s');""" % { styleElement.register('%(style_id)s');""" % {
'js_imports': '\n'.join(js_imports), 'js_imports': '\n'.join(js_imports),
......
import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {Polymer, html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import './some_other_style.m.js'; import './some_other_style.m.js';
const styleElement = document.createElement('dom-module'); const styleElement = document.createElement('dom-module');
styleElement.setAttribute('assetpath', 'chrome://resources/');
styleElement.innerHTML = ` styleElement.innerHTML = `
<template> <template>
<style include="some-other-style"> <style include="some-other-style">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment