Add a menu to copy the Marker Table as text

Author: arai-a

locales/en-US/app.ftl

@@ -468,6 +468,12 @@ MarkerContextMenu--select-the-sender-thread =
 MarkerFiltersContextMenu--drop-samples-outside-of-markers-matching =
     Drop samples outside of markers matching “<strong>{ $filter }</strong>”
 
+MarkerCopyTableContextMenu--copy-table-as-plain =
+    Copy marker table as plain text
+
+MarkerCopyTableContextMenu--copy-table-as-markdown =
+    Copy marker table as Markdown
+
 ## MarkerSettings
 ## This is used in all panels related to markers.
 
@@ -478,6 +484,9 @@ MarkerSettings--panel-search =
 MarkerSettings--marker-filters =
     .title = Marker Filters
 
+MarkerSettings--copy-table =
+    .title = Copy table as text
+
 ## MarkerSidebar
 ## This is the sidebar component that is used in Marker Table panel.
 

src/components/marker-table/index.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../actions/profile-view';
 import { MarkerSettings } from '../shared/MarkerSettings';
 import { formatSeconds, formatTimestamp } from '../../utils/format-numbers';
+import copy from 'copy-to-clipboard';
 
 import './index.css';
 
@@ -71,6 +72,77 @@ class MarkerTree {
     this._getMarkerLabel = getMarkerLabel;
   }
 
+  copyTable = (format: string) => {
+    const lines = [];
+
+    const startLabel = 'Start';
+    const durationLabel = 'Duration';
+    const nameLabel = 'Name';
+    const detailsLabel = 'Details';
+
+    const header = [startLabel, durationLabel, nameLabel, detailsLabel];
+
+    let maxStartLength = startLabel.length;
+    let maxDurationLength = durationLabel.length;
+    let maxNameLength = nameLabel.length;
+
+    for (const index of this.getRoots()) {
+      const data = this.getDisplayData(index);
+      const duration = data.duration ?? '';
+
+      maxStartLength = Math.max(data.start.length, maxStartLength);
+      maxDurationLength = Math.max(duration.length, maxDurationLength);
+      maxNameLength = Math.max(data.name.length, maxNameLength);
+
+      lines.push([
+        data.start,
+        duration.replace(/μ/g, 'u'),
+        data.name,
+        data.details,
+      ]);
+    }
+
+    let text = '';
+    if (format === 'plain') {
+      const formatter = ([start, duration, name, details]: string[]) => {
+        const line = [
+          start.padStart(maxStartLength, ' '),
+          duration.padStart(maxDurationLength, ' '),
+          name.padStart(maxNameLength, ' '),
+        ];
+        if (details) {
+          line.push(details);
+        }
+        return line.join('  ');
+      };
+
+      text += formatter(header) + '\n' + lines.map(formatter).join('\n');
+    } else if (format === 'markdown') {
+      const formatter = ([start, duration, name, details]: string[]) => {
+        const line = [
+          start.padStart(maxStartLength, ' '),
+          duration.padStart(maxDurationLength, ' '),
+          name.padStart(maxNameLength, ' '),
+          details,
+        ];
+        return '| ' + line.join(' | ') + ' |';
+      };
+      const sep =
+        '|' +
+        [
+          '-'.repeat(maxStartLength + 1) + ':',
+          '-'.repeat(maxDurationLength + 1) + ':',
+          '-'.repeat(maxNameLength + 1) + ':',
+          '-'.repeat(9),
+        ].join('|') +
+        '|';
+      text =
+        formatter(header) + '\n' + sep + '\n' + lines.map(formatter).join('\n');
+    }
+
+    copy(text);
+  };
+
   getRoots(): MarkerIndex[] {
     return this._markerIndexes;
   }
@@ -263,7 +335,7 @@ class MarkerTableImpl extends PureComponent<Props> {
         role="tabpanel"
         aria-labelledby="marker-table-tab-button"
       >
-        <MarkerSettings />
+        <MarkerSettings copyTable={tree.copyTable} />
         {markerIndexes.length === 0 ? (
           <MarkerTableEmptyReasons />
         ) : (

src/components/shared/MarkerCopyTableContextMenu.tsx

@@ -0,0 +1,58 @@
+/* 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 'react';
+import { MenuItem } from '@firefox-devtools/react-contextmenu';
+import { Localized } from '@fluent/react';
+
+import { ContextMenu } from './ContextMenu';
+import explicitConnect from 'firefox-profiler/utils/connect';
+
+import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+
+type OwnProps = {
+  readonly onShow: () => void;
+  readonly onHide: () => void;
+  readonly onCopy: (format: string) => void;
+};
+
+type Props = ConnectedProps<OwnProps, {}, {}>;
+
+class MarkerCopyTableContextMenuImpl extends PureComponent<Props> {
+  copyAsPlain = () => {
+    const { onCopy } = this.props;
+    onCopy('plain');
+  };
+
+  copyAsMarkdown = () => {
+    const { onCopy } = this.props;
+    onCopy('markdown');
+  };
+
+  override render() {
+    const { onShow, onHide } = this.props;
+    return (
+      <ContextMenu
+        id="MarkerCopyTableContextMenu"
+        className="markerCopyTableContextMenu"
+        onShow={onShow}
+        onHide={onHide}
+      >
+        <MenuItem onClick={this.copyAsPlain}>
+          <Localized id="MarkerCopyTableContextMenu--copy-table-as-plain">
+            Copy marker table as plain text
+          </Localized>
+        </MenuItem>
+        <MenuItem onClick={this.copyAsMarkdown}>
+          <Localized id="MarkerCopyTableContextMenu--copy-table-as-markdown">
+            Copy marker table as Markdown
+          </Localized>
+        </MenuItem>
+      </ContextMenu>
+    );
+  }
+}
+
+export const MarkerCopyTableContextMenu = explicitConnect<OwnProps, {}, {}>({
+  component: MarkerCopyTableContextMenuImpl,
+});

src/components/shared/MarkerSettings.css

@@ -13,20 +13,30 @@
   white-space: nowrap;
 }
 
-.filterMarkersButton {
+.filterMarkersButton,
+.copyTableButton {
   position: relative;
   width: 24px;
   height: 24px;
   flex: none;
   padding-right: 30px;
   margin: 0 4px;
-  background-image: url(../../../res/img/svg/filter.svg);
   background-position: 4px center;
   background-repeat: no-repeat;
 }
 
+.filterMarkersButton {
+  background-image: url(../../../res/img/svg/filter.svg);
+}
+
+.copyTableButton {
+  margin: 0 16px 0 4px;
+  background-image: url(../../../res/img/svg/copy-dark.svg);
+}
+
 /* This is the dropdown arrow on the right of the button. */
-.filterMarkersButton::after {
+.filterMarkersButton::after,
+.copyTableButton::after {
   position: absolute;
   top: 2px;
   right: 2px;

src/components/shared/MarkerSettings.tsx

@@ -14,12 +14,17 @@ import { getProfileUsesMultipleStackTypes } from 'firefox-profiler/selectors/pro
 import { PanelSearch } from './PanelSearch';
 import { StackImplementationSetting } from 'firefox-profiler/components/shared/StackImplementationSetting';
 import { MarkerFiltersContextMenu } from './MarkerFiltersContextMenu';
+import { MarkerCopyTableContextMenu } from './MarkerCopyTableContextMenu';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
 import 'firefox-profiler/components/shared/PanelSettingsList.css';
 import './MarkerSettings.css';
 
+type OwnProps = {
+  readonly copyTable?: (format: string) => void;
+};
+
 type StateProps = {
   readonly searchString: string;
   readonly allowSwitchingStackType: boolean;
@@ -29,7 +34,7 @@ type DispatchProps = {
   readonly changeMarkersSearchString: typeof changeMarkersSearchString;
 };
 
-type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
 
 type State = {
   readonly isMarkerFiltersMenuVisible: boolean;
@@ -39,12 +44,16 @@ type State = {
   // Otherwise, if we check this in onClick event, the state will always be
   // `false` since the library already hid it on mousedown.
   readonly isFilterMenuVisibleOnMouseDown: boolean;
+  readonly isMarkerCopyTableMenuVisible: boolean;
+  readonly isCopyTableMenuVisibleOnMouseDown: boolean;
 };
 
 class MarkerSettingsImpl extends PureComponent<Props, State> {
   override state = {
     isMarkerFiltersMenuVisible: false,
     isFilterMenuVisibleOnMouseDown: false,
+    isMarkerCopyTableMenuVisible: false,
+    isCopyTableMenuVisibleOnMouseDown: false,
   };
 
   _onSearch = (value: string) => {
@@ -72,6 +81,36 @@ class MarkerSettingsImpl extends PureComponent<Props, State> {
     });
   };
 
+  _onClickToggleCopyTableMenu = (event: React.MouseEvent<HTMLElement>) => {
+    const { isCopyTableMenuVisibleOnMouseDown } = this.state;
+    if (isCopyTableMenuVisibleOnMouseDown) {
+      // Do nothing as we would like to hide the menu if the menu was already visible on mouse down.
+      return;
+    }
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    // FIXME: Currently we assume that the context menu is 250px wide, but ideally
+    // we should get the real width. It's not so easy though, because the context
+    // menu is not rendered yet.
+    const isRightAligned = rect.right > window.innerWidth - 250;
+
+    showMenu({
+      data: null,
+      id: 'MarkerCopyTableContextMenu',
+      position: { x: isRightAligned ? rect.right : rect.left, y: rect.bottom },
+      target: event.target,
+    });
+  };
+
+  _onCopyTable = (format: string) => {
+    const { copyTable } = this.props;
+    if (!copyTable) {
+      return;
+    }
+
+    copyTable(format);
+  };
+
   _onShowFiltersContextMenu = () => {
     this.setState({ isMarkerFiltersMenuVisible: true });
   };
@@ -80,15 +119,30 @@ class MarkerSettingsImpl extends PureComponent<Props, State> {
     this.setState({ isMarkerFiltersMenuVisible: false });
   };
 
+  _onShowCopyTableContextMenu = () => {
+    this.setState({ isMarkerCopyTableMenuVisible: true });
+  };
+
+  _onHideCopyTableContextMenu = () => {
+    this.setState({ isMarkerCopyTableMenuVisible: false });
+  };
+
   _onMouseDownToggleFilterButton = () => {
     this.setState((state) => ({
       isFilterMenuVisibleOnMouseDown: state.isMarkerFiltersMenuVisible,
     }));
   };
 
+  _onMouseDownToggleCopyTableMenu = () => {
+    this.setState((state) => ({
+      isCopyTableMenuVisibleOnMouseDown: state.isMarkerCopyTableMenuVisible,
+    }));
+  };
+
   override render() {
-    const { searchString, allowSwitchingStackType } = this.props;
-    const { isMarkerFiltersMenuVisible } = this.state;
+    const { searchString, allowSwitchingStackType, copyTable } = this.props;
+    const { isMarkerFiltersMenuVisible, isMarkerCopyTableMenuVisible } =
+      this.state;
 
     return (
       <div className="markerSettings">
@@ -99,6 +153,26 @@ class MarkerSettingsImpl extends PureComponent<Props, State> {
             </li>
           ) : null}
         </ul>
+        {copyTable ? (
+          <Localized id="MarkerSettings--copy-table" attrs={{ title: true }}>
+            <button
+              className={classNames(
+                'copyTableButton',
+                'photon-button',
+                'photon-button-ghost',
+                {
+                  'photon-button-ghost--checked': isMarkerCopyTableMenuVisible,
+                }
+              )}
+              title="Copy table as text"
+              type="button"
+              onClick={this._onClickToggleCopyTableMenu}
+              onMouseDown={this._onMouseDownToggleCopyTableMenu}
+            />
+          </Localized>
+        ) : (
+          ''
+        )}
         <Localized
           id="MarkerSettings--panel-search"
           attrs={{ label: true, title: true }}
@@ -132,12 +206,21 @@ class MarkerSettingsImpl extends PureComponent<Props, State> {
           onShow={this._onShowFiltersContextMenu}
           onHide={this._onHideFiltersContextMenu}
         />
+        <MarkerCopyTableContextMenu
+          onShow={this._onShowCopyTableContextMenu}
+          onHide={this._onHideCopyTableContextMenu}
+          onCopy={this._onCopyTable}
+        />
       </div>
     );
   }
 }
 
-export const MarkerSettings = explicitConnect<{}, StateProps, DispatchProps>({
+export const MarkerSettings = explicitConnect<
+  OwnProps,
+  StateProps,
+  DispatchProps
+>({
   mapStateToProps: (state) => ({
     searchString: getMarkersSearchString(state),
     allowSwitchingStackType: getProfileUsesMultipleStackTypes(state),