Fix nesting style issues

This fixes two issues:
1. the checkbox of the declaration toggle is a little bit lower than
the center, therefore we reduce the `top` value by 0.5px.

2. the checkbox still shows up when editing styles due to specificity.
Therefore we changed the selector to only show it when the style is not
being edited.

Fixed: b/328403286
Change-Id: If592ae1c33eb10ae91ed3f3b459cda7919e2b214
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5439573
Auto-Submit: Changhao Han <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Philip Pfaffe <[email protected]>
Commit-Queue: Changhao Han <[email protected]>

Author: hanselfmu-chromium

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -110,14 +110,10 @@ ol.expanded {
   z-index: 1;
   width: 18px;
   left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
-  top: 1px;
+  top: 0.5px;
   height: 13px;
 }
 
-.tree-outline li.child-editing .enabled-button {
-  visibility: hidden;
-}
-
 .overloaded:not(.has-ignorable-error, .invalid-property-value),
 .inactive:not(.invalid-property-value),
 .disabled,
@@ -265,11 +261,8 @@ ol.expanded {
   display: none;
 }
 
-:host-context(.matched-styles:not(.read-only):hover) .enabled-button {
-  visibility: visible;
-}
-
-:host-context(.matched-styles:not(.read-only)) .tree-outline li.disabled .enabled-button {
+:host-context(.matched-styles:not(.read-only):hover) li:not(.child-editing) .enabled-button,
+:host-context(.matched-styles:not(.read-only)) .tree-outline li.disabled:not(.child-editing) .enabled-button {
   visibility: visible;
 }