Add demo_page.html to cr_elements/v0_8

ui/webui/resources/cr_elements/v0_8/demo_element.js

+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element for UI wrapping a list of cr- elements.
+ */
+Polymer({
+  is: 'cr-demo-element',
+
+  properties: {
+    checkboxChecked: {
+      type: Boolean,
+      value: true,
+      observer: 'checkboxCheckedChanged_'
+    },
+
+    collapseOpened: {
+      type: Boolean,
+      value: true,
+      observer: 'collapseOpenedChanged_'
+    },
+
+    inputValue: {
+      type: String,
+      value: '',
+      observer: 'inputValueChanged_'
+    },
+  },
+
+  checkboxCheckedChanged_: function() {
+    console.log('checkboxCheckedChanged=' + this.checkboxChecked);

[michaelpg, 2015/05/15 02:45:29]

for observer methods set in the properties block, the new value is passed in as
the first argument. it's probably correct-er to just use that instead of getting
the property from |this|, since they should be equal.

[stevenjb, 2015/05/15 03:01:41]

Given that they should be equal, why would that be more correct-er? This way I
think it is clear that this.foo is set to the new property value. (This is more
relevant in places where the changed method is more complicated, e.g.
cr_network_icon.js).

[michaelpg, 2015/05/15 03:50:32]

TL;DR: I meant this to be optional.

I guess it's just my opinion that if the argument is explicitly given we should
use it. It's also going to be faster than looking up a property in |this| which
itself is a getter function that gets another property (~38% slower on my
machine - http://jsperf.com/function-arguments-vs-this-accessor)

I don't think there are many cases in Settings where that's going to matter
though, and it certainly doesn't matter here.

Your way saves us from having to document parameters which is nice.

+  },
+
+  collapseOpenedChanged_: function() {
+    console.log('collapseOpened=' + this.collapseOpened);
+  },
+
+  inputValueChanged_: function() {
+    console.log('inputValue=' + this.inputValue);
+  }
+});