bluetooth: Replace buttons in device table with action links.

When a large number of rows are present in the device table, scrolling
performance drops considerably. This is due to the table recalculating its size
due to button elements being in each row of the table.

Replaces buttons in device table with action links to speed up rendering of the
device table.

BUG=651282
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2558493004
Cr-Commit-Position: refs/heads/master@{#437620}

chrome/browser/resources/bluetooth_internals/bluetooth_internals.html

@@ -16,6 +16,7 @@
   <link rel="import" href="chrome://resources/html/cr/ui/overlay.html">
   <link rel="import" href="chrome://resources/html/cr/ui/page_manager/page_manager.html">
   <link rel="import" href="chrome://resources/html/cr/ui/page_manager/page.html">
+  <link rel="import" href="chrome://resources/html/action_link.html">
   <link rel="import" href="chrome://resources/html/util.html">
 
   <script src="interfaces.js"></script>

chrome/browser/resources/bluetooth_internals/device_table.js

@@ -13,7 +13,7 @@ cr.define('device_table', function() {
     RSSI: 2,
     SERVICES: 3,
     CONNECTION_STATE: 4,
-    INSPECT_BUTTON: 5,
+    INSPECT_LINK: 5,
     CONNECTION_ERROR: 6,
   };
 
@@ -75,7 +75,7 @@ cr.define('device_table', function() {
      * @private
      * @param {number} index
      */
-    handleInspectBtn_: function(index) {
+    handleInspectClick_: function(index) {
       var event = new CustomEvent('inspectpressed', {
         bubbles: true,
         detail: {
@@ -114,17 +114,17 @@ cr.define('device_table', function() {
         row.insertCell();
       }
 
-      // Make two extra cells for the inspect button and connect errors.
+      // Make two extra cells for the inspect link and connect errors.
       var inspectCell = row.insertCell();
 
       // TODO(crbug.com/663830): Replace connection error column with better
       // notification system.
       var connectErrorCell = row.insertCell();
 
-      var inspectButton = document.createElement('button');
-      inspectCell.appendChild(inspectButton);
-      inspectButton.addEventListener('click', function() {
-        this.handleInspectBtn_(row.sectionRowIndex);
+      var inspectLink = document.createElement('a', 'action-link');
+      inspectCell.appendChild(inspectLink);
+      inspectLink.addEventListener('click', function() {
+        this.handleInspectClick_(row.sectionRowIndex);
       }.bind(this));
 
       this.updateRow_(device, row.sectionRowIndex);
@@ -157,17 +157,17 @@ cr.define('device_table', function() {
 
       row.classList.toggle('removed', device.removed);
 
-      var inspectButton = row.cells[COLUMNS.INSPECT_BUTTON].children[0];
-      inspectButton.disabled = false;
+      var inspectLink = row.cells[COLUMNS.INSPECT_LINK].children[0];
+      inspectLink.disabled = false;
       switch (device.connectionStatus) {
         case device_collection.ConnectionStatus.DISCONNECTED:
-          inspectButton.textContent = 'Inspect';
+          inspectLink.textContent = 'Inspect';
           break;
         case device_collection.ConnectionStatus.CONNECTED:
-          inspectButton.textContent = 'Forget';
+          inspectLink.textContent = 'Forget';
           break;
         case device_collection.ConnectionStatus.CONNECTING:
-          inspectButton.disabled = true;
+          inspectLink.disabled = true;
           break;
         default: assert('case not handled');
       }