Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 02:14:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1273653 - Fix ESLint errors in devtools/client/shared/(components|redux). r=tromey

Browse Source 
MozReview-Commit-ID: 5hY0uII6wf8
This commit is contained in:
Tim Nguyen 2016-05-17 23:20:14 +02:00
parent 4a048a0f4b
commit 75f63a4458
48 changed files with 436 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintignore
View File

@ -103,10 +103,9 @@ devtools/client/shared/*.jsm
!devtools/client/shared/css-color.js
!devtools/client/shared/css-color-db.js
!devtools/client/shared/css-parsing-utils.js
devtools/client/shared/components/**
devtools/client/shared/redux/**
devtools/client/shared/components/test/**
devtools/client/shared/redux/middleware/test/**
devtools/client/shared/test/**
devtools/client/shared/vendor/**
devtools/client/shared/widgets/**
devtools/client/sourceeditor/**
devtools/client/webaudioeditor/**

11
devtools/client/shared/components/frame.js
View File

@ -11,6 +11,8 @@ const { LocalizationHelper } = require("devtools/client/shared/l10n");
const l10n = new LocalizationHelper("chrome://devtools/locale/components.properties");
module.exports = createClass({
displayName: "Frame",
propTypes: {
// SavedFrame, or an object containing all the required properties.
frame: PropTypes.shape({
@ -34,8 +36,6 @@ module.exports = createClass({
};
},
displayName: "Frame",
render() {
let { onClick, frame, showFunctionName, showHost } = this.props;
let source = frame.source ? String(frame.source) : "";
@ -72,7 +72,8 @@ module.exports = createClass({
if (showFunctionName && frame.functionDisplayName) {
elements.push(
dom.span({ className: "frame-link-function-display-name" }, frame.functionDisplayName)
dom.span({ className: "frame-link-function-display-name" },
frame.functionDisplayName)
);
}
@ -87,7 +88,9 @@ module.exports = createClass({
// Intentionally exclude 0
if (column) {
sourceElements.push(dom.span({ className: "frame-link-colon" }, ":"));
sourceElements.push(dom.span({ className: "frame-link-column" }, column));
sourceElements.push(
dom.span({ className: "frame-link-column" }, column)
);
// Add `data-column` attribute for testing
attributes["data-column"] = column;
}

60
devtools/client/shared/components/h-split-box.js
View File

@ -2,6 +2,9 @@
* 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/. */
/* eslint-env browser */
"use strict";
// A box with a start and a end pane, separated by a dragable splitter that
// allows the user to resize the relative widths of the panes.
//
@ -30,20 +33,6 @@ const { assert } = require("devtools/shared/DevToolsUtils");
module.exports = createClass({
displayName: "HSplitBox",
getDefaultProps() {
return {
startWidth: 0.5,
minStartWidth: "20px",
minEndWidth: "20px",
};
},
getInitialState() {
return {
mouseDown: false
};
},
propTypes: {
// The contents of the start pane.
start: PropTypes.any.isRequired,
@ -68,6 +57,34 @@ module.exports = createClass({
onResize: PropTypes.func.isRequired,
},
getDefaultProps() {
return {
startWidth: 0.5,
minStartWidth: "20px",
minEndWidth: "20px",
};
},
getInitialState() {
return {
mouseDown: false
};
},
componentDidMount() {
document.defaultView.top.addEventListener("mouseup", this._onMouseUp,
false);
document.defaultView.top.addEventListener("mousemove", this._onMouseMove,
false);
},
componentWillUnmount() {
document.defaultView.top.removeEventListener("mouseup", this._onMouseUp,
false);
document.defaultView.top.removeEventListener("mousemove", this._onMouseMove,
false);
},
_onMouseDown(event) {
if (event.button !== 0) {
return;
@ -100,21 +117,12 @@ module.exports = createClass({
event.preventDefault();
},
componentDidMount() {
document.defaultView.top.addEventListener("mouseup", this._onMouseUp, false);
document.defaultView.top.addEventListener("mousemove", this._onMouseMove, false);
},
componentWillUnmount() {
document.defaultView.top.removeEventListener("mouseup", this._onMouseUp, false);
document.defaultView.top.removeEventListener("mousemove", this._onMouseMove, false);
},
render() {
/* eslint-disable no-shadow */
const { start, end, startWidth, minStartWidth, minEndWidth } = this.props;
assert(0 <= startWidth && startWidth <= 1,
assert(startWidth => 0 && startWidth <= 1,
"0 <= this.props.startWidth <= 1");
/* eslint-enable */
return dom.div(
{
className: "h-split-box",

4
devtools/client/shared/components/notification-box.js
View File

@ -33,6 +33,8 @@ const PriorityLevels = {
* https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/notificationbox
*/
var NotificationBox = createClass({
displayName: "NotificationBox",
propTypes: {
// List of notifications appended into the box.
notifications: PropTypes.arrayOf(PropTypes.shape({
@ -74,8 +76,6 @@ var NotificationBox = createClass({
})),
},
displayName: "NotificationBox",
getInitialState() {
return {
notifications: new Immutable.OrderedMap()

104
devtools/client/shared/components/reps/array.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -24,54 +24,11 @@ define(function(require, exports, module) {
let ArrayRep = React.createClass({
displayName: "ArrayRep",
render: function() {
let mode = this.props.mode || "short";
let object = this.props.object;
let items;
if (mode == "tiny") {
items = DOM.span({className: "length"}, object.length);
} else {
let max = (mode == "short") ? 3 : 300;
items = this.arrayIterator(object, max);
}
return (
ObjectBox({
className: "array",
onClick: this.onToggleProperties},
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayLeftBracket",
role: "presentation"},
"["
)
),
items,
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayRightBracket",
role: "presentation"},
"]"
)
),
DOM.span({
className: "arrayProperties",
role: "group"}
)
)
);
},
getTitle: function(object, context) {
getTitle: function (object, context) {
return "[" + object.length + "]";
},
arrayIterator: function(array, max) {
arrayIterator: function (array, max) {
let items = [];
let delim;
@ -125,7 +82,7 @@ define(function(require, exports, module) {
*
* @param {Array} array The array object.
*/
hasSpecialProperties: function(array) {
hasSpecialProperties: function (array) {
function isInteger(x) {
let y = parseInt(x, 10);
if (isNaN(y)) {
@ -154,11 +111,54 @@ define(function(require, exports, module) {
// Event Handlers
onToggleProperties: function(event) {
onToggleProperties: function (event) {
},
onClickBracket: function(event) {
}
onClickBracket: function (event) {
},
render: function () {
let mode = this.props.mode || "short";
let object = this.props.object;
let items;
if (mode == "tiny") {
items = DOM.span({className: "length"}, object.length);
} else {
let max = (mode == "short") ? 3 : 300;
items = this.arrayIterator(object, max);
}
return (
ObjectBox({
className: "array",
onClick: this.onToggleProperties},
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayLeftBracket",
role: "presentation"},
"["
)
),
items,
DOM.a({
className: "objectLink",
onclick: this.onClickBracket},
DOM.span({
className: "arrayRightBracket",
role: "presentation"},
"]"
)
),
DOM.span({
className: "arrayProperties",
role: "group"}
)
)
);
},
});
/**
@ -167,7 +167,7 @@ define(function(require, exports, module) {
let ItemRep = React.createFactory(React.createClass({
displayName: "ItemRep",
render: function() {
render: function () {
const { Rep } = createFactories(require("./rep"));
let object = this.props.object;
@ -187,7 +187,7 @@ define(function(require, exports, module) {
let Reference = React.createFactory(React.createClass({
displayName: "Reference",
render: function() {
render: function () {
let tooltip = "Circular reference";
return (
DOM.span({title: tooltip},

10
devtools/client/shared/components/reps/attribute.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -23,17 +23,17 @@ define(function(require, exports, module) {
* Renders DOM attribute
*/
let Attribute = React.createClass({
displayName: "Attr",
propTypes: {
object: React.PropTypes.object.isRequired
},
displayName: "Attr",
getTitle: function(grip) {
getTitle: function (grip) {
return grip.preview.nodeName;
},
render: function() {
render: function () {
let grip = this.props.object;
let value = grip.preview.value;

4
devtools/client/shared/components/reps/caption.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const DOM = React.DOM;
@ -19,7 +19,7 @@ define(function(require, exports, module) {
const Caption = React.createClass({
displayName: "Caption",
render: function() {
render: function () {
return (
DOM.span({"className": "caption"}, this.props.object)
);

10
devtools/client/shared/components/reps/date-time.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -21,17 +21,17 @@ define(function(require, exports, module) {
* Used to render JS built-in Date() object.
*/
let DateTime = React.createClass({
displayName: "Date",
propTypes: {
object: React.PropTypes.object.isRequired
},
displayName: "Date",
getTitle: function(grip) {
getTitle: function (grip) {
return new Date(grip.preview.timestamp).toString();
},
render: function() {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: "Date"},

14
devtools/client/shared/components/reps/document.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,26 +22,26 @@ define(function(require, exports, module) {
* Renders DOM document object.
*/
let Document = React.createClass({
displayName: "Document",
propTypes: {
object: React.PropTypes.object.isRequired
},
displayName: "Document",
getLocation: function(grip) {
getLocation: function (grip) {
let location = grip.preview.location;
return location ? getFileName(location) : "";
},
getTitle: function(win, context) {
getTitle: function (win, context) {
return "document";
},
getTooltip: function(doc) {
getTooltip: function (doc) {
return doc.location.href;
},
render: function() {
render: function () {
let grip = this.props.object;
return (

10
devtools/client/shared/components/reps/event.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -18,13 +18,13 @@ define(function(require, exports, module) {
* Renders DOM event objects.
*/
let Event = React.createClass({
displayName: "event",
propTypes: {
object: React.PropTypes.object.isRequired
},
displayName: "event",
summarizeEvent: function(grip) {
summarizeEvent: function (grip) {
let info = [grip.preview.type, " "];
let eventFamily = grip.class;
@ -41,7 +41,7 @@ define(function(require, exports, module) {
return info.join("");
},
render: function() {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: "event"},

10
devtools/client/shared/components/reps/function.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -19,18 +19,18 @@ define(function(require, exports, module) {
* This component represents a template for Function objects.
*/
let Func = React.createClass({
displayName: "Func",
propTypes: {
object: React.PropTypes.object.isRequired
},
displayName: "Func",
summarizeFunction: function(grip) {
summarizeFunction: function (grip) {
let name = grip.displayName || grip.name || "function";
return cropString(name + "()", 100);
},
render: function() {
render: function () {
let grip = this.props.object;
return (

28
devtools/client/shared/components/reps/grip-array.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories, isGrip } = require("./rep-utils");
@ -22,23 +22,23 @@ define(function(require, exports, module) {
* and the max number of rendered items depends on the current mode.
*/
let GripArray = React.createClass({
displayName: "GripArray",
propTypes: {
object: React.PropTypes.object.isRequired,
mode: React.PropTypes.string,
provider: React.PropTypes.object,
},
displayName: "GripArray",
getLength: function(grip) {
getLength: function (grip) {
return grip.preview ? grip.preview.length : 0;
},
getTitle: function(object, context) {
getTitle: function (object, context) {
return "[" + object.length + "]";
},
arrayIterator: function(grip, max) {
arrayIterator: function (grip, max) {
let items = [];
if (!grip.preview || !grip.preview.length) {
@ -96,19 +96,19 @@ define(function(require, exports, module) {
return items;
},
hasSpecialProperties: function(array) {
hasSpecialProperties: function (array) {
return false;
},
// Event Handlers
onToggleProperties: function(event) {
onToggleProperties: function (event) {
},
onClickBracket: function(event) {
onClickBracket: function (event) {
},
render: function() {
render: function () {
let mode = this.props.mode || "short";
let object = this.props.object;
@ -158,13 +158,13 @@ define(function(require, exports, module) {
* a delimiter (a comma by default).
*/
let GripArrayItem = React.createFactory(React.createClass({
displayName: "GripArrayItem",
propTypes: {
delim: React.PropTypes.string,
},
displayName: "GripArrayItem",
render: function() {
render: function () {
let { Rep } = createFactories(require("./rep"));
return (
@ -184,7 +184,7 @@ define(function(require, exports, module) {
let Reference = React.createFactory(React.createClass({
displayName: "Reference",
render: function() {
render: function () {
return (
span({title: "Circular reference"},
"[...]"

24
devtools/client/shared/components/reps/grip.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,18 +22,18 @@ define(function(require, exports, module) {
* @template TODO docs
*/
const Grip = React.createClass({
displayName: "Grip",
propTypes: {
object: React.PropTypes.object.isRequired,
mode: React.PropTypes.string,
},
displayName: "Grip",
getTitle: function() {
getTitle: function () {
return "";
},
longPropIterator: function(object) {
longPropIterator: function (object) {
try {
return this.propIterator(object, 100);
} catch (err) {
@ -42,7 +42,7 @@ define(function(require, exports, module) {
return [];
},
shortPropIterator: function(object) {
shortPropIterator: function (object) {
try {
return this.propIterator(object, 3);
} catch (err) {
@ -51,7 +51,7 @@ define(function(require, exports, module) {
return [];
},
propIterator: function(object, max) {
propIterator: function (object, max) {
// Property filter. Show only interesting properties to the user.
let isInterestingProp = (type, value) => {
return (
@ -97,7 +97,7 @@ define(function(require, exports, module) {
return props;
},
getProps: function(object, max, filter) {
getProps: function (object, max, filter) {
let props = [];
max = max || 3;
@ -139,7 +139,7 @@ define(function(require, exports, module) {
return props;
},
render: function() {
render: function () {
let object = this.props.object;
let props = this.shortPropIterator(object);
@ -167,15 +167,15 @@ define(function(require, exports, module) {
* Property for a grip object.
*/
let PropRep = React.createFactory(React.createClass({
displayName: "PropRep",
propTypes: {
name: React.PropTypes.string,
equal: React.PropTypes.string,
delim: React.PropTypes.string,
},
displayName: "PropRep",
render: function() {
render: function () {
let { Rep } = createFactories(require("./rep"));
return (

19
devtools/client/shared/components/reps/named-node-map.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,6 +22,7 @@ define(function(require, exports, module) {
* Used to render a map of values provided as a grip.
*/
let NamedNodeMap = React.createClass({
propTypes: {
object: React.PropTypes.object.isRequired,
mode: React.PropTypes.string,
@ -30,15 +31,15 @@ define(function(require, exports, module) {
className: "NamedNodeMap",
getLength: function(object) {
getLength: function (object) {
return object.preview.length;
},
getTitle: function(object) {
getTitle: function (object) {
return object.class ? object.class : "";
},
getItems: function(array, max) {
getItems: function (array, max) {
let items = this.propIterator(array, max);
items = items.map(item => PropRep(item));
@ -54,7 +55,7 @@ define(function(require, exports, module) {
return items;
},
propIterator: function(grip, max) {
propIterator: function (grip, max) {
max = max || 3;
let props = [];
@ -85,7 +86,7 @@ define(function(require, exports, module) {
return props;
},
render: function() {
render: function () {
let grip = this.props.object;
let mode = this.props.mode;
@ -122,14 +123,14 @@ define(function(require, exports, module) {
* Property for a grip object.
*/
let PropRep = React.createFactory(React.createClass({
displayName: "PropRep",
propTypes: {
equal: React.PropTypes.string,
delim: React.PropTypes.string,
},
displayName: "PropRep",
render: function() {
render: function () {
const { Rep } = createFactories(require("./rep"));
return (

4
devtools/client/shared/components/reps/null.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -19,7 +19,7 @@ define(function(require, exports, module) {
const Null = React.createClass({
displayName: "NullRep",
render: function() {
render: function () {
return (
ObjectBox({className: "null"},
"null"

14
devtools/client/shared/components/reps/number.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -19,18 +19,18 @@ define(function(require, exports, module) {
const Number = React.createClass({
displayName: "Number",
render: function() {
stringify: function (object) {
return (Object.is(object, -0) ? "-0" : String(object));
},
render: function () {
let value = this.props.object;
return (
ObjectBox({className: "number"},
this.stringify(value)
)
);
},
stringify: function(object) {
return (Object.is(object, -0) ? "-0" : String(object));
},
}
});
function supportsObject(object, type) {

4
devtools/client/shared/components/reps/object-box.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const DOM = React.DOM;
@ -18,7 +18,7 @@ define(function(require, exports, module) {
const ObjectBox = React.createClass({
displayName: "ObjectBox",
render: function() {
render: function () {
let className = this.props.className;
let boxClassName = className ? " objectBox-" + className : "";

4
devtools/client/shared/components/reps/object-link.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const DOM = React.DOM;
@ -18,7 +18,7 @@ define(function(require, exports, module) {
const ObjectLink = React.createClass({
displayName: "ObjectLink",
render: function() {
render: function () {
let className = this.props.className;
let objectClassName = className ? " objectLink-" + className : "";
let linkClassName = "objectLink" + objectClassName + " a11yFocus";

12
devtools/client/shared/components/reps/object-with-text.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -21,21 +21,21 @@ define(function(require, exports, module) {
* Renders a grip object with textual data.
*/
let ObjectWithText = React.createClass({
displayName: "ObjectWithText",
propTypes: {
object: React.PropTypes.object.isRequired,
},
displayName: "ObjectWithText",
getType: function(grip) {
getType: function (grip) {
return grip.class;
},
getDescription: function(grip) {
getDescription: function (grip) {
return (grip.preview.kind == "ObjectWithText") ? grip.preview.text : "";
},
render: function() {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: this.getType(grip)},

12
devtools/client/shared/components/reps/object-with-url.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -21,21 +21,21 @@ define(function(require, exports, module) {
* Renders a grip object with URL data.
*/
let ObjectWithURL = React.createClass({
displayName: "ObjectWithURL",
propTypes: {
object: React.PropTypes.object.isRequired,
},
displayName: "ObjectWithURL",
getType: function(grip) {
getType: function (grip) {
return grip.class;
},
getDescription: function(grip) {
getDescription: function (grip) {
return grip.preview.url;
},
render: function() {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: this.getType(grip)},

24
devtools/client/shared/components/reps/object.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -22,18 +22,18 @@ define(function(require, exports, module) {
* properties enclosed in curly brackets.
*/
const Obj = React.createClass({
displayName: "Obj",
propTypes: {
object: React.PropTypes.object,
mode: React.PropTypes.string,
},
displayName: "Obj",
getTitle: function() {
getTitle: function () {
return "";
},
longPropIterator: function(object) {
longPropIterator: function (object) {
try {
return this.propIterator(object, 100);
} catch (err) {
@ -42,7 +42,7 @@ define(function(require, exports, module) {
return [];
},
shortPropIterator: function(object) {
shortPropIterator: function (object) {
try {
return this.propIterator(object, 3);
} catch (err) {
@ -51,7 +51,7 @@ define(function(require, exports, module) {
return [];
},
propIterator: function(object, max) {
propIterator: function (object, max) {
let isInterestingProp = (t, value) => {
// Do not pick objects, it could cause recursion.
return (t == "boolean" || t == "number" || (t == "string" && value));
@ -90,7 +90,7 @@ define(function(require, exports, module) {
return props;
},
getProps: function(object, max, filter) {
getProps: function (object, max, filter) {
let props = [];
max = max || 3;
@ -132,7 +132,7 @@ define(function(require, exports, module) {
return props;
},
render: function() {
render: function () {
let object = this.props.object;
let props = this.shortPropIterator(object);
@ -151,6 +151,8 @@ define(function(require, exports, module) {
* Renders object property, name-value pair.
*/
let PropRep = React.createFactory(React.createClass({
displayName: "PropRep",
propTypes: {
object: React.PropTypes.any,
mode: React.PropTypes.string,
@ -159,9 +161,7 @@ define(function(require, exports, module) {
delim: React.PropTypes.string,
},
displayName: "PropRep",
render: function() {
render: function () {
let { Rep } = createFactories(require("./rep"));
let object = this.props.object;
let mode = this.props.mode;

12
devtools/client/shared/components/reps/regexp.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -21,21 +21,21 @@ define(function(require, exports, module) {
* Renders a grip object with regular expression.
*/
let RegExp = React.createClass({
displayName: "regexp",
propTypes: {
object: React.PropTypes.object.isRequired,
},
displayName: "regexp",
getTitle: function(grip) {
getTitle: function (grip) {
return grip.class;
},
getSource: function(grip) {
getSource: function (grip) {
return grip.displayString;
},
render: function() {
render: function () {
let grip = this.props.object;
return (
ObjectLink({className: "regexp"},

2
devtools/client/shared/components/reps/rep-utils.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");

8
devtools/client/shared/components/reps/rep.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
@ -69,14 +69,14 @@ define(function(require, exports, module) {
* property.
*/
const Rep = React.createClass({
displayName: "Rep",
propTypes: {
object: React.PropTypes.any,
defaultRep: React.PropTypes.object,
},
displayName: "Rep",
render: function() {
render: function () {
let rep = getRep(this.props.object, this.props.defaultRep);
return rep(this.props);
},

4
devtools/client/shared/components/reps/string.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -19,7 +19,7 @@ define(function(require, exports, module) {
const StringRep = React.createClass({
displayName: "StringRep",
render: function() {
render: function () {
let text = this.props.object;
let member = this.props.member;
if (member && member.open) {

10
devtools/client/shared/components/reps/stylesheet.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,19 +22,19 @@ define(function(require, exports, module) {
* Renders a grip representing CSSStyleSheet
*/
let StyleSheet = React.createClass({
displayName: "object",
propTypes: {
object: React.PropTypes.object.isRequired,
},
displayName: "object",
getLocation: function(grip) {
getLocation: function (grip) {
// Embedded stylesheets don't have URL and so, no preview.
let url = grip.preview ? grip.preview.url : "";
return url ? getFileName(url) : "";
},
render: function() {
render: function () {
let grip = this.props.object;
return (

12
devtools/client/shared/components/reps/text-node.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,22 +22,22 @@ define(function(require, exports, module) {
* Renders DOM #text node.
*/
let TextNode = React.createClass({
displayName: "TextNode",
propTypes: {
object: React.PropTypes.object.isRequired,
mode: React.PropTypes.string,
},
displayName: "TextNode",
getTextContent: function(grip) {
getTextContent: function (grip) {
return cropMultipleLines(grip.preview.textContent);
},
getTitle: function(win, context) {
getTitle: function (win, context) {
return "textNode";
},
render: function() {
render: function () {
let grip = this.props.object;
let mode = this.props.mode || "short";

4
devtools/client/shared/components/reps/undefined.js
View File

@ -7,7 +7,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// Dependencies
const React = require("devtools/client/shared/vendor/react");
const { createFactories } = require("./rep-utils");
@ -19,7 +19,7 @@ define(function(require, exports, module) {
const Undefined = React.createClass({
displayName: "UndefinedRep",
render: function() {
render: function () {
return (
ObjectBox({className: "undefined"},
"undefined"

2
devtools/client/shared/components/reps/url.js
View File

@ -8,7 +8,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
function parseURLParams(url) {
url = new URL(url);
return parseURLEncodedText(url.searchParams);

10
devtools/client/shared/components/reps/window.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -22,17 +22,17 @@ define(function(require, exports, module) {
* Renders a grip representing a window.
*/
let Window = React.createClass({
displayName: "Window",
propTypes: {
object: React.PropTypes.object.isRequired,
},
displayName: "Window",
getLocation: function(grip) {
getLocation: function (grip) {
return cropString(grip.preview.url);
},
render: function() {
render: function () {
let grip = this.props.object;
return (

193
devtools/client/shared/components/tree.js
View File

@ -1,11 +1,12 @@
/* 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/. */
/* eslint-env browser */
"use strict";
const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
const AUTO_EXPAND_DEPTH = 0; // depth
const AUTO_EXPAND_DEPTH = 0;
const NUMBER_OF_OFFSCREEN_ITEMS = 1;
/**
@ -95,7 +96,7 @@ const NUMBER_OF_OFFSCREEN_ITEMS = 1;
* }
* });
*/
const Tree = module.exports = createClass({
module.exports = createClass({
displayName: "Tree",
propTypes: {
@ -231,15 +232,15 @@ const Tree = module.exports = createClass({
this._updateHeight();
},
componentWillUnmount() {
window.removeEventListener("resize", this._updateHeight);
},
componentWillReceiveProps(nextProps) {
this._autoExpand();
this._updateHeight();
},
componentWillUnmount() {
window.removeEventListener("resize", this._updateHeight);
},
_autoExpand() {
if (!this.props.autoExpandDepth) {
return;
@ -271,72 +272,6 @@ const Tree = module.exports = createClass({
}
},
render() {
const traversal = this._dfsFromRoots();
// Remove `NUMBER_OF_OFFSCREEN_ITEMS` from `begin` and add `2 *
// NUMBER_OF_OFFSCREEN_ITEMS` to `end` so that the top and bottom of the
// page are filled with the `NUMBER_OF_OFFSCREEN_ITEMS` previous and next
// items respectively, rather than whitespace if the item is not in full
// view.
const begin = Math.max(((this.state.scroll / this.props.itemHeight) | 0) - NUMBER_OF_OFFSCREEN_ITEMS, 0);
const end = begin + (2 * NUMBER_OF_OFFSCREEN_ITEMS) + ((this.state.height / this.props.itemHeight) | 0);
const toRender = traversal.slice(begin, end);
const nodes = [
dom.div({
key: "top-spacer",
style: {
padding: 0,
margin: 0,
height: begin * this.props.itemHeight + "px"
}
})
];
for (let i = 0; i < toRender.length; i++) {
let { item, depth } = toRender[i];
nodes.push(TreeNode({
key: this.props.getKey(item),
index: begin + i,
item: item,
depth: depth,
renderItem: this.props.renderItem,
focused: this.props.focused === item,
expanded: this.props.isExpanded(item),
hasChildren: !!this.props.getChildren(item).length,
onExpand: this._onExpand,
onCollapse: this._onCollapse,
onFocus: () => this._focus(begin + i, item),
}));
}
nodes.push(dom.div({
key: "bottom-spacer",
style: {
padding: 0,
margin: 0,
height: (traversal.length - 1 - end) * this.props.itemHeight + "px"
}
}));
return dom.div(
{
className: "tree",
ref: "tree",
onKeyDown: this._onKeyDown,
onKeyPress: this._preventArrowKeyScrolling,
onKeyUp: this._preventArrowKeyScrolling,
onScroll: this._onScroll,
style: {
padding: 0,
margin: 0
}
},
nodes
);
},
_preventArrowKeyScrolling(e) {
switch (e.key) {
case "ArrowUp":
@ -451,12 +386,12 @@ const Tree = module.exports = createClass({
const itemStartPosition = index * this.props.itemHeight;
const itemEndPosition = (index + 1) * this.props.itemHeight;
// Note that if the height of the viewport (this.state.height) is less than
// `this.props.itemHeight`, we could accidentally try and scroll both up and
// down in a futile attempt to make both the item's start and end positions
// visible. Instead, give priority to the start of the item by checking its
// position first, and then using an "else if", rather than a separate "if",
// for the end position.
// Note that if the height of the viewport (this.state.height) is less
// than `this.props.itemHeight`, we could accidentally try and scroll both
// up and down in a futile attempt to make both the item's start and end
// positions visible. Instead, give priority to the start of the item by
// checking its position first, and then using an "else if", rather than
// a separate "if", for the end position.
if (this.state.scroll > itemStartPosition) {
this.refs.tree.scrollTo(0, itemStartPosition);
} else if ((this.state.scroll + this.state.height) < itemEndPosition) {
@ -609,6 +544,74 @@ const Tree = module.exports = createClass({
this._focus(parentIndex, parent);
}),
render() {
const traversal = this._dfsFromRoots();
// Remove `NUMBER_OF_OFFSCREEN_ITEMS` from `begin` and add `2 *
// NUMBER_OF_OFFSCREEN_ITEMS` to `end` so that the top and bottom of the
// page are filled with the `NUMBER_OF_OFFSCREEN_ITEMS` previous and next
// items respectively, rather than whitespace if the item is not in full
// view.
const begin = Math.max(((this.state.scroll / this.props.itemHeight) | 0)
- NUMBER_OF_OFFSCREEN_ITEMS, 0);
const end = begin + (2 * NUMBER_OF_OFFSCREEN_ITEMS)
+ ((this.state.height / this.props.itemHeight) | 0);
const toRender = traversal.slice(begin, end);
const nodes = [
dom.div({
key: "top-spacer",
style: {
padding: 0,
margin: 0,
height: begin * this.props.itemHeight + "px"
}
})
];
for (let i = 0; i < toRender.length; i++) {
let { item, depth } = toRender[i];
nodes.push(TreeNode({
key: this.props.getKey(item),
index: begin + i,
item: item,
depth: depth,
renderItem: this.props.renderItem,
focused: this.props.focused === item,
expanded: this.props.isExpanded(item),
hasChildren: !!this.props.getChildren(item).length,
onExpand: this._onExpand,
onCollapse: this._onCollapse,
onFocus: () => this._focus(begin + i, item),
}));
}
nodes.push(dom.div({
key: "bottom-spacer",
style: {
padding: 0,
margin: 0,
height: (traversal.length - 1 - end) * this.props.itemHeight + "px"
}
}));
return dom.div(
{
className: "tree",
ref: "tree",
onKeyDown: this._onKeyDown,
onKeyPress: this._preventArrowKeyScrolling,
onKeyUp: this._preventArrowKeyScrolling,
onScroll: this._onScroll,
style: {
padding: 0,
margin: 0
}
},
nodes
);
}
});
/**
@ -659,6 +662,22 @@ const TreeNode = createFactory(createClass({
}
},
_buttonAttrs: {
ref: "button",
style: {
opacity: 0,
width: "0 !important",
height: "0 !important",
padding: "0 !important",
outline: "none",
MozAppearance: "none",
// XXX: Despite resetting all of the above properties (and margin), the
// button still ends up with ~79px width, so we set a large negative
// margin to completely hide it.
MozMarginStart: "-1000px !important",
}
},
render() {
const arrow = ArrowExpander({
item: this.props.item,
@ -691,22 +710,6 @@ const TreeNode = createFactory(createClass({
// unless there is an input/button child.
dom.button(this._buttonAttrs)
);
},
_buttonAttrs: {
ref: "button",
style: {
opacity: 0,
width: "0 !important",
height: "0 !important",
padding: "0 !important",
outline: "none",
MozAppearance: "none",
// XXX: Despite resetting all of the above properties (and margin), the
// button still ends up with ~79px width, so we set a large negative
// margin to completely hide it.
marginInlineStart: "-1000px !important",
}
}
}));

8
devtools/client/shared/components/tree/label-cell.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -18,15 +18,15 @@ define(function(require, exports, module) {
* Render the default cell used for toggle buttons
*/
let LabelCell = React.createClass({
displayName: "LabelCell",
// See the TreeView component for details related
// to the 'member' object.
propTypes: {
member: PropTypes.object.isRequired
},
displayName: "LabelCell",
render: function() {
render: function () {
let member = this.props.member;
let level = member.level || 0;

14
devtools/client/shared/components/tree/object-provider.js
View File

@ -6,14 +6,14 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
/**
* Implementation of the default data provider. A provider is state less
* object responsible for transformation data (usually a state) to
* a structure that can be directly consumed by the tree-view component.
*/
let ObjectProvider = {
getChildren: function(object) {
getChildren: function (object) {
let children = [];
if (object instanceof ObjectProperty) {
@ -38,7 +38,7 @@ define(function(require, exports, module) {
return children;
},
hasChildren: function(object) {
hasChildren: function (object) {
if (object instanceof ObjectProperty) {
object = object.value;
}
@ -58,22 +58,22 @@ define(function(require, exports, module) {
return Object.keys(object).length > 0;
},
getLabel: function(object) {
getLabel: function (object) {
return (object instanceof ObjectProperty) ?
object.name : null;
},
getValue: function(object) {
getValue: function (object) {
return (object instanceof ObjectProperty) ?
object.value : null;
},
getKey: function(object) {
getKey: function (object) {
return (object instanceof ObjectProperty) ?
object.name : null;
},
getType: function(object) {
getType: function (object) {
return (object instanceof ObjectProperty) ?
typeof object.value : typeof object;
}

12
devtools/client/shared/components/tree/tree-cell.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
const React = require("devtools/client/shared/vendor/react");
// Shortcuts
@ -18,6 +18,8 @@ define(function(require, exports, module) {
* using <td> element (the row is <tr> and the entire tree is <table>).
*/
let TreeCell = React.createClass({
displayName: "TreeCell",
// See TreeView component for detailed property explanation.
propTypes: {
value: PropTypes.any,
@ -27,18 +29,16 @@ define(function(require, exports, module) {
renderValue: PropTypes.func.isRequired
},
displayName: "TreeCell",
/**
* Optimize cell rendering. Rerender cell content only if
* the value or expanded state changes.
*/
shouldComponentUpdate: function(nextProps) {
shouldComponentUpdate: function (nextProps) {
return (this.props.value != nextProps.value) ||
(this.props.member.open != nextProps.member.open);
},
getCellClass: function(object, id) {
getCellClass: function (object, id) {
let decorator = this.props.decorator;
if (!decorator || !decorator.getCellClass) {
return [];
@ -57,7 +57,7 @@ define(function(require, exports, module) {
return classNames;
},
render: function() {
render: function () {
let member = this.props.member;
let type = member.type || "";
let id = this.props.id;

12
devtools/client/shared/components/tree/tree-header.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -19,6 +19,8 @@ define(function(require, exports, module) {
* It's based on <thead> element.
*/
let TreeHeader = React.createClass({
displayName: "TreeHeader",
// See also TreeView component for detailed info about properties.
propTypes: {
// Custom tree decorator
@ -29,9 +31,7 @@ define(function(require, exports, module) {
columns: PropTypes.array
},
displayName: "TreeHeader",
getDefaultProps: function() {
getDefaultProps: function () {
return {
columns: [{
id: "default"
@ -39,7 +39,7 @@ define(function(require, exports, module) {
};
},
getHeaderClass: function(colId) {
getHeaderClass: function (colId) {
let decorator = this.props.decorator;
if (!decorator || !decorator.getHeaderClass) {
return [];
@ -58,7 +58,7 @@ define(function(require, exports, module) {
return classNames;
},
render: function() {
render: function () {
let cells = [];
let visible = this.props.header;

40
devtools/client/shared/components/tree/tree-row.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
@ -24,6 +24,8 @@ define(function(require, exports, module) {
* using <tr> element (the entire tree is one big <table>).
*/
let TreeRow = React.createClass({
displayName: "TreeRow",
// See TreeView component for more details about the props and
// the 'member' object.
propTypes: {
@ -47,23 +49,6 @@ define(function(require, exports, module) {
onClick: PropTypes.func.isRequired
},
displayName: "TreeRow",
/**
* Optimize row rendering. If props are the same do not render.
* This makes the rendering a lot faster!
*/
shouldComponentUpdate: function(nextProps) {
let props = ["name", "open", "value", "loading"];
for (let p in props) {
if (nextProps.member[props[p]] != this.props.member[props[p]]) {
return true;
}
}
return false;
},
componentWillReceiveProps(nextProps) {
// I don't like accessing the underlying DOM elements directly,
// but this optimization makes the filtering so damn fast!
@ -77,7 +62,22 @@ define(function(require, exports, module) {
}
},
getRowClass: function(object) {
/**
* Optimize row rendering. If props are the same do not render.
* This makes the rendering a lot faster!
*/
shouldComponentUpdate: function (nextProps) {
let props = ["name", "open", "value", "loading"];
for (let p in props) {
if (nextProps.member[props[p]] != this.props.member[props[p]]) {
return true;
}
}
return false;
},
getRowClass: function (object) {
let decorator = this.props.decorator;
if (!decorator || !decorator.getRowClass) {
return [];
@ -96,7 +96,7 @@ define(function(require, exports, module) {
return classNames;
},
render: function() {
render: function () {
let member = this.props.member;
let decorator = this.props.decorator;

26
devtools/client/shared/components/tree/tree-view.js
View File

@ -6,7 +6,7 @@
"use strict";
// Make this available to both AMD and CJS environments
define(function(require, exports, module) {
define(function (require, exports, module) {
// ReactJS
const React = require("devtools/client/shared/vendor/react");
@ -54,6 +54,8 @@ define(function(require, exports, module) {
* }
*/
let TreeView = React.createClass({
displayName: "TreeView",
// The only required property (not set by default) is the input data
// object that is used to puputate the tree.
propTypes: {
@ -103,9 +105,7 @@ define(function(require, exports, module) {
}))
},
displayName: "TreeView",
getDefaultProps: function() {
getDefaultProps: function () {
return {
object: null,
renderRow: null,
@ -115,7 +115,7 @@ define(function(require, exports, module) {
};
},
getInitialState: function() {
getInitialState: function () {
return {
expandedNodes: this.props.expandedNodes,
columns: ensureDefaultColumn(this.props.columns)
@ -124,7 +124,7 @@ define(function(require, exports, module) {
// Node expand/collapse
toggle: function(nodePath) {
toggle: function (nodePath) {
let nodes = this.state.expandedNodes;
if (this.isExpanded(nodePath)) {
nodes.delete(nodePath);
@ -138,13 +138,13 @@ define(function(require, exports, module) {
}));
},
isExpanded: function(nodePath) {
isExpanded: function (nodePath) {
return this.state.expandedNodes.has(nodePath);
},
// Event Handlers
onClickRow: function(nodePath, event) {
onClickRow: function (nodePath, event) {
event.stopPropagation();
this.toggle(nodePath);
},
@ -155,12 +155,12 @@ define(function(require, exports, module) {
* Filter out nodes that don't correspond to the current filter.
* @return {Boolean} true if the node should be visible otherwise false.
*/
onFilter: function(object) {
onFilter: function (object) {
let onFilter = this.props.onFilter;
return onFilter ? onFilter(object) : true;
},
onSort: function(parent, children) {
onSort: function (parent, children) {
let onSort = this.props.onSort;
return onSort ? onSort(parent, children) : children;
},
@ -171,7 +171,7 @@ define(function(require, exports, module) {
* Return children node objects (so called 'members') for given
* parent object.
*/
getMembers: function(parent, level, path) {
getMembers: function (parent, level, path) {
// Strings don't have children. Note that 'long' strings are using
// the expander icon (+/-) to display the entire original value,
// but there are no child items.
@ -235,7 +235,7 @@ define(function(require, exports, module) {
/**
* Render tree rows/nodes.
*/
renderRows: function(parent, level = 0, path = "") {
renderRows: function (parent, level = 0, path = "") {
let rows = [];
let decorator = this.props.decorator;
let renderRow = this.props.renderRow || TreeRow;
@ -285,7 +285,7 @@ define(function(require, exports, module) {
return rows;
},
render: function() {
render: function () {
let root = this.props.object;
let classNames = ["treeTable"];

4
devtools/client/shared/redux/create-store.js
View File

@ -22,7 +22,7 @@ const { history } = require("./middleware/history");
* used in tests.
* - middleware: array of middleware to be included in the redux store
*/
module.exports = (opts={}) => {
module.exports = (opts = {}) => {
const middleware = [
task,
thunk,
@ -48,4 +48,4 @@ module.exports = (opts={}) => {
}
return applyMiddleware(...middleware)(createStore);
}
};

8
devtools/client/shared/redux/middleware/history.js
View File

@ -10,11 +10,11 @@ const DevToolsUtils = require("devtools/shared/DevToolsUtils");
* in logging object. Should only be used for tests, as it collects all
* action information, which will cause memory bloat.
*/
exports.history = (log=[]) => ({ dispatch, getState }) => {
exports.history = (log = []) => ({ dispatch, getState }) => {
if (!DevToolsUtils.testing) {
console.warn(`Using history middleware stores all actions in state for testing\
and devtools is not currently running in test mode. Be sure this is\
intentional.`);
console.warn("Using history middleware stores all actions in state for " +
"testing and devtools is not currently running in test " +
"mode. Be sure this is intentional.");
}
return next => action => {
log.push(action);

4
devtools/client/shared/redux/middleware/promise.js
View File

@ -6,11 +6,11 @@
const uuidgen = require("sdk/util/uuid").uuid;
const promise = require("promise");
const {
entries, toObject, reportException, executeSoon
entries, toObject, executeSoon
} = require("devtools/shared/DevToolsUtils");
const PROMISE = exports.PROMISE = "@@dispatch/promise";
function promiseMiddleware ({ dispatch, getState }) {
function promiseMiddleware({ dispatch, getState }) {
return next => action => {
if (!(PROMISE in action)) {
return next(action);

10
devtools/client/shared/redux/middleware/task.js
View File

@ -4,18 +4,18 @@
"use strict";
const { Task } = require("resource://gre/modules/Task.jsm");
const { executeSoon, isGenerator, isPromise, reportException } = require("devtools/shared/DevToolsUtils");
const { executeSoon, isGenerator, reportException } = require("devtools/shared/DevToolsUtils");
const ERROR_TYPE = exports.ERROR_TYPE = "@@redux/middleware/task#error";
/**
* A middleware that allows generator thunks (functions) and promise
* to be dispatched. If it's a generator, it is called with `dispatch` and `getState`,
* allowing the action to create multiple actions (most likely
* to be dispatched. If it's a generator, it is called with `dispatch`
* and `getState`, allowing the action to create multiple actions (most likely
* asynchronously) and yield on each. If called with a promise, calls `dispatch`
* on the results.
*/
function task ({ dispatch, getState }) {
function task({ dispatch, getState }) {
return next => action => {
if (isGenerator(action)) {
return Task.spawn(action.bind(null, dispatch, getState))
@ -32,7 +32,7 @@ function task ({ dispatch, getState }) {
};
}
function handleError (dispatch, error) {
function handleError(dispatch, error) {
executeSoon(() => {
reportException(ERROR_TYPE, error);
dispatch({ type: ERROR_TYPE, error });

6
devtools/client/shared/redux/middleware/test/head.js
View File

@ -9,14 +9,14 @@ var promise = require("promise");
DevToolsUtils.testing = true;
function waitUntilState (store, predicate) {
function waitUntilState(store, predicate) {
let deferred = promise.defer();
let unsubscribe = store.subscribe(check);
function check () {
function check() {
if (predicate(store.getState())) {
unsubscribe();
deferred.resolve()
deferred.resolve();
}
}

12
devtools/client/shared/redux/middleware/test/test_middleware-task-01.js
View File

@ -14,7 +14,7 @@ function run_test() {
run_next_test();
}
add_task(function *() {
add_task(function* () {
let store = applyMiddleware(task)(createStore)(reducer);
store.dispatch(fetch1("generator"));
@ -26,8 +26,8 @@ add_task(function *() {
equal(store.getState()[1].data, "sync", "task middleware sync dispatches an action via sync");
});
function fetch1 (data) {
return function *(dispatch, getState) {
function fetch1(data) {
return function* (dispatch, getState) {
equal(getState().length, 0, "`getState` is accessible in a generator action");
let moreData = yield new Promise(resolve => resolve(data));
// Ensure it handles more than one yield
@ -36,14 +36,14 @@ function fetch1 (data) {
};
}
function fetch2 (data) {
function fetch2(data) {
return {
type: "fetch2",
data
}
};
}
function reducer (state=[], action) {
function reducer(state = [], action) {
do_print("Action called: " + action.type);
if (["fetch1", "fetch2"].includes(action.type)) {
state.push(action);

16
devtools/client/shared/redux/middleware/test/test_middleware-task-02.js
View File

@ -14,7 +14,7 @@ function run_test() {
run_next_test();
}
add_task(function *() {
add_task(function* () {
let store = applyMiddleware(task)(createStore)(reducer);
store.dispatch(comboAction());
@ -28,21 +28,21 @@ add_task(function *() {
equal(store.getState()[3].data.async, "async", "Return values of dispatched async values are correct");
});
function comboAction () {
return function *(dispatch, getState) {
function comboAction() {
return function* (dispatch, getState) {
let data = {};
data.async = yield dispatch(fetchAsync("async"));
data.sync = yield dispatch(fetchSync("sync"));
dispatch({ type: "fetch-done", data });
}
};
}
function fetchSync (data) {
function fetchSync(data) {
return { type: "fetchSync", data };
}
function fetchAsync (data) {
return function *(dispatch) {
function fetchAsync(data) {
return function* (dispatch) {
dispatch({ type: "fetchAsync-start" });
let val = yield new Promise(resolve => resolve(data));
dispatch({ type: "fetchAsync-end" });
@ -50,7 +50,7 @@ function fetchAsync (data) {
};
}
function reducer (state=[], action) {
function reducer(state = [], action) {
do_print("Action called: " + action.type);
if (/fetch/.test(action.type)) {
state.push(action);

8
devtools/client/shared/redux/middleware/test/test_middleware-task-03.js
View File

@ -13,7 +13,7 @@ function run_test() {
run_next_test();
}
add_task(function *() {
add_task(function* () {
let store = applyMiddleware(task)(createStore)(reducer);
store.dispatch(generatorError());
@ -22,13 +22,13 @@ add_task(function *() {
equal(store.getState()[0].error, "task-middleware-error-generator", "generator errors dispatch ERROR_TYPE actions with error");
});
function generatorError () {
return function *(dispatch, getState) {
function generatorError() {
return function* (dispatch, getState) {
throw "task-middleware-error-generator";
};
}
function reducer (state=[], action) {
function reducer(state = [], action) {
do_print("Action called: " + action.type);
if (action.type === ERROR_TYPE) {
state.push(action);

2
devtools/client/shared/redux/middleware/thunk.js
View File

@ -14,6 +14,6 @@ function thunk({ dispatch, getState }) {
return (typeof action === "function")
? action(dispatch, getState)
: next(action);
}
};
}
exports.thunk = thunk;

14
devtools/client/shared/redux/middleware/wait-service.js
View File

@ -40,8 +40,7 @@ function waitUntilService({ dispatch, getState }) {
for (let request of pending) {
if (request.predicate(action)) {
readyRequests.push(request);
}
else {
} else {
stillPending.push(request);
}
}
@ -55,12 +54,11 @@ function waitUntilService({ dispatch, getState }) {
return next => action => {
if (action.type === NAME) {
pending.push(action);
return null;
}
else {
var result = next(action);
checkPending(action);
return result;
}
}
let result = next(action);
checkPending(action);
return result;
};
}
exports.waitUntilService = waitUntilService;

17
devtools/client/shared/redux/non-react-subscriber.js
View File

@ -90,7 +90,7 @@ function makeStateBroadcaster(stillAliveFunc) {
enqueuedChanges.forEach(([name, payload]) => {
if (listeners[name]) {
listeners[name].forEach(listener => {
listener(payload)
listener(payload);
});
}
});
@ -115,7 +115,7 @@ function enhanceStoreWithBroadcaster(store, broadcaster) {
store.onChange = broadcaster.onChange;
store.offChange = broadcaster.offChange;
return store;
};
}
/**
* Function that takes a hash of reducers, like `combineReducers`, and
@ -132,17 +132,20 @@ function combineBroadcastingReducers(reducers, emitChange) {
// Wrap each reducer with a wrapper function that calls
// the reducer with a third argument, an `emitChange` function.
// Use this rather than a new custom top level reducer that would ultimately
// have to replicate redux's `combineReducers` so we only pass in correct state,
// the error checking, and other edge cases.
// have to replicate redux's `combineReducers` so we only pass in correct
// state, the error checking, and other edge cases.
function wrapReduce(newReducers, key) {
newReducers[key] = (state, action) => reducers[key](state, action, emitChange);
newReducers[key] = (state, action) => {
return reducers[key](state, action, emitChange);
};
return newReducers;
}
return combineReducers(Object.keys(reducers).reduce(wrapReduce, Object.create(null)));
return combineReducers(
Object.keys(reducers).reduce(wrapReduce, Object.create(null))
);
}
module.exports = {
makeStateBroadcaster,
enhanceStoreWithBroadcaster,