/* * Copyright (C) 2008 Apple 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: * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ WebInspector.JavaScriptBreakpointsSidebarPane = function(model) { WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints")); this._model = model; this.listElement = document.createElement("ol"); this.listElement.className = "breakpoint-list"; this.emptyElement = document.createElement("div"); this.emptyElement.className = "info"; this.emptyElement.textContent = WebInspector.UIString("No Breakpoints"); this.bodyElement.appendChild(this.emptyElement); this._items = {}; } WebInspector.JavaScriptBreakpointsSidebarPane.prototype = { addBreakpoint: function(breakpoint) { var element = document.createElement("li"); element.addStyleClass("cursor-pointer"); element.addEventListener("contextmenu", this._contextMenu.bind(this, breakpoint), true); element.addEventListener("click", this._breakpointClicked.bind(this, breakpoint), false); var checkbox = document.createElement("input"); checkbox.className = "checkbox-elem"; checkbox.type = "checkbox"; checkbox.checked = breakpoint.enabled; checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, breakpoint), false); element.appendChild(checkbox); var displayName = breakpoint.url ? WebInspector.displayNameForURL(breakpoint.url) : WebInspector.UIString("(program)"); var labelElement = document.createTextNode(displayName + ":" + (breakpoint.lineNumber + 1)); element.appendChild(labelElement); var snippetElement = document.createElement("div"); snippetElement.className = "source-text monospace"; element.appendChild(snippetElement); if (breakpoint.loadSnippet) { function didLoadSnippet(snippet) { snippetElement.textContent = snippet; } breakpoint.loadSnippet(didLoadSnippet); } element._data = breakpoint; var currentElement = this.listElement.firstChild; while (currentElement) { if (currentElement._data && this._compareBreakpoints(currentElement._data, element._data) > 0) break; currentElement = currentElement.nextSibling; } this._addListElement(element, currentElement); var breakpointItem = {}; breakpointItem.element = element; breakpointItem.checkbox = checkbox; this._items[this._createBreakpointItemId(breakpoint.sourceFileId, breakpoint.lineNumber)] = breakpointItem; if (!this.expanded) this.expanded = true; }, removeBreakpoint: function(sourceFileId, lineNumber) { var breakpointItemId = this._createBreakpointItemId(sourceFileId, lineNumber); var breakpointItem = this._items[breakpointItemId]; if (!breakpointItem) return; delete this._items[breakpointItemId]; this._removeListElement(breakpointItem.element); }, highlightBreakpoint: function(sourceFileId, lineNumber) { var breakpointItem = this._items[this._createBreakpointItemId(sourceFileId, lineNumber)]; if (!breakpointItem) return; breakpointItem.element.addStyleClass("breakpoint-hit"); this._highlightedBreakpointItem = breakpointItem; }, clearBreakpointHighlight: function() { if (this._highlightedBreakpointItem) { this._highlightedBreakpointItem.element.removeStyleClass("breakpoint-hit"); delete this._highlightedBreakpointItem; } }, _createBreakpointItemId: function(sourceFileId, lineNumber) { return sourceFileId + ":" + lineNumber; }, _breakpointClicked: function(breakpoint, event) { WebInspector.panels.scripts.showSourceLine(breakpoint.sourceFileId, breakpoint.lineNumber + 1); }, _breakpointCheckboxClicked: function(breakpoint, event) { // Breakpoint element has it's own click handler. event.stopPropagation(); this._model.setBreakpointEnabled(breakpoint.sourceFileId, breakpoint.lineNumber, event.target.checked); }, _contextMenu: function(breakpoint, event) { var contextMenu = new WebInspector.ContextMenu(); var removeHandler = this._model.removeBreakpoint.bind(this._model, breakpoint.sourceFileId, breakpoint.lineNumber); contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), removeHandler); contextMenu.show(event); }, _addListElement: function(element, beforeElement) { if (beforeElement) this.listElement.insertBefore(element, beforeElement); else { if (!this.listElement.firstChild) { this.bodyElement.removeChild(this.emptyElement); this.bodyElement.appendChild(this.listElement); } this.listElement.appendChild(element); } }, _removeListElement: function(element) { this.listElement.removeChild(element); if (!this.listElement.firstChild) { this.bodyElement.removeChild(this.listElement); this.bodyElement.appendChild(this.emptyElement); } }, _compare: function(x, y) { if (x !== y) return x < y ? -1 : 1; return 0; }, _compareBreakpoints: function(b1, b2) { return this._compare(b1.url, b2.url) || this._compare(b1.lineNumber, b2.lineNumber); }, reset: function() { this.listElement.removeChildren(); if (this.listElement.parentElement) { this.bodyElement.removeChild(this.listElement); this.bodyElement.appendChild(this.emptyElement); } this._items = {}; } } WebInspector.JavaScriptBreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; WebInspector.NativeBreakpointsSidebarPane = function(title) { WebInspector.SidebarPane.call(this, title); this.listElement = document.createElement("ol"); this.listElement.className = "breakpoint-list"; this.emptyElement = document.createElement("div"); this.emptyElement.className = "info"; this.emptyElement.textContent = WebInspector.UIString("No Breakpoints"); this.bodyElement.appendChild(this.emptyElement); WebInspector.breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.ProjectChanged, this._projectChanged, this); } WebInspector.NativeBreakpointsSidebarPane.prototype = { addBreakpointItem: function(breakpointItem) { var element = breakpointItem.element; element._breakpointItem = breakpointItem; breakpointItem.addEventListener("breakpoint-hit", this.expand, this); breakpointItem.addEventListener("removed", this._removeListElement.bind(this, element), this); var currentElement = this.listElement.firstChild; while (currentElement) { if (currentElement._breakpointItem && currentElement._breakpointItem.compareTo(element._breakpointItem) > 0) break; currentElement = currentElement.nextSibling; } this._addListElement(element, currentElement); if (breakpointItem.click) { element.addStyleClass("cursor-pointer"); element.addEventListener("click", breakpointItem.click.bind(breakpointItem), false); } element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, breakpointItem), true); }, _contextMenuEventFired: function(breakpointItem, event) { var contextMenu = new WebInspector.ContextMenu(); contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), breakpointItem.remove.bind(breakpointItem)); contextMenu.show(event); }, _addListElement: function(element, beforeElement) { if (beforeElement) this.listElement.insertBefore(element, beforeElement); else { if (!this.listElement.firstChild) { this.bodyElement.removeChild(this.emptyElement); this.bodyElement.appendChild(this.listElement); } this.listElement.appendChild(element); } }, _removeListElement: function(element) { this.listElement.removeChild(element); if (!this.listElement.firstChild) { this.bodyElement.removeChild(this.listElement); this.bodyElement.appendChild(this.emptyElement); } }, _projectChanged: function() { this.listElement.removeChildren(); if (this.listElement.parentElement) { this.bodyElement.removeChild(this.listElement); this.bodyElement.appendChild(this.emptyElement); } } } WebInspector.NativeBreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; WebInspector.XHRBreakpointsSidebarPane = function() { WebInspector.NativeBreakpointsSidebarPane.call(this, WebInspector.UIString("XHR Breakpoints")); this._breakpointElements = {}; var addButton = document.createElement("button"); addButton.className = "add"; addButton.addEventListener("click", this._addButtonClicked.bind(this), false); this.titleElement.appendChild(addButton); this._restoreBreakpoints(); } WebInspector.XHRBreakpointsSidebarPane.prototype = { _addButtonClicked: function(event) { event.stopPropagation(); this.expanded = true; var inputElement = document.createElement("span"); inputElement.className = "breakpoint-condition editing"; this._addListElement(inputElement, this.listElement.firstChild); function finishEditing(accept, e, text) { this._removeListElement(inputElement); if (accept) { this._setBreakpoint(text, true); this._saveBreakpoints(); } } WebInspector.startEditing(inputElement, { commitHandler: finishEditing.bind(this, true), cancelHandler: finishEditing.bind(this, false) }); }, _setBreakpoint: function(url, enabled) { if (url in this._breakpointElements) return; var element = document.createElement("li"); element._url = url; element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true); var checkboxElement = document.createElement("input"); checkboxElement.className = "checkbox-elem"; checkboxElement.type = "checkbox"; checkboxElement.checked = enabled; checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false); element._checkboxElement = checkboxElement; element.appendChild(checkboxElement); var labelElement = document.createElement("span"); if (!url) labelElement.textContent = WebInspector.UIString("Any XHR"); else labelElement.textContent = WebInspector.UIString("URL contains \"%s\"", url); labelElement.addStyleClass("cursor-auto"); labelElement.addEventListener("dblclick", this._labelClicked.bind(this, url), false); element.appendChild(labelElement); var currentElement = this.listElement.firstChild; while (currentElement) { if (currentElement._url && currentElement._url < element._url) break; currentElement = currentElement.nextSibling; } this._addListElement(element, currentElement); this._breakpointElements[url] = element; if (enabled) BrowserDebuggerAgent.setXHRBreakpoint(url); }, _removeBreakpoint: function(url) { var element = this._breakpointElements[url]; if (!element) return; this._removeListElement(element); delete this._breakpointElements[url]; if (element._checkboxElement.checked) BrowserDebuggerAgent.removeXHRBreakpoint(url); }, _contextMenu: function(url, event) { var contextMenu = new WebInspector.ContextMenu(); function removeBreakpoint() { this._removeBreakpoint(url); this._saveBreakpoints(); } contextMenu.appendItem(WebInspector.UIString("Remove Breakpoint"), removeBreakpoint.bind(this)); contextMenu.show(event); }, _checkboxClicked: function(url, event) { if (event.target.checked) WebInspector.breakpointManager.setXHRBreakpoint(url); else WebInspector.breakpointManager.removeXHRBreakpoint(url); this._saveBreakpoints(); }, _labelClicked: function(url) { var element = this._breakpointElements[url]; var inputElement = document.createElement("span"); inputElement.className = "breakpoint-condition editing"; inputElement.textContent = url; this.listElement.insertBefore(inputElement, element); element.addStyleClass("hidden"); function finishEditing(accept, e, text) { this._removeListElement(inputElement); if (accept) { this._removeBreakpoint(url); this._setBreakpoint(text, element._checkboxElement.checked); this._saveBreakpoints(); } else element.removeStyleClass("hidden"); } WebInspector.startEditing(inputElement, { commitHandler: finishEditing.bind(this, true), cancelHandler: finishEditing.bind(this, false) }); }, highlightBreakpoint: function(url) { var element = this._breakpointElements[url]; if (!element) return; this.expanded = true; element.addStyleClass("breakpoint-hit"); this._highlightedElement = element; }, clearBreakpointHighlight: function() { if (this._highlightedElement) { this._highlightedElement.removeStyleClass("breakpoint-hit"); delete this._highlightedElement; } }, _saveBreakpoints: function() { var breakpoints = []; for (var url in this._breakpointElements) breakpoints.push({ url: url, enabled: this._breakpointElements[url]._checkboxElement.checked }); WebInspector.settings.xhrBreakpoints = breakpoints; }, _restoreBreakpoints: function() { var breakpoints = WebInspector.settings.xhrBreakpoints; for (var i = 0; i < breakpoints.length; ++i) { var breakpoint = breakpoints[i]; if (breakpoint && typeof breakpoint.url === "string") this._setBreakpoint(breakpoint.url, breakpoint.enabled); } }, _projectChanged: function() { } } WebInspector.XHRBreakpointsSidebarPane.prototype.__proto__ = WebInspector.NativeBreakpointsSidebarPane.prototype; WebInspector.BreakpointItem = function(breakpoint) { this._breakpoint = breakpoint; this._element = document.createElement("li"); var checkboxElement = document.createElement("input"); checkboxElement.className = "checkbox-elem"; checkboxElement.type = "checkbox"; checkboxElement.checked = this._breakpoint.enabled; checkboxElement.addEventListener("click", this._checkboxClicked.bind(this), false); this._element.appendChild(checkboxElement); this._createLabelElement(); this._breakpoint.addEventListener("enable-changed", this._enableChanged, this); this._breakpoint.addEventListener("hit-state-changed", this._hitStateChanged, this); this._breakpoint.addEventListener("label-changed", this._labelChanged, this); this._breakpoint.addEventListener("removed", this.dispatchEventToListeners.bind(this, "removed")); if (breakpoint.click) this.click = breakpoint.click.bind(breakpoint); } WebInspector.BreakpointItem.prototype = { get element() { return this._element; }, compareTo: function(other) { return this._breakpoint.compareTo(other._breakpoint); }, populateEditElement: function(element) { this._breakpoint.populateEditElement(element); }, remove: function() { this._breakpoint.remove(); }, _checkboxClicked: function(event) { this._breakpoint.enabled = !this._breakpoint.enabled; // Breakpoint element may have it's own click handler. event.stopPropagation(); }, _enableChanged: function(event) { var checkbox = this._element.firstChild; checkbox.checked = this._breakpoint.enabled; }, _hitStateChanged: function(event) { if (event.target.hit) { this._element.addStyleClass("breakpoint-hit"); this.dispatchEventToListeners("breakpoint-hit"); } else this._element.removeStyleClass("breakpoint-hit"); }, _labelChanged: function(event) { this._element.removeChild(this._labelElement); this._createLabelElement(); }, _createLabelElement: function() { this._labelElement = document.createElement("span"); this._breakpoint.populateLabelElement(this._labelElement); this._element.appendChild(this._labelElement); } } WebInspector.BreakpointItem.prototype.__proto__ = WebInspector.Object.prototype; WebInspector.EventListenerBreakpointsSidebarPane = function() { WebInspector.SidebarPane.call(this, WebInspector.UIString("Event Listener Breakpoints")); this.categoriesElement = document.createElement("ol"); this.categoriesElement.tabIndex = 0; this.categoriesElement.addStyleClass("properties-tree"); this.categoriesElement.addStyleClass("event-listener-breakpoints"); this.categoriesTreeOutline = new TreeOutline(this.categoriesElement); this.bodyElement.appendChild(this.categoriesElement); this._breakpointItems = {}; this._createCategory(WebInspector.UIString("Keyboard"), "listener", ["keydown", "keyup", "keypress", "textInput"]); this._createCategory(WebInspector.UIString("Mouse"), "listener", ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "mousewheel"]); // FIXME: uncomment following once inspector stops being drop targer in major ports. // Otherwise, inspector page reacts on drop event and tries to load the event data. // this._createCategory(WebInspector.UIString("Drag"), "listener", ["drag", "drop", "dragstart", "dragend", "dragenter", "dragleave", "dragover"]); this._createCategory(WebInspector.UIString("Control"), "listener", ["resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"]); this._createCategory(WebInspector.UIString("Clipboard"), "listener", ["copy", "cut", "paste", "beforecopy", "beforecut", "beforepaste"]); this._createCategory(WebInspector.UIString("Load"), "listener", ["load", "unload", "abort", "error"]); this._createCategory(WebInspector.UIString("DOM Mutation"), "listener", ["DOMActivate", "DOMFocusIn", "DOMFocusOut", "DOMAttrModified", "DOMCharacterDataModified", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "DOMContentLoaded"]); this._createCategory(WebInspector.UIString("Device"), "listener", ["deviceorientation", "devicemotion"]); this._createCategory(WebInspector.UIString("Timer"), "instrumentation", ["setTimer", "clearTimer", "timerFired"]); this._restoreBreakpoints(); } WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI = function(eventName) { if (!WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI) { WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI = { "instrumentation:setTimer": WebInspector.UIString("Set Timer"), "instrumentation:clearTimer": WebInspector.UIString("Clear Timer"), "instrumentation:timerFired": WebInspector.UIString("Timer Fired") }; } return WebInspector.EventListenerBreakpointsSidebarPane._eventNamesForUI[eventName] || eventName.substring(eventName.indexOf(":") + 1); } WebInspector.EventListenerBreakpointsSidebarPane.prototype = { _createCategory: function(name, type, eventNames) { var categoryItem = {}; categoryItem.element = new TreeElement(name); this.categoriesTreeOutline.appendChild(categoryItem.element); categoryItem.element.listItemElement.addStyleClass("event-category"); categoryItem.element.selectable = true; categoryItem.checkbox = this._createCheckbox(categoryItem.element); categoryItem.checkbox.addEventListener("click", this._categoryCheckboxClicked.bind(this, categoryItem), true); categoryItem.children = {}; for (var i = 0; i < eventNames.length; ++i) { var eventName = type + ":" + eventNames[i]; var breakpointItem = {}; var title = WebInspector.EventListenerBreakpointsSidebarPane.eventNameForUI(eventName); breakpointItem.element = new TreeElement(title); categoryItem.element.appendChild(breakpointItem.element); var hitMarker = document.createElement("div"); hitMarker.className = "breakpoint-hit-marker"; breakpointItem.element.listItemElement.appendChild(hitMarker); breakpointItem.element.listItemElement.addStyleClass("source-code"); breakpointItem.element.selectable = true; breakpointItem.checkbox = this._createCheckbox(breakpointItem.element); breakpointItem.checkbox.addEventListener("click", this._breakpointCheckboxClicked.bind(this, eventName), true); breakpointItem.parent = categoryItem; this._breakpointItems[eventName] = breakpointItem; categoryItem.children[eventName] = breakpointItem; } }, _createCheckbox: function(treeElement) { var checkbox = document.createElement("input"); checkbox.className = "checkbox-elem"; checkbox.type = "checkbox"; treeElement.listItemElement.insertBefore(checkbox, treeElement.listItemElement.firstChild); return checkbox; }, _categoryCheckboxClicked: function(categoryItem) { var checked = categoryItem.checkbox.checked; for (var eventName in categoryItem.children) { var breakpointItem = categoryItem.children[eventName]; if (breakpointItem.checkbox.checked === checked) continue; if (checked) this._setBreakpoint(eventName); else this._removeBreakpoint(eventName); } this._saveBreakpoints(); }, _breakpointCheckboxClicked: function(eventName, event) { if (event.target.checked) this._setBreakpoint(eventName); else this._removeBreakpoint(eventName); this._saveBreakpoints(); }, _setBreakpoint: function(eventName) { var breakpointItem = this._breakpointItems[eventName]; if (!breakpointItem) return; breakpointItem.checkbox.checked = true; BrowserDebuggerAgent.setEventListenerBreakpoint(eventName); this._updateCategoryCheckbox(breakpointItem.parent); }, _removeBreakpoint: function(eventName) { var breakpointItem = this._breakpointItems[eventName]; if (!breakpointItem) return; breakpointItem.checkbox.checked = false; BrowserDebuggerAgent.removeEventListenerBreakpoint(eventName); this._updateCategoryCheckbox(breakpointItem.parent); }, _updateCategoryCheckbox: function(categoryItem) { var hasEnabled = false, hasDisabled = false; for (var eventName in categoryItem.children) { var breakpointItem = categoryItem.children[eventName]; if (breakpointItem.checkbox.checked) hasEnabled = true; else hasDisabled = true; } categoryItem.checkbox.checked = hasEnabled; categoryItem.checkbox.indeterminate = hasEnabled && hasDisabled; }, highlightBreakpoint: function(eventName) { var breakpointItem = this._breakpointItems[eventName]; if (!breakpointItem) return; this.expanded = true; breakpointItem.parent.element.expand(); breakpointItem.element.listItemElement.addStyleClass("breakpoint-hit"); this._highlightedElement = breakpointItem.element.listItemElement; }, clearBreakpointHighlight: function() { if (this._highlightedElement) { this._highlightedElement.removeStyleClass("breakpoint-hit"); delete this._highlightedElement; } }, _saveBreakpoints: function() { var breakpoints = []; for (var eventName in this._breakpointItems) { if (this._breakpointItems[eventName].checkbox.checked) breakpoints.push({ eventName: eventName }); } WebInspector.settings.eventListenerBreakpoints = breakpoints; }, _restoreBreakpoints: function() { var breakpoints = WebInspector.settings.eventListenerBreakpoints; for (var i = 0; i < breakpoints.length; ++i) { var breakpoint = breakpoints[i]; if (breakpoint && typeof breakpoint.eventName === "string") this._setBreakpoint(breakpoint.eventName); } } } WebInspector.EventListenerBreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;