tor-browser

ConditionalPanel.js (13548B)

---

/* 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 React, { PureComponent } from "devtools/client/shared/vendor/react";
import {
 div,
 input,
 button,
 form,
 label,
} from "devtools/client/shared/vendor/react-dom-factories";
import ReactDOM from "devtools/client/shared/vendor/react-dom";
import PropTypes from "devtools/client/shared/vendor/react-prop-types";
import { connect } from "devtools/client/shared/vendor/react-redux";
import { toEditorLine } from "../../utils/editor/index";
import { createEditor } from "../../utils/editor/create-editor";
import actions from "../../actions/index";

import {
 getClosestBreakpoint,
 getConditionalPanelLocation,
 getLogPointStatus,
} from "../../selectors/index";

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

export class ConditionalPanel extends PureComponent {
 cbPanel;
 input;
 codeMirror;
 panelNode;
 scrollParent;

 constructor() {
   super();
   this.cbPanel = null;
   this.breakpointPanelEditor = null;
   this.formRef = React.createRef();
 }

 static get propTypes() {
   return {
     breakpoint: PropTypes.object,
     closeConditionalPanel: PropTypes.func.isRequired,
     editor: PropTypes.object.isRequired,
     location: PropTypes.any.isRequired,
     log: PropTypes.bool.isRequired,
     openConditionalPanel: PropTypes.func.isRequired,
     setBreakpointOptions: PropTypes.func.isRequired,
     selectedSource: PropTypes.object.isRequired,
   };
 }

 removeBreakpointPanelEditor() {
   if (this.breakpointPanelEditor) {
     this.breakpointPanelEditor.destroy();
   }
   this.breakpointPanelEditor = null;
 }

 keepFocusOnInput() {
   if (this.input) {
     this.input.focus();
   } else if (this.breakpointPanelEditor) {
     if (!this.breakpointPanelEditor.isDestroyed()) {
       this.breakpointPanelEditor.focus();
     }
   }
 }

 onFormSubmit = e => {
   if (e && e.preventDefault) {
     e.preventDefault();
   }
   const formData = new FormData(this.formRef.current);
   const showStacktrace = formData.get("showStacktrace") === "on";

   if (
     !this.breakpointPanelEditor ||
     this.breakpointPanelEditor.isDestroyed()
   ) {
     return;
   }
   const expression = this.breakpointPanelEditor.getText(null);
   this.saveAndClose(expression, showStacktrace);
 };

 onPanelBlur = e => {
   // if the focus is outside of the conditional panel,
   // close/hide the conditional panel
   if (
     e.relatedTarget &&
     e.relatedTarget.closest(".conditional-breakpoint-panel-container")
   ) {
     return;
   }
   this.props.closeConditionalPanel();
 };

 /**
  * Set the breakpoint/logpoint if expression isn't empty, and close the panel.
  *
  * @param {string} expression: The expression that will be used for setting the
  *        conditional breakpoint/logpoint
  * @param {boolean} showStacktrace: Whether to show the stacktrace for the logpoint
  */
 saveAndClose = (expression = null, showStacktrace = false) => {
   if (typeof expression === "string") {
     const trimmedExpression = expression.trim();
     if (trimmedExpression) {
       this.setBreakpoint(trimmedExpression, showStacktrace);
     } else if (this.props.breakpoint) {
       // if the user was editing the condition/log of an existing breakpoint,
       // we remove the condition/log.
       this.setBreakpoint(null);
     }
   }

   this.props.closeConditionalPanel();
 };

 /**
  * Handle inline editor keydown event
  *
  * @param {Event} e: The keydown event
  */
 onKey = e => {
   if (e.key === "Enter" && !e.shiftKey) {
     e.preventDefault();
     this.formRef.current.requestSubmit();
   } else if (e.key === "Escape") {
     this.props.closeConditionalPanel();
   }
 };

 /**
  * Handle inline editor blur event
  *
  * @param {Event} e: The blur event
  */
 onBlur = e => {
   let explicitOriginalTarget = e?.explicitOriginalTarget;
   // The explicit original target can be a text node, in such case retrieve its parent
   // element so we can use `closest` on it.
   if (explicitOriginalTarget && !Element.isInstance(explicitOriginalTarget)) {
     explicitOriginalTarget = explicitOriginalTarget.parentElement;
   }

   if (
     // if there is no event
     // or if the focus is the conditional panel
     // do not close the conditional panel
     !e ||
     (explicitOriginalTarget &&
       explicitOriginalTarget.closest(
         ".conditional-breakpoint-panel-container"
       ))
   ) {
     return;
   }

   this.props.closeConditionalPanel();
 };

 setBreakpoint(value, showStacktrace) {
   const { log, breakpoint } = this.props;
   // If breakpoint is `pending`, props will not contain a breakpoint.
   // If source is a URL without location, breakpoint will contain no generatedLocation.
   const location =
     breakpoint && breakpoint.generatedLocation
       ? breakpoint.generatedLocation
       : this.props.location;
   const options = breakpoint ? breakpoint.options : {};
   const type = log ? "logValue" : "condition";
   return this.props.setBreakpointOptions(location, {
     ...options,
     [type]: value,
     showStacktrace,
   });
 }

 clearConditionalPanel() {
   if (this.cbPanel) {
     this.cbPanel.clear();
     this.cbPanel = null;
   }
   if (this.scrollParent) {
     this.scrollParent.removeEventListener("scroll", this.repositionOnScroll);
   }
 }

 repositionOnScroll = () => {
   if (this.panelNode && this.scrollParent) {
     const { scrollLeft } = this.scrollParent;
     this.panelNode.style.transform = `translateX(${scrollLeft}px)`;
   }
 };

 showConditionalPanel(prevProps) {
   const { location, log, editor, breakpoint, selectedSource } = this.props;

   if (!selectedSource || !location) {
     this.removeBreakpointPanelEditor();
     return;
   }
   // When breakpoint is removed
   if (prevProps?.breakpoint && !breakpoint) {
     editor.removeLineContentMarker(editor.markerTypes.CONDITIONAL_BP_MARKER);
     this.removeBreakpointPanelEditor();
     return;
   }
   if (selectedSource.id !== location.source.id) {
     editor.removeLineContentMarker(editor.markerTypes.CONDITIONAL_BP_MARKER);
     this.removeBreakpointPanelEditor();
     return;
   }
   const line = toEditorLine(location.source, location.line || 0);
   editor.setLineContentMarker({
     id: editor.markerTypes.CONDITIONAL_BP_MARKER,
     lines: [{ line }],
     renderAsBlock: true,
     createLineElementNode: () => {
       // Create a Codemirror editor for the breakpoint panel

       const onEnterKeyMapConfig = {
         preventDefault: true,
         stopPropagation: true,
         run: () => this.formRef.current.requestSubmit(),
       };

       const breakpointPanelEditor = createEditor({
         cm6: true,
         readOnly: false,
         lineNumbers: false,
         lineWrapping: true,
         placeholder: L10N.getStr(
           log
             ? "editor.conditionalPanel.logPoint.placeholder2"
             : "editor.conditionalPanel.placeholder2"
         ),
         keyMap: [
           {
             key: "Enter",
             ...onEnterKeyMapConfig,
           },
           {
             key: "Mod-Enter",
             ...onEnterKeyMapConfig,
           },
           {
             key: "Escape",
             preventDefault: true,
             stopPropagation: true,
             run: () => this.props.closeConditionalPanel(),
           },
         ],
       });

       this.breakpointPanelEditor = breakpointPanelEditor;
       return this.renderConditionalPanel(this.props, breakpointPanelEditor);
     },
   });
 }

 // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
 UNSAFE_componentWillMount() {
   this.showConditionalPanel();
 }

 componentDidUpdate(prevProps) {
   this.showConditionalPanel(prevProps);
   this.keepFocusOnInput();
 }

 componentWillUnmount() {
   // This is called if CodeMirror is re-initializing itself before the
   // user closes the conditional panel. Clear the widget, and re-render it
   // as soon as this component gets remounted
   const { editor } = this.props;
   editor.removeLineContentMarker(editor.markerTypes.CONDITIONAL_BP_MARKER);
   this.removeBreakpointPanelEditor();
 }

 componentDidMount() {
   if (this.formRef && this.formRef.current) {
     const checkbox = this.formRef.current.querySelector("#showStacktrace");
     if (checkbox) {
       checkbox.checked = this.props.breakpoint?.options?.showStacktrace;
     }
   }
 }

 renderToWidget(props) {
   if (this.cbPanel) {
     this.clearConditionalPanel();
   }
   const { location, editor } = props;
   if (!location) {
     return;
   }

   const editorLine = toEditorLine(location.source, location.line || 0);
   this.cbPanel = editor.codeMirror.addLineWidget(
     editorLine,
     this.renderConditionalPanel(props, editor),
     {
       coverGutter: true,
       noHScroll: true,
     }
   );

   if (this.input) {
     let parent = this.input.parentNode;
     while (parent) {
       if (
         HTMLElement.isInstance(parent) &&
         parent.classList.contains("CodeMirror-scroll")
       ) {
         this.scrollParent = parent;
         break;
       }
       parent = parent.parentNode;
     }

     if (this.scrollParent) {
       this.scrollParent.addEventListener("scroll", this.repositionOnScroll);
       this.repositionOnScroll();
     }
   }
 }

 setupAndAppendInlineEditor = (el, editor) => {
   editor.appendToLocalElement(el);
   editor.on("blur", e => this.onBlur(e));

   editor.setText(this.getDefaultValue());
   editor.focus();
   editor.selectAll();
 };

 getDefaultValue() {
   const { breakpoint, log } = this.props;
   const options = breakpoint?.options || {};
   const value = log ? options.logValue : options.condition;
   return value || "";
 }

 renderConditionalPanel(props, editor) {
   const { log } = props;
   const panel = document.createElement("div");
   const isWindows = Services.appinfo.OS.startsWith("WINNT");

   const isCreating = !this.props.breakpoint;

   const saveButton = button(
     {
       type: "submit",
       id: "save-logpoint",
       className: "devtools-button conditional-breakpoint-panel-save-button",
     },
     L10N.getStr(
       isCreating
         ? "editor.conditionalPanel.create"
         : "editor.conditionalPanel.update"
     )
   );

   const cancelButton = button(
     {
       type: "button",
       className: "devtools-button conditional-breakpoint-panel-cancel-button",
       onClick: () => this.props.closeConditionalPanel(),
     },
     L10N.getStr("editor.conditionalPanel.cancel")
   );

   // CodeMirror6 can't have margin on a block widget, so we need to wrap the actual
   // panel inside a container which won't have any margin
   const reactElPanel = div(
     {
       className: "conditional-breakpoint-panel-container",
       onBlur: this.onPanelBlur,
       tabIndex: -1,
     },
     form(
       {
         className: classnames("conditional-breakpoint-panel", {
           "log-point": log,
         }),
         onSubmit: this.onFormSubmit,
         ref: this.formRef,
       },
       div(
         {
           className: "input-container",
         },
         div(
           {
             className: "prompt",
           },
           "»"
         ),
         div({
           className: "inline-codemirror-container",
           ref: el => this.setupAndAppendInlineEditor(el, editor),
         })
       ),
       div(
         {
           className: "conditional-breakpoint-panel-controls",
         },
         log
           ? label(
               {
                 className: "conditional-breakpoint-panel-checkbox-label",
                 htmlFor: "showStacktrace",
               },
               input({
                 type: "checkbox",
                 id: "showStacktrace",
                 name: "showStacktrace",
                 defaultChecked:
                   this.props.breakpoint?.options?.showStacktrace,
                 "aria-label": L10N.getStr(
                   "editor.conditionalPanel.logPoint.showStacktrace"
                 ),
               }),
               L10N.getStr("editor.conditionalPanel.logPoint.showStacktrace")
             )
           : null,
         div(
           {
             className: "conditional-breakpoint-panel-buttons",
           },
           isWindows ? saveButton : cancelButton,
           isWindows ? cancelButton : saveButton
         )
       )
     )
   );
   ReactDOM.render(reactElPanel, panel);
   return panel;
 }

 render() {
   return null;
 }
}

const mapStateToProps = state => {
 const location = getConditionalPanelLocation(state);

 if (!location) {
   return {};
 }

 const breakpoint = getClosestBreakpoint(state, location);

 return {
   breakpoint,
   location,
   log: getLogPointStatus(state),
 };
};

const { setBreakpointOptions, openConditionalPanel, closeConditionalPanel } =
 actions;

const mapDispatchToProps = {
 setBreakpointOptions,
 openConditionalPanel,
 closeConditionalPanel,
};

export default connect(mapStateToProps, mapDispatchToProps)(ConditionalPanel);