Add chrome://nfc-debug for debugging NFC on Chrome OS.

chrome/browser/resources/chromeos/nfc_debug.js

Index: chrome/browser/resources/chromeos/nfc_debug.js
diff --git a/chrome/browser/resources/chromeos/nfc_debug.js b/chrome/browser/resources/chromeos/nfc_debug.js
new file mode 100644
index 0000000000000000000000000000000000000000..1d70fd80c209ebd931961bb3e70cf8a3560e54c8
--- /dev/null
+++ b/chrome/browser/resources/chromeos/nfc_debug.js
@@ -0,0 +1,375 @@
+// Copyright (c) 2013 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.
+
+cr.define('nfcDebug', function() {
+  'use strict';
+
+  function NfcDebugUI() {
+    this.adapterData_ = {};
+    this.peerData_ = {};
+    this.tagData_ = {};
+  }
+
+  NfcDebugUI.prototype = {
+    setAdapterData: function(data) {
+      this.adapterData_ = data;
+    },
+
+    setPeerData: function(data) {
+      this.peerData_ = data;
+    },
+
+    setTagData: function(data) {
+      this.tagData_ = data;
+    },
+
+    /**
+     * Powers the NFC adapter ON or OFF.
+     */
+    toggleAdapterPower: function() {
+      chrome.send('setAdapterPower', [!this.adapterData_.powered]);
+    },
+
+    /**
+     * Tells the NFC adapter to start or stop polling.
+     */
+    toggleAdapterPolling: function() {
+      chrome.send('setAdapterPolling', [!this.adapterData_.polling]);
+    },
+
+    /**
+     * Notifies the UI that the user made an NDEF type selection and the
+     * appropriate form should be displayed.
+     */
+    recordTypeChanged: function() {
+      this.updateRecordFormContents();
+    },
+
+    /**
+     * Creates a table element and populates it for each record contained
+     * in the given list of records and adds them as a child of the given
+     * DOMElement. This method will replace the contents of the given element
+     * with the tables.
+     *
+     * @param {DOMElement} div The container that the records should be rendered
+     *                         to.
+     * @param {Array} records List of NDEF record data.
+     */
+    renderRecords: function(div, records) {
+      div.textContent = '';
+      if (records.length == 0) {
+        return;
+      }
+      var self = this;
+      records.forEach(function(record) {
+        var recordDiv = document.createElement('div');
+        recordDiv.setAttribute('class', 'record-div');
+        for (var key in record) {
+          if (!record.hasOwnProperty(key))
+            continue;
+
+          var rowDiv = document.createElement('div');
+          rowDiv.setAttribute('class', 'record-key-value-div');
+
+          var keyElement, valueElement;
+          if (key == 'titles') {
+            keyElement = document.createElement('div');
+            keyElement.setAttribute('class', 'record-key-div');
+            keyElement.appendChild(document.createTextNode(key));
+            valueElement = document.createElement('div');
+            valueElement.setAttribute('class', 'record-value-div');
+            self.renderRecords(valueElement, record[key]);
+          } else {
+            keyElement = document.createElement('span');
+            keyElement.setAttribute('class', 'record-key-span');
+            keyElement.appendChild(document.createTextNode(key));
+            valueElement = document.createElement('span');
+            valueElement.setAttribute('class', 'record-value-span');
+            valueElement.appendChild(document.createTextNode(record[key]));
+          }
+          rowDiv.appendChild(keyElement);
+          rowDiv.appendChild(valueElement);
+          recordDiv.appendChild(rowDiv);
+        }
+        div.appendChild(recordDiv);
+        if (records[records.length - 1] !== record)
+          div.appendChild(document.createElement('hr'));
+      });
+    },
+
+    /**
+     * Updates which record type form is displayed based on the currently
+     * selected type.
+     */
+    updateRecordFormContents: function() {
+      var recordTypeMenu = $('record-type-menu');
+      var selectedType =
+          recordTypeMenu.options[recordTypeMenu.selectedIndex].value;
+      this.updateRecordFormContentsFromType(selectedType);
+    },
+
+    /**
+     * Updates which record type form is displayed based on the passed in
+     * type string.
+     *
+     * @param {string} type The record type.
+     */
+    updateRecordFormContentsFromType: function(type) {
+      $('text-form').hidden = (type != 'text');
+      $('uri-form').hidden = (type != 'uri');
+      $('smart-poster-form').hidden = (type != 'smart-poster');
+    },
+
+    /**
+     * Tries to push or write the record to the remote tag or device based on
+     * the contents of the record form fields.
+     */
+    submitRecordForm: function() {
+      var recordTypeMenu = $('record-type-menu');
+      var selectedType =
+          recordTypeMenu.options[recordTypeMenu.selectedIndex].value;
+      var recordData = {};
+      if (selectedType == 'text') {
+        recordData.type = 'TEXT';
+        if ($('text-form-text').value)
+          recordData.text = $('text-form-text').value;
+        if ($('text-form-encoding').value)
+          recordData.encoding = $('text-form-encoding').value;
+        if ($('text-form-language-code').value)
+          recordData.languageCode = $('text-form-language-code').value;
+      } else if (selectedType == 'uri') {
+        recordData.type = 'URI';
+        if ($('uri-form-uri').value)
+          recordData.uri = $('uri-form-uri').value;
+        if ($('uri-form-mime-type').value)
+          recordData.mimeType = $('uri-form-mime-type').value;
+        if ($('uri-form-target-size').value) {
+          var targetSize = $('uri-form-target-size').value;
+          targetSize = parseFloat(targetSize);
+          recordData.targetSize = isNaN(targetSize) ? 0.0 : targetSize;
+        }
+      } else if (selectedType == 'smart-poster') {
+        recordData.type = 'SMART_POSTER';
+        if ($('smart-poster-form-uri').value)
+          recordData.uri = $('smart-poster-form-uri').value;
+        if ($('smart-poster-form-mime-type').value)
+          recordData.mimeType = $('smart-poster-form-mime-type').value;
+        if ($('smart-poster-form-target-size').value) {
+          var targetSize = $('smart-poster-form-target-size').value;
+          targetSize = parseFloat(targetSize);
+          recordData.targetSize = isNaN(targetSize) ? 0.0 : targetSize;
+        }
+        var title = {};
+        if ($('smart-poster-form-title-text').value)
+          title.text = $('smart-poster-form-title-text').value;
+        if ($('smart-poster-form-title-encoding').value)
+          title.encoding = $('smart-poster-form-title-encoding').value;
+        if ($('smart-poster-form-title-language-code').value)
+          title.languageCode =
+              $('smart-poster-form-title-language-code').value;
+        if (Object.keys(title).length != 0)
+          recordData.titles = [title];
+      }
+      chrome.send('submitRecordForm', [recordData]);
+    },
+
+    /**
+     * Given a dictionary |data|, builds a table where each row contains the
+     * a key and its value. The resulting table is then added as the sole child
+     * of |div|. |data| contains information about an adapter, tag, or peer and
+     * this method creates a table for display, thus the value of some keys
+     * will be processed.
+     *
+     * @param {DOMElement} div The container that the table should be rendered
+     *                         to.
+     * @param {dictionary} data Data to generate the table from.
+     */
+    createTableFromData: function(div, data) {
+      div.textContent = '';
+      var table = document.createElement('table');
+      table.classList.add('parameters-table');
+      for (var key in data) {
+        var row = document.createElement('tr');
+        var col = document.createElement('td');
+        col.textContent = key;
+        row.appendChild(col);
+
+        col = document.createElement('td');
+        var value = data[key];
+        if (key == 'records')
+          value = value.length;
+        else if (key == 'supportedTechnologies')
+          value = value.join(', ');
+        col.textContent = value;
+        row.appendChild(col);
+        table.appendChild(row);
+      }
+      div.appendChild(table);
+    },
+  };
+
+  cr.addSingletonGetter(NfcDebugUI);
+
+  /**
+   * Initializes the page after the content has loaded.
+   */
+  NfcDebugUI.initialize = function() {
+    $('nfc-adapter-info').hidden = true;
+    $('adapter-toggles').hidden = true;
+    $('nfc-adapter-info').classList.add('transition-out');
+    $('ndef-record-form').classList.add('transition-out');
+    $('nfc-peer-info').classList.add('transition-out');
+    $('nfc-tag-info').classList.add('transition-out');
+    $('power-toggle').onclick = function() {
+      NfcDebugUI.getInstance().toggleAdapterPower();
+    };
+    $('poll-toggle').onclick = function() {
+      NfcDebugUI.getInstance().toggleAdapterPolling();
+    };
+    $('record-type-menu').onchange = function() {
+      NfcDebugUI.getInstance().recordTypeChanged();
+    };
+    $('record-form-submit-button').onclick = function() {
+      NfcDebugUI.getInstance().submitRecordForm();
+    };
+    $('record-form-submit-button').hidden = true;
+    NfcDebugUI.getInstance().updateRecordFormContents();
+    chrome.send('initialize');
+  };
+
+  /**
+   * Updates the UI based on the NFC availability on the current platform.
+   *
+   * @param {bool} available If true, NFC is supported on the current platform.
+   */
+  NfcDebugUI.onNfcAvailabilityDetermined = function(available) {
+    $('nfc-not-supported').hidden = available;
+  };
+
+  /**
+   * Notifies the UI that information about the NFC adapter has been received.
+   *
+   * @param {dictionary} data Properties of the NFC adapter.
+   */
+  NfcDebugUI.onNfcAdapterInfoChanged = function(data) {
+    NfcDebugUI.getInstance().setAdapterData(data);
+
+    $('nfc-adapter-info').hidden = false;
+    NfcDebugUI.getInstance().createTableFromData($('adapter-parameters'), data);
+
+    $('nfc-adapter-info').classList.toggle('transition-out', !data.present);
+    $('nfc-adapter-info').classList.toggle('transition-in', data.present);
+    $('ndef-record-form').classList.toggle('transition-out', !data.present);
+    $('ndef-record-form').classList.toggle('transition-in', data.present);
+
+    $('adapter-toggles').hidden = !data.present;
+    $('ndef-record-form').hidden = !data.present;
+
+    $('power-toggle').innerHTML = loadTimeData.getString(

[xiyuan, 2014/01/24 22:18:04]

nit: .innerHTML -> .textContent

[armansito, 2014/01/24 22:40:15]

Done.

+        data.powered ? 'adapterPowerOffText' : 'adapterPowerOnText');
+    $('poll-toggle').innerHTML = loadTimeData.getString(

[xiyuan, 2014/01/24 22:18:04]

nit: .innerHTML -> .textContent

[armansito, 2014/01/24 22:40:15]

Done.

+        data.polling ? 'adapterStopPollText' : 'adapterStartPollText');
+  };
+
+  /**
+   * Notifies the UI that information about an NFC peer has been received.
+   *
+   * @param {dictionary} data Properties of the NFC peer device.
+   */
+  NfcDebugUI.onNfcPeerDeviceInfoChanged = function(data) {
+    NfcDebugUI.getInstance().setPeerData(data);
+
+    if (Object.keys(data).length == 0) {
+      $('nfc-peer-info').classList.add('transition-out');
+      $('nfc-peer-info').classList.remove('transition-in');
+      $('record-form-submit-button').hidden = true;
+      return;
+    }
+
+    $('nfc-peer-info').classList.remove('transition-out');
+    $('nfc-peer-info').classList.add('transition-in');
+
+    NfcDebugUI.getInstance().createTableFromData($('peer-parameters'), data);
+
+    $('record-form-submit-button').hidden = false;
+    $('record-form-submit-button').textContent =
+        loadTimeData.getString('ndefFormPushButtonText');
+
+    if (data.records.length == 0) {
+      $('peer-records-entry').hidden = true;
+      return;
+    }
+
+    $('peer-records-entry').hidden = false;
+    NfcDebugUI.getInstance().renderRecords($('peer-records-container'),
+                                           data.records);
+  };
+
+  /**
+   * Notifies the UI that information about an NFC tag has been received.
+   *
+   * @param {dictionary} data Properties of the NFC tag.
+   */
+  NfcDebugUI.onNfcTagInfoChanged = function(data) {
+    NfcDebugUI.getInstance().setTagData(data);
+
+    if (Object.keys(data).length == 0) {
+      $('nfc-tag-info').classList.add('transition-out');
+      $('nfc-tag-info').classList.remove('transition-in');
+      $('record-form-submit-button').hidden = true;
+      return;
+    }
+
+    $('nfc-tag-info').classList.remove('transition-out');
+    $('nfc-tag-info').classList.add('transition-in');
+
+    NfcDebugUI.getInstance().createTableFromData($('tag-parameters'), data);
+
+    $('record-form-submit-button').hidden = false;
+    $('record-form-submit-button').textContent =
+        loadTimeData.getString('ndefFormWriteButtonText');
+
+    if (data.records.length == 0) {
+      $('tag-records-entry').hidden = true;
+      return;
+    }
+
+    $('tag-records-entry').hidden = false;
+    NfcDebugUI.getInstance().renderRecords($('tag-records-container'),
+                                           data.records);
+  };
+
+  /**
+   * Notifies the UI that a call to "setAdapterPower" failed. Displays an
+   * alert.
+   */
+  NfcDebugUI.onSetAdapterPowerFailed = function() {
+    alert(loadTimeData.getString('errorFailedToSetPowerText'));
+  };
+
+  /**
+   * Notifies the UI that a call to "setAdapterPolling" failed. Displays an
+   * alert.
+   */
+  NfcDebugUI.onSetAdapterPollingFailed = function() {
+    alert(loadTimeData.getString('errorFailedToSetPollingText'));
+  };
+
+  /**
+   * Notifies the UI that an error occurred while submitting an NDEF record
+   * form.
+   * @param {string} errorMessage An error message, describing the failure.
+   */
+  NfcDebugUI.onSubmitRecordFormFailed = function(errorMessage) {
+    alert(loadTimeData.getString('errorFailedToSubmitPrefixText') +
+          ' ' + errorMessage);
+  };
+
+  // Export
+  return {
+    NfcDebugUI: NfcDebugUI
+  };
+});
+
+document.addEventListener('DOMContentLoaded', nfcDebug.NfcDebugUI.initialize);