Site Settings Desktop: Implement USB devices section.

chrome/browser/resources/settings/site_settings/usb_devices.html

 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
-<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/site_settings_behavior.html">
 <link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">
 
-<dom-module id="protocol-handlers">
+<dom-module id="usb-devices">
   <template>
     <style include="settings-shared">
       :host {
         display: block;
       }
 
-      .protocol {
+      .site-settings-header {
         -webkit-margin-start: 20px;
         margin-bottom: 15px;
         margin-top: 15px;
       }
     </style>
-    <div class="settings-box first two-line">
-      <div class="start secondary">
-        [[computeHandlersDescription_(categoryEnabled)]]
-      </div>
-      <paper-toggle-button id="toggle" checked="{{categoryEnabled}}"
-          on-change="onToggleChange_"></paper-toggle-button>
-    </div>
 
-    <template is="dom-repeat" items="[[protocols]]" as="protocol">
-      <div class="protocol">[[protocol.protocol]]</div>
+    <template is="dom-repeat" items="[[devices]]">
+      <div class="site-settings-header">[[item.objectName]]</div>
 
       <div class="list-frame menu-content vertical-list">
-        <template is="dom-repeat" items="[[protocol.handlers]]">
-
-          <div class="list-item">
-            <div class="middle" >
-              <div>[[item.host]]</div>
-              <div class="secondary"
-                  hidden$="[[!isDefault_(index, protocol.default_handler)]]">
-                $i18n{handlerIsDefault}
-              </div>
-            </div>
-
+        <div class="list-item">
+          <div class="favicon-image"
+              style$="[[computeSiteIcon(item.origin)]]"></div>
+          <div class="middle">[[item.origin]]</div>
             <paper-menu-button>

[Finnur, 2016/08/12 13:11:26]

I forgot to ask... do you know why the dropdown menu sticks around after I
select Remove? (I have to click outside to close it). I don't see anything
obvious that would cause that and my searches have come up empty.

[dschuyler, 2016/08/12 20:58:48]

Not right off. I just tried it and that doesn't happen in the build that
I have.

               <paper-icon-button icon="cr:more-vert"
                   class="dropdown-trigger">
               </paper-icon-button>
               <paper-menu id="actionMenu" class="dropdown-content"
                   on-iron-activate="onActionMenuIronActivate_"
                   attr-for-selected="menu-value">
-                <paper-item menu-value$="[[menuActions_.SET_DEFAULT]]"
-                    hidden$="[[isDefault_(index, protocol.default_handler)]]">
-                  $i18n{handlerSetDefault}
-                </paper-item>
                 <paper-item menu-value$="[[menuActions_.REMOVE]]">
                   $i18n{handlerRemove}
                 </paper-item>
               </paper-menu>
             </paper-menu-button>
-          </div>
-
-        </template>
+        </div>
       </div>
     </template>
+
   </template>
-  <script src="protocol_handlers.js"></script>
+  <script src="usb_devices.js"></script>
 </dom-module>