Provide an option to display stacks all with the same widths in the stack chart (#5195)

The goal for this patch is to make shorter behaviors much easier to see.
This is useful especially for debugging (and especially when used with
the jstracer) rather than for profiling.

Author: julienw

locales/en-US/app.ftl

@@ -811,6 +811,7 @@ StackSettings--call-tree-strategy-native-deallocations-sites = Deallocation Site
 StackSettings--invert-call-stack = Invert call stack
     .title = Sort by the time spent in a call node, ignoring its children.
 StackSettings--show-user-timing = Show user timing
+StackSettings--use-stack-chart-same-widths = Use the same width for each stack
 
 StackSettings--panel-search =
     .label = Filter stacks:

src/actions/profile-view.js

@@ -1689,6 +1689,22 @@ export function changeShowUserTimings(
   };
 }
 
+export function changeStackChartSameWidths(
+  stackChartSameWidths: boolean
+): ThunkAction<void> {
+  return (dispatch) => {
+    sendAnalytics({
+      hitType: 'event',
+      eventCategory: 'profile',
+      eventAction: 'toggle stack chart same widths',
+    });
+    dispatch({
+      type: 'CHANGE_STACK_CHART_SAME_WIDTHS',
+      stackChartSameWidths,
+    });
+  };
+}
+
 /**
  * This action toggles changes between using a summary view that shows only self time
  * for the JS tracer data, and a stack-based view (similar to the stack chart) for the

src/app-logic/url-handling.js

@@ -196,6 +196,7 @@ type StackChartQuery = {|
   search: string, // "js::RunScript"
   invertCallstack: null | void,
   showUserTimings: null | void,
+  sameWidths: null | void,
   ctSummary: string,
 |};
 
@@ -305,18 +306,19 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
   const selectedTab = urlState.selectedTab;
   switch (selectedTab) {
     case 'stack-chart':
+      // Stack chart uses all of the CallTree's query strings but also has
+      // additional query strings.
+      query = (baseQuery: StackChartQueryShape);
+      query.showUserTimings = urlState.profileSpecific.showUserTimings
+        ? null
+        : undefined;
+      query.sameWidths = urlState.profileSpecific.stackChartSameWidths
+        ? null
+        : undefined;
+    /* fallsthrough */
     case 'flame-graph':
     case 'calltree': {
-      if (selectedTab === 'stack-chart') {
-        // Stack chart uses all of the CallTree's query strings but also has an
-        // additional query string.
-        query = (baseQuery: StackChartQueryShape);
-        query.showUserTimings = urlState.profileSpecific.showUserTimings
-          ? null
-          : undefined;
-      } else {
-        query = (baseQuery: CallTreeQueryShape);
-      }
+      query = (baseQuery: CallTreeQueryShape);
 
       query.search = urlState.profileSpecific.callTreeSearchString || undefined;
       query.invertCallstack = urlState.profileSpecific.invertCallstack
@@ -544,6 +546,7 @@ export function stateFromLocation(
       ),
       invertCallstack: query.invertCallstack === undefined ? false : true,
       showUserTimings: query.showUserTimings === undefined ? false : true,
+      stackChartSameWidths: query.sameWidths === undefined ? false : true,
       committedRanges: query.range ? parseCommittedRanges(query.range) : [],
       selectedThreads,
       callTreeSearchString: query.search || '',

src/components/shared/StackSettings.js

@@ -11,11 +11,13 @@ import {
   changeInvertCallstack,
   changeCallTreeSearchString,
   changeShowUserTimings,
+  changeStackChartSameWidths,
 } from 'firefox-profiler/actions/profile-view';
 import {
   getInvertCallstack,
   getSelectedTab,
   getShowUserTimings,
+  getStackChartSameWidths,
   getCurrentSearchString,
 } from 'firefox-profiler/selectors/url-state';
 import { getProfileUsesMultipleStackTypes } from 'firefox-profiler/selectors/profile';
@@ -40,6 +42,7 @@ type StateProps = {|
   +allowSwitchingStackType: boolean,
   +invertCallstack: boolean,
   +showUserTimings: boolean,
+  +stackChartSameWidths: boolean,
   +currentSearchString: string,
   +hasUsefulJsAllocations: boolean,
   +hasUsefulNativeAllocations: boolean,
@@ -49,6 +52,7 @@ type DispatchProps = {|
   +changeInvertCallstack: typeof changeInvertCallstack,
   +changeShowUserTimings: typeof changeShowUserTimings,
   +changeCallTreeSearchString: typeof changeCallTreeSearchString,
+  +changeStackChartSameWidths: typeof changeStackChartSameWidths,
 |};
 
 type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
@@ -62,6 +66,10 @@ class StackSettingsImpl extends PureComponent<Props> {
     this.props.changeShowUserTimings(e.currentTarget.checked);
   };
 
+  _onUseStackChartSameWidths = (e: SyntheticEvent<HTMLInputElement>) => {
+    this.props.changeStackChartSameWidths(e.currentTarget.checked);
+  };
+
   _onSearch = (value: string) => {
     this.props.changeCallTreeSearchString(value);
   };
@@ -72,6 +80,7 @@ class StackSettingsImpl extends PureComponent<Props> {
       invertCallstack,
       selectedTab,
       showUserTimings,
+      stackChartSameWidths,
       hideInvertCallstack,
       currentSearchString,
       hasUsefulJsAllocations,
@@ -112,17 +121,30 @@ class StackSettingsImpl extends PureComponent<Props> {
                 </label>
               )}
               {selectedTab !== 'stack-chart' ? null : (
-                <label className="photon-label photon-label-micro photon-label-horiz-padding">
-                  <input
-                    type="checkbox"
-                    className="photon-checkbox photon-checkbox-micro stackSettingsCheckbox"
-                    onChange={this._onShowUserTimingsClick}
-                    checked={showUserTimings}
-                  />
-                  <Localized id="StackSettings--show-user-timing">
-                    Show user timing
-                  </Localized>
-                </label>
+                <>
+                  <label className="photon-label photon-label-micro photon-label-horiz-padding">
+                    <input
+                      type="checkbox"
+                      className="photon-checkbox photon-checkbox-micro stackSettingsCheckbox"
+                      onChange={this._onShowUserTimingsClick}
+                      checked={showUserTimings}
+                    />
+                    <Localized id="StackSettings--show-user-timing">
+                      Show user timing
+                    </Localized>
+                  </label>
+                  <label className="photon-label photon-label-micro photon-label-horiz-padding">
+                    <input
+                      type="checkbox"
+                      className="photon-checkbox photon-checkbox-micro stackSettingsCheckbox"
+                      onChange={this._onUseStackChartSameWidths}
+                      checked={stackChartSameWidths}
+                    />
+                    <Localized id="StackSettings--use-stack-chart-same-widths">
+                      Use the same width for each stack
+                    </Localized>
+                  </label>
+                </>
               )}
             </li>
           )}
@@ -154,6 +176,7 @@ export const StackSettings = explicitConnect<
     invertCallstack: getInvertCallstack(state),
     selectedTab: getSelectedTab(state),
     showUserTimings: getShowUserTimings(state),
+    stackChartSameWidths: getStackChartSameWidths(state),
     currentSearchString: getCurrentSearchString(state),
     hasUsefulJsAllocations:
       selectedThreadSelectors.getHasUsefulJsAllocations(state),
@@ -164,6 +187,7 @@ export const StackSettings = explicitConnect<
     changeInvertCallstack,
     changeCallTreeSearchString,
     changeShowUserTimings,
+    changeStackChartSameWidths,
   },
   component: StackSettingsImpl,
 });