--- a/browser/devtools/shared/timeline/marker-details.js
+++ b/browser/devtools/shared/timeline/marker-details.js
@@ -133,16 +133,19 @@ MarkerDetails.prototype = {
 
     switch (marker.name) {
       case "ConsoleTime":
         this.renderConsoleTimeMarker(this._parent, marker);
         break;
       case "DOMEvent":
         this.renderDOMEventMarker(this._parent, marker);
         break;
+      case "Javascript":
+        this.renderJavascriptMarker(this._parent, marker);
+        break;
       default:
     }
 
     if (marker.stack) {
       let property = "timeline.markerDetail.stack";
       if (marker.endStack) {
         property = "timeline.markerDetail.startStack";
       }
@@ -279,16 +282,31 @@ MarkerDetails.prototype = {
       if (marker.eventPhase == Ci.nsIDOMEvent.BUBBLING_PHASE) {
         phaseL10NProp = "timeline.markerDetail.DOMEventBubblingPhase";
       }
       let phase = this.buildNameValueLabel("timeline.markerDetail.DOMEventPhase", L10N.getStr(phaseL10NProp));
       this._parent.appendChild(phase);
     }
   },
 
+  /**
+   * Render details of a Javascript marker.
+   *
+   * @param nsIDOMNode parent
+   *        The parent node holding the view.
+   * @param object marker
+   *        The marker to display.
+   */
+  renderJavascriptMarker: function(parent, marker) {
+    if ("causeName" in marker) {
+      let cause = this.buildNameValueLabel("timeline.markerDetail.causeName", marker.causeName);
+      this._parent.appendChild(cause);
+    }
+  },
+
 };
 
 /**
  * Opens/selects the debugger in this toolbox and jumps to the specified
  * file name and line number.
  * @param object toolbox
  *        The toolbox.
  * @param string url

--- a/browser/locales/en-US/chrome/browser/devtools/timeline.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/timeline.properties
@@ -68,8 +68,9 @@ timeline.markerDetail.DOMEventPhase=Phas
 timeline.markerDetail.DOMEventTargetPhase=Target
 timeline.markerDetail.DOMEventCapturingPhase=Capture
 timeline.markerDetail.DOMEventBubblingPhase=Bubbling
 timeline.markerDetail.stack=Stack:
 timeline.markerDetail.startStack=Stack at start:
 timeline.markerDetail.endStack=Stack at end:
 timeline.markerDetail.unknownFrame=<unknown location>
 timeline.markerDetail.asyncStack=(Async: %S)
+timeline.markerDetail.causeName=Cause:

--- a/docshell/base/nsDocShell.cpp
+++ b/docshell/base/nsDocShell.cpp
@@ -13913,24 +13913,43 @@ nsDocShell::GetOpener()
 }
 
 URLSearchParams*
 nsDocShell::GetURLSearchParams()
 {
   return mURLSearchParams;
 }
 
+class JavascriptTimelineMarker : public TimelineMarker
+{
+public:
+
+  JavascriptTimelineMarker(nsDocShell* aDocShell, const char* aName,
+                           const char* aReason)
+    : TimelineMarker(aDocShell, aName, TRACING_INTERVAL_START,
+                     NS_ConvertUTF8toUTF16(aReason))
+  {
+  }
+
+  void AddDetails(mozilla::dom::ProfileTimelineMarker& aMarker) override
+  {
+    aMarker.mCauseName.Construct(GetCause());
+  }
+};
+
 void
 nsDocShell::NotifyJSRunToCompletionStart(const char *aReason)
 {
   bool timelineOn = nsIDocShell::GetRecordProfileTimelineMarkers();
 
   // If first start, mark interval start.
   if (timelineOn && mJSRunToCompletionDepth == 0) {
-    AddProfileTimelineMarker("Javascript", TRACING_INTERVAL_START);
+    mozilla::UniquePtr<TimelineMarker> marker =
+      MakeUnique<JavascriptTimelineMarker>(this, "Javascript", aReason);
+    AddProfileTimelineMarker(Move(marker));
   }
   mJSRunToCompletionDepth++;
 }
 
 void
 nsDocShell::NotifyJSRunToCompletionStop()
 {
   bool timelineOn = nsIDocShell::GetRecordProfileTimelineMarkers();

--- a/docshell/test/browser/browser_timelineMarkers-frame-04.js
+++ b/docshell/test/browser/browser_timelineMarkers-frame-04.js
@@ -10,18 +10,23 @@ let TESTS = [{
   desc: "Event dispatch from XMLHttpRequest",
   searchFor: function(markers) {
     return markers.filter(m => m.name == "DOMEvent").length >= 5;
   },
   setup: function(docShell) {
     content.dispatchEvent(new content.Event("dog"));
   },
   check: function(markers) {
-    markers = markers.filter(m => m.name == "DOMEvent");
+    let domMarkers = markers.filter(m => m.name == "DOMEvent");
     // One subtlety here is that we have five events: the event we
     // inject in "setup", plus the four state transition events.  The
     // first state transition is reported synchronously and so should
     // show up as a nested marker.
-    is(markers.length, 5, "Got 5 markers");
+    is(domMarkers.length, 5, "Got 5 markers");
+
+    // We should see some Javascript markers, and they should have a
+    // cause.
+    let jsMarkers = markers.filter(m => m.name == "Javascript" && m.causeName);
+    ok(jsMarkers.length > 0, "Got some Javascript markers");
   }
 }];
 
 timelineContentTest(TESTS);

--- a/dom/webidl/ProfileTimelineMarker.webidl
+++ b/dom/webidl/ProfileTimelineMarker.webidl
@@ -11,17 +11,18 @@ dictionary ProfileTimelineLayerRect {
   long height = 0;
 };
 
 dictionary ProfileTimelineMarker {
   DOMString name = "";
   DOMHighResTimeStamp start = 0;
   DOMHighResTimeStamp end = 0;
   object? stack = null;
+  /* For ConsoleTime and Javascript markers.  */
+  DOMString causeName;
   /* For ConsoleTime markers.  */
-  DOMString causeName;
   object? endStack = null;
   /* For DOMEvent markers.  */
   DOMString type;
   unsigned short eventPhase;
   /* For Paint markers.  */
   sequence<ProfileTimelineLayerRect> rectangles;
 };