tor-browser

WhyPaused.js (7379B)

---

/* 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 {
 LocalizationProvider,
 Localized,
} = require("resource://devtools/client/shared/vendor/fluent-react.js");

import React, { PureComponent } from "devtools/client/shared/vendor/react";
import { div, span } from "devtools/client/shared/vendor/react-dom-factories";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import { connect } from "devtools/client/shared/vendor/react-redux";
import DebuggerImage from "../shared/DebuggerImage";
import actions from "../../actions/index";

const Reps = ChromeUtils.importESModule(
 "resource://devtools/client/shared/components/reps/index.mjs"
);
const {
 REPS: { Rep },
 MODE,
} = Reps;

import { getPauseReason } from "../../utils/pause/index";
import {
 getCurrentThread,
 getPauseCommand,
 getPaneCollapse,
 getPauseReason as getWhy,
 getVisibleSelectedFrame,
} from "../../selectors/index";

const classnames = require("resource://devtools/client/shared/classnames.js");

class WhyPaused extends PureComponent {
 constructor(props) {
   super(props);
   this.state = { hideWhyPaused: true };
 }

 static get propTypes() {
   return {
     delay: PropTypes.number.isRequired,
     endPanelCollapsed: PropTypes.bool.isRequired,
     highlightDomElement: PropTypes.func.isRequired,
     openElementInInspector: PropTypes.func.isRequired,
     unHighlightDomElement: PropTypes.func.isRequired,
     why: PropTypes.object,
   };
 }

 componentDidUpdate() {
   const { delay } = this.props;

   if (delay) {
     setTimeout(() => {
       this.setState({ hideWhyPaused: true });
     }, delay);
   } else {
     this.setState({ hideWhyPaused: false });
   }
 }

 renderExceptionSummary(exception) {
   if (typeof exception === "string") {
     return exception;
   }

   const { preview } = exception;
   if (!preview || !preview.name || !preview.message) {
     return null;
   }

   return `${preview.name}: ${preview.message}`;
 }

 renderMessage(why) {
   const { type, exception, message } = why;

   if (type == "exception" && exception) {
     // Our types for 'Why' are too general because 'type' can be 'string'.
     // $FlowFixMe - We should have a proper discriminating union of reasons.
     const summary = this.renderExceptionSummary(exception);
     return div(
       {
         className: "message error",
       },
       summary
     );
   }

   if (type === "mutationBreakpoint" && why.nodeGrip) {
     const { nodeGrip, ancestorGrip, action } = why;
     const {
       openElementInInspector,
       highlightDomElement,
       unHighlightDomElement,
     } = this.props;

     const targetRep = Rep({
       object: nodeGrip,
       mode: MODE.TINY,
       onDOMNodeClick: () => openElementInInspector(nodeGrip),
       onInspectIconClick: () => openElementInInspector(nodeGrip),
       onDOMNodeMouseOver: () => highlightDomElement(nodeGrip),
       onDOMNodeMouseOut: () => unHighlightDomElement(),
     });

     const ancestorRep = ancestorGrip
       ? Rep({
           object: ancestorGrip,
           mode: MODE.TINY,
           onDOMNodeClick: () => openElementInInspector(ancestorGrip),
           onInspectIconClick: () => openElementInInspector(ancestorGrip),
           onDOMNodeMouseOver: () => highlightDomElement(ancestorGrip),
           onDOMNodeMouseOut: () => unHighlightDomElement(),
         })
       : null;
     return div(
       null,
       div(
         {
           className: "message",
         },
         why.message
       ),
       div(
         {
           className: "mutationNode",
         },
         ancestorRep,
         ancestorGrip
           ? span(
               {
                 className: "why-paused-ancestor",
               },
               React.createElement(Localized, {
                 id:
                   action === "remove"
                     ? "whypaused-mutation-breakpoint-removed"
                     : "whypaused-mutation-breakpoint-added",
               }),
               targetRep
             )
           : targetRep
       )
     );
   }

   if (typeof message == "string") {
     return div(
       {
         className: "message",
       },
       message
     );
   }

   return null;
 }

 renderLocation() {
   const { visibleSelectedFrame } = this.props;
   if (!visibleSelectedFrame || !visibleSelectedFrame.location?.source) {
     return null;
   }
   const { location, displayName } = visibleSelectedFrame;
   let pauseLocation = "";
   if (visibleSelectedFrame.displayName) {
     pauseLocation += `${displayName} - `;
   }
   pauseLocation += `${location.source.displayURL?.filename}:${location.line}:${location.column}`;
   return div({ className: "location" }, pauseLocation);
 }

 render() {
   const { endPanelCollapsed, why } = this.props;
   const { fluentBundles } = this.context;
   const reason = getPauseReason(why);

   let content = "";
   if (!why || !reason) {
     if (this.state.hideWhyPaused) {
       content = null;
     }
   } else {
     content = div(
       null,
       div(
         {
           className: "info icon",
         },
         React.createElement(DebuggerImage, {
           name: "info",
         })
       ),
       div(
         {
           className: "pause reason",
         },
         div(
           {},
           React.createElement(Localized, {
             id: reason,
           })
         ),
         this.renderLocation(),
         this.renderMessage(why)
       )
     );
   }

   return (
     // We're rendering the LocalizationProvider component from here and not in an upper
     // component because it does set a new context, overriding the context that we set
     // in the first place in <App>, which breaks some components.
     // This should be fixed in Bug 1743155.
     React.createElement(
       LocalizationProvider,
       {
         bundles: fluentBundles || [],
       },
       // Always render the component so the live region works as expected
       div(
         {
           className: classnames("pane why-paused", {
             hidden: content == null || endPanelCollapsed,
           }),
           "aria-live": "polite",
         },
         content
       )
     )
   );
 }
}

WhyPaused.contextTypes = { fluentBundles: PropTypes.array };

// Checks if user is in debugging mode and adds a delay preventing
// excessive vertical 'jumpiness'
function getDelay(state, thread) {
 const inPauseCommand = !!getPauseCommand(state, thread);

 if (!inPauseCommand) {
   return 100;
 }

 return 0;
}

const mapStateToProps = state => {
 const thread = getCurrentThread(state);

 return {
   delay: getDelay(state, thread),
   endPanelCollapsed: getPaneCollapse(state, "end"),
   why: getWhy(state, thread),
   visibleSelectedFrame: getVisibleSelectedFrame(state),
 };
};

export default connect(mapStateToProps, {
 openElementInInspector: actions.openElementInInspectorCommand,
 highlightDomElement: actions.highlightDomElement,
 unHighlightDomElement: actions.unHighlightDomElement,
})(WhyPaused);