DevTools: Show focus outline for checkboxes in devices screen

Also stops propagation if the checkbox is clicked to prevent the default
click handler from unchecking the box.

Bug: 762441
Change-Id: I6a304221d1c9ae52d592645d430c61fa621741c2
Reviewed-on: https://chromium-review.googlesource.com/744340
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512656}

third_party/WebKit/Source/devtools/front_end/emulation/DevicesSettingsTab.js

@@ -105,6 +105,7 @@ Emulation.DevicesSettingsTab = class extends UI.VBox {
     var checkbox = element.createChild('input', 'devices-list-checkbox');
     checkbox.type = 'checkbox';
     checkbox.checked = device.show();
+    checkbox.addEventListener('click', event => event.consume(), false);
     element.createChild('div', 'devices-list-title').textContent = device.title;
     element.addEventListener('click', onItemClicked.bind(this), false);
     return element;

third_party/WebKit/Source/devtools/front_end/emulation/devicesSettingsTab.css

@@ -51,6 +51,10 @@
     pointer-events: none;
 }
 
+.devices-list-checkbox:focus {
+    outline: auto 5px -webkit-focus-ring-color;
+}
+
 .devices-list-title {
     overflow: hidden;
     white-space: nowrap;