Full Implementation of Audio for the Chrome Os Device Emulator

chrome/browser/resources/chromeos/emulator/audio_settings.html

Index: chrome/browser/resources/chromeos/emulator/audio_settings.html
diff --git a/chrome/browser/resources/chromeos/emulator/audio_settings.html b/chrome/browser/resources/chromeos/emulator/audio_settings.html
new file mode 100644
index 0000000000000000000000000000000000000000..0e3f54ce66e7d9bddb9959c578f1c0f9b5da3703
--- /dev/null
+++ b/chrome/browser/resources/chromeos/emulator/audio_settings.html
@@ -0,0 +1,57 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">

[michaelpg, 2015/08/07 22:47:42]

nit: aphabetize

+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
+
+<dom-module id="audio-settings">
+  <link rel="import" type="css" href="audio_settings.css">
+  <template>
+    <div class="layout vertical">
+      <div class="element-label">[[title]]</div>
+      <form id="audio-settings-form">
+        <div class="layout vertical">
+          <span class="form-label">Nodes</span>
+          <template is="dom-repeat" items="[[nodes]]">
+            <div class="device-container">
+              <div class="audio-node">
+                <div class="element-label">[[item.deviceName]]</div>
+                <paper-input value="{{item.deviceName}}" label="Name"></paper-input>

[xiyuan, 2015/08/07 20:17:12]

nit: wrap?

[mozartalouis, 2015/08/07 22:44:07]

Done.

+                <paper-input value="{{item.id}}" label="ID" pattern="\d{5}"
+                error-message="Invalid ID: Must be 5 digits">

[xiyuan, 2015/08/07 20:17:12]

nit: 4-space indent.

[mozartalouis, 2015/08/07 22:44:07]

Done.

+                </paper-input>
+                <span class="toggle-button-label">Is Input</span>
+                <paper-toggle-button checked="{{item.isInput}}"></paper-toggle-button>

[xiyuan, 2015/08/07 20:17:12]

nit: wrap

[mozartalouis, 2015/08/07 22:44:07]

Done.

+                <span class="toggle-button-label">Active</span>
+                <paper-toggle-button checked="{{item.active}}"></paper-toggle-button>

[xiyuan, 2015/08/07 20:17:12]

nit: wrap

[mozartalouis, 2015/08/07 22:44:07]

Done.

+                <div class="device-field">
+                  <label>
+                    <span class="form-label">Audio Node Type</span>
+                    <paper-radio-group selected="{{item.type}}">
+                      <template is="dom-repeat"
+                          items="[[nodeTypeOptions]]" as="option">
+                        <paper-radio-button name="[[option.name]]"
+                            >[[option.name]]</paper-radio-button>

[xiyuan, 2015/08/07 20:17:12]

nit: ">" should stay with previous line.

[mozartalouis, 2015/08/07 22:44:07]

Done.

[michaelpg, 2015/08/07 22:47:42]

actually, this is an acceptable hacky workaround: Polymer
[[binding.annotations]] need to span the entire tag :-(

[mozartalouis, 2015/08/07 23:16:49]

Acknowledged.

+                      </template>
+                    </paper-radio-group>
+                  </label>
+                </div>
+                <paper-button raised class="colored" on-click="insertAudioNode"
+                    data-index="[[index]]">Add Node</paper-button>

[michaelpg, 2015/08/07 22:47:42]

Instead of data-index, just use event.model.index.

[mozartalouis, 2015/08/07 23:16:50]

Done.

[michaelpg, 2015/08/10 16:37:23]

Ah, I meant that in insertAudioNode, the event parameter has the index already
defined at event.model.index. So you don't need to include anything in the HTML
here.

+                <paper-button raised class="colored" on-click="removeAudioNode"
+                    data-index="[[index]]">Remove Node</paper-button>
+              </div>
+            </div>
+          </template>
+          <paper-button on-click="appendNewNode">
+            <paper-icon-button icon="add"></paper-icon-button>
+            <span>New Node</span>
+          </paper-button>
+        </div>
+      </form>
+    </div>
+  </template>
+  <script src="audio_settings.js"></script>
+</dom-module>