Polymer 0.8 Documentation for Chromium

20 views
Skip to first unread message

Michael Giuffrida

unread,
May 15, 2015, 6:41:35 PM5/15/15
to chromium...@chromium.org, chromium...@chromium.org
Hi,

To help with the migration to Polymer 0.8, I've prepared a (hopefully) helpful page about what's new in Polymer 0.8. It addresses some of the pain points we've run into and clarifies/condenses some of the existing 0.8 documentation.

It's not a full replacement for the 0.8 PRIMER.md, but it's been a handy reference for me.

Michael

Jeremy Klein

unread,
May 15, 2015, 6:54:01 PM5/15/15
to Michael Giuffrida, chromium...@chromium.org, chromium...@chromium.org
Thanks Michael! This is a really solid resource!

As a reminder - We'll soon be enabling 0.8 by default in Chrome and 0.5 will be *removed* from Chrome's binary before the M45 branch point on June 26th. Please reach out to chromium-polymer@ if you have questions or issues during the conversion process.

--
You received this message because you are subscribed to the Google Groups "Chromium Settings" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-setti...@chromium.org.
To post to this group, send email to chromium...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-settings/CACi5S_3EFcs6XMvb7wM9Vs%3D690CBCt9EnbPTFm%3D8D4W6eGH6ZA%40mail.gmail.com.

Jennifer Apacible

unread,
May 15, 2015, 6:57:10 PM5/15/15
to chromium...@chromium.org, mich...@chromium.org
Great resource! Thanks for sharing!

Pavel Sergeev

unread,
May 15, 2015, 7:03:28 PM5/15/15
to Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
Michael, great work!
Regarding:
> Your stylesheets should be imported within <dom-module> but outside of the <template> element using a special Polymer import:
> <link rel="import" type="css" href="style.css">
<link rel="stylesheet" href="style.css"> are often processed by GRIT on compile time. Does it support <link rel="import" type="css"> as well? 

--
You received this message because you are subscribed to the Google Groups "Chromium-Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-polym...@chromium.org.

To post to this group, send email to chromium...@chromium.org.

Jeremy Klein

unread,
May 15, 2015, 7:11:25 PM5/15/15
to Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
Pavel, does GRIT inline those css imports currently? What else does it do as-is?

Pavel Sergeev

unread,
May 18, 2015, 7:49:28 PM5/18/15
to Jeremy Klein, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
Yep, GRIT encloses a file's content in <style> tag and inlines it. It's worth mentioning that GRIT does that only for resources defined with [type="chrome_html"] and [flattenhtml="true"] attributes. 
More things that GRIT does and I am aware of:
1. Inlining <include>s.
2. Inlining *.png images by converting them to data-urls.
3. Fixing IDR_* images includes to use correct version of image depending of current dpi. E.g. it converts:
    background: url('chrome://theme/IDR_RESOURCE_NAME');
to
   background: -webkit-image-set(url('chrome://theme/IDR_RESOURCE_NAME') 1x, url('chrom    e://theme/IDR_RESOURCE_NAME@2x') 2x);

Jeremy Klein

unread,
May 18, 2015, 7:52:50 PM5/18/15
to Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
Hmm... Do you really need the css to be inlined? We could try to build a workaround into GRIT, but I'm not sure it's really worth the effort. GRIT also doesn't inline html imports. This can be done with vulcanize, although it would really be nice to have the option of vulcanizing as part of the build process similarly to what's done with GRIT.

Pavel Sergeev

unread,
May 19, 2015, 12:35:49 PM5/19/15
to Jeremy Klein, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
In OOBE we inline almost every HTML and CSS file (we have ~100 files) into a single large HTML file. 0.8 supports inline styles, doesn't it? If it does, we can keep using <style rel="stylesheet"> for local includes.
> This can be done with vulcanize, although it would really be nice to
> have the option of vulcanizing as part of the build process similarly to
> what's done with GRIT.
As far as I know, we can't use vulcanize in compile time, because it requires node.js. 

Jeremy Klein

unread,
May 19, 2015, 1:59:36 PM5/19/15
to Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
I just tested out what vulcanize does with --inline-css and it looks like you should be OK to use <style rel="stylesheet"> if you're using GRIT to inline these anyway. Just make sure you're putting them inside the dom-module, outside the template.

Nat Duca

unread,
May 19, 2015, 3:21:17 PM5/19/15
to Jeremy Klein, Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
If its useful, about:Tracing has its own hand-rolled python vulcanizer precisely so that about:tracing can be compiled for chrome.

Its here:

With the bootstrap scripts for this being here:



Basically, the trace-viewer code generates one big flat js and html file, then we just shovel that into grit in a more straightforward way.

Jeremy Klein

unread,
May 19, 2015, 4:31:49 PM5/19/15
to Nat Duca, Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
Very cool stuff, Nat! Is it already fully compatible with Polymer 0.8+?

Nat Duca

unread,
May 19, 2015, 5:24:20 PM5/19/15
to Jeremy Klein, Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
I haven't tried, or really looked at 0.8 yet, but I'd certainly welcome patches to make it work if there were issues and/or advise on how to do so.

The main special case for Polymer in the code so far is that
<polymer-element name="x">
<script>
Polymer({...})
</script>
</polymer-element>


has to be converted to this during vulcanization:
<polymer-element name="x">
</polymer-element>
<script>
Polymer('x', {...}) /* this bit */
</script>
</polymer-element>

Does polymer 0.8 do this too?

Jeremy Klein

unread,
May 19, 2015, 5:28:55 PM5/19/15
to Nat Duca, AJ Ortega, Pavel Sergeev, Jennifer Apacible, chromium...@chromium.org, mich...@chromium.org
All elements in 0.8 are required to have an "is: 'foo-bar'" property so that piece of the conversion is a bit easier. I know there were definitely some major changes to vulcanize for 0.8, including breaking out the CSP piece to a separate tool called Crisper. 

Reply all
Reply to author
Forward
0 new messages