Add custom Polymer network icon element

ui/webui/resources/cr_elements/cr_onc/cr-onc-data.html

Index: ui/webui/resources/cr_elements/cr_onc/cr-onc-data.html
diff --git a/ui/webui/resources/cr_elements/cr_onc/cr-onc-data.html b/ui/webui/resources/cr_elements/cr_onc/cr-onc-data.html
new file mode 100644
index 0000000000000000000000000000000000000000..84b66693656395ac56625f5e7d1c9e81780fa10a
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_onc/cr-onc-data.html
@@ -0,0 +1,5 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+
+<polymer-element name="cr-onc-data">

[pneubeck (no reviews), 2015/02/26 09:10:36]

Out of curiosity, could someone please explain why cr-onc-data is defined as a
DOM element although it is a collection of functions that has no relation to DOM
at all?

[stevenjb, 2015/02/26 18:04:05]

It does have a relationship to the DOM, just not as a -visible- element.

We need this to be a polymer element to take advantage of data binding, e.g.
here we assign a cr-onc-data element to the networkState property of a
cr-network-icon element:

https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

[michaelpg, 2015/02/27 04:12:16]

TL;DR: I don't think we have a great reason. We aren't using anything
Polymer-specific.

This isn't actually data binding -- that refers to binding some DOM within a
Polymer template to some JS object. 

In this case, we're using two things:
    1. a changed watcher on the networkState property of the Polymer object
cr-network-icon;
    2. a Polymer element which defines the cr-onc-data prototype and lets us
construct cr-onc-data objects using document.createElement

1) The changed watcher works either way; we could just as well set the
networkState property of the cr-network-icon element to a plain old object, and
Polymer would still call networkStateChanged when we set that property.

2) Using a Polymer element for non-UI "class" can be convenient. Examples: we
don't have to come up with our own "cr.define"-type syntax, we can hook into
Polymer's lifecycle management, Polymer can set up property changed watchers
(including specifying changed watchers for "deep" sub-properties before the
property itself is even set) without us manually calling Object.observe, we can
use computed properties.

If we have no plans to make this data element more complicated, having it be a
native object would be fine. We need to weigh the wins (e.g. if we wanted to use
lifecycle management) against the losses (cycles for DOM operations).

+  <script src="cr-onc-data.js"></script>
+</polymer-element>