DevTools: hoist debugger paused reason to top

third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

Index: third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
index 42654145de2d4c71d8d5678a69f01c64e2bd5682..08d86359a93823309e4ba9ace3945bdea4f944dd 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
@@ -52,10 +52,10 @@ WebInspector.DOMBreakpointsSidebarPane = function()
     this._breakpointTypeLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString("Attribute Modified");
     this._breakpointTypeLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString("Node Removed");
 
-    this._contextMenuLabels = {};
-    this._contextMenuLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString.capitalize("Subtree ^modifications");
-    this._contextMenuLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString.capitalize("Attributes ^modifications");
-    this._contextMenuLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString.capitalize("Node ^removal");
+    this._breakpointTypeNouns = {};
+    this._breakpointTypeNouns[this._breakpointTypes.SubtreeModified] = WebInspector.UIString.capitalize("Subtree ^modifications");
+    this._breakpointTypeNouns[this._breakpointTypes.AttributeModified] = WebInspector.UIString.capitalize("Attribute ^modifications");
+    this._breakpointTypeNouns[this._breakpointTypes.NodeRemoved] = WebInspector.UIString.capitalize("Node ^removal");
 
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
     this._update();
@@ -92,7 +92,7 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
         var breakpointsMenu = createSubMenu ? contextMenu.appendSubMenuItem(WebInspector.UIString("Break on...")) : contextMenu;
         for (var key in this._breakpointTypes) {
             var type = this._breakpointTypes[key];
-            var label = this._contextMenuLabels[type];
+            var label = this._breakpointTypeNouns[type];
             breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints.has(type));
         }
     },
@@ -129,40 +129,33 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      * @param {!WebInspector.DebuggerPausedDetails} details
      * @return {!Element}
      */
-    createBreakpointHitStatusMessage: function(details)
+    createBreakpointHitMessage: function(details)
     {
+        var messageWrapper = createElement("span");
+        var mainElement = messageWrapper.createChild("div", "status-main");
         var auxData = /** @type {!Object} */ (details.auxData);
-        var message = "Paused on a \"%s\" breakpoint.";
-        var substitutions = [];
-        substitutions.push(this._breakpointTypeLabels[auxData["type"]]);
+        mainElement.textContent = String.sprintf("Paused on %s", this._breakpointTypeNouns[auxData["type"]]);
 
         var domModel = WebInspector.DOMModel.fromTarget(details.target());
-        if (!domModel)
-            return WebInspector.formatLocalized(message, substitutions);
-
-        var node = domModel.nodeForId(auxData["nodeId"]);
-        var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        substitutions.push(linkifiedNode);
-
-        var targetNode = auxData["targetNodeId"] ? domModel.nodeForId(auxData["targetNodeId"]) : null;
-        var targetNodeLink = targetNode ? WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode) : "";
-
-        if (auxData.type === this._breakpointTypes.SubtreeModified) {
-            if (auxData["insertion"]) {
-                if (targetNode !== node) {
-                    message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to its descendant %s.";
-                    substitutions.push(targetNodeLink);
-                } else
-                    message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to that node.";
-            } else {
-                message = "Paused on a \"%s\" breakpoint set on %s, because its descendant %s was removed.";
-                substitutions.push(targetNodeLink);
+        if (domModel) {
+            var subElement = messageWrapper.createChild("div", "status-sub");
+            var node = domModel.nodeForId(auxData["nodeId"]);
+            var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+            subElement.appendChild(linkifiedNode);
+
+            var targetNode = auxData["targetNodeId"] ? domModel.nodeForId(auxData["targetNodeId"]) : null;
+            var targetNodeLink = targetNode ? WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode) : "";
+            var message;
+            if (auxData.type === this._breakpointTypes.SubtreeModified) {
+                if (auxData["insertion"])
+                    message = targetNode === node ? "Child %s added" : "Descendant %s added";
+                else
+                    message = "Descendant %s removed";
+                subElement.appendChild(createElement("br"));
+                subElement.appendChild(WebInspector.formatLocalized(message, [targetNodeLink]));
             }
-        } else {
-            message = "Paused on a \"%s\" breakpoint set on %s.";
         }
-
-        return WebInspector.formatLocalized(message, substitutions);
+        return messageWrapper;
     },
 
     _nodeRemoved: function(event)