tor-browser

DebugLine.js (5642B)

---

/* 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/>. */

import { PureComponent } from "devtools/client/shared/vendor/react";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import { toEditorPosition } from "../../utils/editor/index";
import { isException } from "../../utils/pause/index";
import { connect } from "devtools/client/shared/vendor/react-redux";
import {
 getVisibleSelectedFrame,
 getPauseReason,
 getSourceTextContentForLocation,
 getCurrentThread,
 getViewport,
 getSelectedTraceLocation,
} from "../../selectors/index";

export class DebugLine extends PureComponent {
 debugExpression;

 static get propTypes() {
   return {
     editor: PropTypes.object,
     selectedSource: PropTypes.object,
     location: PropTypes.object,
     why: PropTypes.object,
     sourceTextContent: PropTypes.object,
   };
 }

 componentDidMount() {
   this.setDebugLine();
 }

 componentWillUnmount() {
   this.clearDebugLine(this.props);
 }

 componentDidUpdate(prevProps) {
   this.clearDebugLine(prevProps);
   this.setDebugLine();
 }

 setDebugLine() {
   const { why, location, editor, selectedSource } = this.props;
   if (!location) {
     return;
   }

   if (!selectedSource || location.source.id !== selectedSource.id) {
     return;
   }

   const { lineClass, markTextClass } = this.getTextClasses(why);
   const editorLocation = toEditorPosition(location);

   // Show the paused "caret", to highlight on which particular line **and column** we are paused.
   //
   // Using only a `positionClassName` wouldn't only be applied to the immediate
   // token after the position and force to use ::before to show the paused location.
   // Using ::before prevents using :hover to be able to hide the icon on mouse hovering.
   //
   // So we have to use `createPositionElementNode`, similarly to column breakpoints
   // to have a new dedicated DOM element for the paused location.
   editor.setPositionContentMarker({
     id: editor.markerTypes.PAUSED_LOCATION_MARKER,

     // Ensure displaying the marker after all the other markers and especially the column breakpoint markers
     displayLast: true,

     positions: [editorLocation],
     createPositionElementNode(_line, _column, isFirstNonSpaceColumn) {
       const pausedLocation = document.createElement("span");
       pausedLocation.className = `paused-location${isFirstNonSpaceColumn ? " first-column" : ""}`;

       const triangle = document.createElement("span");
       triangle.className = `triangle`;
       pausedLocation.appendChild(triangle);

       return pausedLocation;
     },
   });

   editor.setLineContentMarker({
     id: editor.markerTypes.DEBUG_LINE_MARKER,
     lineClassName: lineClass,
     lines: [{ line: editorLocation.line }],
   });
   editor.setPositionContentMarker({
     id: editor.markerTypes.DEBUG_POSITION_MARKER,
     positionClassName: markTextClass,
     positions: [editorLocation],
   });
 }

 clearDebugLine(otherProps = {}) {
   const { location, editor, selectedSource } = this.props;
   // Remove the debug line marker when no longer paused, or the selected source
   // is no longer the source where the pause occured.
   if (
     !location ||
     location.source.id !== selectedSource.id ||
     otherProps?.location !== location ||
     otherProps?.selectedSource?.id !== selectedSource.id
   ) {
     editor.removeLineContentMarker(editor.markerTypes.DEBUG_LINE_MARKER);
     editor.removePositionContentMarker(
       editor.markerTypes.DEBUG_POSITION_MARKER
     );
     editor.removePositionContentMarker(
       editor.markerTypes.PAUSED_LOCATION_MARKER
     );
   }
 }

 getTextClasses(why) {
   if (why && isException(why)) {
     return {
       markTextClass: "debug-expression-error",
       lineClass: "new-debug-line-error",
     };
   }

   // We no longer highlight the next token via debug-expression
   // and only highlight the line via paused-line.
   return {
     markTextClass: null,
     lineClass: why == "tracer" ? "traced-line" : "paused-line",
   };
 }

 render() {
   return null;
 }
}

function isDocumentReady(location, sourceTextContent) {
 return location && sourceTextContent;
}

const mapStateToProps = state => {
 // If we aren't paused, fallback on showing the JS tracer
 // currently selected trace location.
 // If any trace is selected in the JS Tracer, this takes the lead over
 // any paused location. (the same choice is made when showing inline previews)
 let why;
 let location = getSelectedTraceLocation(state);
 if (location) {
   why = "tracer";
 } else {
   // Avoid unecessary intermediate updates when there is no location
   // or the source text content isn't yet fully loaded
   const frame = getVisibleSelectedFrame(state);
   location = frame?.location;

   // We are not tracing, nor pausing
   if (!location) {
     return {};
   }

   why = getPauseReason(state, getCurrentThread(state));
 }

 // if we have a valid viewport.
 // This is a way to know if the actual source is displayed
 // and we are no longer on the "loading..." message
 if (!getViewport(state)) {
   return {};
 }

 const sourceTextContent = getSourceTextContentForLocation(state, location);
 if (!isDocumentReady(location, sourceTextContent)) {
   return {};
 }

 return {
   location,
   why,
   sourceTextContent,
 };
};

export default connect(mapStateToProps)(DebugLine);