// Helpers
/**
* Return a rep object that is responsible for rendering given
* object.
*
* @param object {Object} Object to be rendered in the UI. This
* can be generic JS object as well as a grip (handle to a remote
* debuggee object).
*
* @param defaultObject {React.Component} The default template
* that should be used to render given object if none is found.
*/
function getRep(object, defaultRep = Obj) {
let type = typeof object;
if (type == "object" && object instanceof String) {
type = "string";
}
if (isGrip(object)) {
type = object.class;
}
for (let i = 0; i < reps.length; i++) {
let rep = reps[i];
try {
// supportsObject could return weight (not only true/false
// but a number), which would allow to priorities templates and
// support better extensibility.
if (rep.supportsObject(object, type)) {
return React.createFactory(rep.rep);
}
} catch (err) {
console.error(err);
}
}
return React.createFactory(defaultRep.rep);
}
/**
* Create React factories for given arguments.
* Example:
* const {
* Tabs,
* TabPanel
* } = createFactories(require("devtools/client/shared/components/tabs/Tabs"));
*/
function createFactories(args) {
const result = {};
for (const p in args) {
result[p] = React.createFactory(args[p]);
}
return result;
}
* 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";
// React & Redux
const {
createClass,
createFactory,
DOM: dom,
PropTypes
} = require("devtools/client/shared/vendor/react");
const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
const actions = require("devtools/client/webconsole/new-console-output/actions/index");
const {MESSAGE_SOURCE} = require("devtools/client/webconsole/new-console-output/constants");
const CollapseButton = createFactory(require("devtools/client/webconsole/new-console-output/components/collapse-button"));
const MessageIndent = createFactory(require("devtools/client/webconsole/new-console-output/components/message-indent").MessageIndent);
const MessageIcon = createFactory(require("devtools/client/webconsole/new-console-output/components/message-icon"));
const MessageRepeat = createFactory(require("devtools/client/webconsole/new-console-output/components/message-repeat"));
const FrameView = createFactory(require("devtools/client/shared/components/frame"));
const StackTrace = createFactory(require("devtools/client/shared/components/stack-trace"));
const Message = createClass({
displayName: "Message",
propTypes: {
open: PropTypes.bool,
collapsible: PropTypes.bool,
collapseTitle: PropTypes.string,
source: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
/* 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";
const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const { getStr } = require("../utils/l10n");
const Types = require("../types");
const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
const ReloadConditions = createFactory(require("./ReloadConditions"));
class GlobalToolbar extends PureComponent {
static get propTypes() {
return {
devices: PropTypes.shape(Types.devices).isRequired,
displayPixelRatio: Types.pixelRatio.value.isRequired,
networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
reloadConditions: PropTypes.shape(Types.reloadConditions).isRequired,
screenshot: PropTypes.shape(Types.screenshot).isRequired,
selectedDevice: PropTypes.string.isRequired,
selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
onChangeNetworkThrottling: PropTypes.func.isRequired,
onChangePixelRatio: PropTypes.func.isRequired,
onChangeReloadCondition: PropTypes.func.isRequired,
onChangeTouchSimulation: PropTypes.func.isRequired,
/* 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/. */
const { Cu } = require("chrome");
const { LocalizationHelper } = require("devtools/client/shared/l10n");
const STRINGS_URI = "chrome://devtools/locale/jit-optimizations.properties";
const L10N = new LocalizationHelper(STRINGS_URI);
const { PluralForm } = require("resource://gre/modules/PluralForm.jsm");
const { DOM: dom, PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
const {
JITOptimizations, hasSuccessfulOutcome, isSuccessfulOutcome
} = require("devtools/client/performance/modules/logic/jit");
const Frame = createFactory(require("devtools/client/shared/components/frame"));
const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
const JIT_SAMPLES = L10N.getStr("jit.samples");
const JIT_TYPES = L10N.getStr("jit.types");
const JIT_ATTEMPTS = L10N.getStr("jit.attempts");
const PROPNAME_MAX_LENGTH = 4;
// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
// in `devtools/client/themes/jit-optimizations.css`
const TREE_ROW_HEIGHT = 14;
const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type", "observedtype"];
const JITOptimizationsItem = module.exports = createClass({
displayName: "JITOptimizationsItem",
propTypes: {
onViewSourceInDebugger: PropTypes.func.isRequired,
"use strict";
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { L10N } = require("../utils/l10n");
const {
decodeUnicodeBase64,
fetchNetworkUpdatePacket,
formDataURI,
getUrlBaseName,
} = require("../utils/request-utils");
const { Filters } = require("../utils/filter-predicates");
// Components
const PropertiesView = createFactory(require("./PropertiesView"));
const { div, img } = dom;
const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
const JSON_FILTER_TEXT = L10N.getStr("jsonFilterText");
const RESPONSE_IMG_NAME = L10N.getStr("netmonitor.response.name");
const RESPONSE_IMG_DIMENSIONS = L10N.getStr("netmonitor.response.dimensions");
const RESPONSE_IMG_MIMETYPE = L10N.getStr("netmonitor.response.mime");
const RESPONSE_PAYLOAD = L10N.getStr("responsePayload");
const RESPONSE_PREVIEW = L10N.getStr("responsePreview");
const JSON_VIEW_MIME_TYPE = "application/vnd.mozilla.json.view";
/*
* Response panel component
* Displays the GET parameters and POST data of a request
/* 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";
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const NetInfoParams = createFactory(require("./net-info-params"));
/**
* This template represents a group of data within a tab. For example,
* Headers tab has two groups 'Request Headers' and 'Response Headers'
* The Response tab can also have two groups 'Raw Data' and 'JSON'
*/
class NetInfoGroup extends Component {
static get propTypes() {
return {
type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
params: PropTypes.array,
content: PropTypes.element,
open: PropTypes.bool
};
}
static get defaultProps() {
return {
open: true,
};
}
/* 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";
const { createFactory, PureComponent } =
require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const DebugTargetItem = createFactory(require("./DebugTargetItem"));
const Types = require("../../types/index");
/**
* This component displays list of debug target.
*/
class DebugTargetList extends PureComponent {
static get propTypes() {
return {
actionComponent: PropTypes.any.isRequired,
additionalActionsComponent: PropTypes.any,
detailComponent: PropTypes.any.isRequired,
dispatch: PropTypes.func.isRequired,
targets: PropTypes.arrayOf(Types.debugTarget).isRequired,
};
}
/* 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";
const { LocalizationHelper } = require("devtools/shared/l10n");
const STRINGS_URI = "devtools/client/locales/jit-optimizations.properties";
const L10N = new LocalizationHelper(STRINGS_URI);
const { assert } = require("devtools/shared/DevToolsUtils");
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const Tree = createFactory(require("devtools/client/shared/components/VirtualizedTree"));
const OptimizationsItem = createFactory(require("./JITOptimizationsItem"));
const FrameView = createFactory(require("../../shared/components/Frame"));
const JIT_TITLE = L10N.getStr("jit.title");
// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
// in `devtools/client/themes/jit-optimizations.css`
const TREE_ROW_HEIGHT = 14;
/* eslint-disable no-unused-vars */
/**
* TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
* integrated as of yet, and this may represent intended functionality.
*/
const onClickTooltipString = frame =>
L10N.getFormatStr("viewsourceindebugger",
`${frame.source}:${frame.line}:${frame.column}`);
/* eslint-enable no-unused-vars */
/* 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";
/**
* This file contains the "waterfall" view, essentially a detailed list
* of all the markers in the timeline data.
*/
const { createFactory } = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const WaterfallHeader = createFactory(require("./WaterfallHeader"));
const WaterfallTree = createFactory(require("./WaterfallTree"));
function Waterfall(props) {
return dom.div(
{ className: "waterfall-markers" },
WaterfallHeader(props),
WaterfallTree(props)
);
}
Waterfall.displayName = "Waterfall";
Waterfall.propTypes = {
marker: PropTypes.object.isRequired,
startTime: PropTypes.number.isRequired,
endTime: PropTypes.number.isRequired,
dataScale: PropTypes.number.isRequired,
loader.lazyGetter(this, "RequestListColumnWaterfall", function() {
return createFactory(require("./RequestListColumnWaterfall"));
});
loader.lazyGetter(this, "RequestListColumnTransferredSize", function() {
return createFactory(require("./RequestListColumnTransferredSize"));
});
loader.lazyGetter(this, "RequestListColumnSetCookies", function() {
return createFactory(require("./RequestListColumnSetCookies"));
});
loader.lazyGetter(this, "RequestListColumnResponseHeader", function() {
return createFactory(require("./RequestListColumnResponseHeader"));
});
/* globals dumpn, $, NetMonitorView */
"use strict";
const { createFactory, DOM } = require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
const FilterButtons = createFactory(require("./components/filter-buttons"));
const { L10N } = require("./l10n");
// Shortcuts
const { button } = DOM;
/**
* Functions handling the toolbar view: expand/collapse button etc.
*/
function ToolbarView() {
dumpn("ToolbarView was instantiated");
this._onTogglePanesPressed = this._onTogglePanesPressed.bind(this);
}
ToolbarView.prototype = {
/**
* Initialization function, called when the debugger is started.
*/
initialize: function (store) {
dumpn("Initializing the ToolbarView");
this._clearContainerNode = $("#react-clear-button-hook");
this._filterContainerNode = $("#react-filter-buttons-hook");
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { connect } = require("devtools/client/shared/redux/visibility-handler-connect");
const {initialize} = require("devtools/client/webconsole/actions/ui");
const {
getAllMessagesById,
getAllMessagesUiById,
getAllMessagesTableDataById,
getAllNetworkMessagesUpdateById,
getVisibleMessages,
getPausedExecutionPoint,
getAllRepeatById,
} = require("devtools/client/webconsole/selectors/messages");
const MessageContainer = createFactory(require("devtools/client/webconsole/components/MessageContainer").MessageContainer);
const {
MESSAGE_TYPE,
} = require("devtools/client/webconsole/constants");
const {
getInitialMessageCountForViewport
} = require("devtools/client/webconsole/utils/messages.js");
class ConsoleOutput extends Component {
static get propTypes() {
return {
initialized: PropTypes.bool.isRequired,
messages: PropTypes.object.isRequired,
messagesUi: PropTypes.array.isRequired,
serviceContainer: PropTypes.shape({
attachRefToHud: PropTypes.func.isRequired,
/* 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";
const { createFactory, PureComponent } =
require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const AnimationList = createFactory(require("./AnimationList"));
const AnimationListHeader = createFactory(require("./AnimationListHeader"));
const TimeScale = require("../utils/timescale");
class AnimationListContainer extends PureComponent {
static get propTypes() {
return {
animations: PropTypes.arrayOf(PropTypes.object).isRequired,
emitEventForTest: PropTypes.func.isRequired,
getAnimatedPropertyMap: PropTypes.func.isRequired,
getNodeFromActor: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
selectAnimation: PropTypes.func.isRequired,
setSelectedNode: PropTypes.func.isRequired,
simulateAnimation: PropTypes.func.isRequired,
};
}
/* 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/. */
const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { breakdowns } = require("./constants");
const { toggleRecordingAllocationStacks } = require("./actions/allocations");
const { setBreakdownAndRefresh } = require("./actions/breakdown");
const { toggleInvertedAndRefresh } = require("./actions/inverted");
const { selectSnapshotAndRefresh, takeSnapshotAndCensus } = require("./actions/snapshot");
const { breakdownNameToSpec, getBreakdownDisplayData } = require("./utils");
const Toolbar = createFactory(require("./components/toolbar"));
const List = createFactory(require("./components/list"));
const SnapshotListItem = createFactory(require("./components/snapshot-list-item"));
const HeapView = createFactory(require("./components/heap"));
const { app: appModel } = require("./models");
const App = createClass({
displayName: "memory-tool",
propTypes: appModel,
getDefaultProps() {
return {};
},
childContextTypes: {
front: PropTypes.any,
heapWorker: PropTypes.any,
toolbox: PropTypes.any,
/* 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";
const { DOM: dom, createClass, createFactory, PropTypes } =
require("devtools/client/shared/vendor/react");
const Types = require("../types");
const Browser = createFactory(require("./browser"));
module.exports = createClass({
displayName: "Viewport",
propTypes: {
location: Types.location.isRequired,
viewport: PropTypes.shape(Types.viewport).isRequired,
},
render() {
let {
location,
viewport,
} = this.props;
// Additional elements will soon appear here around the Browser, like drag
// handles, etc.
return dom.div(
{
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
const { MODE } = require("./constants");
// Shortcuts
const { span } = React.DOM;
/**
* Property for Obj (local JS objects), Grip (remote JS objects)
* and GripMap (remote JS maps and weakmaps) reps.
* It's used to render object properties.
*/
let PropRep = React.createFactory(React.createClass({
displayName: "PropRep",
propTypes: {
// Property name.
name: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]).isRequired,
// Equal character rendered between property name and value.
equal: React.PropTypes.string,
// Delimiter character used to separate individual properties.
delim: React.PropTypes.string,
// @TODO Change this to Object.values once it's supported in Node's version of V8
mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])),
},
render: function () {
const { Grip } = require("./grip");
let { Rep } = createFactories(require("./rep"));
let key;
// The key can be a simple string, for plain objects,
// or another object for maps and weakmaps.
if (typeof this.props.name === "string") {
key = span({"className": "nodeName"}, this.props.name);
} else {
key = Rep({
object: this.props.name,
mode: this.props.mode || MODE.TINY,
defaultRep: Grip,
objectLink: this.props.objectLink,
});
}
return (
span({},
key,
span({
"className": "objectEqual"
}, this.props.equal),
Rep(this.props),
span({
"className": "objectComma"
}, this.props.delim)
)
);
}
}));
// Exports from this module
exports.PropRep = PropRep;
});
const {
createClass,
createFactory,
DOM: dom,
PropTypes
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const {
getAllMessages,
getAllMessagesUiById,
getAllMessagesTableDataById,
getAllGroupsById,
} = require("devtools/client/webconsole/new-console-output/selectors/messages");
const { getScrollSetting } = require("devtools/client/webconsole/new-console-output/selectors/ui");
const MessageContainer = createFactory(require("devtools/client/webconsole/new-console-output/components/message-container").MessageContainer);
const ConsoleOutput = createClass({
displayName: "ConsoleOutput",
propTypes: {
messages: PropTypes.object.isRequired,
messagesUi: PropTypes.object.isRequired,
serviceContainer: PropTypes.shape({
attachRefToHud: PropTypes.func.isRequired,
}),
autoscroll: PropTypes.bool.isRequired,
},
componentDidMount() {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
const { Caption } = createFactories(require("./caption"));
const { MODE } = require("./constants");
// Shortcuts
const DOM = React.DOM;
/**
* Renders an array. The array is enclosed by left and right bracket
* and the max number of rendered items depends on the current mode.
*/
let ArrayRep = React.createClass({
displayName: "ArrayRep",
propTypes: {
// @TODO Change this to Object.values once it's supported in Node's version of V8
mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])),
},
getTitle: function (object, context) {
return "[" + object.length + "]";
},
arrayIterator: function (array, max) {
let items = [];
let delim;
for (let i = 0; i < array.length && i < max; i++) {
try {
let value = array[i];
delim = (i == array.length - 1 ? "" : ", ");
items.push(ItemRep({
object: value,
// Hardcode tiny mode to avoid recursive handling.
mode: MODE.TINY,
delim: delim
}));
} catch (exc) {
items.push(ItemRep({
object: exc,
mode: MODE.TINY,
delim: delim
}));
}
}
if (array.length > max) {
let objectLink = this.props.objectLink || DOM.span;
items.push(Caption({
object: objectLink({
object: this.props.object
}, (array.length - max) + " more…")
}));
}
return items;
},
/**
* Returns true if the passed object is an array with additional (custom)
* properties, otherwise returns false. Custom properties should be
* displayed in extra expandable section.
*
* Example array with a custom property.
* let arr = [0, 1];
* arr.myProp = "Hello";
*
* @param {Array} array The array object.
*/
hasSpecialProperties: function (array) {
function isInteger(x) {
let y = parseInt(x, 10);
if (isNaN(y)) {
return false;
}
return x === y.toString();
}
let props = Object.getOwnPropertyNames(array);
for (let i = 0; i < props.length; i++) {
let p = props[i];
// Valid indexes are skipped
if (isInteger(p)) {
continue;
}
// Ignore standard 'length' property, anything else is custom.
if (p != "length") {
return true;
}
}
return false;
},
// Event Handlers
onToggleProperties: function (event) {
},
onClickBracket: function (event) {
},
render: function () {
let {
object,
mode = MODE.SHORT,
} = this.props;
let items;
let brackets;
let needSpace = function (space) {
return space ? { left: "[ ", right: " ]"} : { left: "[", right: "]"};
};
if (mode === MODE.TINY) {
let isEmpty = object.length === 0;
items = [DOM.span({className: "length"}, isEmpty ? "" : object.length)];
brackets = needSpace(false);
} else {
let max = (mode === MODE.SHORT) ? 3 : 10;
items = this.arrayIterator(object, max);
brackets = needSpace(items.length > 0);
}
let objectLink = this.props.objectLink || DOM.span;
return (
DOM.span({
className: "objectBox objectBox-array"},
objectLink({
className: "arrayLeftBracket",
object: object
}, brackets.left),
...items,
objectLink({
className: "arrayRightBracket",
object: object
}, brackets.right),
DOM.span({
className: "arrayProperties",
role: "group"}
)
)
);
},
});
/**
* Renders array item. Individual values are separated by a comma.
*/
let ItemRep = React.createFactory(React.createClass({
displayName: "ItemRep",
render: function () {
const { Rep } = createFactories(require("./rep"));
let object = this.props.object;
let delim = this.props.delim;
let mode = this.props.mode;
return (
DOM.span({},
Rep({object: object, mode: mode}),
delim
)
);
}
}));
function supportsObject(object, type) {
return Array.isArray(object) ||
Object.prototype.toString.call(object) === "[object Arguments]";
}
// Exports from this module
exports.ArrayRep = {
rep: ArrayRep,
supportsObject: supportsObject
};
});
/* 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";
const React = require("devtools/client/shared/vendor/react");
const TreeView = React.createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { REPS, MODE, parseURLEncodedText } = require("devtools/client/shared/components/reps/reps");
const Rep = React.createFactory(REPS.Rep);
// Network
const NetInfoParams = React.createFactory(require("./net-info-params"));
const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
const Spinner = React.createFactory(require("./spinner"));
const SizeLimit = React.createFactory(require("./size-limit"));
const NetUtils = require("../utils/net");
const Json = require("../utils/json");
// Shortcuts
const DOM = React.DOM;
const PropTypes = React.PropTypes;
/**
* This template represents 'Post' tab displayed when the user
* expands network log in the Console panel. It's responsible for
* displaying posted data (HTTP post body).
*/
var PostTab = React.createClass({
propTypes: {
"devtools/server/main", true);
loader.lazyRequireGetter(this, "Telemetry",
"devtools/client/shared/telemetry");
const { BrowserLoader } = Components.utils.import(
"resource://devtools/client/shared/browser-loader.js", {});
const { require } = BrowserLoader({
baseURI: "resource://devtools/client/aboutdebugging/",
window
});
const {
createFactory,
render,
unmountComponentAtNode } = require("devtools/client/shared/vendor/react");
const AboutDebuggingApp = createFactory(require("./components/aboutdebugging"));
var AboutDebugging = {
init() {
if (!DebuggerServer.initialized) {
DebuggerServer.init();
DebuggerServer.addBrowserActors();
}
DebuggerServer.allowChromeProcess = true;
this.client = new DebuggerClient(DebuggerServer.connectPipe());
this.client.connect().then(() => {
let client = this.client;
let telemetry = new Telemetry();
render(AboutDebuggingApp({ client, telemetry }),
/* 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";
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const {div, button} = dom;
const {openWebLink} = require("devtools/client/shared/link");
const Menu = require("devtools/client/framework/menu");
const MenuItem = require("devtools/client/framework/menu-item");
const ToolboxTabs = createFactory(require("devtools/client/framework/components/ToolboxTabs"));
/**
* This is the overall component for the toolbox toolbar. It is designed to not know how
* the state is being managed, and attempts to be as pure as possible. The
* ToolboxController component controls the changing state, and passes in everything as
* props.
*/
class ToolboxToolbar extends Component {
static get propTypes() {
return {
// The currently focused item (for arrow keyboard navigation)
// This ID determines the tabindex being 0 or -1.
focusedButton: PropTypes.string,
// List of command button definitions.
toolboxButtons: PropTypes.array,
// The id of the currently selected tool, e.g. "inspector"
currentToolId: PropTypes.string,
/* 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";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const KeyframeMarkerItem = createFactory(require("./KeyframeMarkerItem"));
class KeyframeMarkerList extends PureComponent {
static get propTypes() {
return {
keyframes: PropTypes.array.isRequired,
};
}
render() {
const { keyframes } = this.props;
return dom.ul(
{
className: "keyframe-marker-list"
},
keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
);
}
}
/* 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";
const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
const { assert, safeErrorString } = require("devtools/shared/DevToolsUtils");
const Census = createFactory(require("./census"));
const CensusHeader = createFactory(require("./census-header"));
const DominatorTree = createFactory(require("./dominator-tree"));
const DominatorTreeHeader = createFactory(require("./dominator-tree-header"));
const TreeMap = createFactory(require("./tree-map"));
const HSplitBox = createFactory(require("devtools/client/shared/components/h-split-box"));
const Individuals = createFactory(require("./individuals"));
const IndividualsHeader = createFactory(require("./individuals-header"));
const ShortestPaths = createFactory(require("./shortest-paths"));
const { getStatusTextFull, L10N } = require("../utils");
const {
snapshotState: states,
diffingState,
viewState,
censusState,
treeMapState,
dominatorTreeState,
individualsState,
} = require("../constants");
const models = require("../models");
const { snapshot: snapshotModel, diffingModel } = models;
/**
"use strict";
const {
createClass,
createFactory,
DOM,
PropTypes,
} = require("devtools/client/shared/vendor/react");
const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
const { Rep } = REPS;
const { FILTER_SEARCH_DELAY } = require("../constants");
// Components
const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
const TreeRow = createFactory(require("devtools/client/shared/components/tree/tree-row"));
const SourceEditor = createFactory(require("./source-editor"));
const { div, tr, td } = DOM;
const AUTO_EXPAND_MAX_LEVEL = 7;
const AUTO_EXPAND_MAX_NODES = 50;
const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
/*
* Properties View component
* A scrollable tree view component which provides some useful features for
* representing object properties.
*
* Search filter - Set enableFilter to enable / disable SearchBox feature.
/* 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";
const { getStr } = require("../utils/l10n");
const { DOM: dom, createClass, createFactory } = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const Accordion = createFactory(require("./Accordion"));
const Grid = createFactory(require("./Grid"));
const App = createClass({
displayName: "App",
render() {
return dom.div(
{
id: "layoutview-container",
},
Accordion({
items: [
{ header: getStr("layout.header"),
component: Grid,
opened: true }
]
})
);
},
/* 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";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const CSSDeclaration = createFactory(require("./CSSDeclaration"));
const { getChangesTree } = require("../selectors/changes");
const { getSourceForDisplay } = require("../utils/changes-utils");
const { getStr } = require("../utils/l10n");
class ChangesApp extends PureComponent {
static get propTypes() {
return {
// Nested CSS rule tree structure of CSS changes grouped by source (stylesheet)
changesTree: PropTypes.object.isRequired,
// Event handler for "contextmenu" event
onContextMenu: PropTypes.func.isRequired,
// Event handler for "copy" event
onCopy: PropTypes.func.isRequired,
// Event handler for click on "Copy All Changes" button
onCopyAllChanges: PropTypes.func.isRequired,
// Event handler for click on "Copy Rule" button
onCopyRule: PropTypes.func.isRequired,
};
}