bluetooth: Add device details page with basic properties to internals page.

chrome/browser/resources/bluetooth_internals/sidebar.js

 // 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.
 
 /**
  * Javascript for Sidebar, served from chrome://bluetooth-internals/.
  */
 
 cr.define('sidebar', function() {
+  /** @typedef {{pageName: string, text: string}} */
+  var SidebarItem;
+
   /** @const {!cr.ui.pageManager.PageManager}*/
   var PageManager = cr.ui.pageManager.PageManager;
 
   /**
    * A side menu that lists the currently navigable pages.
    * @constructor
    * @param {!Element} sidebarDiv The div corresponding to the sidebar.
    * @extends {PageManager.Observer}
    */
   function Sidebar(sidebarDiv) {
@@ skipping 13 matching lines @@
     this.overlayDiv_.addEventListener('click', this.close.bind(this));
 
     window.matchMedia('screen and (max-width: 600px)').addListener(
         function(query) { if (!query.matches) this.close(); }.bind(this));
   }
 
   Sidebar.prototype = {
     __proto__: PageManager.Observer.prototype,
 
     /**
+     * Adds a new list item to the sidebar using the given |item|.
+     * @param {!SidebarItem} item
+     */
+    addItem: function(item) {
+      var sidebarItem = document.createElement('li');
+      sidebarItem.dataset.pageName = item.pageName.toLowerCase();
+
+      var button = document.createElement('button');
+      button.classList.add('custom-appearance');
+      button.textContent = item.text;
+      button.addEventListener('click', this.onItemClick_.bind(this));
+      sidebarItem.appendChild(button);
+
+      this.sidebarList_.appendChild(sidebarItem);
+    },
+
+    /**
      * Closes the sidebar. Only applies to layouts with window width <= 600px.
      */
     close: function() {
       this.sidebarDiv_.classList.remove('open');
       document.body.style.overflow = '';
       document.dispatchEvent(new CustomEvent('contentfocus'));
     },
 
     /**
      * Opens the sidebar. Only applies to layouts with window width <= 600px.
      */
     open: function() {
       document.body.style.overflow = 'hidden';
       this.sidebarDiv_.classList.add('open');
       document.dispatchEvent(new CustomEvent('contentblur'));
     },
 
     /**
+     * Removes a sidebar item where |pageName| matches the item's pageName.
+     * @param {string} pageName
+     */
+    removeItem: function(pageName) {
+      pageName = pageName.toLowerCase();
+      var query = 'li[data-page-name="' + pageName + '"]';
+      this.sidebarList_.removeChild(this.sidebarList_.querySelector(query));
+    },
+
+    /**
      * Called when a page is navigated to.
      * @override
      * @param {string} path The path of the page being visited.
      */
     updateHistory: function(path) {
       this.sidebarContent_.querySelectorAll('li').forEach(function(item) {
         item.classList.toggle('selected', item.dataset.pageName === path);
       });
     },
 
     /**
      * Switches the page based on which sidebar list button was clicked.
      * @param {!Event} event
      * @private
      */
     onItemClick_: function(event) {
       this.close();
       PageManager.showPageByName(event.target.parentNode.dataset.pageName);
     },
   };
 
   return {
     Sidebar: Sidebar
   };
 });