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..4c1a421f730b4a909e1eecd7377003cb70188bba
--- /dev/null
+++ b/chrome/browser/resources/chromeos/emulator/audio_settings.html
@@ -0,0 +1,60 @@
+<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-icon-button/paper-icon-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-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>
+                <paper-input value="{{item.id}}" label="ID" pattern="^\d{5}"
+                    error-message="Invalid ID: Must be 5 digits">
+                </paper-input>
+                <span class="toggle-button-label">Is Input</span>
+                <paper-toggle-button checked="{{item.isInput}}">
+                </paper-toggle-button>
+                <span class="toggle-button-label">Active</span>
+                <paper-toggle-button checked="{{item.active}}">
+                </paper-toggle-button>
+                <div class="device-field">
+                  <label>
+                    <span class="form-label">Audio Node Type</span>
+                    <paper-radio-group selected="{{item.type}}">

[stevenjb, 2015/08/10 23:14:09]

If this is causing item.type to become the name instead, that is super
confusing.

[mozartalouis, 2015/08/10 23:45:42]

I Understand now. the problem was that below it should have been option.type for
the name and the actual value as option.name for the display. with that, i can
now remove those 2 methods

+                      <template is="dom-repeat"
+                          items="[[nodeTypeOptions]]" as="option">
+                        <paper-radio-button name="[[option.name]]"
+                            >[[option.name]]</paper-radio-button>

[stevenjb, 2015/08/10 23:14:09]

Can't we set the value of the radio to be option.type so that {{item.type}} gets
set correctly when selected?

[mozartalouis, 2015/08/10 23:45:42]

Done.

+                      </template>
+                    </paper-radio-group>
+                  </label>
+                </div>
+                <paper-button raised class="colored" on-click="insertAudioNode"
+                    event.model.index="[[index]]">Add Node</paper-button>
+                <paper-button raised class="colored" on-click="removeAudioNode"
+                    event.model.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>