atom-nuclide
Version:
A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.
259 lines (222 loc) • 8.87 kB
JavaScript
// Copyright (c) 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @constructor
* @extends {WebInspector.BreakpointsSidebarPaneBase}
* @implements {WebInspector.TargetManager.Observer}
*/
WebInspector.XHRBreakpointsSidebarPane = function()
{
WebInspector.BreakpointsSidebarPaneBase.call(this, WebInspector.UIString("XHR Breakpoints"));
/** @type {!Map.<string, !Element>} */
this._breakpointElements = new Map();
var addButton = this.titleElement.createChild("button", "pane-title-button add");
addButton.title = WebInspector.UIString("Add XHR breakpoint");
addButton.addEventListener("click", this._addButtonClicked.bind(this), false);
this.emptyElement.addEventListener("contextmenu", this._emptyElementContextMenu.bind(this), true);
WebInspector.targetManager.observeTargets(this);
}
WebInspector.XHRBreakpointsSidebarPane.prototype = {
/**
* @override
* @param {!WebInspector.Target} target
*/
targetAdded: function(target)
{
this._restoreBreakpoints(target);
},
/**
* @override
* @param {!WebInspector.Target} target
*/
targetRemoved: function(target) { },
_emptyElementContextMenu: function(event)
{
var contextMenu = new WebInspector.ContextMenu(event);
contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^breakpoint"), this._addButtonClicked.bind(this));
contextMenu.show();
},
_addButtonClicked: function(event)
{
if (event)
event.consume();
this.expand();
var inputElementContainer = createElementWithClass("p", "breakpoint-condition");
inputElementContainer.textContent = WebInspector.UIString("Break when URL contains:");
var inputElement = inputElementContainer.createChild("span", "editing");
inputElement.id = "breakpoint-condition-input";
this.addListElement(inputElementContainer, /** @type {?Element} */ (this.listElement.firstChild));
/**
* @param {boolean} accept
* @param {!Element} e
* @param {string} text
* @this {WebInspector.XHRBreakpointsSidebarPane}
*/
function finishEditing(accept, e, text)
{
this.removeListElement(inputElementContainer);
if (accept) {
this._setBreakpoint(text, true);
this._saveBreakpoints();
}
}
var config = new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false));
WebInspector.InplaceEditor.startEditing(inputElement, config);
},
/**
* @param {string} url
* @param {boolean} enabled
* @param {!WebInspector.Target=} target
*/
_setBreakpoint: function(url, enabled, target)
{
if (enabled)
this._updateBreakpointOnTarget(url, true, target);
if (this._breakpointElements.has(url))
return;
var element = createElement("li");
element._url = url;
element.addEventListener("contextmenu", this._contextMenu.bind(this, url), true);
var label = createCheckboxLabel(undefined, enabled);
label.classList.add("checkbox-elem");
element.appendChild(label);
label.checkboxElement.addEventListener("click", this._checkboxClicked.bind(this, url), false);
element._checkboxElement = label.checkboxElement;
var labelElement = label.createChild("span", "cursor-auto");
if (!url)
labelElement.textContent = WebInspector.UIString("Any XHR");
else
labelElement.textContent = WebInspector.UIString("URL contains \"%s\"", url);
labelElement.addEventListener("dblclick", this._labelClicked.bind(this, url), false);
var currentElement = /** @type {?Element} */ (this.listElement.firstChild);
while (currentElement) {
if (currentElement._url && currentElement._url < element._url)
break;
currentElement = /** @type {?Element} */ (currentElement.nextSibling);
}
this.addListElement(element, currentElement);
this._breakpointElements.set(url, element);
},
/**
* @param {string} url
* @param {!WebInspector.Target=} target
*/
_removeBreakpoint: function(url, target)
{
var element = this._breakpointElements.get(url);
if (!element)
return;
this.removeListElement(element);
this._breakpointElements.delete(url);
if (element._checkboxElement.checked)
this._updateBreakpointOnTarget(url, false, target);
},
/**
* @param {string} url
* @param {boolean} enable
* @param {!WebInspector.Target=} target
*/
_updateBreakpointOnTarget: function(url, enable, target)
{
var targets = target ? [target] : WebInspector.targetManager.targets();
for (var i = 0; i < targets.length; ++i) {
if (enable)
targets[i].domdebuggerAgent().setXHRBreakpoint(url);
else
targets[i].domdebuggerAgent().removeXHRBreakpoint(url);
}
},
_contextMenu: function(url, event)
{
var contextMenu = new WebInspector.ContextMenu(event);
/**
* @this {WebInspector.XHRBreakpointsSidebarPane}
*/
function removeBreakpoint()
{
this._removeBreakpoint(url);
this._saveBreakpoints();
}
/**
* @this {WebInspector.XHRBreakpointsSidebarPane}
*/
function removeAllBreakpoints()
{
for (var url of this._breakpointElements.keys())
this._removeBreakpoint(url);
this._saveBreakpoints();
}
var removeAllTitle = WebInspector.UIString.capitalize("Remove ^all ^breakpoints");
contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^breakpoint"), this._addButtonClicked.bind(this));
contextMenu.appendItem(WebInspector.UIString.capitalize("Remove ^breakpoint"), removeBreakpoint.bind(this));
contextMenu.appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
contextMenu.show();
},
_checkboxClicked: function(url, event)
{
this._updateBreakpointOnTarget(url, event.target.checked);
this._saveBreakpoints();
},
_labelClicked: function(url)
{
var element = this._breakpointElements.get(url) || null;
var inputElement = createElementWithClass("span", "breakpoint-condition editing");
inputElement.textContent = url;
this.listElement.insertBefore(inputElement, element);
element.classList.add("hidden");
/**
* @param {boolean} accept
* @param {!Element} e
* @param {string} text
* @this {WebInspector.XHRBreakpointsSidebarPane}
*/
function finishEditing(accept, e, text)
{
this.removeListElement(inputElement);
if (accept) {
this._removeBreakpoint(url);
this._setBreakpoint(text, element._checkboxElement.checked);
this._saveBreakpoints();
} else
element.classList.remove("hidden");
}
WebInspector.InplaceEditor.startEditing(inputElement, new WebInspector.InplaceEditor.Config(finishEditing.bind(this, true), finishEditing.bind(this, false)));
},
highlightBreakpoint: function(url)
{
var element = this._breakpointElements.get(url);
if (!element)
return;
this.expand();
element.classList.add("breakpoint-hit");
this._highlightedElement = element;
},
clearBreakpointHighlight: function()
{
if (this._highlightedElement) {
this._highlightedElement.classList.remove("breakpoint-hit");
delete this._highlightedElement;
}
},
_saveBreakpoints: function()
{
var breakpoints = [];
for (var url of this._breakpointElements.keys())
breakpoints.push({ url: url, enabled: this._breakpointElements.get(url)._checkboxElement.checked });
WebInspector.settings.xhrBreakpoints.set(breakpoints);
},
/**
* @param {!WebInspector.Target} target
*/
_restoreBreakpoints: function(target)
{
var breakpoints = WebInspector.settings.xhrBreakpoints.get();
for (var i = 0; i < breakpoints.length; ++i) {
var breakpoint = breakpoints[i];
if (breakpoint && typeof breakpoint.url === "string")
this._setBreakpoint(breakpoint.url, breakpoint.enabled, target);
}
},
__proto__: WebInspector.BreakpointsSidebarPaneBase.prototype
}