Bug 1865846 - [devtools] Fix focus indicator in JSON viewer. r=devtools-reviewers,ochameau.

Differential Revision: https://phabricator.services.mozilla.com/D194389

devtools/client/jsonview/css/general.css

@@ -16,10 +16,6 @@ body {
   margin: 0;
 }
 
-*:focus {
-  outline: none !important;
-}
-
 pre {
   background-color: white;
   border: none;

devtools/client/jsonview/css/main.css

@@ -30,12 +30,14 @@
   overflow-y: auto;
   width: 100%;
   flex: 1;
+  outline-offset: -2px;
 }
 
 /* The tree takes the entire horizontal space within the panel content. */
 .panelContent .treeTable {
   width: 100%;
   font-family: var(--monospace-font-family);
+  outline-offset: -2px;
 }
 
 /* Make sure there is a little space between label and value columns. */

devtools/client/jsonview/css/toolbar.css

@@ -28,6 +28,7 @@
   user-select: none;
   padding: 0 3px;
   border-radius: 2px;
+  outline-offset: -1px;
 }
 
 .toolbar .btn:hover {