Add the stack implementation radio buttons to the marker chart and marker table panels, and other small changes (Merge PR firefox-devtools#4572)

Author: julienw

locales/en-US/app.ftl

@@ -706,9 +706,15 @@ ServiceWorkerManager--hide-notice-button =
 ## This is the settings component that is used in Call Tree, Flame Graph and Stack
 ## Chart panels. It's used to switch between different views of the stack.
 
-StackSettings--implementation-all-stacks = All stacks
-StackSettings--implementation-javascript = JavaScript
-StackSettings--implementation-native = Native
+StackSettings--implementation-all-frames = All frames
+    .title = Do not filter the stack frames
+StackSettings--implementation-javascript2 = JavaScript
+    .title = Show only the stack frames related to JavaScript execution
+StackSettings--implementation-native2 = Native
+    .title = Show only the stack frames for native code
+
+# This label is displayed in the marker chart and marker table panels only.
+StackSettings--stack-implementation-label = Filter stacks:
 
 StackSettings--use-data-source-label = Data source:
 StackSettings--call-tree-strategy-timing = Timings

res/css/photon/label.css

@@ -18,3 +18,7 @@
 .photon-label-micro {
   font-size: 11px;
 }
+
+.photon-label-horiz-padding {
+  padding: 0 3px;
+}

src/components/shared/MarkerSettings.css

@@ -9,7 +9,3 @@
   padding: 0;
   line-height: 25px;
 }
-
-.markerSettingsSpacer {
-  flex: 1;
-}

src/components/shared/MarkerSettings.js

@@ -11,9 +11,11 @@ import explicitConnect from 'firefox-profiler/utils/connect';
 import { changeMarkersSearchString } from 'firefox-profiler/actions/profile-view';
 import { getMarkersSearchString } from 'firefox-profiler/selectors/url-state';
 import { PanelSearch } from './PanelSearch';
+import { StackImplementationSetting } from 'firefox-profiler/components/shared/StackImplementationSetting';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
+import 'firefox-profiler/components/shared/PanelSettingsList.css';
 import './MarkerSettings.css';
 
 type StateProps = {|
@@ -35,7 +37,9 @@ class MarkerSettingsImpl extends PureComponent<Props> {
     const { searchString } = this.props;
     return (
       <div className="markerSettings">
-        <div className="markerSettingsSpacer" />
+        <ul className="panelSettingsList">
+          <StackImplementationSetting labelL10nId="StackSettings--stack-implementation-label" />
+        </ul>
         <Localized
           id="MarkerSettings--panel-search"
           attrs={{ label: true, title: true }}

src/components/shared/PanelSearch.css

@@ -2,13 +2,15 @@
   /* so that the introduction is on top of other panels, _but_ still keep it
    * below the input field (see below) */
   z-index: 1;
-  padding: 0 5px;
+  padding: 0 4px;
 }
 
 .panelSearchFieldLabel {
   /* We fix the height so that the panelSearchFieldIntroduction doesn't increase it */
-  display: block;
+  display: inline-flex;
   height: 100%;
+  align-items: center;
+  gap: 4px;
 }
 
 .panelSearchFieldInput {
@@ -17,7 +19,7 @@
 
 .panelSearchFieldIntroduction {
   z-index: -1; /* it needs to be below the input field */
-  padding: 0 5px;
+  padding: 0 4px;
   background-color: white;
   box-shadow: 0 1px 4px rgb(12 12 13 / 0.1); /* This is grey-90 with 10% opacity, according to the photon design document */
   color: var(--grey-50);

src/components/shared/PanelSearch.js

@@ -54,18 +54,18 @@ export class PanelSearch extends React.PureComponent<Props, State> {
             onBlur={this._onSearchFieldBlur}
             onFocus={this._onSearchFieldFocus}
           />
-          <div
-            className={classNames('panelSearchFieldIntroduction', {
-              isHidden: !showIntroduction,
-              isDisplayed: showIntroduction,
-            })}
-          >
-            <Localized id="PanelSearch--search-field-hint">
-              Did you know you can use the comma (,) to search using several
-              terms?
-            </Localized>
-          </div>
         </label>
+        <div
+          className={classNames('panelSearchFieldIntroduction', {
+            isHidden: !showIntroduction,
+            isDisplayed: showIntroduction,
+          })}
+        >
+          <Localized id="PanelSearch--search-field-hint">
+            Did you know you can use the comma (,) to search using several
+            terms?
+          </Localized>
+        </div>
       </div>
     );
   }

src/components/shared/PanelSettingsList.css

@@ -0,0 +1,24 @@
+/* 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/. */
+
+.panelSettingsList {
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.panelSettingsListItem {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  margin: 0 5px;
+}
+
+.panelSettingsListItem:not(:first-child) {
+  padding-left: 10px;
+  border-left: 1px solid var(--grey-20);
+}

src/components/shared/StackImplementationSetting.js

@@ -0,0 +1,111 @@
+/* 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/. */
+
+// @flow
+
+import React, { PureComponent } from 'react';
+import { Localized } from '@fluent/react';
+
+import { changeImplementationFilter } from 'firefox-profiler/actions/profile-view';
+import { getImplementationFilter } from 'firefox-profiler/selectors/url-state';
+
+import { toValidImplementationFilter } from 'firefox-profiler/profile-logic/profile-data';
+import explicitConnect, {
+  type ConnectedProps,
+} from 'firefox-profiler/utils/connect';
+
+import { getProfileUsesMultipleStackTypes } from 'firefox-profiler/selectors/profile';
+
+import './PanelSettingsList.css';
+
+import type { ImplementationFilter } from 'firefox-profiler/types';
+
+type OwnProps = {|
+  labelL10nId?: string,
+|};
+
+type StateProps = {|
+  +implementationFilter: ImplementationFilter,
+  +allowSwitchingStackType: boolean,
+|};
+
+type DispatchProps = {|
+  +changeImplementationFilter: typeof changeImplementationFilter,
+|};
+
+type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
+
+class StackImplementationSettingImpl extends PureComponent<Props> {
+  _onImplementationFilterChange = (e: SyntheticEvent<HTMLInputElement>) => {
+    this.props.changeImplementationFilter(
+      // This function is here to satisfy Flow that we are getting a valid
+      // implementation filter.
+      toValidImplementationFilter(e.currentTarget.value)
+    );
+  };
+
+  _renderImplementationRadioButton(
+    labelL10nId: string,
+    implementationFilter: ImplementationFilter
+  ) {
+    const htmlId = `implementation-radio-${implementationFilter}`;
+    return (
+      <>
+        <Localized id={labelL10nId} attrs={{ title: true }}>
+          <input
+            type="radio"
+            className="photon-radio photon-radio-micro"
+            value={implementationFilter}
+            id={htmlId}
+            onChange={this._onImplementationFilterChange}
+            checked={this.props.implementationFilter === implementationFilter}
+          />
+        </Localized>
+        <Localized id={labelL10nId} attrs={{ title: true }}>
+          <label
+            className="photon-label photon-label-micro photon-label-horiz-padding"
+            htmlFor={htmlId}
+          ></label>
+        </Localized>
+      </>
+    );
+  }
+
+  render() {
+    const { allowSwitchingStackType, labelL10nId } = this.props;
+
+    return allowSwitchingStackType ? (
+      <li className="panelSettingsListItem">
+        {labelL10nId ? <Localized id={labelL10nId} /> : null}
+        {this._renderImplementationRadioButton(
+          'StackSettings--implementation-all-frames',
+          'combined'
+        )}
+        {this._renderImplementationRadioButton(
+          'StackSettings--implementation-javascript2',
+          'js'
+        )}
+        {this._renderImplementationRadioButton(
+          'StackSettings--implementation-native2',
+          'cpp'
+        )}
+      </li>
+    ) : null;
+  }
+}
+
+export const StackImplementationSetting = explicitConnect<
+  OwnProps,
+  StateProps,
+  DispatchProps
+>({
+  mapStateToProps: (state) => ({
+    implementationFilter: getImplementationFilter(state),
+    allowSwitchingStackType: getProfileUsesMultipleStackTypes(state),
+  }),
+  mapDispatchToProps: {
+    changeImplementationFilter,
+  },
+  component: StackImplementationSettingImpl,
+});

src/components/shared/StackSettings.css

@@ -11,36 +11,6 @@
   white-space: nowrap;
 }
 
-.stackSettingsList {
-  display: block;
-  display: flex;
-  flex: 1;
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.stackSettingsListItem {
-  padding: 0;
-  margin: 0 5px;
-}
-
-.stackSettingsLabel {
-  height: 25px;
-  padding: 0;
-}
-
-.stackSettingsFilter {
-  padding-right: 10px;
-  border-right: 1px solid var(--grey-20);
-}
-
-.stackSettingsFilterLabel {
-  align-items: center;
-  padding: 0 5px 0 0;
-}
-
 .stackSettingsSelect {
   /* Create a new stacking context for the select using a position:relative. This way
    * the focus ring around the select breaks out of its surrounding container. */