Polymer 0.8 Documentation for Chromium

[Michael Giuffrida]

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]

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]

Great resource! Thanks for sharing!

[Pavel Sergeev]

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-polymer/68c3b868-d158-4e6d-b7c4-d4a6dc1726df%40chromium.org.

[Jeremy Klein]

Pavel, does GRIT inline those css imports currently? What else does it do as-is?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-polymer/CAB8Ukkfp%2Bp_0ftVhD8oUJ_hneBmosyqzFbpwa0s%2BCBefcFqnSw%40mail.gmail.com.

[Pavel Sergeev]

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]

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]

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]

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]

If its useful, about:Tracing has its own hand-rolled python vulcanizer precisely so that about:tracing can be compiled for chrome.

Its here:

https://github.com/google/trace-viewer/tree/master/third_party/tvcm

https://github.com/google/trace-viewer/blob/master/trace_viewer/build/generate_about_tracing_contents

With the bootstrap scripts for this being here:

https://code.google.com/p/chromium/codesearch#chromium/src/content/browser/tracing/generate_trace_viewer_grd.py&sq=package:chromium

https://code.google.com/p/chromium/codesearch#chromium/src/content/browser/tracing/tracing_resources.gyp&sq=package:chromium

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-polymer/CAA6mrkt-kUHDXO0mfDjXNppVDp-A%3DZ1G1h697ACh5EYtqmGDfA%40mail.gmail.com.

[Jeremy Klein]

Very cool stuff, Nat! Is it already fully compatible with Polymer 0.8+?

[Nat Duca]

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]

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. 

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-polymer/CAAMsTOs5aK9FqEf5y5ZjxEhJsR2BLU3ZMnSrwkjH6XOAmMKw%3Dg%40mail.gmail.com.