Source/WebCore/inspector/front-end/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 WebInspector.DOMBreakpointsSidebarPane = function()
  32 {
  33     WebInspector.NativeBreakpointsSidebarPane.call(this, WebInspector.UIString("DOM Breakpoints"));
  34
  35     this._breakpointElements = {};
  36
  37     this._breakpointTypes = {
  38         SubtreeModified: 0,
  39         AttributeModified: 1,
  40         NodeRemoved: 2
  41     };
  42     this._breakpointTypeLabels = [
  43         WebInspector.UIString("Subtree Modified"),
  44         WebInspector.UIString("Attribute Modified"),
  45         WebInspector.UIString("Node Removed")
  46     ];
  47     this._contextMenuLabels = [
  48         WebInspector.UIString("Break on Subtree Modifications"),
  49         WebInspector.UIString("Break on Attributes Modifications"),
  50         WebInspector.UIString("Break on Node Removal")
  51     ];
  52 }
  53
  54 WebInspector.DOMBreakpointsSidebarPane.prototype = {
  55     setInspectedURL: function(url)
  56     {
  57         this._reset();
  58         this._inspectedURL = url.removeURLFragment();
  59     },
  60
  61     populateNodeContextMenu: function(node, contextMenu)
  62     {
  63         var nodeBreakpoints = {};
  64         for (var id in this._breakpointElements) {
  65             var element = this._breakpointElements[id];
  66             if (element._node === node)
  67                 nodeBreakpoints[element._type] = true;
  68         }
  69
  70         function toggleBreakpoint(type)
  71         {
  72             if (!nodeBreakpoints[type])
  73                 this._setBreakpoint(node, type, true);
  74             else
  75                 this._removeBreakpoint(node, type);
  76             this._saveBreakpoints();
  77         }
  78
  79         for (var type = 0; type < 3; ++type) {
  80             var label = this._contextMenuLabels[type];
  81             contextMenu.appendCheckboxItem(label, toggleBreakpoint.bind(this, type), nodeBreakpoints[type]);
  82         }
  83     },
  84
  85     createBreakpointHitStatusMessage: function(eventData, callback)
  86     {
  87         if (eventData.type === this._breakpointTypes.SubtreeModified) {
  88             var targetNodeObject = WebInspector.RemoteObject.fromPayload(eventData.targetNode);
  89             function didPushNodeToFrontend(targetNodeId)
  90             {
  91                 if (targetNodeId)
  92                     targetNodeObject.release();
  93                 this._doCreateBreakpointHitStatusMessage(eventData, targetNodeId, callback);
  94             }
  95             targetNodeObject.pushNodeToFrontend(didPushNodeToFrontend.bind(this));
  96         } else
  97             this._doCreateBreakpointHitStatusMessage(eventData, null, callback);
  98     },
  99
 100     _doCreateBreakpointHitStatusMessage: function (eventData, targetNodeId, callback)
 101     {
 102         var message;
 103         var typeLabel = this._breakpointTypeLabels[eventData.type];
 104         var linkifiedNode = WebInspector.panels.elements.linkifyNodeById(eventData.nodeId);
 105         var substitutions = [typeLabel, linkifiedNode];
 106         var targetNode = "";
 107         if (targetNodeId)
 108             targetNode = WebInspector.panels.elements.linkifyNodeById(targetNodeId);
 109
 110         if (eventData.type === this._breakpointTypes.SubtreeModified) {
 111             if (eventData.insertion) {
 112                 if (targetNodeId !== eventData.nodeId) {
 113                     message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to its descendant %s.";
 114                     substitutions.push(targetNode);
 115                 } else
 116                     message = "Paused on a \"%s\" breakpoint set on %s, because a new child was added to that node.";
 117             } else {
 118                 message = "Paused on a \"%s\" breakpoint set on %s, because its descendant %s was removed.";
 119                 substitutions.push(targetNode);
 120             }
 121         } else
 122             message = "Paused on a \"%s\" breakpoint set on %s.";
 123
 124         var element = document.createElement("span");
 125         var formatters = {
 126             s: function(substitution)
 127             {
 128                 return substitution;
 129             }
 130         };
 131         function append(a, b)
 132         {
 133             if (typeof b === "string")
 134                 b = document.createTextNode(b);
 135             element.appendChild(b);
 136         }
 137         WebInspector.formatLocalized(message, substitutions, formatters, "", append);
 138
 139         callback(element);
 140     },
 141
 142     nodeRemoved: function(node)
 143     {
 144         this._removeBreakpointsForNode(node);
 145         if (!node.children)
 146             return;
 147         for (var i = 0; i < node.children.length; ++i)
 148             this._removeBreakpointsForNode(node.children[i]);
 149         this._saveBreakpoints();
 150     },
 151
 152     _removeBreakpointsForNode: function(node)
 153     {
 154         for (var id in this._breakpointElements) {
 155             var element = this._breakpointElements[id];
 156             if (element._node === node)
 157                 this._removeBreakpoint(element._node, element._type);
 158         }
 159     },
 160
 161     _setBreakpoint: function(node, type, enabled)
 162     {
 163         var breakpointId = this._createBreakpointId(node.id, type);
 164         if (breakpointId in this._breakpointElements)
 165             return;
 166
 167         var element = document.createElement("li");
 168         element._node = node;
 169         element._type = type;
 170         element.addEventListener("contextmenu", this._contextMenu.bind(this, node, type), true);
 171
 172         var checkboxElement = document.createElement("input");
 173         checkboxElement.className = "checkbox-elem";
 174         checkboxElement.type = "checkbox";
 175         checkboxElement.checked = enabled;
 176         checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, node, type), false);
 177         element._checkboxElement = checkboxElement;
 178         element.appendChild(checkboxElement);
 179
 180         var labelElement = document.createElement("span");
 181         element.appendChild(labelElement);
 182
 183         var linkifiedNode = WebInspector.panels.elements.linkifyNodeById(node.id);
 184         linkifiedNode.addStyleClass("monospace");
 185         labelElement.appendChild(linkifiedNode);
 186
 187         var description = document.createElement("div");
 188         description.className = "source-text";
 189         description.textContent = this._breakpointTypeLabels[type];
 190         labelElement.appendChild(description);
 191
 192         var currentElement = this.listElement.firstChild;
 193         while (currentElement) {
 194             if (currentElement._type && currentElement._type < element._type)
 195                 break;
 196             currentElement = currentElement.nextSibling;
 197         }
 198         this._addListElement(element, currentElement);
 199         this._breakpointElements[breakpointId] = element;
 200         if (enabled)
 201             BrowserDebuggerAgent.setDOMBreakpoint(node.id, type);
 202     },
 203
 204     _removeBreakpoint: function(node, type)
 205     {
 206         var breakpointId = this._createBreakpointId(node.id, type);
 207         var element = this._breakpointElements[breakpointId];
 208         if (!element)
 209             return;
 210
 211         this._removeListElement(element);
 212         delete this._breakpointElements[breakpointId];
 213         if (element._checkboxElement.checked)
 214             BrowserDebuggerAgent.removeDOMBreakpoint(node.id, type);
 215     },
 216
 217     _contextMenu: function(node, type, event)
 218     {
 219         var contextMenu = new WebInspector.ContextMenu();
 220         function removeBreakpoint()
 221         {
 222             this._removeBreakpoint(node, type);
 223             this._saveBreakpoints();
 224         }
 225         contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), removeBreakpoint.bind(this));
 226         contextMenu.show(event);
 227     },
 228
 229     _checkboxClicked: function(node, type, event)
 230     {
 231         if (event.target.checked)
 232             BrowserDebuggerAgent.setDOMBreakpoint(node.id, type);
 233         else
 234             BrowserDebuggerAgent.removeDOMBreakpoint(node.id, type);
 235         this._saveBreakpoints();
 236     },
 237
 238     highlightBreakpoint: function(eventData)
 239     {
 240         var breakpointId = this._createBreakpointId(eventData.nodeId, eventData.type);
 241         var element = this._breakpointElements[breakpointId];
 242         if (!element)
 243             return;
 244         this.expanded = true;
 245         element.addStyleClass("breakpoint-hit");
 246         this._highlightedElement = element;
 247     },
 248
 249     clearBreakpointHighlight: function()
 250     {
 251         if (this._highlightedElement) {
 252             this._highlightedElement.removeStyleClass("breakpoint-hit");
 253             delete this._highlightedElement;
 254         }
 255     },
 256
 257     _createBreakpointId: function(nodeId, type)
 258     {
 259         return nodeId + ":" + type;
 260     },
 261
 262     _saveBreakpoints: function()
 263     {
 264         var breakpoints = [];
 265         var storedBreakpoints = WebInspector.settings.domBreakpoints;
 266         for (var i = 0; i < storedBreakpoints.length; ++i) {
 267             var breakpoint = storedBreakpoints[i];
 268             if (breakpoint.url !== this._inspectedURL)
 269                 breakpoints.push(breakpoint);
 270         }
 271         for (var id in this._breakpointElements) {
 272             var element = this._breakpointElements[id];
 273             breakpoints.push({ url: this._inspectedURL, path: element._node.path(), type: element._type, enabled: element._checkboxElement.checked });
 274         }
 275         WebInspector.settings.domBreakpoints = breakpoints;
 276     },
 277
 278     restoreBreakpoints: function()
 279     {
 280         var pathToBreakpoints = {};
 281
 282         function didPushNodeByPathToFrontend(path, nodeId)
 283         {
 284             var node = WebInspector.domAgent.nodeForId(nodeId);
 285             if (!node)
 286                 return;
 287
 288             var breakpoints = pathToBreakpoints[path];
 289             for (var i = 0; i < breakpoints.length; ++i)
 290                 this._setBreakpoint(node, breakpoints[i].type, breakpoints[i].enabled);
 291         }
 292
 293         var breakpoints = WebInspector.settings.domBreakpoints;
 294         for (var i = 0; i < breakpoints.length; ++i) {
 295             var breakpoint = breakpoints[i];
 296             if (breakpoint.url !== this._inspectedURL)
 297                 continue;
 298             var path = breakpoint.path;
 299             if (!pathToBreakpoints[path]) {
 300                 pathToBreakpoints[path] = [];
 301                 WebInspector.domAgent.pushNodeByPathToFrontend(path, didPushNodeByPathToFrontend.bind(this, path));
 302             }
 303             pathToBreakpoints[path].push(breakpoint);
 304         }
 305     }
 306 }
 307
 308 WebInspector.DOMBreakpointsSidebarPane.prototype.__proto__ = WebInspector.NativeBreakpointsSidebarPane.prototype;