<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[201840] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/201840">201840</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2016-06-08 16:04:11 -0700 (Wed, 08 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: DOMTreeOutline selection areas should be created and updated lazily
https://bugs.webkit.org/show_bug.cgi?id=158513
<rdar://problem/26689646>
Reviewed by Timothy Hatcher.
Selection areas for DOMTreeElements are used for several things: drag markers,
element hover styles, element selection styles, and showing forced pseudo states
for an element. Fortunately it's easy to tell when any of these things is necessary.
Change DOMTreeOutline and DOMTreeElement so they don't create selection areas
unless they are needed for one of these tasks. This significantly reduces
forced layouts that are required to update the selection area height in case the
element has new attributes that cause the tag to become more or less wrapped.
* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype.set hovered):
Modernize this method a bit.
(WebInspector.DOMTreeElement.prototype.updateSelectionArea):
If a selection area is not necessary, don't create one.
If one exists and it's not needed, then remove it.
(WebInspector.DOMTreeElement.prototype.onattach):
Remove redundant calls to updateSelection(). This is already called in
updateTitle().
(WebInspector.DOMTreeElement.prototype.onselect):
Ask the DOMTreeOutline to update the selection rather than forcing the
element to do it. This is consistent with other updates to user selection.
(WebInspector.DOMTreeElement.prototype._insertInLastAttributePosition):
(WebInspector.DOMTreeElement.prototype._startEditingAsHTML.dispose):
(WebInspector.DOMTreeElement.prototype._startEditingAsHTML):
Use renamed method.
(WebInspector.DOMTreeElement.prototype.updateTitle):
Add a comment to explain why the selection area is nulled out here.
(WebInspector.DOMTreeElement.prototype.get pseudoClassesEnabled):
(WebInspector.DOMTreeElement.prototype._nodePseudoClassesDidChange):
Update the selection area in case one does not exist for this tree element.
The indicator for forced pseudo classes is a pseudo element of the selection area.
(WebInspector.DOMTreeElement.prototype.updateSelection): Renamed.
(WebInspector.DOMTreeElement.prototype.onexpand):
(WebInspector.DOMTreeElement.prototype.oncollapse):
Remove redundant calls to updateSelection(). This is already called in
updateTitle().
* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom):
(.tree-outline.dom li.hovered:not(.selected) .selection-area):
(.tree-outline.dom li .selection-area):
(.tree-outline.dom li.selected .selection-area):
(.tree-outline.dom li.elements-drag-over .selection-area):
(.tree-outline.dom:focus li.selected .selection-area):
(.tree-outline.dom li.pseudo-class-enabled > .selection-area::before):
(.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before):
(.tree-outline.dom li.hovered:not(.selected) .selection): Deleted.
(.tree-outline.dom li .selection): Deleted.
(.tree-outline.dom li.selected .selection): Deleted.
(.tree-outline.dom li.elements-drag-over .selection): Deleted.
(.tree-outline.dom:focus li.selected .selection): Deleted.
(.tree-outline.dom li.pseudo-class-enabled > .selection::before): Deleted.
(.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection::before): Deleted.
Rename the selector to be less ambiguous.
* UserInterface/Views/DOMTreeOutline.js:
(WebInspector.DOMTreeOutline.prototype.updateSelection): Simplify. The call
to update the selection area will bail out if there is nothing to be done.
(WebInspector.DOMTreeOutline.prototype.findTreeElement):
(WebInspector.DOMTreeOutline.prototype._onmousemove):
(WebInspector.DOMTreeOutline.prototype._onmouseout):
Clean up and use let and arrow functions.
(WebInspector.DOMTreeOutline.prototype._ondragover):
(WebInspector.DOMTreeOutline.prototype._clearDragOverTreeElementMarker):
Clear the dragging element before updating the selection area since it looks at
the dragging element to determine whether anything needs to be done.
* UserInterface/Views/FormattedValue.css:
(.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection-area):
(.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection): Deleted.
Rename the selector to be less ambiguous.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss">trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (201839 => 201840)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-06-08 23:02:39 UTC (rev 201839)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-06-08 23:04:11 UTC (rev 201840)
</span><span class="lines">@@ -1,5 +1,94 @@
</span><span class="cx"> 2016-06-08 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: DOMTreeOutline selection areas should be created and updated lazily
+ https://bugs.webkit.org/show_bug.cgi?id=158513
+ <rdar://problem/26689646>
+
+ Reviewed by Timothy Hatcher.
+
+ Selection areas for DOMTreeElements are used for several things: drag markers,
+ element hover styles, element selection styles, and showing forced pseudo states
+ for an element. Fortunately it's easy to tell when any of these things is necessary.
+
+ Change DOMTreeOutline and DOMTreeElement so they don't create selection areas
+ unless they are needed for one of these tasks. This significantly reduces
+ forced layouts that are required to update the selection area height in case the
+ element has new attributes that cause the tag to become more or less wrapped.
+
+ * UserInterface/Views/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype.set hovered):
+ Modernize this method a bit.
+
+ (WebInspector.DOMTreeElement.prototype.updateSelectionArea):
+ If a selection area is not necessary, don't create one.
+ If one exists and it's not needed, then remove it.
+
+ (WebInspector.DOMTreeElement.prototype.onattach):
+ Remove redundant calls to updateSelection(). This is already called in
+ updateTitle().
+
+ (WebInspector.DOMTreeElement.prototype.onselect):
+ Ask the DOMTreeOutline to update the selection rather than forcing the
+ element to do it. This is consistent with other updates to user selection.
+
+ (WebInspector.DOMTreeElement.prototype._insertInLastAttributePosition):
+ (WebInspector.DOMTreeElement.prototype._startEditingAsHTML.dispose):
+ (WebInspector.DOMTreeElement.prototype._startEditingAsHTML):
+ Use renamed method.
+
+ (WebInspector.DOMTreeElement.prototype.updateTitle):
+ Add a comment to explain why the selection area is nulled out here.
+
+ (WebInspector.DOMTreeElement.prototype.get pseudoClassesEnabled):
+ (WebInspector.DOMTreeElement.prototype._nodePseudoClassesDidChange):
+ Update the selection area in case one does not exist for this tree element.
+ The indicator for forced pseudo classes is a pseudo element of the selection area.
+
+ (WebInspector.DOMTreeElement.prototype.updateSelection): Renamed.
+ (WebInspector.DOMTreeElement.prototype.onexpand):
+ (WebInspector.DOMTreeElement.prototype.oncollapse):
+ Remove redundant calls to updateSelection(). This is already called in
+ updateTitle().
+
+ * UserInterface/Views/DOMTreeOutline.css:
+ (.tree-outline.dom):
+ (.tree-outline.dom li.hovered:not(.selected) .selection-area):
+ (.tree-outline.dom li .selection-area):
+ (.tree-outline.dom li.selected .selection-area):
+ (.tree-outline.dom li.elements-drag-over .selection-area):
+ (.tree-outline.dom:focus li.selected .selection-area):
+ (.tree-outline.dom li.pseudo-class-enabled > .selection-area::before):
+ (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before):
+ (.tree-outline.dom li.hovered:not(.selected) .selection): Deleted.
+ (.tree-outline.dom li .selection): Deleted.
+ (.tree-outline.dom li.selected .selection): Deleted.
+ (.tree-outline.dom li.elements-drag-over .selection): Deleted.
+ (.tree-outline.dom:focus li.selected .selection): Deleted.
+ (.tree-outline.dom li.pseudo-class-enabled > .selection::before): Deleted.
+ (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection::before): Deleted.
+ Rename the selector to be less ambiguous.
+
+ * UserInterface/Views/DOMTreeOutline.js:
+ (WebInspector.DOMTreeOutline.prototype.updateSelection): Simplify. The call
+ to update the selection area will bail out if there is nothing to be done.
+
+ (WebInspector.DOMTreeOutline.prototype.findTreeElement):
+ (WebInspector.DOMTreeOutline.prototype._onmousemove):
+ (WebInspector.DOMTreeOutline.prototype._onmouseout):
+ Clean up and use let and arrow functions.
+
+ (WebInspector.DOMTreeOutline.prototype._ondragover):
+ (WebInspector.DOMTreeOutline.prototype._clearDragOverTreeElementMarker):
+ Clear the dragging element before updating the selection area since it looks at
+ the dragging element to determine whether anything needs to be done.
+
+ * UserInterface/Views/FormattedValue.css:
+ (.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection-area):
+ (.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection): Deleted.
+ Rename the selector to be less ambiguous.
+
+2016-06-08 Brian Burg <bburg@apple.com>
+
</ins><span class="cx"> Uncaught Exception in TimelineDataGrid._updatePopoverForSelectedNode()
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=158502
</span><span class="cx"> <rdar://problem/26687038>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (201839 => 201840)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2016-06-08 23:02:39 UTC (rev 201839)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2016-06-08 23:04:11 UTC (rev 201840)
</span><span class="lines">@@ -144,20 +144,16 @@
</span><span class="cx"> return this._hovered;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- set hovered(x)
</del><ins>+ set hovered(value)
</ins><span class="cx"> {
</span><del>- if (this._hovered === x)
</del><ins>+ if (this._hovered === value)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this._hovered = x;
</del><ins>+ this._hovered = value;
</ins><span class="cx">
</span><span class="cx"> if (this.listItemElement) {
</span><del>- if (x) {
- this.updateSelection();
- this.listItemElement.classList.add("hovered");
- } else {
- this.listItemElement.classList.remove("hovered");
- }
</del><ins>+ this.listItemElement.classList.toggle("hovered", this._hovered);
+ this.updateSelectionArea();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -262,27 +258,36 @@
</span><span class="cx"> WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- updateSelection()
</del><ins>+ updateSelectionArea()
</ins><span class="cx"> {
</span><del>- var listItemElement = this.listItemElement;
</del><ins>+ let listItemElement = this.listItemElement;
</ins><span class="cx"> if (!listItemElement)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- if (!this.selectionElement) {
- this.selectionElement = document.createElement("div");
- this.selectionElement.className = "selection selected";
- listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
</del><ins>+ // If there's no reason to have a selection area, remove the DOM element.
+ let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.treeOutline.selectedTreeElement === this);
+ if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) {
+ if (this._selectionElement) {
+ this._selectionElement.remove();
+ this._selectionElement = null;
+ }
+
+ return;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this.selectionElement.style.height = listItemElement.offsetHeight + "px";
</del><ins>+ if (!this._selectionElement) {
+ this._selectionElement = document.createElement("div");
+ this._selectionElement.className = "selection-area";
+ listItemElement.insertBefore(this._selectionElement, listItemElement.firstChild);
+ }
+
+ this._selectionElement.style.height = listItemElement.offsetHeight + "px";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> onattach()
</span><span class="cx"> {
</span><del>- if (this._hovered) {
- this.updateSelection();
</del><ins>+ if (this.hovered)
</ins><span class="cx"> this.listItemElement.classList.add("hovered");
</span><del>- }
</del><span class="cx">
</span><span class="cx"> this.updateTitle();
</span><span class="cx">
</span><span class="lines">@@ -484,7 +489,6 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.updateTitle();
</span><del>- this.treeOutline.updateSelection();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> oncollapse()
</span><span class="lines">@@ -493,7 +497,6 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.updateTitle();
</span><del>- this.treeOutline.updateSelection();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> onreveal()
</span><span class="lines">@@ -513,7 +516,7 @@
</span><span class="cx"> this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
</span><span class="cx"> if (selectedByUser)
</span><span class="cx"> WebInspector.domTreeManager.highlightDOMNode(this.representedObject.id);
</span><del>- this.updateSelection();
</del><ins>+ this.treeOutline.updateSelection();
</ins><span class="cx"> this.treeOutline.suppressRevealAndSelect = false;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -588,7 +591,7 @@
</span><span class="cx"> tag.append("<" + nodeName, node, ">");
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.updateSelection();
</del><ins>+ this.updateSelectionArea();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _startEditingTarget(eventTarget)
</span><span class="lines">@@ -854,7 +857,7 @@
</span><span class="cx"> // Append editor.
</span><span class="cx"> this.listItemElement.appendChild(this._htmlEditElement);
</span><span class="cx">
</span><del>- this.updateSelection();
</del><ins>+ this.updateSelectionArea();
</ins><span class="cx">
</span><span class="cx"> function commit()
</span><span class="cx"> {
</span><span class="lines">@@ -879,7 +882,7 @@
</span><span class="cx"> child = child.nextSibling;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.updateSelection();
</del><ins>+ this.updateSelectionArea();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this));
</span><span class="lines">@@ -1073,8 +1076,10 @@
</span><span class="cx"> this._highlightResult = undefined;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- this.selectionElement = null;
- this.updateSelection();
</del><ins>+ // Setting this.title will implicitly remove all children. Clear the
+ // selection element so that we properly recreate it if necessary.
+ this._selectionElement = null;
+ this.updateSelectionArea();
</ins><span class="cx"> this._highlightSearchResults();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1518,11 +1523,17 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get pseudoClassesEnabled()
+ {
+ return !!this.representedObject.enabledPseudoClasses.length;
+ }
+
</ins><span class="cx"> _nodePseudoClassesDidChange(event)
</span><span class="cx"> {
</span><span class="cx"> if (this._elementCloseTag)
</span><span class="cx"> return;
</span><span class="cx">
</span><ins>+ this.updateSelectionArea();
</ins><span class="cx"> this._listItemNode.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (201839 => 201840)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-06-08 23:02:39 UTC (rev 201839)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css 2016-06-08 23:04:11 UTC (rev 201840)
</span><span class="lines">@@ -34,16 +34,16 @@
</span><span class="cx">
</span><span class="cx"> list-style-type: none;
</span><span class="cx">
</span><del>- /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */
</del><ins>+ /* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
</ins><span class="cx"> background-color: transparent !important;
</span><span class="cx"> color: black;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom li.hovered:not(.selected) .selection {
</del><ins>+.tree-outline.dom li.hovered:not(.selected) .selection-area {
</ins><span class="cx"> background-color: hsla(209, 100%, 49%, 0.1);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom li .selection {
</del><ins>+.tree-outline.dom li .selection-area {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="lines">@@ -51,16 +51,16 @@
</span><span class="cx"> z-index: 10;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom li.selected .selection {
</del><ins>+.tree-outline.dom li.selected .selection-area {
</ins><span class="cx"> background-color: hsl(0, 0%, 83%);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom li.elements-drag-over .selection {
</del><ins>+.tree-outline.dom li.elements-drag-over .selection-area {
</ins><span class="cx"> margin-top: -2px;
</span><span class="cx"> border-top: 2px solid hsl(209, 100%, 49%);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom:focus li.selected .selection {
</del><ins>+.tree-outline.dom:focus li.selected .selection-area {
</ins><span class="cx"> background-color: hsl(209, 100%, 49%);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -109,7 +109,7 @@
</span><span class="cx"> word-wrap: break-word;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom li.pseudo-class-enabled > .selection::before {
</del><ins>+.tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
</ins><span class="cx"> display: inline-block;
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 4px;
</span><span class="lines">@@ -129,7 +129,7 @@
</span><span class="cx"> color: white;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection::before {
</del><ins>+.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before {
</ins><span class="cx"> background-color: hsl(0, 100%, 100%);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (201839 => 201840)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2016-06-08 23:02:39 UTC (rev 201839)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2016-06-08 23:04:11 UTC (rev 201840)
</span><span class="lines">@@ -189,10 +189,12 @@
</span><span class="cx">
</span><span class="cx"> updateSelection()
</span><span class="cx"> {
</span><del>- if (!this.selectedTreeElement)
- return;
- var element = this.treeOutline.selectedTreeElement;
- element.updateSelection();
</del><ins>+ // This will miss updating selection areas used for the hovered tree element and
+ // and those used to show forced pseudo class indicators, but this should be okay.
+ // The hovered element will update when user moves the mouse, and indicators don't need the
+ // selection area height to be accurate since they use ::before to place the indicator.
+ if (this.selectedTreeElement)
+ this.selectedTreeElement.updateSelectionArea();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _selectedNodeChanged()
</span><span class="lines">@@ -202,17 +204,9 @@
</span><span class="cx">
</span><span class="cx"> findTreeElement(node)
</span><span class="cx"> {
</span><del>- function isAncestorNode(ancestor, node)
- {
- return ancestor.isAncestor(node);
- }
-
- function parentNode(node)
- {
- return node.parentNode;
- }
-
- var treeElement = super.findTreeElement(node, isAncestorNode, parentNode);
</del><ins>+ let isAncestorNode = (ancestor, node) => ancestor.isAncestor(node);
+ let parentNode = (node) => node.parentNode;
+ let treeElement = super.findTreeElement(node, isAncestorNode, parentNode);
</ins><span class="cx"> if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
</span><span class="cx"> // The text node might have been inlined if it was short, so try to find the parent element.
</span><span class="cx"> treeElement = super.findTreeElement(node.parentNode, isAncestorNode, parentNode);
</span><span class="lines">@@ -341,7 +335,7 @@
</span><span class="cx">
</span><span class="cx"> if (this._previousHoveredElement) {
</span><span class="cx"> this._previousHoveredElement.hovered = false;
</span><del>- delete this._previousHoveredElement;
</del><ins>+ this._previousHoveredElement = null;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (element) {
</span><span class="lines">@@ -364,7 +358,7 @@
</span><span class="cx">
</span><span class="cx"> if (this._previousHoveredElement) {
</span><span class="cx"> this._previousHoveredElement.hovered = false;
</span><del>- delete this._previousHoveredElement;
</del><ins>+ this._previousHoveredElement = null;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> WebInspector.domTreeManager.hideDOMNodeHighlight();
</span><span class="lines">@@ -407,9 +401,10 @@
</span><span class="cx"> node = node.parentNode;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- treeElement.updateSelection();
</del><ins>+ this.dragOverTreeElement = treeElement;
</ins><span class="cx"> treeElement.listItemElement.classList.add("elements-drag-over");
</span><del>- this._dragOverTreeElement = treeElement;
</del><ins>+ treeElement.updateSelectionArea();
+
</ins><span class="cx"> event.preventDefault();
</span><span class="cx"> event.dataTransfer.dropEffect = "move";
</span><span class="cx"> return false;
</span><span class="lines">@@ -481,10 +476,12 @@
</span><span class="cx">
</span><span class="cx"> _clearDragOverTreeElementMarker()
</span><span class="cx"> {
</span><del>- if (this._dragOverTreeElement) {
- this._dragOverTreeElement.updateSelection();
- this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
- delete this._dragOverTreeElement;
</del><ins>+ if (this.dragOverTreeElement) {
+ let element = this.dragOverTreeElement;
+ this.dragOverTreeElement = null;
+
+ element.listItemElement.classList.remove("elements-drag-over");
+ element.updateSelectionArea();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css (201839 => 201840)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css 2016-06-08 23:02:39 UTC (rev 201839)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css 2016-06-08 23:04:11 UTC (rev 201840)
</span><span class="lines">@@ -76,7 +76,7 @@
</span><span class="cx"> -webkit-user-select: none !important;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection {
</del><ins>+.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection-area {
</ins><span class="cx"> display: block;
</span><span class="cx"> left: -1px;
</span><span class="cx"> right: -2px;
</span></span></pre>
</div>
</div>
</body>
</html>