[chrome.displaySource] Add example extension

chrome/common/extensions/docs/examples/api/displaySource/tabCast/main.js

Index: chrome/common/extensions/docs/examples/api/displaySource/tabCast/main.js
diff --git a/chrome/common/extensions/docs/examples/api/displaySource/tabCast/main.js b/chrome/common/extensions/docs/examples/api/displaySource/tabCast/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6eae381399315c4c5b3f96ba7748a4f3e3f03d4
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/displaySource/tabCast/main.js
@@ -0,0 +1,78 @@
+// Copyright 2016 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.
+
+chrome.runtime.sendMessage({ browserActionClicked : true }, function(response) {
+  var deviceList = response.returnDeviceList;
+  var backgroundPage = chrome.extension.getBackgroundPage();
+  createButtonList(deviceList, backgroundPage);
+});
+
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+  var deviceButton = document.getElementById(message.currentSinkId);
+  var backgroundPage = chrome.extension.getBackgroundPage();
+
+  if (message.sinksUpdated) {
+    var sinks = message.sinksList;
+    var changedSink = null;
+
+    for (sink of sinks) {

[asargent_no_longer_on_chrome, 2016/03/17 19:24:29]

nit: please use 'let sink of sinks' to avoid leaving sink in global scope

+      if (sink.id == message.currentSinkId) {
+        changedSink = sink;
+      }
+    }
+
+    if (!changedSink) {
+      console.error('Failed to find sink: ' + message.currentSinkId);
+      return;
+    }
+
+    if (changedSink.state == 'Connecting') {
+      changeButtonState(deviceButton, 'connecting', backgroundPage.Stop);
+    } else if (changedSink.state == 'Connected') {
+      changeButtonState(deviceButton, 'connected', backgroundPage.Stop);
+    }
+  } else if (message.sessionTerminated) {
+    changeButtonState(deviceButton, 'disconnected', backgroundPage.Start);
+  }
+});
+
+function createButtonList(deviceList, backgroundPage) {
+  var divElement = document.getElementById('deviceList');
+  if (!deviceList || !deviceList.length) {
+    var errorMessage = document.createTextNode('No available '
+        + 'sink devices found');
+    divElement.appendChild(errorMessage);
+    return;
+  }
+
+  deviceList.forEach(function(device) {
+    if (!document.getElementById(device.id)) {
+      var deviceButton = document.createElement('input');
+
+      deviceButton.type = 'button';
+      deviceButton.value = device.name;
+      deviceButton.id = device.id;
+
+      if (device.state == 'Disconnected') {
+        changeButtonState(deviceButton, 'disconnected', backgroundPage.Start);
+      } else if (device.state == 'Connecting') {
+        changeButtonState(deviceButton, 'connecting', backgroundPage.Stop);
+      } else if (device.state == 'Connected') {
+        changeButtonState(deviceButton, 'connected', backgroundPage.Stop);
+      } else {
+        console.error('Unexpected sink state.');
+        return;
+      }
+
+      divElement.appendChild(deviceButton);
+    }
+  });
+}
+
+function changeButtonState(button, styleName, method) {
+  button.className = styleName;
+  var sinkId = parseInt(button.id);
+  button.onclick = function() { method(sinkId) };
+}
+