[Devtools] Replace "Stacks" with "Causes"

Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 252 matching lines @@
     },
 
     _paintProfilerView: function()
     {
         if (this._lazyPaintProfilerView)
             return this._lazyPaintProfilerView;
         this._lazyPaintProfilerView = new WebInspector.TimelinePaintProfilerView();
         return this._lazyPaintProfilerView;
     },
 
+    _causesView: function()
+    {
+        if (!this._lazyCausesView)
+            this._lazyCausesView = new WebInspector.TimelineCausesView();
+        return this._lazyCausesView;
+    },
+
     /**
      * @param {!WebInspector.TimelineModeView} modeView
      */
     _addModeView: function(modeView)
     {
         modeView.setWindowTimes(this.windowStartTime(), this.windowEndTime());
         modeView.refreshRecords(this._textFilter._regex);
         this._stackView.appendView(modeView.view(), "timelinePanelTimelineStackSplitViewState");
         modeView.view().addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
         this._currentViews.push(modeView);
@@ skipping 57 matching lines @@
         panelStatusBarElement.appendChild(framesToggleButton.element);
 
         if (Runtime.experiments.isEnabled("timelineOnTraceEvents")) {
             var flameChartToggleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Tracing mode"), "timeline-flame-chart-status-bar-item");
             flameChartToggleButton.toggled = this._flameChartEnabledSetting.get();
             flameChartToggleButton.addEventListener("click", this._flameChartEnabledChanged.bind(this, flameChartToggleButton));
             this._statusBarButtons.push(flameChartToggleButton);
             panelStatusBarElement.appendChild(flameChartToggleButton.element);
         }
 
-        this._captureStacksSetting = WebInspector.settings.createSetting("timelineCaptureStacks", true);
-        this._captureStacksSetting.addChangeListener(this._refreshViews, this);
-        panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Stacks"),
-                                                                      this._captureStacksSetting,
-                                                                      WebInspector.UIString("Capture JavaScript stack on every timeline event")));
+        this._captureCausesSetting = WebInspector.settings.createSetting("timelineCaptureCauses", true);
+        this._captureCausesSetting.addChangeListener(this._refreshViews, this);
+        panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Causes"),
+                                                                      this._captureCausesSetting,
+                                                                      WebInspector.UIString("Capture causes for timeline events (e.g., stack traces)")));
         this._captureMemorySetting = WebInspector.settings.createSetting("timelineCaptureMemory", false);
         panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Memory"),
                                                                       this._captureMemorySetting,
                                                                       WebInspector.UIString("Capture memory information on every timeline event")));
         this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
         if (Runtime.experiments.isEnabled("timelinePowerProfiler") &&
             WebInspector.targetManager.mainTarget().hasCapability(WebInspector.Target.Capabilities.CanProfilePower)) {
             this._capturePowerSetting = WebInspector.settings.createSetting("timelineCapturePower", false);
             panelStatusBarElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Power"),
                                                                           this._capturePowerSetting,
@@ skipping 267 matching lines @@
         this._recordingOptionUIControls.forEach(handler);
         WebInspector.inspectorView.setCurrentPanelLocked(!enabled);
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
     {
         this._userInitiatedRecording = userInitiated;
-        this._model.startRecording(this._captureStacksSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting && this._captureLayersAndPicturesSetting.get());
+        this._model.startRecording(this._captureCausesSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting && this._captureLayersAndPicturesSetting.get());
         if (this._lazyFrameModel)
             this._lazyFrameModel.setMergeRecords(false);
 
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStarted();
 
         if (userInitiated)
             WebInspector.userMetrics.TimelineStarted.record();
         this._setUIControlsEnabled(false);
     },
@@ skipping 336 matching lines @@
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      * @param {!Node} content
      */
     _appendDetailsTabsForTraceEventAndShowDetails: function(event, content)
     {
         var title = WebInspector.TracingTimelineUIUtils.eventStyle(event).title;
         this.showInDetails(title, content);
-        if (!event.picture)
-            return;
-        var paintProfilerView = this._paintProfilerView();
-        this._detailsView.appendTab("paintProfiler", WebInspector.UIString("Paint Profiler"), paintProfilerView);
-        event.picture.requestObject(onGotObject);
-        function onGotObject(result)
-        {
-            if (!result || !result["skp64"])
-                return;
-            paintProfilerView.setPicture(event.thread.target(), result["skp64"]);
+        if (event.picture) {
+            var paintProfilerView = this._paintProfilerView();
+            this._detailsView.appendTab("paintProfiler", WebInspector.UIString("Paint Profiler"), paintProfilerView);
+            event.picture.requestObject(onGotObject);
+            function onGotObject(result)
+            {
+                if (!result || !result["skp64"])
+                    return;
+                paintProfilerView.setPicture(event.thread.target(), result["skp64"]);
+            }
+        }
+        if (this._hasCauses(event)) {
+            var causesView = this._causesView();
+            causesView.setContentGenerator(function(event, callback) {

[caseq, 2014/10/06 12:47:48]

This looks like a bit too much inversion of control, do we need it? I wonder if
we can either inline this into the causes view or perhaps just call
generateCausesContent and pass the result down to the view?

[pdr., 2014/10/07 04:36:13]

Done.

In the future generateCausesContent may be expensive if there are many causes so
I was doing that work asynchronously. This was overengineering for the causes
currently listed, and may be in the future as well, so I've removed this crazzy
and now we just call generateContent directly.

+                WebInspector.TracingTimelineUIUtils.generateCausesContent(event, this._detailsLinkifier, callback);
+            }.bind(this, event));
+            this._detailsView.appendTab("causes", WebInspector.UIString("Causes"), causesView);
         }
     },
 
     _updateSelectedRangeStats: function()
     {
         if (this._selection)
             return;
 
         var startTime = this._windowStartTime;
         var endTime = this._windowEndTime;
@@ skipping 87 matching lines @@
 
     /**
      * @param {string} title
      * @param {!Node} node
      */
     showInDetails: function(title, node)
     {
         this._detailsView.setContent(title, node);
     },
 
+    /**
+     * @param {!WebInspector.TracingModel.Event} event
+     * @return {boolean}
+     */
+    _hasCauses: function(event)
+    {
+        if (!event)
+            return false;
+
+        // Do not show cause data unless the setting is enabled. This gives us a
+        // single checkbox and a consistent UI, at the cost of not showing
+        // initiator data that might be available when the setting is disabled.
+        var initiator = event.initiator;
+        return this._captureCausesSetting && this._captureCausesSetting.get()

[caseq, 2014/10/06 12:47:48]

does this._captureCausesSetting ever evaluate to false?

[pdr., 2014/10/07 04:36:13]

I was being too cautious. I don't think we can get here without the setting so
I've updated this.

+            && ((initiator && initiator.stackTrace) || event.stackTrace);
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TabbedPane}
  */
 WebInspector.TimelineDetailsView = function()
 {
     WebInspector.TabbedPane.call(this);
@@ skipping 39 matching lines @@
      * @param {string} id
      * @param {string} tabTitle
      * @param {!WebInspector.View} view
      * @param {string=} tabTooltip
      * @param {boolean=} userGesture
      * @param {boolean=} isCloseable
      */
     appendTab: function(id, tabTitle, view, tabTooltip, userGesture, isCloseable)
     {
         WebInspector.TabbedPane.prototype.appendTab.call(this, id, tabTitle, view, tabTooltip);
+        // FIXME: We should check (this._lastUserSelectedTabId) here so new tabs

[caseq, 2014/10/06 12:47:48]

I think this logic is still producing the effect originally intended, although
it may indeed look weird: if the user has made an explicit choice and the
selected tab is available [even as we switch to a different event], we honor
user choice. Otherwise, show the last tab as we expect it to be more useful than
generic one.

[pdr., 2014/10/07 04:36:13]

I've pulled this out into https://codereview.chromium.org/627413002.

+        // are not automatically selected.
         if (this._lastUserSelectedTabId !== this.selectedTabId)
             this.selectTab(id);
     },
 
     _tabSelected: function(event)
     {
         if (!event.data.isUserGesture)
             return;
 
         this._lastUserSelectedTabId = event.data.tabId;
@@ skipping 271 matching lines @@
 
 WebInspector.TimelinePanelFactory.prototype = {
     /**
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.TimelinePanel._instance();
     }
 }
+
+/**
+ * Display information about an event's direct and indirect causes.
+ *
+ * @interface
+ * @extends {WebInspector.VBox}
+ */
+WebInspector.TimelineCausesView = function()
+{
+    WebInspector.VBox.call(this);
+    this.element.classList.add("timeline-causes-view");
+}
+
+WebInspector.TimelineCausesView.prototype = {
+    setContentGenerator: function(generator)
+    {
+        this._generateContent = generator;
+        if (this.isShowing())
+            this._update();
+        else
+            this._updateWhenVisible = true;
+    },
+
+    wasShown: function()
+    {
+        WebInspector.View.prototype.wasShown.call(this);
+        if (this._updateWhenVisible) {
+            this._updateWhenVisible = false;
+            this._update();
+        }
+    },
+
+    _update: function()
+    {
+        this.element.removeChildren();
+
+        if (this._generateContent) {
+            this._generateContent(function(content) {
+                var hasContent = content && content.children.length;
+                var content = hasContent ? content : this._noCauseFoundContent();
+                this.element.appendChild(content);
+            }.bind(this));
+        } else {
+            console.error("No content generator set on TimelineCausesView.");
+            this.element.appendChild(this._noCauseFoundContent());
+        }
+    },
+
+    _noCauseFoundContent: function()

[caseq, 2014/10/06 12:47:48]

nit: since it's going to be always the same, just inline creation in the
constructor?

[pdr., 2014/10/07 04:36:13]

I wanted to keep this as light as possible, as it should never be shown. Before
showing the "causes" tab we make sure that there are causes, so this error
message is just for catching errors. For your comment above about
generateContent being sort of crazy, I've refactored how this works so
_noCauseFoundContent is now inlined.

+    {
+        var content = this.element.createChild("div", "");
+        content.textContent =
+            WebInspector.UIString("No causes reported for this event.");
+        return content;
+    },
+
+    __proto__: WebInspector.VBox.prototype
+};