bluetooth: Add adapter page to internals page.

chrome/browser/resources/bluetooth_internals/object_fieldset.js

Index: chrome/browser/resources/bluetooth_internals/object_fieldset.js
diff --git a/chrome/browser/resources/bluetooth_internals/object_fieldset.js b/chrome/browser/resources/bluetooth_internals/object_fieldset.js
new file mode 100644
index 0000000000000000000000000000000000000000..f433c6f26299a1ca0f6347a152d67771a0f6ea4f
--- /dev/null
+++ b/chrome/browser/resources/bluetooth_internals/object_fieldset.js
@@ -0,0 +1,94 @@
+// Copyright 2017 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.
+
+/**
+ * Javascript for ObjectFieldSet, a UI element for displaying the properties
+ * of a given Javascript object. These properties are displayed in a fieldset
+ * as a series of rows for each key-value pair.
+ * Served from chrome://bluetooth-internals/.
+ */
+
+cr.define('object_fieldset', function() {
+
+  /**
+   * A fieldset that lists the properties of a given object. These properties
+   * are displayed as a series of rows for each key-value pair.
+   * Only the object's own properties are displayed. Boolean values are
+   * displayed using images: a green check for 'true', and a red cancel 'x' for
+   * 'false'. All other types are converted to their string representation for
+   * display.
+   * @constructor
+   * @extends {HTMLFieldSetElement}
+   */
+  var ObjectFieldSet = cr.ui.define('fieldset');
+
+  ObjectFieldSet.prototype = {
+    __proto__: HTMLFieldSetElement.prototype,
+
+    /**
+     * Decorates the element as an ObjectFieldset.
+     */
+    decorate: function() {
+      this.classList.add('object-fieldset');
+
+      /** @type {?Object} */
+      this.value = null;
+      /** @private {?Object<string, string>} */

[dpapad, 2017/01/10 21:28:50]

Any reason you can't use a regular Map?

[mbrunson, 2017/01/10 22:14:10]

I could use a regular Map. Since the classes that will use the ObjectFieldSet
know what nameMap value they will use before runtime, I figured an Object would
be simpler to use and initialize [1], but this is just a personal preference. I
can change it if you think a Map would be better.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...

+      this.nameMap_ = null;
+    },
+
+    /**
+     * Sets the object data to be displayed in the fieldset.
+     * @param {!Object} value
+     */
+    setObject: function(value) {
+      this.value = value;
+      this.redraw();
+    },
+
+    /**
+     * Sets the object used to map property names to display names. If a display
+     * name is not provided, the default property name will be used.
+     * @param {!Object<string, string>} nameMap
+     */
+    setPropertyDisplayNames: function(nameMap) {
+      this.nameMap_ = nameMap;
+    },
+
+    /**
+     * Deletes and recreates the table structure with current object data.
+     */
+    redraw: function() {
+      this.innerHTML = '';
+
+      Object.keys(this.value).forEach(function(propName) {
+        var name = this.nameMap_[propName] || propName;

[dpapad, 2017/01/10 22:51:43]

Regarding Map vs Object, I almost always prefer a call to Map#has(propName)
instead of making an implicit boolean conversion like this one. It works in this
case, because nameMap_ does not hold a 'null' value for any key, but as a
reader/reviewer when I encounter a map implemented by a plain Object, I have to
run through the entire code to make sure that this implicit boolean conversion
is OK in this case.

Having said that, I am OK with using a plain Object here, just explaining my
rationale.

[mbrunson, 2017/01/11 01:07:48]

Oh ok. Thanks for the explanation. I'll keep this in mind in the future.

+        var value = this.value[propName];
+        var newField = document.createElement('div');
+        newField.classList.add('status');
+
+        var nameDiv = document.createElement('div');
+        nameDiv.textContent = name + ':';
+        newField.appendChild(nameDiv);
+
+        var valueDiv = document.createElement('div');
+        valueDiv.dataset.field = propName;
+
+        if (typeof(value) === 'boolean') {
+          valueDiv.classList.add('toggle-status');
+          valueDiv.classList.toggle('checked', value);
+        } else {
+          valueDiv.textContent = String(value);
+        }
+
+        newField.appendChild(valueDiv);
+        this.appendChild(newField);
+      }, this);
+    },
+  };
+
+  return {
+    ObjectFieldSet: ObjectFieldSet,
+  };
+});