Add a user agent stylesheet for extension options pages

extensions/renderer/resources/extensions_renderer_resources.grd

 <?xml version="1.0" encoding="UTF-8"?>
 <grit latest_public_release="0" current_release="1">
   <outputs>
     <output filename="grit/extensions_renderer_resources.h" type="rc_header">
       <emit emit_type='prepend'></emit>
     </output>
     <output filename="extensions_renderer_resources.pak" type="data_package" />
   </outputs>
   <release seq="1">
     <includes>
@@ skipping 36 matching lines @@
 
       <!-- Custom types for APIs. -->
       <include name="IDR_STORAGE_AREA_JS" file="storage_area.js" type="BINDATA" />
 
       <!-- Platform app support. -->
       <include name="IDR_PLATFORM_APP_CSS" file="platform_app.css" type="BINDATA" />
       <include name="IDR_PLATFORM_APP_JS" file="platform_app.js" type="BINDATA" />
 
       <!-- Extension styles -->
       <include name="IDR_EXTENSION_CSS" file="extension.css" type="BINDATA"/>
+      <include name="IDR_EXTENSION_FONTS_CSS" file="extension_fonts.css" type="BINDATA"/>

[Marijn Kruisselbrink, 2014/09/10 20:46:30]

I'm not entirely sure, but will this work to get the <if expr> bits to be
evaluated by grit? The original widgets.css etc files are included as 
<structure name="IDR_WEBUI_CSS_WIDGETS"
                 file="css/widgets.css" type="chrome_html"
                 flattenhtml="true" />
instead of the <include> you use here (I have no idea what the flattenhtml
attribute there does though, it only seems to be present for widgets.css, not
for most of the other webui css files).

[ericzeng, 2014/09/10 21:29:30]

Which <if expr> are you referring to? I am not familiar with how grit works. It
seems that the other CSS files in extensions work just fine as an <include>.

[Marijn Kruisselbrink, 2014/09/10 21:45:40]

If you look at widgets.css (or at the extension.css file you added) you see
various lines like <if expr="is_win">, these lines are not valid css. What
happens (if I understand how it works) is that (if you properly tell grit to
process these files as "chrome_html" files) grit will parse these tags and only
include the bits that are correct for the current platform.

But having said that, there seems to be more magic that grit does, which might
help or hurt you. One thing it seems to do is replace relative file urls with
data urls (just look at widgets.css as it is injected into webui pages, it has
data urls instead of relative urls). So maybe just running your css through grit
(with the proper relative paths to the png files) will do all the hard work for
you at compile time. (but again, I'm not entirely sure how grit works, so it
might be more complicated then that...

[ericzeng, 2014/09/10 22:13:48]

If I change the type from BINDATA it looks like grit is taking care of the <if
expr> for me. 

However, I'm certain that I won't be allowed to use the relative urls for
background-image. I've done a little testing and it looks like grit doesn't
touch the parameters to url(...), at least in extension_renderer_resources. 

[Marijn Kruisselbrink, 2014/09/10 22:32:04]

I just tested this, if I add the following to extensions_renderer_resources.grd:
    <structures>
      <structure name="IDR_EXTENSION_CSS"
                 file="extension.css" type="chrome_html"
                 flattenhtml="true" />

    </structures>

(as well as add     "structures": [26890] to the
extensions_renderer_resources.grd entry in tools/gritsettings/resource_ids)

And then change the resource urls in extension.css to be things like
url(../../../ui/webui/resources/images/select.png) grit correctly replaces all
these urls with data urls.

[ericzeng, 2014/09/10 22:52:53]

Wow, I didn't know that was possible. Thanks!

     </includes>
   </release>
 </grit>