DevTools: hoist debugger paused reason to top

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

 /*
  * 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 24 matching lines @@
  */
 WebInspector.DOMBreakpointsSidebarPane = function()
 {
     WebInspector.BreakpointsSidebarPaneBase.call(this);
     this._domBreakpointsSetting = WebInspector.settings.createLocalSetting("domBreakpoints", []);
     this.listElement.classList.add("dom-breakpoints-list");
 
     /** @type {!Map<string, !Element>} */
     this._breakpointElements = new Map();
 
-    this._breakpointTypes = {
-        SubtreeModified: "subtree-modified",
-        AttributeModified: "attribute-modified",
-        NodeRemoved: "node-removed"
-    };
-    this._breakpointTypeLabels = {};
-    this._breakpointTypeLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString("Subtree Modified");
-    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");
-
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
     this._update();
 }
 
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes = {
+    SubtreeModified: "subtree-modified",
+    AttributeModified: "attribute-modified",
+    NodeRemoved: "node-removed"
+};
+
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels = {
+    "subtree-modified": WebInspector.UIString("Subtree Modified"),
+    "attribute-modified": WebInspector.UIString("Attribute Modified"),
+    "node-removed": WebInspector.UIString("Node Removed")
+};
+
+WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns = {
+    "subtree-modified": WebInspector.UIString.capitalize("Subtree ^modifications"),
+    "attribute-modified": WebInspector.UIString.capitalize("Attribute ^modifications"),
+    "node-removed": WebInspector.UIString.capitalize("Node ^removal")
+}
+
 WebInspector.DOMBreakpointsSidebarPane.Marker = "breakpoint-marker";
 
 WebInspector.DOMBreakpointsSidebarPane.prototype = {
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {boolean} createSubMenu
      */
     populateNodeContextMenu: function(node, contextMenu, createSubMenu)
     {
         if (node.pseudoType())
             return;
 
         var nodeBreakpoints = this._nodeBreakpoints(node);
 
         /**
          * @param {!DOMDebuggerAgent.DOMBreakpointType} type
          * @this {WebInspector.DOMBreakpointsSidebarPane}
          */
         function toggleBreakpoint(type)
         {
             if (!nodeBreakpoints.has(type))
                 this._setBreakpoint(node, type, true);
             else
                 this._removeBreakpoint(node, type);
             this._saveBreakpoints();
         }
 
         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];
+        for (var key in WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes) {
+            var type = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypes[key];
+            var label = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[type];
             breakpointsMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints.has(type));
         }
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @return {!Set<!DOMDebuggerAgent.DOMBreakpointType>}
      */
     _nodeBreakpoints: function(node)
     {
@@ skipping 12 matching lines @@
      */
     hasBreakpoints: function(node)
     {
         for (var element of this._breakpointElements.values()) {
             if (element._node === node && element._checkboxElement.checked)
                 return true;
         }
         return false;
     },
 
-    /**
-     * @param {!WebInspector.DebuggerPausedDetails} details
-     * @return {!Element}
-     */
-    createBreakpointHitStatusMessage: function(details)
-    {
-        var auxData = /** @type {!Object} */ (details.auxData);
-        var message = "Paused on a \"%s\" breakpoint.";
-        var substitutions = [];
-        substitutions.push(this._breakpointTypeLabels[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);
-            }
-        } else {
-            message = "Paused on a \"%s\" breakpoint set on %s.";
-        }
-
-        return WebInspector.formatLocalized(message, substitutions);
-    },
-
     _nodeRemoved: function(event)
     {
         var node = event.data.node;
         this._removeBreakpointsForNode(event.data.node);
         var children = node.children();
         if (!children)
             return;
         for (var i = 0; i < children.length; ++i)
             this._removeBreakpointsForNode(children[i]);
         this._saveBreakpoints();
@@ skipping 50 matching lines @@
 
         var labelElement = createElementWithClass("div", "dom-breakpoint");
         element.appendChild(labelElement);
 
         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
         linkifiedNode.classList.add("monospace");
         linkifiedNode.style.display = "block";
         labelElement.appendChild(linkifiedNode);
 
         var description = createElement("div");
-        description.textContent = this._breakpointTypeLabels[type];
+        description.textContent = WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeLabels[type];
         labelElement.appendChild(description);
 
         var currentElement = this.listElement.firstChild;
         while (currentElement) {
             if (currentElement._type && currentElement._type < element._type)
                 break;
             currentElement = currentElement.nextSibling;
         }
         this.addListElement(element, currentElement);
         return element;
@@ skipping 151 matching lines @@
                 domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
             }
             pathToBreakpoints.get(path).push(breakpoint);
         }
     },
 
     __proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
 }
 
 /**
+ * @param {!WebInspector.DebuggerPausedDetails} details
+ * @return {!Element}
+ */
+WebInspector.DOMBreakpointsSidebarPane.createBreakpointHitMessage = function(details)
+{
+    var messageWrapper = createElement("span");
+    var mainElement = messageWrapper.createChild("div", "status-main");
+    var auxData = /** @type {!Object} */ (details.auxData);
+    mainElement.textContent = String.sprintf("Paused on %s", WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[auxData["type"]]);
+
+    var domModel = WebInspector.DOMModel.fromTarget(details.target());
+    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 === WebInspector.DOMBreakpointsSidebarPane.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]));
+        }
+    }
+    return messageWrapper;
+}
+
+/**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.DOMBreakpointsSidebarPane.Proxy = function()
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("components/breakpointsList.css");
 }
 
 WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
     wasShown: function()
     {
         WebInspector.SimpleView.prototype.wasShown.call(this);
         var pane = WebInspector.domBreakpointsSidebarPane;
         if (pane.element.parentNode !== this.element)
             pane.show(this.element);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @type {!WebInspector.DOMBreakpointsSidebarPane}
  */
 WebInspector.domBreakpointsSidebarPane;