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

   1 /*
   2  * Copyright (C) 2011 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {WebInspector.NativeBreakpointsSidebarPane}
  34  */
  35 WebInspector.DOMBreakpointsSidebarPane = function()
  36 {
  37     WebInspector.NativeBreakpointsSidebarPane.call(this, WebInspector.UIString("DOM Breakpoints"));
  38
  39     this._breakpointElements = {};
  40
  41     this._breakpointTypes = {
  42         SubtreeModified: "subtree-modified",
  43         AttributeModified: "attribute-modified",
  44         NodeRemoved: "node-removed"
  45     };
  46     this._breakpointTypeLabels = {};
  47     this._breakpointTypeLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString("Subtree Modified");
  48     this._breakpointTypeLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString("Attribute Modified");
  49     this._breakpointTypeLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString("Node Removed");
  50
  51     this._contextMenuLabels = {};
  52     this._contextMenuLabels[this._breakpointTypes.SubtreeModified] = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Subtree modifications" : "Subtree Modifications");
  53     this._contextMenuLabels[this._breakpointTypes.AttributeModified] = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Attributes modifications" : "Attributes Modifications");
  54     this._contextMenuLabels[this._breakpointTypes.NodeRemoved] = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Node removal" : "Node Removal");
  55
  56     WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.InspectedURLChanged, this._inspectedURLChanged, this);
  57     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.NodeRemoved, this._nodeRemoved, this);
  58 }
  59
  60 WebInspector.DOMBreakpointsSidebarPane.prototype = {
  61     _inspectedURLChanged: function(event)
  62     {
  63         this._breakpointElements = {};
  64         this.reset();
  65         var url = /** @type {string} */ (event.data);
  66         this._inspectedURL = url.removeURLFragment();
  67     },
  68
  69     /**
  70      * @param {!WebInspector.DOMNode} node
  71      * @param {!WebInspector.ContextMenu} contextMenu
  72      */
  73     populateNodeContextMenu: function(node, contextMenu)
  74     {
  75         if (node.pseudoType())
  76             return;
  77
  78         var nodeBreakpoints = {};
  79         for (var id in this._breakpointElements) {
  80             var element = this._breakpointElements[id];
  81             if (element._node === node && element._checkboxElement.checked)
  82                 nodeBreakpoints[element._type] = true;
  83         }
  84
  85         /**
  86          * @param {string} type
  87          * @this {WebInspector.DOMBreakpointsSidebarPane}
  88          */
  89         function toggleBreakpoint(type)
  90         {
  91             if (!nodeBreakpoints[type])
  92                 this._setBreakpoint(node, type, true);
  93             else
  94                 this._removeBreakpoint(node, type);
  95             this._saveBreakpoints();
  96         }
  97
  98         var breakPointSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Break on..."));
  99         for (var key in this._breakpointTypes) {
 100             var type = this._breakpointTypes[key];
 101             var label = this._contextMenuLabels[type];
 102             breakPointSubMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints[type]);
 103         }
 104     },
 105
 106     /**
 107      * @param {!WebInspector.DebuggerPausedDetails} details
 108      * @param {function(!Element)} callback
 109      */
 110     createBreakpointHitStatusMessage: function(details, callback)
 111     {
 112         var auxData = /** @type {!Object} */ (details.auxData);
 113         var domModel = details.target().domModel;
 114         if (auxData.type === this._breakpointTypes.SubtreeModified) {
 115             var targetNodeObject = details.target().runtimeModel.createRemoteObject(auxData["targetNode"]);
 116             targetNodeObject.pushNodeToFrontend(didPushNodeToFrontend.bind(this));
 117         } else {
 118             this._doCreateBreakpointHitStatusMessage(auxData, domModel.nodeForId(auxData.nodeId), null, callback);
 119         }
 120
 121         /**
 122          * @param {?WebInspector.DOMNode} targetNode
 123          * @this {WebInspector.DOMBreakpointsSidebarPane}
 124          */
 125         function didPushNodeToFrontend(targetNode)
 126         {
 127             if (targetNode)
 128                 targetNodeObject.release();
 129             this._doCreateBreakpointHitStatusMessage(auxData, domModel.nodeForId(auxData.nodeId), targetNode, callback);
 130         }
 131     },
 132
 133     /**
 134      * @param {!Object} auxData
 135      * @param {?WebInspector.DOMNode} node
 136      * @param {?WebInspector.DOMNode} targetNode
 137      * @param {function(!Element)} callback
 138      */
 139     _doCreateBreakpointHitStatusMessage: function(auxData, node, targetNode, callback)
 140     {
 141         var message;
 142         var typeLabel = this._breakpointTypeLabels[auxData.type];
 143         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
 144         var substitutions = [typeLabel, linkifiedNode];
 145         var targetNodeLink = "";
 146         if (targetNode)
 147             targetNodeLink = WebInspector.DOMPresentationUtils.linkifyNodeReference(targetNode);
 148
 149         if (auxData.type === this._breakpointTypes.SubtreeModified) {
 150             if (auxData.insertion) {
 151                 if (targetNode !== node) {
 152                     message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to its descendant %s.";
 153                     substitutions.push(targetNodeLink);
 154                 } else
 155                     message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to that node.";
 156             } else {
 157                 message = "Paused on a \"%s\" breakpoint set on %s, because its descendant %s was removed.";
 158                 substitutions.push(targetNodeLink);
 159             }
 160         } else
 161             message = "Paused on a \"%s\" breakpoint set on %s.";
 162
 163         var element = createElement("span");
 164         var formatters = {
 165             s: function(substitution)
 166             {
 167                 return substitution;
 168             }
 169         };
 170         function append(a, b)
 171         {
 172             if (typeof b === "string")
 173                 b = createTextNode(b);
 174             element.appendChild(b);
 175         }
 176         WebInspector.formatLocalized(message, substitutions, formatters, "", append);
 177
 178         callback(element);
 179     },
 180
 181     _nodeRemoved: function(event)
 182     {
 183         var node = event.data.node;
 184         this._removeBreakpointsForNode(event.data.node);
 185         var children = node.children();
 186         if (!children)
 187             return;
 188         for (var i = 0; i < children.length; ++i)
 189             this._removeBreakpointsForNode(children[i]);
 190         this._saveBreakpoints();
 191     },
 192
 193     /**
 194      * @param {!WebInspector.DOMNode} node
 195      */
 196     _removeBreakpointsForNode: function(node)
 197     {
 198         for (var id in this._breakpointElements) {
 199             var element = this._breakpointElements[id];
 200             if (element._node === node)
 201                 this._removeBreakpoint(element._node, element._type);
 202         }
 203     },
 204
 205     /**
 206      * @param {!WebInspector.DOMNode} node
 207      * @param {string} type
 208      * @param {boolean} enabled
 209      */
 210     _setBreakpoint: function(node, type, enabled)
 211     {
 212         var breakpointId = this._createBreakpointId(node.id, type);
 213         var breakpointElement = this._breakpointElements[breakpointId];
 214         if (!breakpointElement) {
 215             breakpointElement = this._createBreakpointElement(node, type, enabled);
 216             this._breakpointElements[breakpointId] = breakpointElement;
 217         } else {
 218             breakpointElement._checkboxElement.checked = enabled;
 219         }
 220         if (enabled)
 221             DOMDebuggerAgent.setDOMBreakpoint(node.id, type);
 222     },
 223
 224     /**
 225      * @param {!WebInspector.DOMNode} node
 226      * @param {string} type
 227      * @param {boolean} enabled
 228      */
 229     _createBreakpointElement: function(node, type, enabled)
 230     {
 231         var element = createElement("li");
 232         element._node = node;
 233         element._type = type;
 234         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 235
 236         var checkboxElement = createElement("input");
 237         checkboxElement.className = "checkbox-elem";
 238         checkboxElement.type = "checkbox";
 239         checkboxElement.checked = enabled;
 240         checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
 241         element._checkboxElement = checkboxElement;
 242         element.appendChild(checkboxElement);
 243
 244         var labelElement = createElement("span");
 245         element.appendChild(labelElement);
 246
 247         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
 248         linkifiedNode.classList.add("monospace");
 249         labelElement.appendChild(linkifiedNode);
 250
 251         var description = createElement("div");
 252         description.className = "source-text";
 253         description.textContent = this._breakpointTypeLabels[type];
 254         labelElement.appendChild(description);
 255
 256         var currentElement = this.listElement.firstChild;
 257         while (currentElement) {
 258             if (currentElement._type && currentElement._type < element._type)
 259                 break;
 260             currentElement = currentElement.nextSibling;
 261         }
 262         this.addListElement(element, currentElement);
 263         return element;
 264     },
 265
 266     _removeAllBreakpoints: function()
 267     {
 268         for (var id in this._breakpointElements) {
 269             var element = this._breakpointElements[id];
 270             this._removeBreakpoint(element._node, element._type);
 271         }
 272         this._saveBreakpoints();
 273     },
 274
 275     /**
 276      * @param {!WebInspector.DOMNode} node
 277      * @param {string} type
 278      */
 279     _removeBreakpoint: function(node, type)
 280     {
 281         var breakpointId = this._createBreakpointId(node.id, type);
 282         var element = this._breakpointElements[breakpointId];
 283         if (!element)
 284             return;
 285
 286         this.removeListElement(element);
 287         delete this._breakpointElements[breakpointId];
 288         if (element._checkboxElement.checked)
 289             DOMDebuggerAgent.removeDOMBreakpoint(node.id, type);
 290     },
 291
 292     /**
 293      * @param {!WebInspector.DOMNode} node
 294      * @param {string} type
 295      * @param {!Event} event
 296      */
 297     _contextMenu: function(node, type, event)
 298     {
 299         var contextMenu = new WebInspector.ContextMenu(event);
 300
 301         /**
 302          * @this {WebInspector.DOMBreakpointsSidebarPane}
 303          */
 304         function removeBreakpoint()
 305         {
 306             this._removeBreakpoint(node, type);
 307             this._saveBreakpoints();
 308         }
 309         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove breakpoint" : "Remove Breakpoint"), removeBreakpoint.bind(this));
 310         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove all DOM breakpoints" : "Remove All DOM Breakpoints"), this._removeAllBreakpoints.bind(this));
 311         contextMenu.show();
 312     },
 313
 314     /**
 315      * @param {!WebInspector.DOMNode} node
 316      * @param {string} type
 317      * @param {!Event} event
 318      */
 319     _checkboxClicked: function(node, type, event)
 320     {
 321         if (event.target.checked)
 322             DOMDebuggerAgent.setDOMBreakpoint(node.id, type);
 323         else
 324             DOMDebuggerAgent.removeDOMBreakpoint(node.id, type);
 325         this._saveBreakpoints();
 326     },
 327
 328     highlightBreakpoint: function(auxData)
 329     {
 330         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
 331         var element = this._breakpointElements[breakpointId];
 332         if (!element)
 333             return;
 334         this.expand();
 335         element.classList.add("breakpoint-hit");
 336         this._highlightedElement = element;
 337     },
 338
 339     clearBreakpointHighlight: function()
 340     {
 341         if (this._highlightedElement) {
 342             this._highlightedElement.classList.remove("breakpoint-hit");
 343             delete this._highlightedElement;
 344         }
 345     },
 346
 347     /**
 348      * @param {number} nodeId
 349      * @param {string} type
 350      */
 351     _createBreakpointId: function(nodeId, type)
 352     {
 353         return nodeId + ":" + type;
 354     },
 355
 356     _saveBreakpoints: function()
 357     {
 358         var breakpoints = [];
 359         var storedBreakpoints = WebInspector.settings.domBreakpoints.get();
 360         for (var i = 0; i < storedBreakpoints.length; ++i) {
 361             var breakpoint = storedBreakpoints[i];
 362             if (breakpoint.url !== this._inspectedURL)
 363                 breakpoints.push(breakpoint);
 364         }
 365         for (var id in this._breakpointElements) {
 366             var element = this._breakpointElements[id];
 367             breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
 368         }
 369         WebInspector.settings.domBreakpoints.set(breakpoints);
 370     },
 371
 372     /**
 373      * @param {!WebInspector.Target} target
 374      */
 375     restoreBreakpoints: function(target)
 376     {
 377         var pathToBreakpoints = {};
 378
 379         /**
 380          * @param {string} path
 381          * @param {?DOMAgent.NodeId} nodeId
 382          * @this {WebInspector.DOMBreakpointsSidebarPane}
 383          */
 384         function didPushNodeByPathToFrontend(path, nodeId)
 385         {
 386             var node = nodeId ? target.domModel.nodeForId(nodeId) : null;
 387             if (!node)
 388                 return;
 389
 390             var breakpoints = pathToBreakpoints[path];
 391             for (var i = 0; i < breakpoints.length; ++i)
 392                 this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
 393         }
 394
 395         var breakpoints = WebInspector.settings.domBreakpoints.get();
 396         for (var i = 0; i < breakpoints.length; ++i) {
 397             var breakpoint = breakpoints[i];
 398             if (breakpoint.url !== this._inspectedURL)
 399                 continue;
 400             var path = breakpoint.path;
 401             if (!pathToBreakpoints[path]) {
 402                 pathToBreakpoints[path] = [];
 403                 target.domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
 404             }
 405             pathToBreakpoints[path].push(breakpoint);
 406         }
 407     },
 408
 409     /**
 410      * @param {!WebInspector.Panel} panel
 411      * @return {!WebInspector.DOMBreakpointsSidebarPane.Proxy}
 412      */
 413     createProxy: function(panel)
 414     {
 415         var proxy = new WebInspector.DOMBreakpointsSidebarPane.Proxy(this, panel);
 416         if (!this._proxies)
 417             this._proxies = [];
 418         this._proxies.push(proxy);
 419         return proxy;
 420     },
 421
 422     onContentReady: function()
 423     {
 424         for (var i = 0; i != this._proxies.length; i++)
 425             this._proxies[i].onContentReady();
 426     },
 427
 428     __proto__: WebInspector.NativeBreakpointsSidebarPane.prototype
 429 }
 430
 431 /**
 432  * @constructor
 433  * @extends {WebInspector.SidebarPane}
 434  * @param {!WebInspector.DOMBreakpointsSidebarPane} pane
 435  * @param {!WebInspector.Panel} panel
 436  */
 437 WebInspector.DOMBreakpointsSidebarPane.Proxy = function(pane, panel)
 438 {
 439     WebInspector.View.__assert(!pane.titleElement.firstChild, "Cannot create proxy for a sidebar pane with a toolbar");
 440
 441     WebInspector.SidebarPane.call(this, pane.title());
 442     this.registerRequiredCSS("components/breakpointsList.css");
 443
 444     this._wrappedPane = pane;
 445     this._panel = panel;
 446
 447     this.bodyElement.remove();
 448     this.bodyElement = this._wrappedPane.bodyElement;
 449 }
 450
 451 WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
 452     expand: function()
 453     {
 454         this._wrappedPane.expand();
 455     },
 456
 457     onContentReady: function()
 458     {
 459         if (this._panel.isShowing())
 460             this._reattachBody();
 461
 462         WebInspector.SidebarPane.prototype.onContentReady.call(this);
 463     },
 464
 465     wasShown: function()
 466     {
 467         WebInspector.SidebarPane.prototype.wasShown.call(this);
 468         this._reattachBody();
 469     },
 470
 471     _reattachBody: function()
 472     {
 473         if (this.bodyElement.parentNode !== this.element)
 474             this.element.appendChild(this.bodyElement);
 475     },
 476
 477     __proto__: WebInspector.SidebarPane.prototype
 478 }
 479
 480 /**
 481  * @type {!WebInspector.DOMBreakpointsSidebarPane}
 482  */
 483 WebInspector.domBreakpointsSidebarPane;