Add demo_page.html to cr_elements/v0_8

This CL should facilitate conversion of cr- elements and help debugging them in isolation. To view elements in demo_elements.html, navigate to: chrome://resources/cr_elements/v0_8/demo_page.html BUG=485381 Review URL: https://codereview.chromium.org/1124073007 Cr-Commit-Position: refs/heads/master@{#330297}

Add demo_page.html to cr_elements/v0_8
This CL should facilitate conversion of cr- elements and help debugging them in isolation. To view elements in demo_elements.html, navigate to: chrome://resources/cr_elements/v0_8/demo_page.html BUG=485381 Review URL: https://codereview.chromium.org/1124073007 Cr-Commit-Position: refs/heads/master@{#330297}
8d81ad50 · stevenjb · Commit bot · 2aa33abc · 8d81ad50 · 8d81ad50
Commit 8d81ad50 authored May 16, 2015 by stevenjb Committed by Commit bot May 17, 2015
4 changed files
--- a/ui/webui/resources/cr_elements/v0_8/demo_element.html
+++ b/ui/webui/resources/cr_elements/v0_8/demo_element.html
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_checkbox/cr_checkbox.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_network_icon/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_toggle_button/cr_toggle_button.html">
+
+<dom-module id="cr-demo-element">
+  <template>
+    <div>
+      <h3>cr-button</h3>
+      <cr-button>Button</cr-button>
+      <cr-button raised>Raised Button</cr-button>
+    </div>
+    <div>
+      <h3>cr-checkbox</h3>
+      <cr-checkbox checked="{{checkboxChecked}}">Checkbox</cr-checkbox>
+    </div>
+    <div>
+      <h3>cr-collapse</h3>
+      <paper-toggle-button checked="{{collapseOpened}}">
+        Toggle Collapse
+      </paper-toggle-button>
+      <cr-collapse opened="{{collapseOpened}}">
+        <div>
+          <span>Collapsable section</span>
+        </div>
+      </cr-collapse>
+    </div>
+    <div>
+      <h3>cr-input</h3>
+      <cr-input label="Input" value="{{inputValue}}"></cr-input>
+      <span>Input.value=</span><span>{{inputValue}}</span>
+    </div>
+    <div>
+      <h3>cr-network-icon</h3>
+      <cr-network-icon></cr-network-icon>
+    </div>
+    <div>
+      <h3>cr-toggle-button</h3>
+      <div horizontal layout>
+        <span>Toggle Button</span>
+        <cr-toggle-button></cr-toggle-button>
+      </div>
+    </div>
+  </template>
+  <script src="demo_element.js"></script>
+</dom-module>
--- a/ui/webui/resources/cr_elements/v0_8/demo_element.js
+++ b/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);
+  },
+
+  collapseOpenedChanged_: function() {
+    console.log('collapseOpened=' + this.collapseOpened);
+  },
+
+  inputValueChanged_: function() {
+    console.log('inputValue=' + this.inputValue);
+  }
+});
--- a/ui/webui/resources/cr_elements/v0_8/demo_page.html
+++ b/ui/webui/resources/cr_elements/v0_8/demo_page.html
+<!doctype html>
+
+<!-- Demo page for cr-elements. Add new elements to demo_elements.html to -->
+<!-- view them and test their interactions with other elements. -->
+<!-- To view this page, navigate to: -->
+<!-- chrome://resources/cr_elements/v0_8/demo_page.html -->
+
+<html>
+
+<head>
+  <link href="demo_element.html" rel="import" >
+</head>
+
+<body>
+  <h1>cr-elements</h1>
+  <cr-demo-element></cr-demo-element>
+</body>
+
+</html>
--- a/ui/webui/resources/cr_elements_resources.grdp
+++ b/ui/webui/resources/cr_elements_resources.grdp
@@ -105,6 +105,15 @@

  <!-- Polymer 0.8 Elements -->
  <if expr="enable_polymer_v08">
+    <structure name="IDR_CR_ELEMENTS_08_CR_DEMO_ELEMENT_HTML"
+               file="../../webui/resources/cr_elements/v0_8/demo_element.html"
+               type="chrome_html" />
+    <structure name="IDR_CR_ELEMENTS_08_CR_DEMO_ELEMENT_JS"
+               file="../../webui/resources/cr_elements/v0_8/demo_element.js"
+               type="chrome_html" />
+    <structure name="IDR_CR_ELEMENTS_08_CR_DEMO_PAGE_HTML"
+               file="../../webui/resources/cr_elements/v0_8/demo_page.html"
+               type="chrome_html" />
    <structure name="IDR_CR_ELEMENTS_08_CR_BUTTON_CSS"
               file="../../webui/resources/cr_elements/v0_8/cr_button/cr_button.css"
               type="chrome_html" />