tor-browser

Footer.js (14431B)

---

/* 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,
 button,
 span,
 hr,
} 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 actions from "../../actions/index";
import {
 getSelectedSource,
 getSelectedLocation,
 getSelectedSourceTextContent,
 getPrettySource,
 getPaneCollapse,
 isSourceBlackBoxed,
 canPrettyPrintSource,
 getPrettyPrintMessage,
 isSourceOnSourceMapIgnoreList,
 isSourceMapIgnoreListEnabled,
 getSelectedMappedSource,
 getSourceMapErrorForSourceActor,
 areSourceMapsEnabled,
 getShouldSelectOriginalLocation,
 isSourceActorWithSourceMap,
 getSourceMapResolvedURL,
 isSelectedMappedSourceLoading,
} from "../../selectors/index";

import { shouldBlackbox } from "../../utils/source";

import { PaneToggleButton } from "../shared/Button/index";
import DebuggerImage from "../shared/DebuggerImage";

const classnames = require("resource://devtools/client/shared/classnames.js");
const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js");
const MenuItem = require("resource://devtools/client/shared/components/menu/MenuItem.js");
const MenuList = require("resource://devtools/client/shared/components/menu/MenuList.js");

class SourceFooter extends PureComponent {
 static get propTypes() {
   return {
     canPrettyPrint: PropTypes.bool.isRequired,
     prettyPrintMessage: PropTypes.string,
     endPanelCollapsed: PropTypes.bool.isRequired,
     horizontal: PropTypes.bool.isRequired,
     jumpToMappedLocation: PropTypes.func.isRequired,
     mappedSource: PropTypes.object,
     selectedSource: PropTypes.object,
     selectedLocation: PropTypes.object,
     isSelectedSourceBlackBoxed: PropTypes.bool,
     sourceLoaded: PropTypes.bool.isRequired,
     toggleBlackBox: PropTypes.func.isRequired,
     togglePaneCollapse: PropTypes.func.isRequired,
     prettyPrintAndSelectSource: PropTypes.func.isRequired,
     isSourceOnIgnoreList: PropTypes.bool.isRequired,
   };
 }

 prettyPrintButton() {
   const {
     selectedSource,
     canPrettyPrint,
     prettyPrintMessage,
     prettyPrintAndSelectSource,
     removePrettyPrintedSource,
     sourceLoaded,
   } = this.props;

   if (!selectedSource) {
     return null;
   }

   if (!sourceLoaded && selectedSource.isPrettyPrinted) {
     return div(
       {
         className: "action",
         key: "pretty-loader",
       },
       React.createElement(DebuggerImage, {
         name: "loader",
         className: "spin",
       })
     );
   }

   const type = "prettyPrint";
   return button(
     {
       onClick: () => {
         if (selectedSource.isPrettyPrinted) {
           removePrettyPrintedSource(selectedSource);
           return;
         }
         if (!canPrettyPrint) {
           return;
         }
         prettyPrintAndSelectSource(selectedSource);
       },
       className: classnames("action", type, {
         pretty: selectedSource.isPrettyPrinted,
       }),
       key: type,
       title: prettyPrintMessage,
       "aria-label": prettyPrintMessage,
       disabled: !canPrettyPrint && !selectedSource.isPrettyPrinted,
     },
     React.createElement(DebuggerImage, {
       name: type,
     })
   );
 }

 blackBoxButton() {
   const {
     selectedSource,
     isSelectedSourceBlackBoxed,
     toggleBlackBox,
     sourceLoaded,
     isSourceOnIgnoreList,
   } = this.props;

   if (!selectedSource || !shouldBlackbox(selectedSource)) {
     return null;
   }

   let tooltip = isSelectedSourceBlackBoxed
     ? L10N.getStr("sourceFooter.unignore")
     : L10N.getStr("sourceFooter.ignore");

   if (isSourceOnIgnoreList) {
     tooltip = L10N.getStr("sourceFooter.ignoreList");
   }

   const type = "black-box";
   return button(
     {
       onClick: () => toggleBlackBox(selectedSource),
       className: classnames("action", type, {
         active: sourceLoaded,
         blackboxed: isSelectedSourceBlackBoxed || isSourceOnIgnoreList,
       }),
       key: type,
       title: tooltip,
       "aria-label": tooltip,
       disabled: isSourceOnIgnoreList,
     },
     React.createElement(DebuggerImage, {
       name: "blackBox",
     })
   );
 }

 renderToggleButton() {
   if (this.props.horizontal) {
     return null;
   }
   return React.createElement(PaneToggleButton, {
     key: "toggle",
     collapsed: this.props.endPanelCollapsed,
     horizontal: this.props.horizontal,
     handleClick: this.props.togglePaneCollapse,
     position: "end",
   });
 }

 renderCommands() {
   const commands = [
     this.blackBoxButton(),
     this.prettyPrintButton(),
     this.renderSourceMapButton(),
   ].filter(Boolean);

   return commands.length
     ? div(
         {
           className: "commands",
         },
         commands
       )
     : null;
 }

 renderMappedSource() {
   const { mappedSource, jumpToMappedLocation, selectedLocation } = this.props;

   if (!mappedSource) {
     return null;
   }

   const tooltip = L10N.getFormatStr(
     mappedSource.isOriginal
       ? "sourceFooter.mappedGeneratedSource.tooltip"
       : "sourceFooter.mappedOriginalSource.tooltip",
     mappedSource.url
   );
   const label = L10N.getFormatStr(
     mappedSource.isOriginal
       ? "sourceFooter.mappedOriginalSource.title"
       : "sourceFooter.mappedGeneratedSource.title",
     mappedSource.shortName
   );
   return button(
     {
       className: "mapped-source",
       onClick: () => jumpToMappedLocation(selectedLocation),
       title: tooltip,
     },
     span(null, label)
   );
 }

 renderCursorPosition() {
   // When we open a new source, there is no particular location selected and the line will be set to zero or falsy
   if (!this.props.selectedLocation || !this.props.selectedLocation.line) {
     return null;
   }

   // Note that line is 1-based while column is 0-based.
   const { line, column } = this.props.selectedLocation;

   const text = L10N.getFormatStr(
     "sourceFooter.currentCursorPosition",
     line,
     column + 1
   );
   const title = L10N.getFormatStr(
     "sourceFooter.currentCursorPosition.tooltip",
     line,
     column + 1
   );
   return div(
     {
       className: "cursor-position",
       title,
     },
     text
   );
 }

 getSourceMapLabel() {
   if (!this.props.selectedLocation) {
     return undefined;
   }
   if (!this.props.areSourceMapsEnabled) {
     return L10N.getStr("sourceFooter.sourceMapButton.disabled");
   }
   if (this.props.sourceMapError) {
     return undefined;
   }
   if (!this.props.isSourceActorWithSourceMap) {
     return L10N.getStr("sourceFooter.sourceMapButton.sourceNotMapped");
   }
   if (
     this.props.selectedLocation.source.isOriginal &&
     !this.props.selectedLocation.source.isPrettyPrinted
   ) {
     return L10N.getStr("sourceFooter.sourceMapButton.isOriginalSource");
   }
   return L10N.getStr("sourceFooter.sourceMapButton.isBundleSource");
 }

 getSourceMapTitle() {
   if (this.props.sourceMapError) {
     return L10N.getFormatStr(
       "sourceFooter.sourceMapButton.errorTitle",
       this.props.sourceMapError
     );
   }
   if (this.props.isSourceMapLoading) {
     return L10N.getStr("sourceFooter.sourceMapButton.loadingTitle");
   }
   return L10N.getStr("sourceFooter.sourceMapButton.title");
 }

 renderSourceMapButton() {
   const { toolboxDoc } = this.context;

   const selectedSource = this.props.selectedLocation?.source;
   return React.createElement(
     MenuButton,
     {
       menuId: "debugger-source-map-button",
       key: "debugger-source-map-button",
       toolboxDoc,
       className: classnames("devtools-button", "debugger-source-map-button", {
         error: !!this.props.sourceMapError,
         loading: this.props.isSourceMapLoading,
         disabled: !this.props.areSourceMapsEnabled,
         "not-mapped":
           (!selectedSource?.isOriginal || selectedSource?.isPrettyPrinted) &&
           !this.props.isSourceActorWithSourceMap,
         original:
           selectedSource?.isOriginal && !selectedSource.isPrettyPrinted,
       }),
       title: this.getSourceMapTitle(),
       label: this.getSourceMapLabel(),
       icon: true,
     },
     () => this.renderSourceMapMenuItems()
   );
 }

 renderSourceMapMenuItems() {
   const items = [
     React.createElement(MenuItem, {
       className: "menu-item debugger-source-map-enabled",
       checked: this.props.areSourceMapsEnabled,
       label: L10N.getStr("sourceFooter.sourceMapButton.enable"),
       onClick: this.toggleSourceMaps,
     }),
     hr(),
     React.createElement(MenuItem, {
       className: "menu-item debugger-source-map-open-original",
       checked: this.props.shouldSelectOriginalLocation,
       label: L10N.getStr(
         "sourceFooter.sourceMapButton.showOriginalSourceByDefault"
       ),
       onClick: this.toggleSelectOriginalByDefault,
     }),
   ];

   if (this.props.mappedSource) {
     items.push(
       React.createElement(MenuItem, {
         className: "menu-item debugger-jump-mapped-source",
         label: this.props.mappedSource.isOriginal
           ? L10N.getStr("sourceFooter.sourceMapButton.jumpToOriginalSource")
           : L10N.getStr("sourceFooter.sourceMapButton.jumpToGeneratedSource"),
         tooltip: this.props.mappedSource.url,
         onClick: () =>
           this.props.jumpToMappedLocation(this.props.selectedLocation),
       })
     );
   }

   if (this.props.resolvedSourceMapURL) {
     items.push(
       React.createElement(MenuItem, {
         className: "menu-item debugger-source-map-link",
         label: L10N.getStr(
           "sourceFooter.sourceMapButton.openSourceMapInNewTab"
         ),
         onClick: this.openSourceMap,
       })
     );
   }
   return React.createElement(
     MenuList,
     {
       id: "debugger-source-map-list",
     },
     items
   );
 }

 openSourceMap = () => {
   let line, column;
   if (
     this.props.sourceMapError &&
     this.props.sourceMapError.includes("JSON.parse")
   ) {
     const match = this.props.sourceMapError.match(
       /at line (\d+) column (\d+)/
     );
     if (match) {
       line = match[1];
       column = match[2];
     }
   }
   this.props.openSourceMap(
     this.props.resolvedSourceMapURL || this.props.selectedLocation.source.url,
     line,
     column
   );
 };

 toggleSourceMaps = () => {
   this.props.toggleSourceMapsEnabled(!this.props.areSourceMapsEnabled);
 };

 toggleSelectOriginalByDefault = () => {
   this.props.setDefaultSelectedLocation(
     !this.props.shouldSelectOriginalLocation
   );
   this.props.jumpToMappedSelectedLocation();
 };

 render() {
   return div(
     {
       className: "source-footer",
     },
     div(
       {
         className: "source-footer-start",
       },
       this.renderCommands()
     ),
     div(
       {
         className: "source-footer-end",
       },
       this.renderMappedSource(),
       this.renderCursorPosition(),
       this.renderToggleButton()
     )
   );
 }
}
SourceFooter.contextTypes = {
 toolboxDoc: PropTypes.object,
};

const mapStateToProps = state => {
 const selectedSource = getSelectedSource(state);
 const selectedLocation = getSelectedLocation(state);
 const sourceTextContent = getSelectedSourceTextContent(state);

 const areSourceMapsEnabledProp = areSourceMapsEnabled(state);
 const isSourceActorWithSourceMapProp = selectedLocation?.sourceActor
   ? isSourceActorWithSourceMap(state, selectedLocation?.sourceActor.id)
   : false;
 const sourceMapError = selectedLocation?.sourceActor
   ? getSourceMapErrorForSourceActor(state, selectedLocation.sourceActor.id)
   : null;
 const mappedSource = getSelectedMappedSource(state);

 const isSourceMapLoading =
   areSourceMapsEnabledProp &&
   isSourceActorWithSourceMapProp &&
   // `mappedSource` will be null while loading, we need another way to know when it is done computing
   !mappedSource &&
   isSelectedMappedSourceLoading(state) &&
   !sourceMapError &&
   !selectedSource?.isPrettyPrinted;

 return {
   selectedSource,
   selectedLocation,
   isSelectedSourceBlackBoxed: selectedSource
     ? isSourceBlackBoxed(state, selectedSource)
     : null,
   isSourceOnIgnoreList:
     isSourceMapIgnoreListEnabled(state) &&
     isSourceOnSourceMapIgnoreList(state, selectedSource),
   sourceLoaded: !!sourceTextContent,
   mappedSource,
   isSourceMapLoading,
   prettySource: getPrettySource(
     state,
     selectedSource ? selectedSource.id : null
   ),
   endPanelCollapsed: getPaneCollapse(state, "end"),
   canPrettyPrint: selectedLocation
     ? canPrettyPrintSource(
         state,
         selectedSource,
         selectedLocation.sourceActor
       )
     : false,
   prettyPrintMessage: selectedLocation
     ? getPrettyPrintMessage(state, selectedLocation)
     : null,

   sourceMapError,
   resolvedSourceMapURL: selectedLocation?.sourceActor
     ? getSourceMapResolvedURL(state, selectedLocation.sourceActor.id)
     : null,
   isSourceActorWithSourceMap: isSourceActorWithSourceMapProp,

   areSourceMapsEnabled: areSourceMapsEnabledProp,
   shouldSelectOriginalLocation: getShouldSelectOriginalLocation(state),
 };
};

export default connect(mapStateToProps, {
 removePrettyPrintedSource: actions.removePrettyPrintedSource,
 prettyPrintAndSelectSource: actions.prettyPrintAndSelectSource,
 toggleBlackBox: actions.toggleBlackBox,
 jumpToMappedLocation: actions.jumpToMappedLocation,
 togglePaneCollapse: actions.togglePaneCollapse,
 toggleSourceMapsEnabled: actions.toggleSourceMapsEnabled,
 setDefaultSelectedLocation: actions.setDefaultSelectedLocation,
 jumpToMappedSelectedLocation: actions.jumpToMappedSelectedLocation,
 openSourceMap: actions.openSourceMap,
})(SourceFooter);