/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/* import-globals-from ../../debugger-controller.js */
const utils = require("../utils");
const {
getSelectedSource,
getSourceByURL,
getBreakpoint,
getBreakpoints,
makeLocationId
} = require("../queries");
const actions = Object.assign(
{},
require("../actions/sources"),
require("../actions/breakpoints")
);
const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
const {
Heritage,
WidgetMethods,
setNamedTimeout
} = require("devtools/client/shared/widgets/view-helpers");
const { Task } = require("devtools/shared/task");
const { SideMenuWidget } = require("resource://devtools/client/shared/widgets/SideMenuWidget.jsm");
const { gDevTools } = require("devtools/client/framework/devtools");
const {KeyCodes} = require("devtools/client/shared/keycodes");
const NEW_SOURCE_DISPLAY_DELAY = 200; // ms
const FUNCTION_SEARCH_POPUP_POSITION = "topcenter bottomleft";
const BREAKPOINT_LINE_TOOLTIP_MAX_LENGTH = 1000; // chars
const BREAKPOINT_CONDITIONAL_POPUP_POSITION = "before_start";
const BREAKPOINT_CONDITIONAL_POPUP_OFFSET_X = 7; // px
const BREAKPOINT_CONDITIONAL_POPUP_OFFSET_Y = -3; // px
/**
* Functions handling the sources UI.
*/
function SourcesView(controller, DebuggerView) {
dumpn("SourcesView was instantiated");
utils.onReducerEvents(controller, {
"source": this.renderSource,
"blackboxed": this.renderBlackBoxed,
"prettyprinted": this.updateToolbarButtonsState,
"source-selected": this.renderSourceSelected,
"breakpoint-updated": bp => this.renderBreakpoint(bp),
"breakpoint-enabled": bp => this.renderBreakpoint(bp),
"breakpoint-disabled": bp => this.renderBreakpoint(bp),
"breakpoint-removed": bp => this.renderBreakpoint(bp, true),
}, this);
this.getState = controller.getState;
this.actions = bindActionCreators(actions, controller.dispatch);
this.DebuggerView = DebuggerView;
this.Parser = DebuggerController.Parser;
this.togglePrettyPrint = this.togglePrettyPrint.bind(this);
this.toggleBlackBoxing = this.toggleBlackBoxing.bind(this);
this.toggleBreakpoints = this.toggleBreakpoints.bind(this);
this._onEditorCursorActivity = this._onEditorCursorActivity.bind(this);
this._onMouseDown = this._onMouseDown.bind(this);
this._onSourceSelect = this._onSourceSelect.bind(this);
this._onStopBlackBoxing = this._onStopBlackBoxing.bind(this);
this._onBreakpointRemoved = this._onBreakpointRemoved.bind(this);
this._onBreakpointClick = this._onBreakpointClick.bind(this);
this._onBreakpointCheckboxClick = this._onBreakpointCheckboxClick.bind(this);
this._onConditionalPopupShowing = this._onConditionalPopupShowing.bind(this);
this._onConditionalPopupShown = this._onConditionalPopupShown.bind(this);
this._onConditionalPopupHiding = this._onConditionalPopupHiding.bind(this);
this._onConditionalTextboxKeyPress = this._onConditionalTextboxKeyPress.bind(this);
this._onEditorContextMenuOpen = this._onEditorContextMenuOpen.bind(this);
this._onCopyUrlCommand = this._onCopyUrlCommand.bind(this);
this._onNewTabCommand = this._onNewTabCommand.bind(this);
this._onConditionalPopupHidden = this._onConditionalPopupHidden.bind(this);
}
SourcesView.prototype = Heritage.extend(WidgetMethods, {
/**
* Initialization function, called when the debugger is started.
*/
initialize: function (isWorker) {
dumpn("Initializing the SourcesView");
this.widget = new SideMenuWidget(document.getElementById("sources"), {
contextMenu: document.getElementById("debuggerSourcesContextMenu"),
showArrows: true
});
this._preferredSourceURL = null;
this._unnamedSourceIndex = 0;
this.emptyText = L10N.getStr("noSourcesText");
this._blackBoxCheckboxTooltip = L10N.getStr("blackBoxCheckboxTooltip");
this._commandset = document.getElementById("debuggerCommands");
this._popupset = document.getElementById("debuggerPopupset");
this._cmPopup = document.getElementById("sourceEditorContextMenu");
this._cbPanel = document.getElementById("conditional-breakpoint-panel");
this._cbTextbox = document.getElementById("conditional-breakpoint-panel-textbox");
this._blackBoxButton = document.getElementById("black-box");
this._stopBlackBoxButton = document.getElementById("black-boxed-message-button");
this._prettyPrintButton = document.getElementById("pretty-print");
this._toggleBreakpointsButton = document.getElementById("toggle-breakpoints");
this._newTabMenuItem = document.getElementById("debugger-sources-context-newtab");
this._copyUrlMenuItem = document.getElementById("debugger-sources-context-copyurl");
this._noResultsFoundToolTip = new Tooltip(document);
this._noResultsFoundToolTip.defaultPosition = FUNCTION_SEARCH_POPUP_POSITION;
// We don't show the pretty print button if debugger a worker
// because it simply doesn't work yet. (bug 1273730)
if (Prefs.prettyPrintEnabled && !isWorker) {
this._prettyPrintButton.removeAttribute("hidden");
}
this._editorContainer = document.getElementById("editor");
this._editorContainer.addEventListener("mousedown", this._onMouseDown, false);
this.widget.addEventListener("select", this._onSourceSelect, false);
this._stopBlackBoxButton.addEventListener("click", this._onStopBlackBoxing, false);
this._cbPanel.addEventListener("popupshowing", this._onConditionalPopupShowing, false);
this._cbPanel.addEventListener("popupshown", this._onConditionalPopupShown, false);
this._cbPanel.addEventListener("popuphiding", this._onConditionalPopupHiding, false);
this._cbPanel.addEventListener("popuphidden", this._onConditionalPopupHidden, false);
this._cbTextbox.addEventListener("keypress", this._onConditionalTextboxKeyPress, false);
this._copyUrlMenuItem.addEventListener("command", this._onCopyUrlCommand, false);
this._newTabMenuItem.addEventListener("command", this._onNewTabCommand, false);
this._cbPanel.hidden = true;
this.allowFocusOnRightClick = true;
this.autoFocusOnSelection = false;
this.autoFocusOnFirstItem = false;
// Sort the contents by the displayed label.
this.sortContents((aFirst, aSecond) => {
return +(aFirst.attachment.label.toLowerCase() >
aSecond.attachment.label.toLowerCase());
});
// Sort known source groups towards the end of the list
this.widget.groupSortPredicate = function (a, b) {
if ((a in KNOWN_SOURCE_GROUPS) == (b in KNOWN_SOURCE_GROUPS)) {
return a.localeCompare(b);
}
return (a in KNOWN_SOURCE_GROUPS) ? 1 : -1;
};
this.DebuggerView.editor.on("popupOpen", this._onEditorContextMenuOpen);
this._addCommands();
},
/**
* Destruction function, called when the debugger is closed.
*/
destroy: function () {
dumpn("Destroying the SourcesView");
this.widget.removeEventListener("select", this._onSourceSelect, false);
this._stopBlackBoxButton.removeEventListener("click", this._onStopBlackBoxing, false);
this._cbPanel.removeEventListener("popupshowing", this._onConditionalPopupShowing, false);
this._cbPanel.removeEventListener("popupshown", this._onConditionalPopupShown, false);
this._cbPanel.removeEventListener("popuphiding", this._onConditionalPopupHiding, false);
this._cbPanel.removeEventListener("popuphidden", this._onConditionalPopupHidden, false);
this._cbTextbox.removeEventListener("keypress", this._onConditionalTextboxKeyPress, false);
this._copyUrlMenuItem.removeEventListener("command", this._onCopyUrlCommand, false);
this._newTabMenuItem.removeEventListener("command", this._onNewTabCommand, false);
this.DebuggerView.editor.off("popupOpen", this._onEditorContextMenuOpen, false);
},
empty: function () {
WidgetMethods.empty.call(this);
this._unnamedSourceIndex = 0;
this._selectedBreakpoint = null;
},
/**
* Add commands that XUL can fire.
*/
_addCommands: function () {
XULUtils.addCommands(this._commandset, {
addBreakpointCommand: e => this._onCmdAddBreakpoint(e),
addConditionalBreakpointCommand: e => this._onCmdAddConditionalBreakpoint(e),
blackBoxCommand: () => this.toggleBlackBoxing(),
unBlackBoxButton: () => this._onStopBlackBoxing(),
prettyPrintCommand: () => this.togglePrettyPrint(),
toggleBreakpointsCommand: () =>this.toggleBreakpoints(),
nextSourceCommand: () => this.selectNextItem(),
prevSourceCommand: () => this.selectPrevItem()
});
},
/**
* Sets the preferred location to be selected in this sources container.
* @param string aUrl
*/
set preferredSource(aUrl) {
this._preferredValue = aUrl;
// Selects the element with the specified value in this sources container,
// if already inserted.
if (this.containsValue(aUrl)) {
this.selectedValue = aUrl;
}
},
sourcesDidUpdate: function () {
if (!getSelectedSource(this.getState())) {
let url = this._preferredSourceURL;
let source = url && getSourceByURL(this.getState(), url);
if (source) {
this.actions.selectSource(source);
}
else {
setNamedTimeout("new-source", NEW_SOURCE_DISPLAY_DELAY, () => {
if (!getSelectedSource(this.getState()) && this.itemCount > 0) {
this.actions.selectSource(this.getItemAtIndex(0).attachment.source);
}
});
}
}
},
renderSource: function (source) {
this.addSource(source, { staged: false });
for (let bp of getBreakpoints(this.getState())) {
if (bp.location.actor === source.actor) {
this.renderBreakpoint(bp);
}
}
this.sourcesDidUpdate();
},
/**
* Adds a source to this sources container.
*
* @param object aSource
* The source object coming from the active thread.
* @param object aOptions [optional]
* Additional options for adding the source. Supported options:
* - staged: true to stage the item to be appended later
*/
addSource: function (aSource, aOptions = {}) {
if (!aSource.url && !aOptions.force) {
// We don't show any unnamed eval scripts yet (see bug 1124106)
return;
}
let { label, group, unicodeUrl } = this._parseUrl(aSource);
let contents = document.createElement("label");
contents.className = "plain dbg-source-item";
contents.setAttribute("value", label);
contents.setAttribute("crop", "start");
contents.setAttribute("flex", "1");
contents.setAttribute("tooltiptext", unicodeUrl);
if (aSource.introductionType === "wasm") {
const wasm = document.createElement("box");
wasm.className = "dbg-wasm-item";
const icon = document.createElement("box");
icon.setAttribute("tooltiptext", L10N.getStr("experimental"));
icon.className = "icon";
wasm.appendChild(icon);
wasm.appendChild(contents);
contents = wasm;
}
// If the source is blackboxed, apply the appropriate style.
if (gThreadClient.source(aSource).isBlackBoxed) {
contents.classList.add("black-boxed");
}
// Append a source item to this container.
this.push([contents, aSource.actor], {
staged: aOptions.staged, /* stage the item to be appended later? */
attachment: {
label: label,
group: group,
checkboxState: !aSource.isBlackBoxed,
checkboxTooltip: this._blackBoxCheckboxTooltip,
source: aSource
}
});
},
_parseUrl: function (aSource) {
let fullUrl = aSource.url;
let url, unicodeUrl, label, group;
if (!fullUrl) {
unicodeUrl = "SCRIPT" + this._unnamedSourceIndex++;
label = unicodeUrl;
group = L10N.getStr("anonymousSourcesLabel");
}
else {
let url = fullUrl.split(" -> ").pop();
label = aSource.addonPath ? aSource.addonPath : SourceUtils.getSourceLabel(url);
group = aSource.addonID ? aSource.addonID : SourceUtils.getSourceGroup(url);
unicodeUrl = NetworkHelper.convertToUnicode(unescape(fullUrl));
}
return {
label: label,
group: group,
unicodeUrl: unicodeUrl
};
},
renderBreakpoint: function (breakpoint, removed) {
if (removed) {
// Be defensive about the breakpoint not existing.
if (this._getBreakpoint(breakpoint)) {
this._removeBreakpoint(breakpoint);
}
}
else {
if (this._getBreakpoint(breakpoint)) {
this._updateBreakpointStatus(breakpoint);
}
else {
this._addBreakpoint(breakpoint);
}
}
},
/**
* Adds a breakpoint to this sources container.
*
* @param object aBreakpointClient
* See Breakpoints.prototype._showBreakpoint
* @param object aOptions [optional]
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_addBreakpoint: function (breakpoint, options = {}) {
let disabled = breakpoint.disabled;
let location = breakpoint.location;
// Get the source item to which the breakpoint should be attached.
let sourceItem = this.getItemByValue(location.actor);
if (!sourceItem) {
return;
}
// Create the element node and menu popup for the breakpoint item.
let breakpointArgs = Heritage.extend(breakpoint.asMutable(), options);
let breakpointView = this._createBreakpointView.call(this, breakpointArgs);
let contextMenu = this._createContextMenu.call(this, breakpointArgs);
// Append a breakpoint child item to the corresponding source item.
sourceItem.append(breakpointView.container, {
attachment: Heritage.extend(breakpointArgs, {
actor: location.actor,
line: location.line,
view: breakpointView,
popup: contextMenu
}),
attributes: [
["contextmenu", contextMenu.menupopupId]
],
// Make sure that when the breakpoint item is removed, the corresponding
// menupopup and commandset are also destroyed.
finalize: this._onBreakpointRemoved
});
if (typeof breakpoint.condition === "string") {
this.highlightBreakpoint(breakpoint.location, {
openPopup: true,
noEditorUpdate: true
});
}
window.emit(EVENTS.BREAKPOINT_SHOWN_IN_PANE);
},
/**
* Removes a breakpoint from this sources container.
* It does not also remove the breakpoint from the controller. Be careful.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_removeBreakpoint: function (breakpoint) {
// When a parent source item is removed, all the child breakpoint items are
// also automagically removed.
let sourceItem = this.getItemByValue(breakpoint.location.actor);
if (!sourceItem) {
return;
}
// Clear the breakpoint view.
sourceItem.remove(this._getBreakpoint(breakpoint));
if (this._selectedBreakpoint &&
(queries.makeLocationId(this._selectedBreakpoint.location) ===
queries.makeLocationId(breakpoint.location))) {
this._selectedBreakpoint = null;
}
window.emit(EVENTS.BREAKPOINT_HIDDEN_IN_PANE);
},
_getBreakpoint: function (bp) {
return this.getItemForPredicate(item => {
return item.attachment.actor === bp.location.actor &&
item.attachment.line === bp.location.line;
});
},
/**
* Updates a breakpoint.
*
* @param object breakpoint
*/
_updateBreakpointStatus: function (breakpoint) {
let location = breakpoint.location;
let breakpointItem = this._getBreakpoint(getBreakpoint(this.getState(), location));
if (!breakpointItem) {
return promise.reject(new Error("No breakpoint found."));
}
// Breakpoint will now be enabled.
let attachment = breakpointItem.attachment;
// Update the corresponding menu items to reflect the enabled state.
let prefix = "bp-cMenu-"; // "breakpoints context menu"
let identifier = makeLocationId(location);
let enableSelfId = prefix + "enableSelf-" + identifier + "-menuitem";
let disableSelfId = prefix + "disableSelf-" + identifier + "-menuitem";
let enableSelf = document.getElementById(enableSelfId);
let disableSelf = document.getElementById(disableSelfId);
if (breakpoint.disabled) {
enableSelf.removeAttribute("hidden");
disableSelf.setAttribute("hidden", true);
attachment.view.checkbox.removeAttribute("checked");
}
else {
enableSelf.setAttribute("hidden", true);
disableSelf.removeAttribute("hidden");
attachment.view.checkbox.setAttribute("checked", "true");
// Update the breakpoint toggle button checked state.
this._toggleBreakpointsButton.removeAttribute("checked");
}
},
/**
* Highlights a breakpoint in this sources container.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
* @param object aOptions [optional]
* An object containing some of the following boolean properties:
* - openPopup: tells if the expression popup should be shown.
* - noEditorUpdate: tells if you want to skip editor updates.
*/
highlightBreakpoint: function (aLocation, aOptions = {}) {
let breakpoint = getBreakpoint(this.getState(), aLocation);
if (!breakpoint) {
return;
}
// Breakpoint will now be selected.
this._selectBreakpoint(breakpoint);
// Update the editor location if necessary.
if (!aOptions.noEditorUpdate) {
this.DebuggerView.setEditorLocation(aLocation.actor, aLocation.line, { noDebug: true });
}
// If the breakpoint requires a new conditional expression, display
// the panel to input the corresponding expression.
if (aOptions.openPopup) {
return this._openConditionalPopup();
} else {
return this._hideConditionalPopup();
}
},
/**
* Highlight the breakpoint on the current currently focused line/column
* if it exists.
*/
highlightBreakpointAtCursor: function () {
let actor = this.selectedValue;
let line = this.DebuggerView.editor.getCursor().line + 1;
let location = { actor: actor, line: line };
this.highlightBreakpoint(location, { noEditorUpdate: true });
},
/**
* Unhighlights the current breakpoint in this sources container.
*/
unhighlightBreakpoint: function () {
this._hideConditionalPopup();
this._unselectBreakpoint();
},
/**
* Display the message thrown on breakpoint condition
*/
showBreakpointConditionThrownMessage: function (aLocation, aMessage = "") {
let breakpointItem = this._getBreakpoint(getBreakpoint(this.getState(), aLocation));
if (!breakpointItem) {
return;
}
let attachment = breakpointItem.attachment;
attachment.view.container.classList.add("dbg-breakpoint-condition-thrown");
attachment.view.message.setAttribute("value", aMessage);
},
/**
* Update the checked/unchecked and enabled/disabled states of the buttons in
* the sources toolbar based on the currently selected source's state.
*/
updateToolbarButtonsState: function (source) {
if (source.isBlackBoxed) {
this._blackBoxButton.setAttribute("checked", true);
this._prettyPrintButton.setAttribute("checked", true);
} else {
this._blackBoxButton.removeAttribute("checked");
this._prettyPrintButton.removeAttribute("checked");
}
if (source.isPrettyPrinted) {
this._prettyPrintButton.setAttribute("checked", true);
} else {
this._prettyPrintButton.removeAttribute("checked");
}
},
/**
* Toggle the pretty printing of the selected source.
*/
togglePrettyPrint: function () {
if (this._prettyPrintButton.hasAttribute("disabled")) {
return;
}
this.DebuggerView.showProgressBar();
const source = getSelectedSource(this.getState());
const sourceClient = gThreadClient.source(source);
const shouldPrettyPrint = !source.isPrettyPrinted;
// This is only here to give immediate feedback,
// `renderPrettyPrinted` will set the final status of the buttons
if (shouldPrettyPrint) {
this._prettyPrintButton.setAttribute("checked", true);
} else {
this._prettyPrintButton.removeAttribute("checked");
}
this.actions.togglePrettyPrint(source);
},
/**
* Toggle the black boxed state of the selected source.
*/
toggleBlackBoxing: Task.async(function* () {
const source = getSelectedSource(this.getState());
const shouldBlackBox = !source.isBlackBoxed;
// Be optimistic that the (un-)black boxing will succeed, so
// enable/disable the pretty print button and check/uncheck the
// black box button immediately.
if (shouldBlackBox) {
this._prettyPrintButton.setAttribute("disabled", true);
this._blackBoxButton.setAttribute("checked", true);
} else {
this._prettyPrintButton.removeAttribute("disabled");
this._blackBoxButton.removeAttribute("checked");
}
this.actions.blackbox(source, shouldBlackBox);
}),
renderBlackBoxed: function (source) {
const sourceItem = this.getItemByValue(source.actor);
sourceItem.prebuiltNode.classList.toggle(
"black-boxed",
source.isBlackBoxed
);
if (getSelectedSource(this.getState()).actor === source.actor) {
this.updateToolbarButtonsState(source);
}
},
/**
* Toggles all breakpoints enabled/disabled.
*/
toggleBreakpoints: function () {
let breakpoints = getBreakpoints(this.getState());
let hasBreakpoints = breakpoints.length > 0;
let hasEnabledBreakpoints = breakpoints.some(bp => !bp.disabled);
if (hasBreakpoints && hasEnabledBreakpoints) {
this._toggleBreakpointsButton.setAttribute("checked", true);
this._onDisableAll();
} else {
this._toggleBreakpointsButton.removeAttribute("checked");
this._onEnableAll();
}
},
hidePrettyPrinting: function () {
this._prettyPrintButton.style.display = "none";
if (this._blackBoxButton.style.display === "none") {
let sep = document.querySelector("#sources-toolbar .devtools-separator");
sep.style.display = "none";
}
},
hideBlackBoxing: function () {
this._blackBoxButton.style.display = "none";
if (this._prettyPrintButton.style.display === "none") {
let sep = document.querySelector("#sources-toolbar .devtools-separator");
sep.style.display = "none";
}
},
getDisplayURL: function (source) {
if (!source.url) {
return this.getItemByValue(source.actor).attachment.label;
}
return NetworkHelper.convertToUnicode(unescape(source.url));
},
/**
* Marks a breakpoint as selected in this sources container.
*
* @param object aItem
* The breakpoint item to select.
*/
_selectBreakpoint: function (bp) {
if (this._selectedBreakpoint === bp) {
return;
}
this._unselectBreakpoint();
this._selectedBreakpoint = bp;
const item = this._getBreakpoint(bp);
item.target.classList.add("selected");
// Ensure the currently selected breakpoint is visible.
this.widget.ensureElementIsVisible(item.target);
},
/**
* Marks the current breakpoint as unselected in this sources container.
*/
_unselectBreakpoint: function () {
if (!this._selectedBreakpoint) {
return;
}
const item = this._getBreakpoint(this._selectedBreakpoint);
item.target.classList.remove("selected");
this._selectedBreakpoint = null;
},
/**
* Opens a conditional breakpoint's expression input popup.
*/
_openConditionalPopup: function () {
let breakpointItem = this._getBreakpoint(this._selectedBreakpoint);
let attachment = breakpointItem.attachment;
// Check if this is an enabled conditional breakpoint, and if so,
// retrieve the current conditional epression.
let bp = getBreakpoint(this.getState(), attachment);
let expr = (bp ? (bp.condition || "") : "");
let cbPanel = this._cbPanel;
// Update the conditional expression textbox. If no expression was
// previously set, revert to using an empty string by default.
this._cbTextbox.value = expr;
function openPopup() {
// Show the conditional expression panel. The popup arrow should be pointing
// at the line number node in the breakpoint item view.
cbPanel.hidden = false;
cbPanel.openPopup(breakpointItem.attachment.view.lineNumber,
BREAKPOINT_CONDITIONAL_POPUP_POSITION,
BREAKPOINT_CONDITIONAL_POPUP_OFFSET_X,
BREAKPOINT_CONDITIONAL_POPUP_OFFSET_Y);
cbPanel.removeEventListener("popuphidden", openPopup, false);
}
// Wait until the other cb panel is closed
if (!this._cbPanel.hidden) {
this._cbPanel.addEventListener("popuphidden", openPopup, false);
} else {
openPopup();
}
},
/**
* Hides a conditional breakpoint's expression input popup.
*/
_hideConditionalPopup: function () {
// Sometimes this._cbPanel doesn't have hidePopup method which doesn't
// break anything but simply outputs an exception to the console.
if (this._cbPanel.hidePopup) {
this._cbPanel.hidePopup();
}
},
/**
* Customization function for creating a breakpoint item's UI.
*
* @param object aOptions
* A couple of options or flags supported by this operation:
* - location: the breakpoint's source location and line number
* - disabled: the breakpoint's disabled state, boolean
* - text: the breakpoint's line text to be displayed
* - message: thrown string when the breakpoint condition throws
* @return object
* An object containing the breakpoint container, checkbox,
* line number and line text nodes.
*/
_createBreakpointView: function (aOptions) {
let { location, disabled, text, message } = aOptions;
let identifier = makeLocationId(location);
let checkbox = document.createElement("checkbox");
if (!disabled) {
checkbox.setAttribute("checked", true);
}
checkbox.className = "dbg-breakpoint-checkbox";
let lineNumberNode = document.createElement("label");
lineNumberNode.className = "plain dbg-breakpoint-line";
lineNumberNode.setAttribute("value", location.line);
let lineTextNode = document.createElement("label");
lineTextNode.className = "plain dbg-breakpoint-text";
lineTextNode.setAttribute("value", text);
lineTextNode.setAttribute("crop", "end");
lineTextNode.setAttribute("flex", "1");
let tooltip = text ? text.substr(0, BREAKPOINT_LINE_TOOLTIP_MAX_LENGTH) : "";
lineTextNode.setAttribute("tooltiptext", tooltip);
let thrownNode = document.createElement("label");
thrownNode.className = "plain dbg-breakpoint-condition-thrown-message dbg-breakpoint-text";
thrownNode.setAttribute("value", message);
thrownNode.setAttribute("crop", "end");
thrownNode.setAttribute("flex", "1");
let bpLineContainer = document.createElement("hbox");
bpLineContainer.className = "plain dbg-breakpoint-line-container";
bpLineContainer.setAttribute("flex", "1");
bpLineContainer.appendChild(lineNumberNode);
bpLineContainer.appendChild(lineTextNode);
let bpDetailContainer = document.createElement("vbox");
bpDetailContainer.className = "plain dbg-breakpoint-detail-container";
bpDetailContainer.setAttribute("flex", "1");
bpDetailContainer.appendChild(bpLineContainer);
bpDetailContainer.appendChild(thrownNode);
let container = document.createElement("hbox");
container.id = "breakpoint-" + identifier;
container.className = "dbg-breakpoint side-menu-widget-item-other";
container.classList.add("devtools-monospace");
container.setAttribute("align", "center");
container.setAttribute("flex", "1");
container.addEventListener("click", this._onBreakpointClick, false);
checkbox.addEventListener("click", this._onBreakpointCheckboxClick, false);
container.appendChild(checkbox);
container.appendChild(bpDetailContainer);
return {
container: container,
checkbox: checkbox,
lineNumber: lineNumberNode,
lineText: lineTextNode,
message: thrownNode
};
},
/**
* Creates a context menu for a breakpoint element.
*
* @param object aOptions
* A couple of options or flags supported by this operation:
* - location: the breakpoint's source location and line number
* - disabled: the breakpoint's disabled state, boolean
* @return object
* An object containing the breakpoint commandset and menu popup ids.
*/
_createContextMenu: function (aOptions) {
let { location, disabled } = aOptions;
let identifier = makeLocationId(location);
let commandset = document.createElement("commandset");
let menupopup = document.createElement("menupopup");
commandset.id = "bp-cSet-" + identifier;
menupopup.id = "bp-mPop-" + identifier;
createMenuItem.call(this, "enableSelf", !disabled);
createMenuItem.call(this, "disableSelf", disabled);
createMenuItem.call(this, "deleteSelf");
createMenuSeparator();
createMenuItem.call(this, "setConditional");
createMenuSeparator();
createMenuItem.call(this, "enableOthers");
createMenuItem.call(this, "disableOthers");
createMenuItem.call(this, "deleteOthers");
createMenuSeparator();
createMenuItem.call(this, "enableAll");
createMenuItem.call(this, "disableAll");
createMenuSeparator();
createMenuItem.call(this, "deleteAll");
this._popupset.appendChild(menupopup);
this._commandset.appendChild(commandset);
return {
commandsetId: commandset.id,
menupopupId: menupopup.id
};
/**
* Creates a menu item specified by a name with the appropriate attributes
* (label and handler).
*
* @param string aName
* A global identifier for the menu item.
* @param boolean aHiddenFlag
* True if this menuitem should be hidden.
*/
function createMenuItem(aName, aHiddenFlag) {
let menuitem = document.createElement("menuitem");
let command = document.createElement("command");
let prefix = "bp-cMenu-"; // "breakpoints context menu"
let commandId = prefix + aName + "-" + identifier + "-command";
let menuitemId = prefix + aName + "-" + identifier + "-menuitem";
let label = L10N.getStr("breakpointMenuItem." + aName);
let func = "_on" + aName.charAt(0).toUpperCase() + aName.slice(1);
command.id = commandId;
command.setAttribute("label", label);
command.addEventListener("command", () => this[func](location), false);
menuitem.id = menuitemId;
menuitem.setAttribute("command", commandId);
aHiddenFlag && menuitem.setAttribute("hidden", "true");
commandset.appendChild(command);
menupopup.appendChild(menuitem);
}
/**
* Creates a simple menu separator element and appends it to the current
* menupopup hierarchy.
*/
function createMenuSeparator() {
let menuseparator = document.createElement("menuseparator");
menupopup.appendChild(menuseparator);
}
},
/**
* Copy the source url from the currently selected item.
*/
_onCopyUrlCommand: function () {
let selected = this.selectedItem && this.selectedItem.attachment;
if (!selected) {
return;
}
clipboardHelper.copyString(selected.source.url);
},
/**
* Opens selected item source in a new tab.
*/
_onNewTabCommand: function () {
let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
let selected = this.selectedItem.attachment;
win.openUILinkIn(selected.source.url, "tab", { relatedToCurrent: true });
},
/**
* Function called each time a breakpoint item is removed.
*
* @param object aItem
* The corresponding item.
*/
_onBreakpointRemoved: function (aItem) {
dumpn("Finalizing breakpoint item: " + aItem.stringify());
// Destroy the context menu for the breakpoint.
let contextMenu = aItem.attachment.popup;
document.getElementById(contextMenu.commandsetId).remove();
document.getElementById(contextMenu.menupopupId).remove();
},
_onMouseDown: function (e) {
this.hideNoResultsTooltip();
if (!e.metaKey) {
return;
}
let editor = this.DebuggerView.editor;
let identifier = this._findIdentifier(e.clientX, e.clientY);
if (!identifier) {
return;
}
let foundDefinitions = this._getFunctionDefinitions(identifier);
if (!foundDefinitions || !foundDefinitions.definitions) {
return;
}
this._showFunctionDefinitionResults(identifier, foundDefinitions.definitions, editor);
},
/**
* Searches for function definition of a function in a given source file
*/
_findDefinition: function (parsedSource, aName) {
let functionDefinitions = parsedSource.getNamedFunctionDefinitions(aName);
let resultList = [];
if (!functionDefinitions || !functionDefinitions.length || !functionDefinitions[0].length) {
return {
definitions: resultList
};
}
// functionDefinitions is a list with an object full of metadata,
// extract the data and use to construct a more useful, less
// cluttered, contextual list
for (let i = 0; i < functionDefinitions.length; i++) {
let functionDefinition = {
source: functionDefinitions[i].sourceUrl,
startLine: functionDefinitions[i][0].functionLocation.start.line,
startColumn: functionDefinitions[i][0].functionLocation.start.column,
name: functionDefinitions[i][0].functionName
};
resultList.push(functionDefinition);
}
return {
definitions: resultList
};
},
/**
* Searches for an identifier underneath the specified position in the
* source editor.
*
* @param number x, y
* The left/top coordinates where to look for an identifier.
*/
_findIdentifier: function (x, y) {
let parsedSource = SourceUtils.parseSource(this.DebuggerView, this.Parser);
let identifierInfo = SourceUtils.findIdentifier(this.DebuggerView.editor, parsedSource, x, y);
// Not hovering over an identifier
if (!identifierInfo) {
return;
}
return identifierInfo;
},
/**
* The selection listener for the source editor.
*/
_onEditorCursorActivity: function (e) {
let editor = this.DebuggerView.editor;
let start = editor.getCursor("start").line + 1;
let end = editor.getCursor().line + 1;
let source = getSelectedSource(this.getState());
if (source) {
let location = { actor: source.actor, line: start };
if (getBreakpoint(this.getState(), location) && start == end) {
this.highlightBreakpoint(location, { noEditorUpdate: true });
} else {
this.unhighlightBreakpoint();
}
}
},
/*
* Uses function definition data to perform actions in different
* cases of how many locations were found: zero, one, or multiple definitions
*/
_showFunctionDefinitionResults: function (aHoveredFunction, aDefinitionList, aEditor) {
let definitions = aDefinitionList;
let hoveredFunction = aHoveredFunction;
// show a popup saying no results were found
if (definitions.length == 0) {
this._noResultsFoundToolTip.setTextContent({
messages: [L10N.getStr("noMatchingStringsText")]
});
this._markedIdentifier = aEditor.markText(
{ line: hoveredFunction.location.start.line - 1, ch: hoveredFunction.location.start.column },
{ line: hoveredFunction.location.end.line - 1, ch: hoveredFunction.location.end.column });
this._noResultsFoundToolTip.show(this._markedIdentifier.anchor);
} else if (definitions.length == 1) {
this.DebuggerView.setEditorLocation(definitions[0].source, definitions[0].startLine);
} else {
// TODO: multiple definitions found, do something else
this.DebuggerView.setEditorLocation(definitions[0].source, definitions[0].startLine);
}
},
/**
* Hides the tooltip and clear marked text popup.
*/
hideNoResultsTooltip: function () {
this._noResultsFoundToolTip.hide();
if (this._markedIdentifier) {
this._markedIdentifier.clear();
this._markedIdentifier = null;
}
},
/*
* Gets the definition locations from function metadata
*/
_getFunctionDefinitions: function (aIdentifierInfo) {
let parsedSource = SourceUtils.parseSource(this.DebuggerView, this.Parser);
let definition_info = this._findDefinition(parsedSource, aIdentifierInfo.name);
// Did not find any definitions for the identifier
if (!definition_info) {
return;
}
return definition_info;
},
/**
* The select listener for the sources container.
*/
_onSourceSelect: function ({ detail: sourceItem }) {
if (!sourceItem) {
return;
}
const { source } = sourceItem.attachment;
this.actions.selectSource(source);
},
renderSourceSelected: function (source) {
if (source.url) {
this._preferredSourceURL = source.url;
}
this.updateToolbarButtonsState(source);
this._selectItem(this.getItemByValue(source.actor));
},
/**
* The click listener for the "stop black boxing" button.
*/
_onStopBlackBoxing: Task.async(function* () {
this.actions.blackbox(getSelectedSource(this.getState()), false);
}),
/**
* The source editor's contextmenu handler.
* - Toggles "Add Conditional Breakpoint" and "Edit Conditional Breakpoint" items
*/
_onEditorContextMenuOpen: function (message, ev, popup) {
let actor = this.selectedValue;
let line = this.DebuggerView.editor.getCursor().line + 1;
let location = { actor, line };
let breakpoint = getBreakpoint(this.getState(), location);
let addConditionalBreakpointMenuItem = popup.querySelector("#se-dbg-cMenu-addConditionalBreakpoint");
let editConditionalBreakpointMenuItem = popup.querySelector("#se-dbg-cMenu-editConditionalBreakpoint");
if (breakpoint && !!breakpoint.condition) {
editConditionalBreakpointMenuItem.removeAttribute("hidden");
addConditionalBreakpointMenuItem.setAttribute("hidden", true);
}
else {
addConditionalBreakpointMenuItem.removeAttribute("hidden");
editConditionalBreakpointMenuItem.setAttribute("hidden", true);
}
},
/**
* The click listener for a breakpoint container.
*/
_onBreakpointClick: function (e) {
let sourceItem = this.getItemForElement(e.target);
let breakpointItem = this.getItemForElement.call(sourceItem, e.target);
let attachment = breakpointItem.attachment;
let bp = getBreakpoint(this.getState(), attachment);
if (bp) {
this.highlightBreakpoint(bp.location, {
openPopup: bp.condition && e.button == 0
});
} else {
this.highlightBreakpoint(bp.location);
}
},
/**
* The click listener for a breakpoint checkbox.
*/
_onBreakpointCheckboxClick: function (e) {
let sourceItem = this.getItemForElement(e.target);
let breakpointItem = this.getItemForElement.call(sourceItem, e.target);
let bp = getBreakpoint(this.getState(), breakpointItem.attachment);
if (bp.disabled) {
this.actions.enableBreakpoint(bp.location);
}
else {
this.actions.disableBreakpoint(bp.location);
}
// Don't update the editor location (avoid propagating into _onBreakpointClick).
e.preventDefault();
e.stopPropagation();
},
/**
* The popup showing listener for the breakpoints conditional expression panel.
*/
_onConditionalPopupShowing: function () {
this._conditionalPopupVisible = true; // Used in tests.
},
/**
* The popup shown listener for the breakpoints conditional expression panel.
*/
_onConditionalPopupShown: function () {
this._cbTextbox.focus();
this._cbTextbox.select();
window.emit(EVENTS.CONDITIONAL_BREAKPOINT_POPUP_SHOWN);
},
/**
* The popup hiding listener for the breakpoints conditional expression panel.
*/
_onConditionalPopupHiding: function () {
this._conditionalPopupVisible = false; // Used in tests.
// Check if this is an enabled conditional breakpoint, and if so,
// save the current conditional expression.
let bp = this._selectedBreakpoint;
if (bp) {
let condition = this._cbTextbox.value;
this.actions.setBreakpointCondition(bp.location, condition);
}
},
/**
* The popup hidden listener for the breakpoints conditional expression panel.
*/
_onConditionalPopupHidden: function () {
this._cbPanel.hidden = true;
window.emit(EVENTS.CONDITIONAL_BREAKPOINT_POPUP_HIDDEN);
},
/**
* The keypress listener for the breakpoints conditional expression textbox.
*/
_onConditionalTextboxKeyPress: function (e) {
if (e.keyCode == KeyCodes.DOM_VK_RETURN) {
this._hideConditionalPopup();
}
},
/**
* Called when the add breakpoint key sequence was pressed.
*/
_onCmdAddBreakpoint: function (e) {
let actor = this.selectedValue;
let line = (this.DebuggerView.clickedLine ?
this.DebuggerView.clickedLine + 1 :
this.DebuggerView.editor.getCursor().line + 1);
let location = { actor, line };
let bp = getBreakpoint(this.getState(), location);
// If a breakpoint already existed, remove it now.
if (bp) {
this.actions.removeBreakpoint(bp.location);
}
// No breakpoint existed at the required location, add one now.
else {
this.actions.addBreakpoint(location);
}
},
/**
* Called when the add conditional breakpoint key sequence was pressed.
*/
_onCmdAddConditionalBreakpoint: function (e) {
let actor = this.selectedValue;
let line = (this.DebuggerView.clickedLine ?
this.DebuggerView.clickedLine + 1 :
this.DebuggerView.editor.getCursor().line + 1);
let location = { actor, line };
let bp = getBreakpoint(this.getState(), location);
// If a breakpoint already existed or wasn't a conditional, morph it now.
if (bp) {
this.highlightBreakpoint(bp.location, { openPopup: true });
}
// No breakpoint existed at the required location, add one now.
else {
this.actions.addBreakpoint(location, "");
}
},
getOtherBreakpoints: function (location) {
const bps = getBreakpoints(this.getState());
if (location) {
return bps.filter(bp => {
return (bp.location.actor !== location.actor ||
bp.location.line !== location.line);
});
}
return bps;
},
/**
* Function invoked on the "setConditional" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onSetConditional: function (aLocation) {
// Highlight the breakpoint and show a conditional expression popup.
this.highlightBreakpoint(aLocation, { openPopup: true });
},
/**
* Function invoked on the "enableSelf" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onEnableSelf: function (aLocation) {
// Enable the breakpoint, in this container and the controller store.
this.actions.enableBreakpoint(aLocation);
},
/**
* Function invoked on the "disableSelf" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onDisableSelf: function (aLocation) {
const bp = getBreakpoint(this.getState(), aLocation);
if (!bp.disabled) {
this.actions.disableBreakpoint(aLocation);
}
},
/**
* Function invoked on the "deleteSelf" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onDeleteSelf: function (aLocation) {
this.actions.removeBreakpoint(aLocation);
},
/**
* Function invoked on the "enableOthers" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onEnableOthers: function (aLocation) {
let other = this.getOtherBreakpoints(aLocation);
// TODO(jwl): batch these and interrupt the thread for all of them
other.forEach(bp => this._onEnableSelf(bp.location));
},
/**
* Function invoked on the "disableOthers" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onDisableOthers: function (aLocation) {
let other = this.getOtherBreakpoints(aLocation);
other.forEach(bp => this._onDisableSelf(bp.location));
},
/**
* Function invoked on the "deleteOthers" menuitem command.
*
* @param object aLocation
* @see DebuggerController.Breakpoints.addBreakpoint
*/
_onDeleteOthers: function (aLocation) {
let other = this.getOtherBreakpoints(aLocation);
other.forEach(bp => this._onDeleteSelf(bp.location));
},
/**
* Function invoked on the "enableAll" menuitem command.
*/
_onEnableAll: function () {
this._onEnableOthers(undefined);
},
/**
* Function invoked on the "disableAll" menuitem command.
*/
_onDisableAll: function () {
this._onDisableOthers(undefined);
},
/**
* Function invoked on the "deleteAll" menuitem command.
*/
_onDeleteAll: function () {
this._onDeleteOthers(undefined);
},
_commandset: null,
_popupset: null,
_cmPopup: null,
_cbPanel: null,
_cbTextbox: null,
_selectedBreakpointItem: null,
_conditionalPopupVisible: false,
_noResultsFoundToolTip: null,
_markedIdentifier: null,
_selectedBreakpoint: null,
_conditionalPopupVisible: false
});
module.exports = SourcesView;