<!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>[193098] branches/safari-601-branch</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/193098">193098</a></dd>
<dt>Author</dt> <dd>timothy@apple.com</dd>
<dt>Date</dt> <dd>2015-12-03 10:46:38 -0800 (Thu, 03 Dec 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/188407">r188407</a>. rdar://problem/23221163</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchLayoutTestsChangeLog">branches/safari-601-branch/LayoutTests/ChangeLog</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectordomgetOuterHTMLhtml">branches/safari-601-branch/LayoutTests/inspector/dom/getOuterHTML.html</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectordomhighlightSelectoriframehtml">branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector-iframe.html</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectordomhighlightSelectorhtml">branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector.html</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectordomsetOuterHTMLhtml">branches/safari-601-branch/LayoutTests/inspector/dom/setOuterHTML.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIChangeLog">branches/safari-601-branch/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceControllersRuntimeManagerjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceProtocolRemoteObjectjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsPopoverjs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#branchessafari601branchLayoutTestsinspectormodelremoteobjectfakeobjectexpectedtxt">branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object-expected.txt</a></li>
<li><a href="#branchessafari601branchLayoutTestsinspectormodelremoteobjectfakeobjecthtml">branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object.html</a></li>
<li><a href="#branchessafari601branchSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPanelcss">branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/ChangeLog (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/ChangeLog        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/LayoutTests/ChangeLog        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -1,5 +1,19 @@
</span><span class="cx"> 2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Merge r188407. rdar://problem/23221163
+
+    2015-08-13  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
+
+            Web Inspector: Watch Expressions
+            https://bugs.webkit.org/show_bug.cgi?id=147904
+
+            Reviewed by Brian Burg.
+
+            * inspector/model/remote-object-fake-object-expected.txt: Added.
+            * inspector/model/remote-object-fake-object.html: Added.
+
+2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
</ins><span class="cx">         Merge r188403. rdar://problem/23221163
</span><span class="cx"> 
</span><span class="cx">     2015-08-13  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectordomgetOuterHTMLhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/inspector/dom/getOuterHTML.html (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/dom/getOuterHTML.html        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/LayoutTests/inspector/dom/getOuterHTML.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -5,7 +5,7 @@
</span><span class="cx"> &lt;script&gt;
</span><span class="cx"> function test()
</span><span class="cx"> {
</span><del>-    let suite = InspectorTest.createAsyncSuite(&quot;DOM.getOuterHTML&quot;);
</del><ins>+    var suite = InspectorTest.createAsyncSuite(&quot;DOM.getOuterHTML&quot;);
</ins><span class="cx"> 
</span><span class="cx">     suite.addTestCase({
</span><span class="cx">         name: &quot;GetOuterHTML&quot;,
</span><span class="lines">@@ -13,7 +13,7 @@
</span><span class="cx">         test: (resolve, reject) =&gt; {
</span><span class="cx">             WebInspector.domTreeManager.requestDocument(function(documentNode) {
</span><span class="cx">                 WebInspector.domTreeManager.querySelector(documentNode.id, &quot;#x&quot;, function(nodeId) {
</span><del>-                    let domNode = WebInspector.domTreeManager.nodeForId(nodeId);
</del><ins>+                    var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
</ins><span class="cx">                     InspectorTest.assert(domNode, &quot;DOMNode exists&quot;);
</span><span class="cx">                     domNode.getOuterHTML(function(error, outerHTML) {
</span><span class="cx">                         InspectorTest.expectNoError(error);
</span></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectordomhighlightSelectoriframehtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector-iframe.html (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector-iframe.html        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector-iframe.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -5,4 +5,4 @@
</span><span class="cx">         &lt;div id=&quot;id-one&quot;&gt;&lt;/div&gt;
</span><span class="cx">         &lt;div&gt;&lt;/div&gt;
</span><span class="cx">     &lt;/body&gt;
</span><del>-&lt;/html&gt;
</del><span class="cx">\ No newline at end of file
</span><ins>+&lt;/html&gt;
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectordomhighlightSelectorhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector.html (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector.html        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/LayoutTests/inspector/dom/highlightSelector.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -83,4 +83,4 @@
</span><span class="cx">         &lt;iframe class=&quot;class-one&quot; src=&quot;highlightSelector-iframe.html&quot;&gt;&lt;/iframe&gt;
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> &lt;/body&gt;
</span><del>-&lt;/html&gt;
</del><span class="cx">\ No newline at end of file
</span><ins>+&lt;/html&gt;
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectordomsetOuterHTMLhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/inspector/dom/setOuterHTML.html (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/dom/setOuterHTML.html        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/LayoutTests/inspector/dom/setOuterHTML.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -5,8 +5,8 @@
</span><span class="cx"> &lt;script&gt;
</span><span class="cx"> function test()
</span><span class="cx"> {
</span><del>-    let domNode;
-    let suite = InspectorTest.createAsyncSuite(&quot;DOM.setOuterHTML&quot;);
</del><ins>+    var domNode;
+    var suite = InspectorTest.createAsyncSuite(&quot;DOM.setOuterHTML&quot;);
</ins><span class="cx"> 
</span><span class="cx">     suite.addTestCase({
</span><span class="cx">         name: &quot;OuterHTMLBefore&quot;,
</span><span class="lines">@@ -38,14 +38,14 @@
</span><span class="cx">     &lt;/div&gt;
</span><span class="cx"> &lt;/div&gt;`.trim();
</span><span class="cx"> 
</span><del>-    let steps = [
</del><ins>+    var steps = [
</ins><span class="cx">         [&quot;RemovingElements&quot;, emptyOuterHTML],
</span><span class="cx">         [&quot;AddingElements&quot;, newOuterHTML],
</span><span class="cx">         [&quot;ModifyingElements&quot;, modifiedOuterHTML],
</span><span class="cx">     ];
</span><span class="cx"> 
</span><span class="cx">     steps.forEach(function(tuple) {
</span><del>-        let [title, replacementOuterHTML] = tuple;
</del><ins>+        var [title, replacementOuterHTML] = tuple;
</ins><span class="cx">         suite.addTestCase({
</span><span class="cx">             name: `SetOuterHTML${title}`,
</span><span class="cx">             description: &quot;Change the outerHTML.&quot;,
</span></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectormodelremoteobjectfakeobjectexpectedtxt"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object-expected.txt (0 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object-expected.txt                                (rev 0)
+++ branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object-expected.txt        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+PASS: A fake remote object should have object type.
+PASS: Each fake remote object instance should be unique.
+PASS: A fake remote object should have an empty list of own properties.
+PASS: A fake remote object should have an empty list of displayable properties.
+
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsinspectormodelremoteobjectfakeobjecthtml"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object.html (0 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object.html                                (rev 0)
+++ branches/safari-601-branch/LayoutTests/inspector/model/remote-object-fake-object.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -0,0 +1,28 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script src=&quot;../../http/tests/inspector/resources/inspector-test.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+function test()
+{
+    var fakeObject = WebInspector.RemoteObject.createFakeRemoteObject();
+
+    InspectorTest.assert(fakeObject instanceof WebInspector.RemoteObject);
+    InspectorTest.assert(fakeObject.objectId === WebInspector.RemoteObject.FakeRemoteObjectId);
+    InspectorTest.expectThat(fakeObject.type === &quot;object&quot; &amp;&amp; !fakeObject.subtype, &quot;A fake remote object should have object type.&quot;);
+    InspectorTest.expectThat(fakeObject !== WebInspector.RemoteObject.createFakeRemoteObject(), &quot;Each fake remote object instance should be unique.&quot;);
+
+    fakeObject.getOwnPropertyDescriptors(function(properties) {
+        InspectorTest.expectThat(Array.isArray(properties) &amp;&amp; !properties.length, &quot;A fake remote object should have an empty list of own properties.&quot;);
+    });
+
+    fakeObject.getDisplayablePropertyDescriptors(function(properties) {
+        InspectorTest.expectThat(Array.isArray(properties) &amp;&amp; !properties.length, &quot;A fake remote object should have an empty list of displayable properties.&quot;);
+        InspectorTest.completeTest();
+    });
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload=&quot;runTest()&quot;&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -1,5 +1,113 @@
</span><span class="cx"> 2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
</span><span class="cx"> 
</span><ins>+        Merge r188407. rdar://problem/23221163
+
+    2015-08-13  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
+
+            Web Inspector: Watch Expressions
+            https://bugs.webkit.org/show_bug.cgi?id=147904
+
+            Reviewed by Brian Burg.
+
+            * UserInterface/Protocol/RemoteObject.js:
+            (WebInspector.RemoteObject):
+            A RemoteObject's description string is optional, but we always
+            assume it exists and is a string, so default to the empty string.
+
+            * UserInterface/Controllers/RuntimeManager.js:
+            (WebInspector.RuntimeManager.prototype.evaluateInInspectedWindow.evalCallback):
+            Include the object group in the DidEvaluate event.
+
+            (WebInspector.RemoteObject.fakeRemoteObject):
+            (WebInspector.RemoteObject.prototype.getDisplayablePropertyDescriptors):
+            (WebInspector.RemoteObject.prototype.deprecatedGetDisplayableProperties.get return):
+            (WebInspector.RemoteObject.prototype.deprecatedGetDisplayableProperties):
+            (WebInspector.RemoteObject.prototype._isFakeObject):
+            (WebInspector.RemoteObject.prototype._getPropertyDescriptors):
+            (WebInspector.RemoteObject.prototype._deprecatedGetProperties):
+            Support a fake RemoteObject. We use this fake RemoteObject to
+            back a ObjectTreeView where we add custom Properties which are of the form
+            &quot;Expressions =&gt; RemoteObject&quot; instead of &quot;Object Property =&gt; RemoteObject&quot;.
+            Ensure a fake remote object is not used in unexpected ways.
+
+            * UserInterface/Views/Popover.js:
+            (WebInspector.Popover.prototype.update):
+            Default a popover update to animate, but allow not animating.
+
+            (WebInspector.Popover.prototype.handleEvent):
+            Vend a class that other content can use so that the Popover won't
+            dismiss if content with that class is scrolled. For example, a
+            completions list may be showing over a popover, if that scrolls
+            it should not dismiss the popover.
+
+            * UserInterface/Views/CompletionSuggestionsView.js:
+            (WebInspector.CompletionSuggestionsView):
+            Adopt the Popover ignore class so a popover won't dismiss if the
+            completion suggestions view is scrolled.
+
+            * UserInterface/Views/ObjectTreeBaseTreeElement.js:
+            (WebInspector.ObjectTreeBaseTreeElement.prototype.createGetterElement.get return):
+            (WebInspector.ObjectTreeBaseTreeElement.prototype.createGetterElement):
+            Allow modifying the context menu on an ObjectTreeView by looking for a delegate
+            on the TreeOutline.
+
+            * UserInterface/Views/ScopeChainDetailsSidebarPanel.css: Added.
+            (.details-section.watch-expressions .options &gt; *):
+            (.details-section.watch-expressions .options &gt; *:active):
+            (.details-section.watch-expressions .options &gt; .watch-expression-add):
+            (.details-section.watch-expressions .options &gt; .watch-expression-clear):
+            (.details-section.watch-expressions .options &gt; .watch-expression-refresh):
+            (.popover .watch-expression):
+            (.watch-expression-editor):
+            (.watch-expression-editor &gt; .CodeMirror):
+            (.watch-expression-editor &gt; .CodeMirror-scroll):
+            Styles for the new Watch Expressions section, buttons, popover, and editor.
+
+            * UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
+            (WebInspector.ScopeChainDetailsSidebarPanel):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype.inspect):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateCallFramesSection):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._generateWatchExpressionsSection):
+            Because we update the UI after a delay, to allow ObjectTreeView's to asynchronously
+            expand and fetch their list of properties, we convert updating the watch expression
+            and call frame sections asynchronously and return a promise. This lets us visually
+            update the UI after both sections have updated.
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpression):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._removeWatchExpression):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._clearAllWatchExpressions):
+            Modify the saved list of watch expressions.
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpressionButtonClicked.presentPopoverOverTargetElement):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpressionButtonClicked.this._codeMirror.addKeyMap):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._addWatchExpressionButtonClicked):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype.willDismissPopover):
+            Handle presenting and dismissing the add watch expression popover.
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._refreshAllWatchExpressionsButtonClicked):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._clearAllWatchExpressionsButtonClicked):
+            Other button handlers.
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._mainResourceDidChange):
+            Refresh the sidebar on navigation, as the watch expressions may change value (`location.href`).
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeElementAddContextMenuItems):
+            Add our own context menu items to watch expression ObjectTreeView tree elements to
+            allow removing a watch expression.
+
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._propertyPathIdentifierForTreeElement):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeAddHandler):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeExpandHandler):
+            (WebInspector.ScopeChainDetailsSidebarPanel.prototype._objectTreeCollapseHandler):
+            Convert code to use `let`.
+
+            * Localizations/en.lproj/localizedStrings.js:
+            * UserInterface/Main.html:
+            Misc. changes.
+
+2015-12-02  Timothy Hatcher  &lt;timothy@apple.com&gt;
+
</ins><span class="cx">         Merge r188403. rdar://problem/23221163
</span><span class="cx"> 
</span><span class="cx">     2015-08-13  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -45,6 +45,8 @@
</span><span class="cx"> localizedStrings[&quot;Add Breakpoint&quot;] = &quot;Add Breakpoint&quot;;
</span><span class="cx"> localizedStrings[&quot;Add New&quot;] = &quot;Add New&quot;;
</span><span class="cx"> localizedStrings[&quot;Add New Probe Expression&quot;] = &quot;Add New Probe Expression&quot;;
</span><ins>+localizedStrings[&quot;Add New Watch Expression&quot;] = &quot;Add New Watch Expression&quot;;
+localizedStrings[&quot;Add Watch Expression&quot;] = &quot;Add Watch Expression&quot;;
</ins><span class="cx"> localizedStrings[&quot;Add new breakpoint action after this action&quot;] = &quot;Add new breakpoint action after this action&quot;;
</span><span class="cx"> localizedStrings[&quot;Additions&quot;] = &quot;Additions&quot;;
</span><span class="cx"> localizedStrings[&quot;All&quot;] = &quot;All&quot;;
</span><span class="lines">@@ -91,6 +93,7 @@
</span><span class="cx"> localizedStrings[&quot;Checked&quot;] = &quot;Checked&quot;;
</span><span class="cx"> localizedStrings[&quot;Child Layers&quot;] = &quot;Child Layers&quot;;
</span><span class="cx"> localizedStrings[&quot;Children&quot;] = &quot;Children&quot;;
</span><ins>+localizedStrings[&quot;Clear All Watch Expressions&quot;] = &quot;Clear All Watch Expressions&quot;;
</ins><span class="cx"> localizedStrings[&quot;Clear Log&quot;] = &quot;Clear Log&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear Log on Navigation&quot;] = &quot;Clear Log on Navigation&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear Timeline&quot;] = &quot;Clear Timeline&quot;;
</span><span class="lines">@@ -359,6 +362,7 @@
</span><span class="cx"> localizedStrings[&quot;No Results Found&quot;] = &quot;No Results Found&quot;;
</span><span class="cx"> localizedStrings[&quot;No Search Results&quot;] = &quot;No Search Results&quot;;
</span><span class="cx"> localizedStrings[&quot;No Units&quot;] = &quot;No Units&quot;;
</span><ins>+localizedStrings[&quot;No Watch Expressions&quot;] = &quot;No Watch Expressions&quot;;
</ins><span class="cx"> localizedStrings[&quot;No exact ARIA role match.&quot;] = &quot;No exact ARIA role match.&quot;;
</span><span class="cx"> localizedStrings[&quot;No message&quot;] = &quot;No message&quot;;
</span><span class="cx"> localizedStrings[&quot;No properties.&quot;] = &quot;No properties.&quot;;
</span><span class="lines">@@ -408,10 +412,12 @@
</span><span class="cx"> localizedStrings[&quot;Reference Issue&quot;] = &quot;Reference Issue&quot;;
</span><span class="cx"> localizedStrings[&quot;Reflection&quot;] = &quot;Reflection&quot;;
</span><span class="cx"> localizedStrings[&quot;Refresh&quot;] = &quot;Refresh&quot;;
</span><ins>+localizedStrings[&quot;Refresh All Watch Expressions&quot;] = &quot;Refresh All Watch Expressions&quot;;
</ins><span class="cx"> localizedStrings[&quot;Region Flow&quot;] = &quot;Region Flow&quot;;
</span><span class="cx"> localizedStrings[&quot;Region announced in its entirety.&quot;] = &quot;Region announced in its entirety.&quot;;
</span><span class="cx"> localizedStrings[&quot;Reload page (%s)\nReload ignoring cache (%s)&quot;] = &quot;Reload page (%s)\nReload ignoring cache (%s)&quot;;
</span><span class="cx"> localizedStrings[&quot;Removals&quot;] = &quot;Removals&quot;;
</span><ins>+localizedStrings[&quot;Remove Watch Expression&quot;] = &quot;Remove Watch Expression&quot;;
</ins><span class="cx"> localizedStrings[&quot;Remove this breakpoint action&quot;] = &quot;Remove this breakpoint action&quot;;
</span><span class="cx"> localizedStrings[&quot;Rendering Frames&quot;] = &quot;Rendering Frames&quot;;
</span><span class="cx"> localizedStrings[&quot;Repeating Linear Gradient&quot;] = &quot;Repeating Linear Gradient&quot;;
</span><span class="lines">@@ -540,6 +546,7 @@
</span><span class="cx"> localizedStrings[&quot;Value&quot;] = &quot;Value&quot;;
</span><span class="cx"> localizedStrings[&quot;Warning: &quot;] = &quot;Warning: &quot;;
</span><span class="cx"> localizedStrings[&quot;Warnings&quot;] = &quot;Warnings&quot;;
</span><ins>+localizedStrings[&quot;Watch Expressions&quot;] = &quot;Watch Expressions&quot;;
</ins><span class="cx"> localizedStrings[&quot;Web Inspector&quot;] = &quot;Web Inspector&quot;;
</span><span class="cx"> localizedStrings[&quot;Width&quot;] = &quot;Width&quot;;
</span><span class="cx"> localizedStrings[&quot;With Object Properties&quot;] = &quot;With Object Properties&quot;;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceControllersRuntimeManagerjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -47,7 +47,7 @@
</span><span class="cx"> 
</span><span class="cx">         function evalCallback(error, result, wasThrown, savedResultIndex)
</span><span class="cx">         {
</span><del>-            this.dispatchEventToListeners(WebInspector.RuntimeManager.Event.DidEvaluate);
</del><ins>+            this.dispatchEventToListeners(WebInspector.RuntimeManager.Event.DidEvaluate, {objectGroup});
</ins><span class="cx"> 
</span><span class="cx">             if (error) {
</span><span class="cx">                 console.error(error);
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Main.html        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -128,6 +128,7 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ResourceTreeElement.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/RulesStyleDetailsPanel.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ScopeBar.css&quot;&gt;
</span><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ScopeChainDetailsSidebarPanel.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ScopeRadioButtonNavigationItem.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ScriptContentView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;Views/ScriptTimelineOverviewGraph.css&quot;&gt;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceProtocolRemoteObjectjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -46,7 +46,7 @@
</span><span class="cx">             console.assert(!value);
</span><span class="cx"> 
</span><span class="cx">             this._objectId = objectId;
</span><del>-            this._description = description;
</del><ins>+            this._description = description || &quot;&quot;;
</ins><span class="cx">             this._hasChildren = type !== &quot;symbol&quot;;
</span><span class="cx">             this._size = size;
</span><span class="cx">             this._classPrototype = classPrototype;
</span><span class="lines">@@ -69,6 +69,11 @@
</span><span class="cx"> 
</span><span class="cx">     // Static
</span><span class="cx"> 
</span><ins>+    static createFakeRemoteObject()
+    {
+        return new WebInspector.RemoteObject(WebInspector.RemoteObject.FakeRemoteObjectId, &quot;object&quot;);
+    }
+
</ins><span class="cx">     static fromPrimitiveValue(value)
</span><span class="cx">     {
</span><span class="cx">         return new WebInspector.RemoteObject(undefined, typeof value, undefined, value, undefined, undefined, undefined, undefined);
</span><span class="lines">@@ -219,7 +224,7 @@
</span><span class="cx"> 
</span><span class="cx">     getDisplayablePropertyDescriptors(callback)
</span><span class="cx">     {
</span><del>-        if (!this._objectId || this._isSymbol()) {
</del><ins>+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
</ins><span class="cx">             callback([]);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -266,7 +271,7 @@
</span><span class="cx"> 
</span><span class="cx">     deprecatedGetDisplayableProperties(callback)
</span><span class="cx">     {
</span><del>-        if (!this._objectId || this._isSymbol()) {
</del><ins>+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
</ins><span class="cx">             callback([]);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -301,7 +306,7 @@
</span><span class="cx"> 
</span><span class="cx">     setPropertyValue(name, value, callback)
</span><span class="cx">     {
</span><del>-        if (!this._objectId || this._isSymbol()) {
</del><ins>+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
</ins><span class="cx">             callback(&quot;Can't set a property of non-object.&quot;);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -457,7 +462,7 @@
</span><span class="cx"> 
</span><span class="cx">     release()
</span><span class="cx">     {
</span><del>-        if (this._objectId)
</del><ins>+        if (this._objectId &amp;&amp; !this._isFakeObject())
</ins><span class="cx">             RuntimeAgent.releaseObject(this._objectId);
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -510,6 +515,11 @@
</span><span class="cx"> 
</span><span class="cx">     // Private
</span><span class="cx"> 
</span><ins>+    _isFakeObject()
+    {
+        return this._objectId === WebInspector.RemoteObject.FakeRemoteObjectId;
+    }
+
</ins><span class="cx">     _isSymbol()
</span><span class="cx">     {
</span><span class="cx">         return this._type === &quot;symbol&quot;;
</span><span class="lines">@@ -527,7 +537,7 @@
</span><span class="cx"> 
</span><span class="cx">     _getPropertyDescriptors(ownProperties, callback)
</span><span class="cx">     {
</span><del>-        if (!this._objectId || this._isSymbol()) {
</del><ins>+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
</ins><span class="cx">             callback([]);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -571,7 +581,7 @@
</span><span class="cx">     // FIXME: Phase out these deprecated functions. They return DeprecatedRemoteObjectProperty instead of PropertyDescriptors.
</span><span class="cx">     _deprecatedGetProperties(ownProperties, callback)
</span><span class="cx">     {
</span><del>-        if (!this._objectId || this._isSymbol()) {
</del><ins>+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
</ins><span class="cx">             callback([]);
</span><span class="cx">             return;
</span><span class="cx">         }
</span><span class="lines">@@ -612,6 +622,8 @@
</span><span class="cx">     }
</span><span class="cx"> };
</span><span class="cx"> 
</span><ins>+WebInspector.RemoteObject.FakeRemoteObjectId = &quot;fake-remote-object&quot;;
+
</ins><span class="cx"> WebInspector.RemoteObject.SourceCodeLocationPromise = {
</span><span class="cx">     NoSourceFound: &quot;remote-object-source-code-location-promise-no-source-found&quot;,
</span><span class="cx">     MissingObjectId: &quot;remote-object-source-code-location-promise-missing-object-id&quot;
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -34,10 +34,10 @@
</span><span class="cx">         this._selectedIndex = NaN;
</span><span class="cx"> 
</span><span class="cx">         this._element = document.createElement(&quot;div&quot;);
</span><del>-        this._element.className = &quot;completion-suggestions&quot;;
</del><ins>+        this._element.classList.add(&quot;completion-suggestions&quot;, WebInspector.Popover.IgnoreAutoDismissClassName);
</ins><span class="cx"> 
</span><span class="cx">         this._containerElement = document.createElement(&quot;div&quot;);
</span><del>-        this._containerElement.className = &quot;completion-suggestions-container&quot;;
</del><ins>+        this._containerElement.classList.add(&quot;completion-suggestions-container&quot;);
</ins><span class="cx">         this._containerElement.addEventListener(&quot;mousedown&quot;, this._mouseDown.bind(this));
</span><span class="cx">         this._containerElement.addEventListener(&quot;mouseup&quot;, this._mouseUp.bind(this));
</span><span class="cx">         this._containerElement.addEventListener(&quot;click&quot;, this._itemClicked.bind(this));
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsObjectTreeBaseTreeElementjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -182,12 +182,21 @@
</span><span class="cx"> 
</span><span class="cx">     _contextMenuHandler(event)
</span><span class="cx">     {
</span><ins>+        var contextMenu = new WebInspector.ContextMenu(event);
+
+        if (typeof this.treeOutline.objectTreeElementAddContextMenuItems === &quot;function&quot;) {
+            this.treeOutline.objectTreeElementAddContextMenuItems(this, contextMenu);
+            if (!contextMenu.isEmpty())
+                contextMenu.appendSeparator();
+        }             
+
</ins><span class="cx">         var resolvedValue = this.resolvedValue();
</span><del>-        if (!resolvedValue)
</del><ins>+        if (!resolvedValue) {
+            if (!contextMenu.isEmpty())
+                contextMenu.show();
</ins><span class="cx">             return;
</span><ins>+        }
</ins><span class="cx"> 
</span><del>-        var contextMenu = new WebInspector.ContextMenu(event);
-
</del><span class="cx">         if (this._property &amp;&amp; this._property.symbol)
</span><span class="cx">             contextMenu.appendItem(WebInspector.UIString(&quot;Log Symbol&quot;), this._logSymbolProperty.bind(this));
</span><span class="cx"> 
</span></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsPopoverjs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/Popover.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -89,7 +89,7 @@
</span><span class="cx">             this._update(true);
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    update()
</del><ins>+    update(shouldAnimate = true)
</ins><span class="cx">     {
</span><span class="cx">         if (!this.visible)
</span><span class="cx">             return;
</span><span class="lines">@@ -97,7 +97,7 @@
</span><span class="cx">         var previouslyFocusedElement = document.activeElement;
</span><span class="cx"> 
</span><span class="cx">         this._contentNeedsUpdate = true;
</span><del>-        this._update(true);
</del><ins>+        this._update(shouldAnimate);
</ins><span class="cx"> 
</span><span class="cx">         if (previouslyFocusedElement)
</span><span class="cx">             previouslyFocusedElement.focus();
</span><span class="lines">@@ -151,7 +151,7 @@
</span><span class="cx">         switch (event.type) {
</span><span class="cx">         case &quot;mousedown&quot;:
</span><span class="cx">         case &quot;scroll&quot;:
</span><del>-            if (!this._element.contains(event.target))
</del><ins>+            if (!this._element.contains(event.target) &amp;&amp; !event.target.enclosingNodeOrSelfWithClass(WebInspector.Popover.IgnoreAutoDismissClassName))
</ins><span class="cx">                 this.dismiss();
</span><span class="cx">             break;
</span><span class="cx">         case &quot;transitionend&quot;:
</span><span class="lines">@@ -555,3 +555,4 @@
</span><span class="cx"> WebInspector.Popover.ContentPadding = 5;
</span><span class="cx"> WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
</span><span class="cx"> WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);
</span><ins>+WebInspector.Popover.IgnoreAutoDismissClassName = &quot;popover-ignore-auto-dismiss&quot;;
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPanelcss"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css (0 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css                                (rev 0)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -0,0 +1,71 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section.watch-expressions .options &gt; * {
+    float: right;
+    margin-top: 1px;
+    margin-left: 5px;
+    height: 13px;
+}
+
+.details-section.watch-expressions .options &gt; *:active {
+    opacity: 0.7;
+}
+
+.details-section.watch-expressions .options &gt; .watch-expression-add {
+    content: url(../Images/Plus.svg);
+}
+
+.details-section.watch-expressions .options &gt; .watch-expression-clear {
+    content: url(../Images/NavigationItemTrash.svg);
+}
+
+.details-section.watch-expressions .options &gt; .watch-expression-refresh {
+    content: url(../Images/ReloadFull.svg);
+}
+
+.popover .watch-expression {
+    padding: 5px;
+    margin: 2px;
+}
+
+.watch-expression-editor {
+    width: 200px;
+    margin-top: 5px;
+    padding: 4px 0 2px 0;
+    -webkit-appearance: textfield;
+    border: 1px solid hsl(0, 0%, 78%);
+    background: white;
+}
+
+.watch-expression-editor &gt; .CodeMirror {
+    width: calc(100% - 2px);
+    height: auto;
+}
+
+.watch-expression-editor &gt; .CodeMirror-scroll {
+    width: calc(100% - 2px);
+    overflow: hidden;
+}
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebInspectorUIUserInterfaceViewsScopeChainDetailsSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js (193097 => 193098)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js        2015-12-03 18:46:26 UTC (rev 193097)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js        2015-12-03 18:46:38 UTC (rev 193098)
</span><span class="lines">@@ -31,8 +31,40 @@
</span><span class="cx"> 
</span><span class="cx">         this._callFrame = null;
</span><span class="cx"> 
</span><ins>+        this._watchExpressionsSetting = new WebInspector.Setting(&quot;watch-expressions&quot;, []);
+
+        this._watchExpressionOptionsElement = document.createElement(&quot;div&quot;);
+        this._watchExpressionOptionsElement.classList.add(&quot;options&quot;);
+
+        var refreshAllWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement(&quot;img&quot;));
+        refreshAllWatchExpressionButton.classList.add(&quot;watch-expression-refresh&quot;);
+        refreshAllWatchExpressionButton.setAttribute(&quot;role&quot;, &quot;button&quot;);
+        refreshAllWatchExpressionButton.title = WebInspector.UIString(&quot;Refresh All Watch Expressions&quot;);
+        refreshAllWatchExpressionButton.addEventListener(&quot;click&quot;, this._refreshAllWatchExpressionsButtonClicked.bind(this));
+
+        var clearAllWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement(&quot;img&quot;));
+        clearAllWatchExpressionButton.classList.add(&quot;watch-expression-clear&quot;);
+        clearAllWatchExpressionButton.setAttribute(&quot;role&quot;, &quot;button&quot;);
+        clearAllWatchExpressionButton.title = WebInspector.UIString(&quot;Clear All Watch Expressions&quot;);
+        clearAllWatchExpressionButton.addEventListener(&quot;click&quot;, this._clearAllWatchExpressionsButtonClicked.bind(this));
+
+        var addWatchExpressionButton = this._watchExpressionOptionsElement.appendChild(document.createElement(&quot;img&quot;));
+        addWatchExpressionButton.classList.add(&quot;watch-expression-add&quot;);
+        addWatchExpressionButton.title = WebInspector.UIString(&quot;Add Watch Expression&quot;);
+        addWatchExpressionButton.setAttribute(&quot;role&quot;, &quot;button&quot;);
+        addWatchExpressionButton.addEventListener(&quot;click&quot;, this._addWatchExpressionButtonClicked.bind(this));
+
+        this._watchExpressionsSectionGroup = new WebInspector.DetailsSectionGroup;
+        this._watchExpressionsSection = new WebInspector.DetailsSection(&quot;watch-expressions&quot;, WebInspector.UIString(&quot;Watch Expressions&quot;), [this._watchExpressionsSectionGroup], this._watchExpressionOptionsElement);
+        this.contentElement.appendChild(this._watchExpressionsSection.element);
+
+        this.needsRefresh();
+
</ins><span class="cx">         // Update on console prompt eval as objects in the scope chain may have changed.
</span><del>-        WebInspector.runtimeManager.addEventListener(WebInspector.RuntimeManager.Event.DidEvaluate, this.needsRefresh, this);
</del><ins>+        WebInspector.runtimeManager.addEventListener(WebInspector.RuntimeManager.Event.DidEvaluate, this._didEvaluateExpression, this);
+
+        // Update watch expressions on navigations.
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     // Public
</span><span class="lines">@@ -55,7 +87,7 @@
</span><span class="cx"> 
</span><span class="cx">         this.callFrame = callFrameToInspect;
</span><span class="cx"> 
</span><del>-        return !!this.callFrame;
</del><ins>+        return true;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     get callFrame()
</span><span class="lines">@@ -75,9 +107,55 @@
</span><span class="cx"> 
</span><span class="cx">     refresh()
</span><span class="cx">     {
</span><del>-        var callFrame = this.callFrame;
</del><ins>+        var callFrame = this._callFrame;
+
+        Promise.all([this._generateWatchExpressionsSection(), this._generateCallFramesSection()]).then(function(sections) {
+            var [watchExpressionsSection, callFrameSections] = sections;
+
+            function delayedWork()
+            {
+                // Clear the timeout so we don't update the interface twice.
+                clearTimeout(timeout);
+
+                if (watchExpressionsSection)
+                    this._watchExpressionsSectionGroup.rows = [watchExpressionsSection];
+                else {
+                    var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString(&quot;No Watch Expressions&quot;));
+                    this._watchExpressionsSectionGroup.rows = [emptyRow];
+                    emptyRow.showEmptyMessage();
+                }
+
+                this.contentElement.removeChildren();
+                this.contentElement.appendChild(this._watchExpressionsSection.element);
+
+                // Bail if the call frame changed while we were waiting for the async response.
+                if (this._callFrame !== callFrame)
+                    return;
+
+                if (!callFrameSections)
+                    return;
+
+                for (let callFrameSection of callFrameSections)
+                    this.contentElement.appendChild(callFrameSection.element);
+            }
+
+            // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
+            // if the debugger is paused in code that was executed from the console. The console will be waiting for
+            // the result of the execution and without a timeout we would never update the scope variables.
+            var delay = WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.size === 0 ? 50 : 250;
+            var timeout = setTimeout(delayedWork.bind(this), delay);
+
+            // Since ObjectTreeView populates asynchronously, we want to wait to replace the existing content
+            // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
+            InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
+        }.bind(this)).catch(function(e) { console.error(e); });
+    }
+
+    _generateCallFramesSection()
+    {
+        var callFrame = this._callFrame;
</ins><span class="cx">         if (!callFrame)
</span><del>-            return;
</del><ins>+            return Promise.resolve(null);
</ins><span class="cx"> 
</span><span class="cx">         var detailsSections = [];
</span><span class="cx">         var foundLocalScope = false;
</span><span class="lines">@@ -87,9 +165,7 @@
</span><span class="cx">             sectionCountByType[WebInspector.ScopeChainNode.Type[type]] = 0;
</span><span class="cx"> 
</span><span class="cx">         var scopeChain = callFrame.scopeChain;
</span><del>-        for (var i = 0; i &lt; scopeChain.length; ++i) {
-            var scope = scopeChain[i];
-
</del><ins>+        for (let scope of scopeChain) {
</ins><span class="cx">             var title = null;
</span><span class="cx">             var extraPropertyDescriptor = null;
</span><span class="cx">             var collapsedByDefault = false;
</span><span class="lines">@@ -153,31 +229,186 @@
</span><span class="cx">             detailsSections.push(detailsSection);
</span><span class="cx">         }
</span><span class="cx"> 
</span><del>-        function delayedWork()
</del><ins>+        return Promise.resolve(detailsSections);
+    }
+
+    _generateWatchExpressionsSection()
+    {
+        var watchExpressions = this._watchExpressionsSetting.value;
+        if (!watchExpressions.length) {
+            if (this._usedWatchExpressionsObjectGroup) {
+                this._usedWatchExpressionsObjectGroup = false;
+                RuntimeAgent.releaseObjectGroup(WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName);
+            }
+            return Promise.resolve(null);
+        }
+
+        RuntimeAgent.releaseObjectGroup(WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName);
+        this._usedWatchExpressionsObjectGroup = true;
+
+        var watchExpressionsRemoteObject = WebInspector.RemoteObject.createFakeRemoteObject();
+        var fakePropertyPath = WebInspector.PropertyPath.emptyPropertyPathForScope(watchExpressionsRemoteObject);
+        var objectTree = new WebInspector.ObjectTreeView(watchExpressionsRemoteObject, WebInspector.ObjectTreeView.Mode.Properties, fakePropertyPath);
+        objectTree.showOnlyProperties();
+
+        var treeOutline = objectTree.treeOutline;
+        const watchExpressionSectionIdentifier = &quot;watch-expressions&quot;;
+        treeOutline.onadd = this._objectTreeAddHandler.bind(this, watchExpressionSectionIdentifier);
+        treeOutline.onexpand = this._objectTreeExpandHandler.bind(this, watchExpressionSectionIdentifier);
+        treeOutline.oncollapse = this._objectTreeCollapseHandler.bind(this, watchExpressionSectionIdentifier);
+        treeOutline.objectTreeElementAddContextMenuItems = this._objectTreeElementAddContextMenuItems.bind(this);
+
+        var promises = [];
+        for (let expression of watchExpressions) {
+            promises.push(new Promise(function(resolve, reject) {
+                WebInspector.runtimeManager.evaluateInInspectedWindow(expression, WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName, false, true, false, true, false, function(object, wasThrown) {
+                    var propertyDescriptor = new WebInspector.PropertyDescriptor({name: expression, value: object}, undefined, undefined, wasThrown);
+                    objectTree.appendExtraPropertyDescriptor(propertyDescriptor);
+                    resolve(propertyDescriptor);
+                });
+            }));
+        }
+
+        return Promise.all(promises).then(function() {
+            return Promise.resolve(new WebInspector.DetailsSectionPropertiesRow(objectTree));
+        });
+    }
+
+    _addWatchExpression(expression)
+    {
+        var watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.push(expression);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsRefresh();
+    }
+
+    _removeWatchExpression(expression)
+    {
+        var watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.remove(expression, true);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsRefresh();
+    }
+
+    _clearAllWatchExpressions()
+    {
+        this._watchExpressionsSetting.value = [];
+
+        this.needsRefresh();
+    }
+
+    _addWatchExpressionButtonClicked(event)
+    {
+        function presentPopoverOverTargetElement()
</ins><span class="cx">         {
</span><del>-            // Clear the timeout so we don't update the interface twice.
-            clearTimeout(timeout);
</del><ins>+            var target = WebInspector.Rect.rectFromClientRect(event.target.getBoundingClientRect());
+            popover.present(target, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+        }
</ins><span class="cx"> 
</span><del>-            // Bail if the call frame changed while we were waiting for the async response.
-            if (this.callFrame !== callFrame)
-                return;
</del><ins>+        var popover = new WebInspector.Popover(this);
+        var content = document.createElement(&quot;div&quot;);
+        content.classList.add(&quot;watch-expression&quot;);
+        content.appendChild(document.createElement(&quot;div&quot;)).textContent = WebInspector.UIString(&quot;Add New Watch Expression&quot;);
</ins><span class="cx"> 
</span><del>-            this.contentElement.removeChildren();
-            for (var i = 0; i &lt; detailsSections.length; ++i)
-                this.contentElement.appendChild(detailsSections[i].element);
</del><ins>+        var editorElement = content.appendChild(document.createElement(&quot;div&quot;));
+        editorElement.classList.add(&quot;watch-expression-editor&quot;, WebInspector.SyntaxHighlightedStyleClassName);
+
+        this._codeMirror = CodeMirror(editorElement, {
+            lineWrapping: true,
+            mode: &quot;text/javascript&quot;,
+            indentWithTabs: true,
+            indentUnit: 4,
+            matchBrackets: true,
+            value: &quot;&quot;,
+        });
+
+        this._popoverCommitted = false;
+
+        this._codeMirror.addKeyMap({
+            &quot;Enter&quot;: function() { this._popoverCommitted = true; popover.dismiss(); }.bind(this),
+        });
+
+        var completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror);
+        completionController.addExtendedCompletionProvider(&quot;javascript&quot;, WebInspector.javaScriptRuntimeCompletionProvider);
+
+        // Resize the popover as best we can when the CodeMirror editor changes size.
+        var previousHeight = 0;
+        this._codeMirror.on(&quot;changes&quot;, function(cm, event) {
+            var height = cm.getScrollInfo().height;
+            if (previousHeight !== height) {
+                previousHeight = height;
+                popover.update(false);
+            }
+        });
+
+        // Reposition the popover when the window resizes.
+        this._windowResizeListener = presentPopoverOverTargetElement;
+        window.addEventListener(&quot;resize&quot;, this._windowResizeListener);
+
+        popover.content = content;
+        presentPopoverOverTargetElement();
+
+        // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
+        setTimeout(function() {
+            this._codeMirror.refresh();
+            this._codeMirror.focus();
+            popover.update();
+        }.bind(this), 0);
+    }
+
+    willDismissPopover(popover)
+    {
+        if (this._popoverCommitted) {
+            var expression = this._codeMirror.getValue().trim();
+            if (expression)
+                this._addWatchExpression(expression);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><del>-        // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
-        // if the debugger is paused in code that was executed from the console. The console will be waiting for
-        // the result of the execution and without a timeout we would never update the scope variables.
-        var delay = WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.size === 0 ? 50 : 250;
-        var timeout = setTimeout(delayedWork.bind(this), delay);
</del><ins>+        window.removeEventListener(&quot;resize&quot;, this._windowResizeListener);
+        this._windowResizeListener = null;
+        this._codeMirror = null;
+    }
</ins><span class="cx"> 
</span><del>-        // Since ObjectTreeView populates asynchronously, we want to wait to replace the existing content
-        // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
-        InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
</del><ins>+    _refreshAllWatchExpressionsButtonClicked(event)
+    {
+        this.needsRefresh();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    _clearAllWatchExpressionsButtonClicked(event)
+    {
+        this._clearAllWatchExpressions();
+    }
+
+    _didEvaluateExpression(event)
+    {
+        if (event.data.objectGroup === WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName)
+            return;
+
+        this.needsRefresh();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this.needsRefresh();
+    }
+
+    _objectTreeElementAddContextMenuItems(objectTreeElement, contextMenu)
+    {
+        // Only add our watch expression context menus to the top level ObjectTree elements.
+        if (objectTreeElement.parent !== objectTreeElement.treeOutline)
+            return;
+
+        contextMenu.appendItem(WebInspector.UIString(&quot;Remove Watch Expression&quot;), function() {
+            var expression = objectTreeElement.property.name;
+            this._removeWatchExpression(expression);
+        }.bind(this));
+    }
+
</ins><span class="cx">     _propertyPathIdentifierForTreeElement(identifier, objectPropertyTreeElement)
</span><span class="cx">     {
</span><span class="cx">         if (!objectPropertyTreeElement.property)
</span><span class="lines">@@ -220,3 +451,4 @@
</span><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties = new Set;
</span><ins>+WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName = &quot;watch-expressions&quot;;
</ins></span></pre>
</div>
</div>

</body>
</html>