Merge pull request firefox-devtools#542 from jasonLaster/pp-fix

jasonLaster · web-flow · commit bed2531cb993 · 2016-08-12T14:22:35.000-04:00
Fix Pretty Print tests
diff --git a/public/js/actions/sources.js b/public/js/actions/sources.js
@@ -196,6 +196,11 @@ function blackbox(source, shouldBlackBox) {
 function togglePrettyPrint(id) {
   return ({ dispatch, getState, client }) => {
     const source = getSource(getState(), id).toJS();
+    const sourceText = getSourceText(getState(), id).toJS();
+
+    if (sourceText.loading) {
+      return;
+    }
 
     if (!isEnabled("prettyPrint") || source.isPrettyPrinted) {
       return {};
@@ -210,7 +215,6 @@ function togglePrettyPrint(id) {
       source,
       originalSource,
       [PROMISE]: (async function () {
-        const sourceText = getSourceText(getState(), source.id).toJS();
         const text = await _prettyPrintSource({ source, sourceText, url });
 
         dispatch(selectSource(originalSource.id));
diff --git a/public/js/components/Editor.js b/public/js/components/Editor.js
@@ -179,7 +179,7 @@ module.exports = connect(
     const selectedId = selectedSource && selectedSource.get("id");
 
     return {
-      selectedSource: selectedSource,
+      selectedSource,
       sourceText: getSourceText(state, selectedId),
       breakpoints: getBreakpointsForSource(state, selectedId),
       selectedFrame: getSelectedFrame(state)
diff --git a/public/js/components/SourceFooter.js b/public/js/components/SourceFooter.js
@@ -1,11 +1,13 @@
 const React = require("react");
-const { DOM: dom } = React;
+const { DOM: dom, PropTypes } = React;
 const { connect } = require("react-redux");
 const { bindActionCreators } = require("redux");
 const actions = require("../actions");
 const { isEnabled } = require("../feature");
-const { getSelectedSource } = require("../selectors");
+const { getSelectedSource, getSourceText } = require("../selectors");
 const Svg = require("./utils/Svg");
+const ImPropTypes = require("react-immutable-proptypes");
+const classnames = require("classnames");
 
 function debugBtn(onClick, type, className = "active", tooltip) {
   className = `${type} ${className}`;
@@ -15,33 +17,58 @@ function debugBtn(onClick, type, className = "active", tooltip) {
   );
 }
 
-function SourceFooter({ togglePrettyPrint, selectedSource }) {
-  const commandsEnabled = selectedSource ? "" : "disabled";
-
-  return dom.div(
-    {
-      className: "source-footer"
-    },
-    dom.div({ className: "command-bar" },
-      isEnabled("blackbox") ? debugBtn(
-        () => {},
-        "blackBox",
-        commandsEnabled,
-        "Toggle Black Boxing"
-      ) : null,
-      debugBtn(
-        () => togglePrettyPrint(selectedSource.get("id")),
-        "prettyPrint",
-        commandsEnabled,
-        "Prettify Source"
+const SourceFooter = React.createClass({
+  propTypes: {
+    selectedSource: ImPropTypes.map.isRequired,
+    togglePrettyPrint: PropTypes.func,
+    sourceText: ImPropTypes.map.isRequired
+  },
+
+  displayName: "Editor",
+
+  blackboxButton() {
+    if (!isEnabled("blackbox")) {
+      return null;
+    }
+
+    return debugBtn(
+      () => {},
+      "blackBox",
+      this.props.selectedSource,
+      "Toggle Black Boxing"
+    );
+  },
+
+  prettyPrintButton() {
+    const { selectedSource, sourceText, togglePrettyPrint } = this.props;
+    const sourceLoaded = selectedSource && !sourceText.get("loading");
+
+    return debugBtn(
+      () => togglePrettyPrint(selectedSource.get("id")),
+      "prettyPrint",
+      classnames({ active: sourceLoaded }),
+      "Prettify Source"
+    );
+  },
+
+  render() {
+    return dom.div({ className: "source-footer" },
+      dom.div({ className: "command-bar" },
+        this.blackboxButton(),
+        this.prettyPrintButton()
       )
-    )
-  );
-}
+    );
+  }
+});
 
 module.exports = connect(
-  state => ({
-    selectedSource: getSelectedSource(state),
-  }),
+  state => {
+    const selectedSource = getSelectedSource(state);
+    const selectedId = selectedSource && selectedSource.get("id");
+    return {
+      selectedSource,
+      sourceText: getSourceText(state, selectedId)
+    };
+  },
   dispatch => bindActionCreators(actions, dispatch)
 )(SourceFooter);
diff --git a/public/js/test/cypress/commands.js b/public/js/test/cypress/commands.js
@@ -35,7 +35,7 @@ Cypress.addParentCommand("debuggee", function(callback) {
   return cy.window().then(win => {
     win.injectDebuggee();
     return win.client.debuggeeCommand(script);
-  });
+  }).wait(1000);
 });
 
 Cypress.addParentCommand("navigate", function(url) {
diff --git a/public/js/test/cypress/commands/debugger.js b/public/js/test/cypress/commands/debugger.js
@@ -123,7 +123,7 @@ function stepOut() {
 }
 
 function prettyPrint() {
-  return sourceFooter().get("span.prettyPrint").click()
+  return sourceFooter().get("span.prettyPrint.active").click()
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -123,7 +123,7 @@ function stepOut() {`
`123`	`123`	`}`
`124`	`124`
`125`	`125`	`function prettyPrint() {`
`126`		`- return sourceFooter().get("span.prettyPrint").click()`
	`126`	`+ return sourceFooter().get("span.prettyPrint.active").click()`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`/**`