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.addModelListener(WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.EventTypes.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)
  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 = document.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 = document.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     _removeBreakpointsForNode: function(node)
 194     {
 195         for (var id in this._breakpointElements) {
 196             var element = this._breakpointElements[id];
 197             if (element._node === node)
 198                 this._removeBreakpoint(element._node, element._type);
 199         }
 200     },
 201
 202     _setBreakpoint: function(node, type, enabled)
 203     {
 204         var breakpointId = this._createBreakpointId(node.id, type);
 205         if (breakpointId in this._breakpointElements)
 206             return;
 207
 208         var element = document.createElement("li");
 209         element._node = node;
 210         element._type = type;
 211         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 212
 213         var checkboxElement = document.createElement("input");
 214         checkboxElement.className = "checkbox-elem";
 215         checkboxElement.type = "checkbox";
 216         checkboxElement.checked = enabled;
 217         checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
 218         element._checkboxElement = checkboxElement;
 219         element.appendChild(checkboxElement);
 220
 221         var labelElement = document.createElement("span");
 222         element.appendChild(labelElement);
 223
 224         var linkifiedNode = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
 225         linkifiedNode.classList.add("monospace");
 226         labelElement.appendChild(linkifiedNode);
 227
 228         var description = document.createElement("div");
 229         description.className = "source-text";
 230         description.textContent = this._breakpointTypeLabels[type];
 231         labelElement.appendChild(description);
 232
 233         var currentElement = this.listElement.firstChild;
 234         while (currentElement) {
 235             if (currentElement._type && currentElement._type < element._type)
 236                 break;
 237             currentElement = currentElement.nextSibling;
 238         }
 239         this.addListElement(element, currentElement);
 240         this._breakpointElements[breakpointId] = element;
 241         if (enabled)
 242             DOMDebuggerAgent.setDOMBreakpoint(node.id, type);
 243     },
 244
 245     _removeAllBreakpoints: function()
 246     {
 247         for (var id in this._breakpointElements) {
 248             var element = this._breakpointElements[id];
 249             this._removeBreakpoint(element._node, element._type);
 250         }
 251         this._saveBreakpoints();
 252     },
 253
 254     _removeBreakpoint: function(node, type)
 255     {
 256         var breakpointId = this._createBreakpointId(node.id, type);
 257         var element = this._breakpointElements[breakpointId];
 258         if (!element)
 259             return;
 260
 261         this.removeListElement(element);
 262         delete this._breakpointElements[breakpointId];
 263         if (element._checkboxElement.checked)
 264             DOMDebuggerAgent.removeDOMBreakpoint(node.id, type);
 265     },
 266
 267     _contextMenu: function(node, type, event)
 268     {
 269         var contextMenu = new WebInspector.ContextMenu(event);
 270
 271         /**
 272          * @this {WebInspector.DOMBreakpointsSidebarPane}
 273          */
 274         function removeBreakpoint()
 275         {
 276             this._removeBreakpoint(node, type);
 277             this._saveBreakpoints();
 278         }
 279         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove breakpoint" : "Remove Breakpoint"), removeBreakpoint.bind(this));
 280         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Remove all DOM breakpoints" : "Remove All DOM Breakpoints"), this._removeAllBreakpoints.bind(this));
 281         contextMenu.show();
 282     },
 283
 284     _checkboxClicked: function(node, type, event)
 285     {
 286         if (event.target.checked)
 287             DOMDebuggerAgent.setDOMBreakpoint(node.id, type);
 288         else
 289             DOMDebuggerAgent.removeDOMBreakpoint(node.id, type);
 290         this._saveBreakpoints();
 291     },
 292
 293     highlightBreakpoint: function(auxData)
 294     {
 295         var breakpointId = this._createBreakpointId(auxData.nodeId, auxData.type);
 296         var element = this._breakpointElements[breakpointId];
 297         if (!element)
 298             return;
 299         this.expand();
 300         element.classList.add("breakpoint-hit");
 301         this._highlightedElement = element;
 302     },
 303
 304     clearBreakpointHighlight: function()
 305     {
 306         if (this._highlightedElement) {
 307             this._highlightedElement.classList.remove("breakpoint-hit");
 308             delete this._highlightedElement;
 309         }
 310     },
 311
 312     _createBreakpointId: function(nodeId, type)
 313     {
 314         return nodeId + ":" + type;
 315     },
 316
 317     _saveBreakpoints: function()
 318     {
 319         var breakpoints = [];
 320         var storedBreakpoints = WebInspector.settings.domBreakpoints.get();
 321         for (var i = 0; i < storedBreakpoints.length; ++i) {
 322             var breakpoint = storedBreakpoints[i];
 323             if (breakpoint.url !== this._inspectedURL)
 324                 breakpoints.push(breakpoint);
 325         }
 326         for (var id in this._breakpointElements) {
 327             var element = this._breakpointElements[id];
 328             breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
 329         }
 330         WebInspector.settings.domBreakpoints.set(breakpoints);
 331     },
 332
 333     /**
 334      * @param {!WebInspector.Target} target
 335      */
 336     restoreBreakpoints: function(target)
 337     {
 338         var pathToBreakpoints = {};
 339
 340         /**
 341          * @param {string} path
 342          * @param {?DOMAgent.NodeId} nodeId
 343          * @this {WebInspector.DOMBreakpointsSidebarPane}
 344          */
 345         function didPushNodeByPathToFrontend(path, nodeId)
 346         {
 347             var node = nodeId ? target.domModel.nodeForId(nodeId) : null;
 348             if (!node)
 349                 return;
 350
 351             var breakpoints = pathToBreakpoints[path];
 352             for (var i = 0; i < breakpoints.length; ++i)
 353                 this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
 354         }
 355
 356         var breakpoints = WebInspector.settings.domBreakpoints.get();
 357         for (var i = 0; i < breakpoints.length; ++i) {
 358             var breakpoint = breakpoints[i];
 359             if (breakpoint.url !== this._inspectedURL)
 360                 continue;
 361             var path = breakpoint.path;
 362             if (!pathToBreakpoints[path]) {
 363                 pathToBreakpoints[path] = [];
 364                 target.domModel.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
 365             }
 366             pathToBreakpoints[path].push(breakpoint);
 367         }
 368     },
 369
 370     /**
 371      * @param {!WebInspector.Panel} panel
 372      * @return {!WebInspector.DOMBreakpointsSidebarPane.Proxy}
 373      */
 374     createProxy: function(panel)
 375     {
 376         var proxy = new WebInspector.DOMBreakpointsSidebarPane.Proxy(this, panel);
 377         if (!this._proxies)
 378             this._proxies = [];
 379         this._proxies.push(proxy);
 380         return proxy;
 381     },
 382
 383     onContentReady: function()
 384     {
 385         for (var i = 0; i != this._proxies.length; i++)
 386             this._proxies[i].onContentReady();
 387     },
 388
 389     __proto__: WebInspector.NativeBreakpointsSidebarPane.prototype
 390 }
 391
 392 /**
 393  * @constructor
 394  * @extends {WebInspector.SidebarPane}
 395  * @param {!WebInspector.DOMBreakpointsSidebarPane} pane
 396  * @param {!WebInspector.Panel} panel
 397  */
 398 WebInspector.DOMBreakpointsSidebarPane.Proxy = function(pane, panel)
 399 {
 400     WebInspector.View.__assert(!pane.titleElement.firstChild, "Cannot create proxy for a sidebar pane with a toolbar");
 401
 402     WebInspector.SidebarPane.call(this, pane.title());
 403     this.registerRequiredCSS("breakpointsList.css");
 404
 405     this._wrappedPane = pane;
 406     this._panel = panel;
 407
 408     this.bodyElement.remove();
 409     this.bodyElement = this._wrappedPane.bodyElement;
 410 }
 411
 412 WebInspector.DOMBreakpointsSidebarPane.Proxy.prototype = {
 413     expand: function()
 414     {
 415         this._wrappedPane.expand();
 416     },
 417
 418     onContentReady: function()
 419     {
 420         if (this._panel.isShowing())
 421             this._reattachBody();
 422
 423         WebInspector.SidebarPane.prototype.onContentReady.call(this);
 424     },
 425
 426     wasShown: function()
 427     {
 428         WebInspector.SidebarPane.prototype.wasShown.call(this);
 429         this._reattachBody();
 430     },
 431
 432     _reattachBody: function()
 433     {
 434         if (this.bodyElement.parentNode !== this.element)
 435             this.element.appendChild(this.bodyElement);
 436     },
 437
 438     __proto__: WebInspector.SidebarPane.prototype
 439 }
 440
 441 /**
 442  * @type {!WebInspector.DOMBreakpointsSidebarPane}
 443  */
 444 WebInspector.domBreakpointsSidebarPane;