third_party/WebKit/Source/devtools/front_end/sources/JavaScriptBreakpointsSidebarPane.js

   1 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @extends {WebInspector.SidebarPane}
   8  * @param {!WebInspector.BreakpointManager} breakpointManager
   9  * @param {function(!WebInspector.UISourceCode, number=, number=, boolean=)} showSourceLineDelegate
  10  */
  11 WebInspector.JavaScriptBreakpointsSidebarPane = function(breakpointManager, showSourceLineDelegate)
  12 {
  13     WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
  14     this.registerRequiredCSS("components/breakpointsList.css");
  15
  16     this._breakpointManager = breakpointManager;
  17     this._showSourceLineDelegate = showSourceLineDelegate;
  18
  19     this.listElement = createElementWithClass("ol", "breakpoint-list");
  20
  21     this.emptyElement = this.element.createChild("div", "info");
  22     this.emptyElement.textContent = WebInspector.UIString("No Breakpoints");
  23
  24     this._items = new Map();
  25
  26     var breakpointLocations = this._breakpointManager.allBreakpointLocations();
  27     for (var i = 0; i < breakpointLocations.length; ++i)
  28         this._addBreakpoint(breakpointLocations[i].breakpoint, breakpointLocations[i].uiLocation);
  29
  30     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
  31     this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
  32
  33     this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
  34 }
  35
  36 WebInspector.JavaScriptBreakpointsSidebarPane.prototype = {
  37     _emptyElementContextMenu: function(event)
  38     {
  39         var contextMenu = new WebInspector.ContextMenu(event);
  40         this._appendBreakpointActiveItem(contextMenu);
  41         contextMenu.show();
  42     },
  43
  44     /**
  45      * @param {!WebInspector.ContextMenu} contextMenu
  46      */
  47     _appendBreakpointActiveItem: function(contextMenu)
  48     {
  49         var breakpointActive = this._breakpointManager.breakpointsActive();
  50         var breakpointActiveTitle = breakpointActive ?
  51             WebInspector.UIString.capitalize("Deactivate ^breakpoints") :
  52             WebInspector.UIString.capitalize("Activate ^breakpoints");
  53         contextMenu.appendItem(breakpointActiveTitle, this._breakpointManager.setBreakpointsActive.bind(this._breakpointManager, !breakpointActive));
  54     },
  55
  56     /**
  57      * @param {!WebInspector.Event} event
  58      */
  59     _breakpointAdded: function(event)
  60     {
  61         this._breakpointRemoved(event);
  62
  63         var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
  64         var uiLocation = /** @type {!WebInspector.UILocation} */ (event.data.uiLocation);
  65         this._addBreakpoint(breakpoint, uiLocation);
  66     },
  67
  68     /**
  69      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
  70      * @param {!WebInspector.UILocation} uiLocation
  71      */
  72     _addBreakpoint: function(breakpoint, uiLocation)
  73     {
  74         var element = createElementWithClass("li", "cursor-pointer");
  75         element.addEventListener("contextmenu", this._breakpointContextMenu.bind(this, breakpoint), true);
  76         element.addEventListener("click", this._breakpointClicked.bind(this, uiLocation), false);
  77
  78         var checkboxLabel = createCheckboxLabel(uiLocation.linkText(), breakpoint.enabled());
  79         element.appendChild(checkboxLabel);
  80         checkboxLabel.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpoint), false);
  81
  82         var snippetElement = element.createChild("div", "source-text monospace");
  83
  84         /**
  85          * @param {?string} content
  86          * @this {WebInspector.JavaScriptBreakpointsSidebarPane}
  87          */
  88         function didRequestContent(content)
  89         {
  90             var lineNumber = uiLocation.lineNumber
  91             var columnNumber = uiLocation.columnNumber;
  92             var contentString = new String(content);
  93             if (lineNumber < contentString.lineCount()) {
  94                 var lineText = contentString.lineAt(lineNumber);
  95                 var maxSnippetLength = 200;
  96                 var snippetStartIndex = columnNumber > 100 ? columnNumber : 0;
  97                 snippetElement.textContent = lineText.substr(snippetStartIndex).trimEnd(maxSnippetLength);
  98             }
  99             this.didReceiveBreakpointLineForTest(uiLocation.uiSourceCode);
 100         }
 101
 102         uiLocation.uiSourceCode.requestContent(didRequestContent.bind(this));
 103
 104         element._data = uiLocation;
 105         var currentElement = this.listElement.firstChild;
 106         while (currentElement) {
 107             if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0)
 108                 break;
 109             currentElement = currentElement.nextSibling;
 110         }
 111         this._addListElement(element, currentElement);
 112
 113         var breakpointItem = { element: element, checkbox: checkboxLabel.checkboxElement };
 114         this._items.set(breakpoint, breakpointItem);
 115
 116         this.expand();
 117     },
 118
 119     /**
 120      * @param {!WebInspector.UISourceCode} uiSourceCode
 121      */
 122     didReceiveBreakpointLineForTest: function(uiSourceCode)
 123     {
 124     },
 125
 126     /**
 127      * @param {!WebInspector.Event} event
 128      */
 129     _breakpointRemoved: function(event)
 130     {
 131         var breakpoint = /** @type {!WebInspector.BreakpointManager.Breakpoint} */ (event.data.breakpoint);
 132         var breakpointItem = this._items.get(breakpoint);
 133         if (!breakpointItem)
 134             return;
 135         this._items.remove(breakpoint);
 136         this._removeListElement(breakpointItem.element);
 137     },
 138
 139     /**
 140      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
 141      */
 142     highlightBreakpoint: function(breakpoint)
 143     {
 144         var breakpointItem = this._items.get(breakpoint);
 145         if (!breakpointItem)
 146             return;
 147         breakpointItem.element.classList.add("breakpoint-hit");
 148         this._highlightedBreakpointItem = breakpointItem;
 149     },
 150
 151     clearBreakpointHighlight: function()
 152     {
 153         if (this._highlightedBreakpointItem) {
 154             this._highlightedBreakpointItem.element.classList.remove("breakpoint-hit");
 155             delete this._highlightedBreakpointItem;
 156         }
 157     },
 158
 159     _breakpointClicked: function(uiLocation, event)
 160     {
 161         this._showSourceLineDelegate(uiLocation.uiSourceCode, uiLocation.lineNumber);
 162     },
 163
 164     /**
 165      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
 166      * @param {!Event} event
 167      */
 168     _breakpointCheckboxClicked: function(breakpoint, event)
 169     {
 170         // Breakpoint element has it's own click handler.
 171         event.consume();
 172         breakpoint.setEnabled(event.target.checkboxElement.checked);
 173     },
 174
 175     /**
 176      * @param {!WebInspector.BreakpointManager.Breakpoint} breakpoint
 177      * @param {!Event} event
 178      */
 179     _breakpointContextMenu: function(breakpoint, event)
 180     {
 181         var breakpoints = this._items.valuesArray();
 182         var contextMenu = new WebInspector.ContextMenu(event);
 183         contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), breakpoint.remove.bind(breakpoint));
 184         if (breakpoints.length > 1) {
 185             var removeAllTitle = WebInspector.UIString.capitalize("Remove ^all ^breakpoints");
 186             contextMenu.appendItem(removeAllTitle, this._breakpointManager.removeAllBreakpoints.bind(this._breakpointManager));
 187         }
 188
 189         contextMenu.appendSeparator();
 190         this._appendBreakpointActiveItem(contextMenu);
 191
 192         function enabledBreakpointCount(breakpoints)
 193         {
 194             var count = 0;
 195             for (var i = 0; i < breakpoints.length; ++i) {
 196                 if (breakpoints[i].checkbox.checked)
 197                     count++;
 198             }
 199             return count;
 200         }
 201         if (breakpoints.length > 1) {
 202             var enableBreakpointCount = enabledBreakpointCount(breakpoints);
 203             var enableTitle = WebInspector.UIString.capitalize("Enable ^all ^breakpoints");
 204             var disableTitle = WebInspector.UIString.capitalize("Disable ^all ^breakpoints");
 205
 206             contextMenu.appendSeparator();
 207
 208             contextMenu.appendItem(enableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, true), !(enableBreakpointCount != breakpoints.length));
 209             contextMenu.appendItem(disableTitle, this._breakpointManager.toggleAllBreakpoints.bind(this._breakpointManager, false), !(enableBreakpointCount > 1));
 210         }
 211
 212         contextMenu.show();
 213     },
 214
 215     _addListElement: function(element, beforeElement)
 216     {
 217         if (beforeElement)
 218             this.listElement.insertBefore(element, beforeElement);
 219         else {
 220             if (!this.listElement.firstChild) {
 221                 this.element.removeChild(this.emptyElement);
 222                 this.element.appendChild(this.listElement);
 223             }
 224             this.listElement.appendChild(element);
 225         }
 226     },
 227
 228     _removeListElement: function(element)
 229     {
 230         this.listElement.removeChild(element);
 231         if (!this.listElement.firstChild) {
 232             this.element.removeChild(this.listElement);
 233             this.element.appendChild(this.emptyElement);
 234         }
 235     },
 236
 237     _compare: function(x, y)
 238     {
 239         if (x !== y)
 240             return x < y ? -1 : 1;
 241         return 0;
 242     },
 243
 244     _compareBreakpoints: function(b1, b2)
 245     {
 246         return this._compare(b1.uiSourceCode.originURL(), b2.uiSourceCode.originURL()) || this._compare(b1.lineNumber, b2.lineNumber);
 247     },
 248
 249     reset: function()
 250     {
 251         this.listElement.removeChildren();
 252         if (this.listElement.parentElement) {
 253             this.element.removeChild(this.listElement);
 254             this.element.appendChild(this.emptyElement);
 255         }
 256         this._items.clear();
 257     },
 258
 259     __proto__: WebInspector.SidebarPane.prototype
 260 }