DevTools: hoist debugger paused reason to top

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

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2011 Google 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
@@ skipping 32 matching lines @@
 
     this._runSnippetAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.run-snippet"));
     this._togglePauseAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.toggle-pause"));
     this._stepOverAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-over"));
     this._stepIntoAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-into"));
     this._stepOutAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.step-out"));
     this._toggleBreakpointsActiveAction = /** @type {!WebInspector.Action }*/ (WebInspector.actionRegistry.action("debugger.toggle-breakpoints-active"));
 
     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);
     this._splitWidget.enableShowModeSaving();
     this._splitWidget.show(this.element);
 
     // Create scripts navigator
     const initialNavigatorWidth = 225;
     this.editorView = new WebInspector.SplitWidget(true, false, "sourcesPanelNavigatorSplitViewState", initialNavigatorWidth);
     this.editorView.enableShowModeSaving();
@@ skipping 23 matching lines @@
     this._threadsSidebarPane = null;
     this._watchSidebarPane = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.watch"));
     // TODO: Force installing listeners from the model, not the UI.
     self.runtime.sharedInstance(WebInspector.XHRBreakpointsSidebarPane);
     this._callstackPane = self.runtime.sharedInstance(WebInspector.CallStackSidebarPane);
     this._callstackPane.registerShortcuts(this.registerShortcuts.bind(this));
 
     WebInspector.moduleSetting("sidebarPosition").addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
 
-    this._updateDebuggerButtons();
+    this._updateDebuggerButtonsAndStatus();
     this._pauseOnExceptionEnabledChanged();
     WebInspector.moduleSetting("pauseOnExceptionEnabled").addChangeListener(this._pauseOnExceptionEnabledChanged, this);
 
     this._liveLocationPool = new WebInspector.LiveLocationPool();
 
     this._setTarget(WebInspector.context.flavor(WebInspector.Target));
     WebInspector.breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
     WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._onCurrentTargetChanged, this);
     WebInspector.context.addFlavorChangeListener(WebInspector.DebuggerModel.CallFrame, this._callFrameChanged, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerWasEnabled, this._debuggerWasEnabled, this);
@@ skipping 154 matching lines @@
         else if (!this._paused)
             WebInspector.context.setFlavor(WebInspector.Target, details.target());
     },
 
     /**
      * @param {!WebInspector.DebuggerPausedDetails} details
      */
     _showDebuggerPausedDetails: function(details)
     {
         this._paused = true;
-        this._updateDebuggerButtons();
+        this._updateDebuggerButtonsAndStatus();
         WebInspector.context.setFlavor(WebInspector.DebuggerPausedDetails, details);
         this._toggleDebuggerSidebarButton.setEnabled(false);
         window.focus();
         InspectorFrontendHost.bringToFront();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _debuggerResumed: function(event)
@@ skipping 10 matching lines @@
 
     /**
      * @param {!WebInspector.Event} event
      */
     _debuggerWasEnabled: function(event)
     {
         var target = /** @type {!WebInspector.Target} */  (event.target.target());
         if (WebInspector.context.flavor(WebInspector.Target) !== target)
             return;
 
-        this._updateDebuggerButtons();
+        this._updateDebuggerButtonsAndStatus();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _debuggerReset: function(event)
     {
         this._debuggerResumed(event);
     },
 
@@ skipping 132 matching lines @@
     },
 
     _pauseOnExceptionEnabledChanged: function()
     {
         var enabled = WebInspector.moduleSetting("pauseOnExceptionEnabled").get();
         this._pauseOnExceptionButton.setToggled(enabled);
         this._pauseOnExceptionButton.setTitle(WebInspector.UIString(enabled ? "Don't pause on exceptions" : "Pause on exceptions"));
         this._debugToolbarDrawer.classList.toggle("expanded", enabled);
     },
 
-    _updateDebuggerButtons: function()
+    _updateDebuggerButtonsAndStatus: function()
     {
         var currentTarget = WebInspector.context.flavor(WebInspector.Target);
         var currentDebuggerModel = WebInspector.DebuggerModel.fromTarget(currentTarget);
         if (!currentDebuggerModel) {
             this._togglePauseAction.setEnabled(false);
             this._stepOverAction.setEnabled(false);
             this._stepIntoAction.setEnabled(false);
             this._stepOutAction.setEnabled(false);
         } else if (this._paused) {
             this._togglePauseAction.setToggled(true);
             this._togglePauseAction.setEnabled(true);
             this._stepOverAction.setEnabled(true);
             this._stepIntoAction.setEnabled(true);
             this._stepOutAction.setEnabled(true);
         } else {
             this._togglePauseAction.setToggled(false);
             this._togglePauseAction.setEnabled(!currentDebuggerModel.isPausing());
             this._stepOverAction.setEnabled(false);
             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)
             clearTimeout(this._switchToPausedTargetTimeout);
         this._liveLocationPool.disposeAll();
     },
 
     /**
      * @param {!WebInspector.DebuggerModel} debuggerModel
      */
@@ skipping 561 matching lines @@
 
         WebInspector.SourcesPanel.updateResizer(this);
 
         // Create vertical box with stack.
         var vbox = new WebInspector.VBox();
         vbox.element.appendChild(this._debugToolbarDrawer);
         vbox.setMinimumAndPreferredSizes(25, 25, WebInspector.SourcesPanel.minToolbarWidth, 100);
         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)
             this._sidebarPaneStack.showView(this._threadsSidebarPane);
 
         if (!vertically)
             this._sidebarPaneStack.appendView(this._watchSidebarPane);
 
         this._sidebarPaneStack.showView(this._callstackPane);
         var jsBreakpoints = /** @type {!WebInspector.View} */ (WebInspector.viewManager.view("sources.jsBreakpoints"));
@@ skipping 311 matching lines @@
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @return {boolean}
  */
 WebInspector.SourcesPanel.WrapperView.isShowing = function()
 {
     return !!WebInspector.SourcesPanel.WrapperView._instance && WebInspector.SourcesPanel.WrapperView._instance.isShowing();
 }