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

chrome/browser/resources/chromeos/nfc_debug.js

+// 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('nfc_debug', function() {

[xiyuan, 2014/01/23 21:20:55]

nit: nfc_debug -> nfcDebug (or nfc.debug)

[armansito, 2014/01/24 20:50:33]

Done.

+  '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 {Array} records List of NDEF record data.

[xiyuan, 2014/01/23 21:20:55]

nit: Move this after doc for |div| to make it consistent with the order in
function args list.

[armansito, 2014/01/24 20:50:33]

Done.

+     * @param {DOMElement} div The container that the recors should be rendered
+     *                         to.
+     */
+    renderRecords: function(div, records) {
+      div.innerHTML = '';

[xiyuan, 2014/01/23 21:20:55]

nit: div.textContent = '';

[armansito, 2014/01/24 20:50:33]

Done.

+      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 {
+            var keyElement = document.createElement('span');

[xiyuan, 2014/01/23 21:20:55]

remove "var"?

[armansito, 2014/01/24 20:50:33]

Done.

+            keyElement.setAttribute('class', 'record-key-span');
+            keyElement.appendChild(document.createTextNode(key));
+            var valueElement = document.createElement('span');

[xiyuan, 2014/01/23 21:20:55]

remove "var"?

[armansito, 2014/01/24 20:50:33]

Done.

+            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]);
+    },
+  };
+
+  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) {
+    $('nfc-adapter-info').hidden = false;
+    $('present-entry').innerHTML = data.present;
+    $('powered-entry').innerHTML = data.powered;
+    $('polling-entry').innerHTML = data.polling;
+    $('tags-entry').innerHTML = data.tags;
+    $('peers-entry').innerHTML = data.peers;

[xiyuan, 2014/01/23 21:20:55]

Can we pass raw data in |data| and generate DOM tree pro grammatically instead
of using innerHTML?

[armansito, 2014/01/24 20:50:33]

Done.

+
+    if (data.present) {

[xiyuan, 2014/01/23 21:20:55]

This "if" can be simplified by using classList.toggle

$('nfc-adapter-info').classList.toggle('transition-out', !data.present);
$('nfc-adapter-info').classList.toggle('transition-in', data.present);
...

[armansito, 2014/01/24 20:50:33]

Done.

+      $('nfc-adapter-info').classList.remove('transition-out');
+      $('nfc-adapter-info').classList.add('transition-in');
+      $('ndef-record-form').classList.remove('transition-out');
+      $('ndef-record-form').classList.add('transition-in');
+    } else {
+      $('nfc-adapter-info').classList.remove('transition-in');
+      $('nfc-adapter-info').classList.add('transition-out');
+      $('ndef-record-form').classList.remove('transition-in');
+      $('ndef-record-form').classList.add('transition-out');
+    }
+    $('adapter-toggles').hidden = !data.present;
+    $('ndef-record-form').hidden = !data.present;
+
+    $('power-toggle').innerHTML = data.powered ? 'Power OFF' : 'Power ON';
+    $('poll-toggle').innerHTML = data.polling ? 'Stop Poll' : 'Start Poll';

[xiyuan, 2014/01/23 21:20:55]

String needs to go in grd file for i18n.

[armansito, 2014/01/24 20:50:33]

Done.

+
+    NfcDebugUI.getInstance().setAdapterData(data);
+  };
+
+  /**
+   * 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');
+    $('peer-identifier-entry').innerHTML = data.identifier;
+    $('peer-records-count-entry').innerHTML = data.records.length;
+    $('record-form-submit-button').hidden = false;
+    $('record-form-submit-button').innerHTML = 'Push to Device';
+
+    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');
+    $('tag-identifier-entry').innerHTML = data.identifier;
+    $('tag-type-entry').innerHTML = data.type;
+    $('tag-read-only-entry').innerHTML = data.readOnly;
+    $('tag-supported-protocol-entry').innerHTML = data.supportedProtocol;
+    $('tag-supported-technologies-entry').innerHTML =
+        data.supportedTechnologies.join(', ');
+    $('tag-records-count-entry').innerHTML = data.records.length;
+    $('record-form-submit-button').hidden = false;
+    $('record-form-submit-button').innerHTML = 'Write to Tag';
+
+    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('Failed to set adapter power.');
+  };
+
+  /**
+   * Notifies the UI that a call to "setAdapterPolling" failed. Displays an
+   * alert.
+   */
+  NfcDebugUI.onSetAdapterPollingFailed = function() {
+    alert('Failed to start/stop polling.');
+  };
+
+  /**
+   * 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('Failed to submit NDEF: ' + errorMessage);
+  };
+
+  // Export
+  return {
+    NfcDebugUI: NfcDebugUI
+  };
+});
+
+document.addEventListener('DOMContentLoaded', nfc_debug.NfcDebugUI.initialize);