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..7304cd3c6ad29fd416234808f823dce78f84d636 |
--- /dev/null |
+++ b/chrome/browser/resources/bluetooth_internals/object_fieldset.js |
@@ -0,0 +1,91 @@ |
+// 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'); |
+ }, |
+ |
+ /** |
+ * 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; |
dpapad
2017/01/10 17:21:33
Doesn't |this.value| and |this.nameMap_| need to b
mbrunson
2017/01/10 20:01:21
Done.
|
+ }, |
+ |
+ /** |
+ * Deletes and recreates the table structure with current object data. |
+ */ |
+ redraw: function() { |
+ this.innerHTML = ''; |
+ |
+ for (var propName in this.value) { |
dpapad
2017/01/10 17:21:33
Can you use Object.keys(this.value).forEach() inst
mbrunson
2017/01/10 20:01:21
Done.
|
+ if (!this.value.hasOwnProperty(propName)) continue; |
+ |
+ var name = this.nameMap_[propName] || propName; |
+ 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); |
+ } |
+ }, |
+ }; |
+ |
+ return { |
+ ObjectFieldSet: ObjectFieldSet, |
+ }; |
+}); |