DevTools: hoist debugger paused reason to top

third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js

Index: third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js b/third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js
index d83b72d604334f666186c9c5e7ce7044c38b10a3..c02ff54f13dc1511ef18ed99960a2d0b6fe1e01b 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js
@@ -50,6 +50,7 @@ WebInspector.SourcesPanel = function()
 
     this._debugToolbar = this._createDebugToolbar();
     this._debugToolbarDrawer = this._createDebugToolbarDrawer();
+    this._debugStatusMessageElement = createElementWithClass("div", "paused-status");
 
     const initialDebugSidebarWidth = 225;
     this._splitWidget = new WebInspector.SplitWidget(true, true, "sourcesPanelSplitViewState", initialDebugSidebarWidth);
@@ -93,7 +94,7 @@ WebInspector.SourcesPanel = function()
     WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
 
-    this._updateDebuggerButtons();
+    this._updateDebuggerButtonsAndStatus();
     this._pauseOnExceptionEnabledChanged();
     WebInspector.moduleSetting("pauseOnExceptionEnabled").addChangeListener(this._pauseOnExceptionEnabledChanged, this);
 
@@ -268,7 +269,7 @@ WebInspector.SourcesPanel.prototype = {
     _showDebuggerPausedDetails: function(details)
     {
         this._paused = true;
-        this._updateDebuggerButtons();
+        this._updateDebuggerButtonsAndStatus();
         WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, details);
         this._toggleDebuggerSidebarButton.setEnabled(false);
         window.focus();
@@ -299,7 +300,7 @@ WebInspector.SourcesPanel.prototype = {
         if (WebInspector.context.flavor(WebInspector.Target) !== target)
             return;
 
-        this._updateDebuggerButtons();
+        this._updateDebuggerButtonsAndStatus();
     },
 
     /**
@@ -452,7 +453,7 @@ WebInspector.SourcesPanel.prototype = {
         this._debugToolbarDrawer.classList.toggle("expanded", enabled);
     },
 
-    _updateDebuggerButtons: function()
+    _updateDebuggerButtonsAndStatus: function()
     {
         var currentTarget = WebInspector.context.flavor(WebInspector.Target);
         var currentDebuggerModel = WebInspector.DebuggerModel.fromTarget(currentTarget);
@@ -474,12 +475,64 @@ WebInspector.SourcesPanel.prototype = {
             this._stepIntoAction.setEnabled(false);
             this._stepOutAction.setEnabled(false);
         }
+
+        var status = this._debugStatusMessageElement;
+        var details = currentDebuggerModel && currentDebuggerModel.debuggerPausedDetails();
+        status.hidden = !details;
+        status.removeChildren();
+
+        if (details) {

[lushnikov, 2016/10/12 21:26:59]

if (details)
    status.appendChild(this._buildPausedMessage(pausedDetails));

[luoe, 2016/10/13 00:36:58]

Done with a widget as this._debuggerPausedMessage.render(details);

+            var mainText = createElement("div");
+            var subText = createElement("div");
+            if (details.reason === WebInspector.DebuggerModel.BreakReason.DOM) {

[lushnikov, 2016/10/12 21:26:59]

Let's create a widget for this thing!

It will have one method: render(pausedDetails)

We'll be able to isolate a tone of css!

[luoe, 2016/10/13 00:36:58]

Done as DebuggerPausedMessage.js

+                mainText = WebInspector.domBreakpointsSidebarPane.createBreakpointHitMainMessage(details);
+                subText = WebInspector.domBreakpointsSidebarPane.createBreakpointHitSubMessage(details);
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.EventListener) {
+                var eventName = details.auxData["eventName"];
+                var eventNameForUI = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName, details.auxData);
+                mainText.textContent = WebInspector.UIString("Paused on event listener");
+                subText.textContent = eventNameForUI;
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.XHR) {
+                mainText.textContent = WebInspector.UIString("Paused on XMLHttpRequest");
+                subText.textContent = details.auxData["url"] || "";
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Exception) {
+                var description = details.auxData["description"] || details.auxData["value"] || "";
+                mainText.textContent = WebInspector.UIString("Paused on exception");
+                subText.textContent = description.split("\n", 1)[0];
+                status.title = description;
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.PromiseRejection) {
+                var description = details.auxData["description"] || "";
+                mainText.textContent = WebInspector.UIString("Paused on promise rejection");
+                subText.textContent = description.split("\n", 1)[0];
+                status.title = description;
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.Assert) {
+                mainText.textContent = WebInspector.UIString("Paused on assertion");
+            } else if (details.reason === WebInspector.DebuggerModel.BreakReason.DebugCommand) {
+                mainText.textContent = WebInspector.UIString("Paused on debugged function");
+            } else if (details.callFrames.length) {
+                var uiLocation = details && details.callFrames.length ? WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) : null;
+                var breakpoint = uiLocation ? WebInspector.breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : null;
+                if (breakpoint)
+                    mainText.textContent = WebInspector.UIString("Paused on breakpoint");
+                else
+                    mainText.textContent = WebInspector.UIString("Debugger paused");
+            } else {
+                console.warn("ScriptsPanel paused, but callFrames.length is zero."); // TODO remove this once we understand this case better
+            }
+
+            var errorLike = details.reason === WebInspector.DebuggerModel.BreakReason.Exception || details.reason === WebInspector.DebuggerModel.BreakReason.PromiseRejection || details.reason === WebInspector.DebuggerModel.BreakReason.Assert;
+            status.classList.toggle("error-reason", errorLike);
+            status.appendChild(mainText);
+            status.appendChild(subText);
+            mainText.classList.add("status-main");
+            subText.classList.add("status-sub");
+        }
     },
 
     _clearInterface: function()
     {
         this._sourcesView.clearCurrentExecutionLine();
-        this._updateDebuggerButtons();
+        this._updateDebuggerButtonsAndStatus();
         WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, null);
 
         if (this._switchToPausedTargetTimeout)
@@ -1061,6 +1114,7 @@ WebInspector.SourcesPanel.prototype = {
         this._sidebarPaneStack = WebInspector.viewManager.createStackLocation(this._revealDebuggerSidebar.bind(this));
         this._sidebarPaneStack.widget().element.classList.add("overflow-auto");
         this._sidebarPaneStack.widget().show(vbox.element);
+        this._sidebarPaneStack.widget().element.appendChild(this._debugStatusMessageElement);
         vbox.element.appendChild(this._debugToolbar.element);
 
         if (this._threadsSidebarPane)