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..3d80a37f5591c471b1340de48dd80875b2acbdc9 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,43 @@ WebInspector.DOMBreakpointsSidebarPane.prototype = {
      * @param {!WebInspector.DebuggerPausedDetails} details
      * @return {!Element}
      */
-    createBreakpointHitStatusMessage: function(details)
+    createBreakpointHitMainMessage: function(details)
     {
         var auxData = /** @type {!Object} */ (details.auxData);
-        var message = "Paused on a \"%s\" breakpoint.";
-        var substitutions = [];
-        substitutions.push(this._breakpointTypeLabels[auxData["type"]]);
+        var message = String.sprintf("Paused on %s", this._breakpointTypeNouns[auxData["type"]]);
+        var element = createElement("div");
+        element.textContent = message;
+        return element;
+    },
 
+    /**
+     * @param {!WebInspector.DebuggerPausedDetails} details
+     * @return {!Element}
+     */
+    createBreakpointHitSubMessage: function(details)

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

you don't need two functions - let's keep them as one

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

Done.

+    {
+        var element = createElement("div");
         var domModel = WebInspector.DOMModel.fromTarget(details.target());
         if (!domModel)
-            return WebInspector.formatLocalized(message, substitutions);
+            return element;
 
+        var auxData = /** @type {!Object} */ (details.auxData);
         var node = domModel.nodeForId(auxData["nodeId"]);
         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        substitutions.push(linkifiedNode);
+        element.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"]) {
-                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);
-            }
-        } else {
-            message = "Paused on a \"%s\" breakpoint set on %s.";
+            if (auxData["insertion"])
+                message = targetNode === node ? "Child %s added" : "Descendant %s added";
+            else
+                message = "Descendant %s removed";
+            element.appendChild(createElement("br"));
+            element.appendChild(WebInspector.formatLocalized(message, [targetNodeLink]));
         }
-
-        return WebInspector.formatLocalized(message, substitutions);
+        return element;
     },
 
     _nodeRemoved: function(event)