Modified: trunk/Source/WebInspectorUI/ChangeLog (266498 => 266499)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-09-03 01:32:41 UTC (rev 266498)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-09-03 02:08:10 UTC (rev 266499)
@@ -1,3 +1,32 @@
+2020-09-02 Nikita Vasilyev <nvasil...@apple.com>
+
+ REGRESSION (r251254): Web Inspector: Text insertion point is invisible when editing DOM nodes
+ https://bugs.webkit.org/show_bug.cgi?id=210197
+ <rdar://problem/61485409>
+
+ Reviewed by Devin Rousso.
+
+ r251254 promoted the selection area into a layer on top the the tree outline item.
+ Combined with the existing WebKit bug (https://webkit.org/b/213501), it introduced the regression.
+
+ This patch is largely a workaround for the WebKit bug.
+
+ Revert r251254 and instead change the background color of the shadow DOM items from
+ the semi-transparent gray to black (white in the dark mode) with 5% transparency, which
+ produced the same gray color overlayed on top of the white background of the DOM tree outline.
+
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom):
+ (.tree-outline.dom li .selection-area):
+
+ (.tree-outline.dom li > :not(.selection-area)): Deleted.
+ Don't introduce a layer for every DOM node.
+
+ (.tree-outline.dom li.parent.shadow::after):
+ (.tree-outline.dom li.parent.shadow + ol.children.expanded):
+ (@media (prefers-color-scheme: dark) .tree-outline.dom):
+ (@media (prefers-color-scheme: dark) .tree-outline.dom .shadow):
+
2020-09-02 Devin Rousso <drou...@apple.com>
Web Inspector: allow event breakpoints to be configured when they're added
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (266498 => 266499)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-09-03 01:32:41 UTC (rev 266498)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2020-09-03 02:08:10 UTC (rev 266499)
@@ -43,6 +43,8 @@
--sublist-margin-start: 4px;
--sublist-padding-start: 1px;
--sublist-border-width-start: 9px;
+
+ --shadow-subtree-background-color: hsla(0, 0%, 0%, 0.05);
}
.tree-outline.dom.non-selectable {
@@ -54,6 +56,7 @@
left: 0;
right: 0;
height: 15px;
+ z-index: -1;
}
.tree-outline.dom li.selected .selection-area {
@@ -74,11 +77,6 @@
opacity: 0.3;
}
-.tree-outline.dom li > :not(.selection-area) {
- position: relative;
- z-index: 1;
-}
-
.tree-outline.dom li.inspected-node > span::after {
content: " = " var(--console-saved-result-prefix) "0";
color: var(--console-secondary-text-color);
@@ -241,11 +239,11 @@
margin-top: -13px;
margin-left: -2px;
content: "";
- background-color: hsla(0, 0%, 90%, 0.5);
+ background-color: var(--shadow-subtree-background-color);
}
.tree-outline.dom li.parent.shadow + ol.children.expanded {
- background-color: hsla(0, 0%, 90%, 0.5);
+ background-color: var(--shadow-subtree-background-color);
}
.showing-find-banner .tree-outline.dom .search-highlight {
@@ -276,17 +274,14 @@
}
@media (prefers-color-scheme: dark) {
+ .tree-outline.dom {
+ --shadow-subtree-background-color: hsla(0, 0%, 100%, 0.05);
+ }
+
.tree-outline.dom .shadow {
color: var(--text-color);
}
- /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
- but close enough for now. It needs to use partial translucency so that the selection area shines through. */
- .tree-outline.dom li.parent.shadow + ol.children.expanded,
- .tree-outline.dom li.parent.shadow::after {
- background-color: hsla(0, 0%, 90%, 0.1);
- }
-
.showing-find-banner .tree-outline.dom .search-highlight {
/* FIXME: This should use a variable. */
background-color: hsla(53, 83%, 53%, 0.8);
