tor-browser

ColumnBreakpoints.js (5540B)

---

/* 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 { Component } from "devtools/client/shared/vendor/react";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";

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

import {
 getSelectedSource,
 visibleColumnBreakpoints,
 isSourceBlackBoxed,
} from "../../selectors/index";
import actions from "../../actions/index";
import { connect } from "devtools/client/shared/vendor/react-redux";

const breakpointButton = document.createElement("button");
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 11 13");
svg.setAttribute("width", 11);
svg.setAttribute("height", 13);

const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttributeNS(
 null,
 "d",
 "M5.07.5H1.5c-.54 0-1 .46-1 1v10c0 .54.46 1 1 1h3.57c.58 0 1.15-.26 1.53-.7l3.7-5.3-3.7-5.3C6.22.76 5.65.5 5.07.5z"
);

svg.appendChild(path);
breakpointButton.appendChild(svg);

class ColumnBreakpoints extends Component {
 static get propTypes() {
   return {
     columnBreakpoints: PropTypes.array,
     editor: PropTypes.object.isRequired,
     selectedSource: PropTypes.object,
     addBreakpoint: PropTypes.func,
     removeBreakpoint: PropTypes.func,
     setSkipPausing: PropTypes.func,
     toggleDisabledBreakpoint: PropTypes.func,
     showEditorCreateBreakpointContextMenu: PropTypes.func,
     showEditorEditBreakpointContextMenu: PropTypes.func,
   };
 }

 componentDidUpdate() {
   const { selectedSource, columnBreakpoints, editor } = this.props;

   if (!selectedSource || !editor) {
     return;
   }

   if (!columnBreakpoints.length) {
     editor.removePositionContentMarker(
       editor.markerTypes.COLUMN_BREAKPOINT_MARKER
     );
     return;
   }

   editor.setPositionContentMarker({
     id: editor.markerTypes.COLUMN_BREAKPOINT_MARKER,
     positions: columnBreakpoints.map(cbp => {
       return {
         line: cbp.location.line,
         column: cbp.location.column,
         positionData: cbp,
       };
     }),
     createPositionElementNode: (
       line,
       column,
       isFirstNonSpaceColumn,
       positionData
     ) => {
       const breakpointNode = breakpointButton.cloneNode(true);
       breakpointNode.className = classnames("column-breakpoint", {
         "has-condition": positionData.breakpoint?.options.condition,
         "has-log": positionData.breakpoint?.options.logValue,
         active: positionData.breakpoint && !positionData.breakpoint.disabled,
         disabled: positionData.breakpoint?.disabled,
       });
       breakpointNode.addEventListener("click", event =>
         this.onClick(event, positionData)
       );
       breakpointNode.addEventListener("contextmenu", event =>
         this.onContextMenu(event, positionData)
       );
       return breakpointNode;
     },
     customEq: (positionData, prevPositionData) => {
       return (
         positionData?.breakpoint?.id == prevPositionData?.breakpoint?.id &&
         positionData?.breakpoint?.options.condition ==
           prevPositionData?.breakpoint?.options.condition &&
         positionData?.breakpoint?.options.logValue ==
           prevPositionData?.breakpoint?.options.logValue &&
         positionData?.breakpoint?.disabled ==
           prevPositionData?.breakpoint?.disabled
       );
     },
   });
 }

 onClick = (event, columnBreakpoint) => {
   event.stopPropagation();
   event.preventDefault();
   const {
     toggleDisabledBreakpoint,
     removeBreakpoint,
     addBreakpoint,
     setSkipPausing,
   } = this.props;

   // disable column breakpoint on shift-click.
   if (event.shiftKey) {
     toggleDisabledBreakpoint(columnBreakpoint.breakpoint);
     return;
   }

   if (columnBreakpoint.breakpoint) {
     removeBreakpoint(columnBreakpoint.breakpoint);
   } else {
     setSkipPausing(false);
     addBreakpoint(columnBreakpoint.location);
   }
 };

 onContextMenu = (event, columnBreakpoint) => {
   event.stopPropagation();
   event.preventDefault();

   if (columnBreakpoint.breakpoint) {
     this.props.showEditorEditBreakpointContextMenu(
       event,
       columnBreakpoint.breakpoint
     );
   } else {
     this.props.showEditorCreateBreakpointContextMenu(
       event,
       columnBreakpoint.location
     );
   }
 };

 render() {
   return null;
 }
}

const mapStateToProps = state => {
 // Avoid rendering this component is there is no selected source,
 // or if the selected source is blackboxed.
 // Also avoid computing visible column breakpoint when this happens.
 const selectedSource = getSelectedSource(state);
 if (!selectedSource || isSourceBlackBoxed(state, selectedSource)) {
   return {};
 }
 return {
   selectedSource,
   columnBreakpoints: visibleColumnBreakpoints(state),
 };
};

export default connect(mapStateToProps, {
 showEditorCreateBreakpointContextMenu:
   actions.showEditorCreateBreakpointContextMenu,
 showEditorEditBreakpointContextMenu:
   actions.showEditorEditBreakpointContextMenu,
 toggleDisabledBreakpoint: actions.toggleDisabledBreakpoint,
 removeBreakpoint: actions.removeBreakpoint,
 addBreakpoint: actions.addBreakpoint,
 setSkipPausing: actions.setSkipPausing,
})(ColumnBreakpoints);