cmd/trace: update HTML; expand viewer to whole window

This updates the HTML served for the trace viewer to follow the latest revision of the example from the upstream tracing project. The main thing this adds is CSS for the trace viewer (which was actually in the example at the originally referenced revision, so I'm not sure why it got dropped). In particular, this expands the trace viewer to use the entire browser client area, which fixes several problems with the current page: 1. The details pane gets cut off at a strange place and can get a scroll bar even if there's plenty of room below it on the page. This fixes the bottom of the details pane to the bottom of the window. 2. If the track view is very tall (lots of procs), there's no way to view the top tracks and the details pane at the same time. This fixes this problem by limiting the height of the track view to something less than the height of the window so it gets a scroll bar of its own if necessary. 3. Dragging the divider between the track pane and the details pane actually moves the bottom of the details pane without moving the divider. Fixing the height of the trace viewer fixes this problem. Change-Id: Ia811e72a7413417ca21c45e932c9db2724974633 Reviewed-on: https://go-review.googlesource.com/54632 Run-TryBot: Austin Clements <austin@google.com> TryBot-Result: Gobot Gobot <gobot@golang.org> Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>

cmd/trace: update HTML; expand viewer to whole window
This updates the HTML served for the trace viewer to follow the latest revision of the example from the upstream tracing project. The main thing this adds is CSS for the trace viewer (which was actually in the example at the originally referenced revision, so I'm not sure why it got dropped). In particular, this expands the trace viewer to use the entire browser client area, which fixes several problems with the current page: 1. The details pane gets cut off at a strange place and can get a scroll bar even if there's plenty of room below it on the page. This fixes the bottom of the details pane to the bottom of the window. 2. If the track view is very tall (lots of procs), there's no way to view the top tracks and the details pane at the same time. This fixes this problem by limiting the height of the track view to something less than the height of the window so it gets a scroll bar of its own if necessary. 3. Dragging the divider between the track pane and the details pane actually moves the bottom of the details pane without moving the divider. Fixing the height of the trace viewer fixes this problem. Change-Id: Ia811e72a7413417ca21c45e932c9db2724974633 Reviewed-on: https://go-review.googlesource.com/54632 Run-TryBot: Austin Clements <austin@google.com> TryBot-Result: Gobot Gobot <gobot@golang.org> Reviewed-by: Hyang-Ah Hana Kim <hyangah@gmail.com>
55f19b8d · Austin Clements · 385cd668 · 55f19b8d
Commit 55f19b8d authored Jul 25, 2017 by Austin Clements
Hide whitespace changes
Inline Side-by-side

Showing with 19 additions and 1 deletion

trace.go src/cmd/trace/trace.go +19 -1

No files found.
--- a/src/cmd/trace/trace.go
+++ b/src/cmd/trace/trace.go
@@ -42,12 +42,30 @@ func httpTrace(w http.ResponseWriter, r *http.Request) {
 // See https://github.com/catapult-project/catapult/blob/master/tracing/docs/embedding-trace-viewer.md
 // This is almost verbatim copy of:
 // https://github.com/catapult-project/catapult/blob/master/tracing/bin/index.html
-// on revision 623a005a3ffa9de13c4b92bc72290e7bcd1ca591.
+// on revision 5f9e4c3eaa555bdef18218a89f38c768303b7b6e.
 var templTrace = `
 <html>
 <head>
 <link href="/trace_viewer_html" rel="import">
+<style type="text/css">
+  html, body {
+    box-sizing: border-box;
+    overflow: hidden;
+    margin: 0px;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+  #trace-viewer {
+    width: 100%;
+    height: 100%;
+  }
+  #trace-viewer:focus {
+    outline: none;
+  }
+</style>
 <script>
+'use strict';
 (function() {
  var viewer;
  var url;