968907 - Remove all inline css usage of certified apps

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: General, defect, P2)

Description

[Alexandre Poirot [:ochameau]]

Due to bug 968906, Firefox mulet is more strict than b2g.
We should either make it as strict as b2g or remove all inlined css from all certified apps.

For example devtools layers are currently broken due to usage of inlined css:
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/js/devtools_layers.js#L65-L66

Comment 1

[Alexandre Poirot [:ochameau]]

Attachment: disable certified csp

In the meantime...

Comment 2

[:gerard-majax]

$ file $(git grep 'style=' | cut -d':' -f1 | sort | uniq) | egrep -v 'SVG Scalable|test/unit|\.properties'
apps/communications/contacts/elements/form.html:                              HTML document, ASCII text
apps/email/index.html:                                                        HTML document, ASCII text
apps/fm/js/fm.js:                                                             ASCII text
apps/homescreen/everything.me/modules/BackgroundImage/BackgroundImage.js:     ASCII text
apps/keyboard/js/imes/jskanji/docs/jskanji.html:                              HTML document, UTF-8 Unicode text, with very long lines
apps/pdfjs/content/web/viewer.html:                                           HTML document, ASCII text
apps/settings/elements/app_permissions.html:                                  HTML document, ASCII text
apps/sms/index.html:                                                          HTML document, ASCII text
apps/system/js/devtools_view.js:                                              ASCII text
dev_apps/cubevid/glUtils.js:                                                  ASCII text
dev_apps/image-uploader/style/bb/index.html:                                  HTML document, UTF-8 Unicode text, with very long lines
dev_apps/image-uploader/style/bb/menus-dialogs/valueselector/time/index.html: HTML document, ASCII text
dev_apps/image-uploader/style/bb/other/lists/index.html:                      HTML document, ASCII text
dev_apps/image-uploader/style/bb/other/seekbars/index.html:                   HTML document, ASCII text
dev_apps/test-agent/common/vendor/blanket/blanket.js:                         ASCII text, with very long lines
dev_apps/test-iac-publisher/index.html:                                       HTML document, ASCII text
dev_apps/test-ime/ime_test.html:                                              HTML document, ASCII text
dev_apps/test-wappush/index.html:                                             HTML document, ASCII text
dev_apps/uitest/tests_html/UI/canvas.html:                                    HTML document, ASCII text
shared/style/date_selector/index.html:                                        HTML document, ASCII text
shared/style/progress_activity/index.html:                                    HTML document, ASCII text, with very long lines
shared/style/time_selector/index.html:                                        HTML document, ASCII text
tools/extensions/httpd/content/httpd.js:                                      ASCII text

Comment 3

[:gerard-majax]

At least we have the following apps impacted:

> $ grep certified apps/communications/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/email/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/fm/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/homescreen/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/pdfjs/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/settings/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/sms/manifest.webapp 
>   "type": "certified",
> $ grep certified apps/system/manifest.webapp 
>   "type": "certified",

Comment 4

[James Burke [:jrburke]]

Is there guidance for how this will work with HTML Imports, or scoped styles for custom elements?

Are <style>(styles in here)</style> still allowed?

There is a push to start using Custom Elements for Gaia, and one of the intermediate steps is constructing the element definition in JS, and appending a <style scoped> tag to the element's template, then putting the applied template into the DOM.

Maybe scoped <style> tags or styles scoped to an HTML Import will be allowed, and this is just about the "style" attribute on HTML tags?