Web Inspector: ThreadTreeElement should have a "Resume" status button when paused
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Dec 2016 04:59:18 +0000 (04:59 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Dec 2016 04:59:18 +0000 (04:59 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165581

Reviewed by Joseph Pecoraro.

* UserInterface/Images/Resume.svg:
Fill/stroke should be unspecified so that both can be styled in CSS.

* UserInterface/Views/DebuggerDashboardView.css:
(.dashboard.debugger .navigation-bar .item.debugger-dashboard-pause.activated):
* UserInterface/Views/DebuggerSidebarPanel.css:
(.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume):
(.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume.activated):
Recreate original style which relied on 'fill="none"' being specified in the SVG.

* UserInterface/Views/ThreadTreeElement.css:
(.tree-outline > .item.thread .icon):
(.tree-outline > .item.thread .status-button.resume):
(.tree-outline > .item.thread .status-button.resume:active):
(.tree-outline:matches(:focus, .force-focus) > .item.thread.selected .status-button.resume):
(.tree-outline > .item.thread.selected .status-button.resume,):
(.details-section.call-stack .thread .icon): Deleted.
Status button styles. Colors match those of the goto-arrow button.

* UserInterface/Views/ThreadTreeElement.js:
(WebInspector.ThreadTreeElement.prototype.refresh):
Update status icon.
(WebInspector.ThreadTreeElement.prototype.oncontextmenu):
(WebInspector.ThreadTreeElement.prototype._updateStatus):
Add/remove status button based on paused state.
Stop propagation of "mousedown" events on the status button, to
prevent button press from selecting the tree element.
(WebInspector.ThreadTreeElement):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@209698 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/Resume.svg
Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.css
Source/WebInspectorUI/UserInterface/Views/ThreadTreeElement.js

index e3a5992..4b5e83d 100644 (file)
@@ -1,3 +1,39 @@
+2016-12-11  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: ThreadTreeElement should have a "Resume" status button when paused
+        https://bugs.webkit.org/show_bug.cgi?id=165581
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/Resume.svg:
+        Fill/stroke should be unspecified so that both can be styled in CSS.
+
+        * UserInterface/Views/DebuggerDashboardView.css:
+        (.dashboard.debugger .navigation-bar .item.debugger-dashboard-pause.activated):
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume):
+        (.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume.activated):
+        Recreate original style which relied on 'fill="none"' being specified in the SVG.
+
+        * UserInterface/Views/ThreadTreeElement.css:
+        (.tree-outline > .item.thread .icon):
+        (.tree-outline > .item.thread .status-button.resume):
+        (.tree-outline > .item.thread .status-button.resume:active):
+        (.tree-outline:matches(:focus, .force-focus) > .item.thread.selected .status-button.resume):
+        (.tree-outline > .item.thread.selected .status-button.resume,):
+        (.details-section.call-stack .thread .icon): Deleted.
+        Status button styles. Colors match those of the goto-arrow button.
+
+        * UserInterface/Views/ThreadTreeElement.js:
+        (WebInspector.ThreadTreeElement.prototype.refresh):
+        Update status icon.
+        (WebInspector.ThreadTreeElement.prototype.oncontextmenu):
+        (WebInspector.ThreadTreeElement.prototype._updateStatus):
+        Add/remove status button based on paused state.
+        Stop propagation of "mousedown" events on the status button, to
+        prevent button press from selecting the tree element.
+        (WebInspector.ThreadTreeElement):
+
 2016-12-11  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Move MainTarget and WorkerTarget to their own files
index 1620530..17e6d3b 100644 (file)
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2014 Apple Inc. All rights reserved. -->
 <svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 15 15">
-    <path fill="none" stroke="currentColor" d="M 6.5 2.5 L 6.5 12.5 L 14.5 7.5 L 6.5 2.5 Z"/>
-    <rect fill="none" stroke="currentColor" x="0.5" y="2.5" width="3" height="10"/>
+    <path d="M 6.5 2.5 L 6.5 12.5 L 14.5 7.5 L 6.5 2.5 Z"/>
+    <rect x="0.5" y="2.5" width="3" height="10"/>
 </svg>
index 6b7e2c1..616d3d0 100644 (file)
@@ -73,6 +73,11 @@ body.window-inactive .dashboard.debugger .navigation-bar .item.button > .glyph {
     animation-name: none;
 }
 
+.dashboard.debugger .navigation-bar .item.debugger-dashboard-pause.activated {
+    fill: none;
+    stroke: var(--glyph-color-active);
+}
+
 @keyframes pulse-pause-button {
     from { opacity: 0.7; transform: scale(1); }
     to { opacity: 1; transform: scale(1.1); }
index 9b8ccf6..48192a6 100644 (file)
     stroke: var(--glyph-color-active);
 }
 
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume {
+    fill: none;
+    stroke: var(--glyph-color);
+}
+.sidebar > .panel.navigation.debugger > .navigation-bar .debugger-pause-resume.activated {
+    stroke: var(--glyph-color-active);
+}
+
 .sidebar > .panel.navigation.debugger .warning-banner {
     text-align: center;
     font-size: 11px;
index 04e0b8d..550be09 100644 (file)
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.details-section.call-stack .thread .icon {
+.tree-outline > .item.thread .icon {
     content: url(../Images/Thread.svg);
     width: 15px;
     height: 15px;
 }
+
+.tree-outline > .item.thread .status-button.resume {
+    width: 11px;
+    height: 11px;
+    vertical-align: middle;
+    fill: hsla(0, 0%, 0%, 0.5);
+    stroke: none;
+    display: none;
+}
+
+.tree-outline > .item.thread .status-button.resume:active {
+    fill: hsla(0, 0%, 0%, 0.7);
+}
+
+.tree-outline:matches(:focus, .force-focus) > .item.thread.selected .status-button.resume {
+    fill: var(--selected-foreground-color);
+}
+
+.tree-outline > .item.thread.selected .status-button.resume,
+.tree-outline > .item.thread:hover .status-button.resume {
+    display: inline-block;
+}
index 58713a9..d4449cc 100644 (file)
@@ -42,6 +42,8 @@ WebInspector.ThreadTreeElement = class ThreadTreeElement extends WebInspector.Ge
     {
         this.removeChildren();
 
+        this._updateStatus();
+
         let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
         let callFrames = targetData.callFrames;
 
@@ -111,10 +113,34 @@ WebInspector.ThreadTreeElement = class ThreadTreeElement extends WebInspector.Ge
         let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
 
         let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
-        if (DebuggerAgent.continueUntilNextRunLoop) {
-            contextMenu.appendItem(WebInspector.UIString("Resume Thread"), () => {
-                WebInspector.debuggerManager.continueUntilNextRunLoop(this._target);
-            }, !targetData.paused);
+        contextMenu.appendItem(WebInspector.UIString("Resume Thread"), () => {
+            WebInspector.debuggerManager.continueUntilNextRunLoop(this._target);
+        }, !targetData.paused);
+    }
+
+    // Private
+
+    _updateStatus()
+    {
+        this.status = null;
+
+        if (!this.element)
+            return;
+
+        let targetData = WebInspector.debuggerManager.dataForTarget(this._target);
+        if (!targetData.paused)
+            return;
+
+        if (!this._statusButton) {
+            let tooltip = WebInspector.UIString("Resume Thread");
+            this._statusButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Resume.svg", "resume", tooltip));
+            this._statusButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { WebInspector.debuggerManager.continueUntilNextRunLoop(this._target); });
+            this._statusButton.element.addEventListener("mousedown", (event) => {
+                // Prevent tree element from being selected.
+                event.stopPropagation();
+            });
         }
+
+        this.status = this._statusButton.element;
     }
 };