From 1e2dd0ea032f189bf35179fbf8f27b41cd97ddb7 Mon Sep 17 00:00:00 2001
From: Alex Rudenko <alexrudenko@chromium.org>
Date: Tue, 22 Sep 2020 12:02:31 +0000
Subject: [PATCH] Add focus outline to checkboxes in Layout panel

This CL adds an outline for focused checkboxes. The outline style is
the same as for other checkboxes in DevTools.

Screenshot: https://i.imgur.com/R4vMUr3.png

Fixed: 1130929
Change-Id: I995f3e3fe6ea9ca916e5493d6edf0c2e7ecbce39
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2422956
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
---
 front_end/elements/layoutPane.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/front_end/elements/layoutPane.css b/front_end/elements/layoutPane.css
index c23e7d2574..0b030d0005 100644
--- a/front_end/elements/layoutPane.css
+++ b/front_end/elements/layoutPane.css
@@ -55,6 +55,10 @@
   flex: none;
 }
 
+.checkbox-label input:focus {
+  outline: auto 5px -webkit-focus-ring-color;
+}
+
 .checkbox-label > span {
   white-space: nowrap;
   text-overflow: ellipsis;