Update the web user interface aesthetically (#263)

Update the web user interface aesthetically.
The Refine menu is greyed-out for pages besides the Graph.
The description box now opens upon clicking the filename in the top-right.

CONTRIBUTORS

@@ -11,4 +11,5 @@
 Raul Silvera <rsilvera@google.com>
 Tipp Moseley <tipp@google.com>
 Hyoun Kyu Cho <netforce@google.com>
+Taco de Wolff <tacodewolff@gmail.com>
 

internal/driver/testdata/pprof.cpu.flat.addresses.weblist

@@ -61,7 +61,7 @@ function pprof_toggle_asm(e) {
 
 <div class="legend">File: testbinary<br>
 Type: cpu<br>
-Duration: 10s, Total samples = 1.12s (11.20%)<br>Total: 1.12s</div><h1>line1000</h1>testdata/file1000.src
+Duration: 10s, Total samples = 1.12s (11.20%)<br>Total: 1.12s</div><h2>line1000</h2><p class="filename">testdata/file1000.src</p>
 <pre onClick="pprof_toggle_asm(event)">
   Total:       1.10s      1.10s (flat, cum) 98.21%
 <span class=line>      1</span> <span class=deadsrc>       1.10s      1.10s           line1 </span><span class=asm>               1.10s      1.10s     1000:     instruction one                                                              <span class=unimportant>file1000.src:1</span>
@@ -77,7 +77,7 @@ Duration: 10s, Total samples = 1.12s (11.20%)<br>Total: 1.12s</div><h1>line1000<
 <span class=line>      6</span> <span class=nop>           .          .           line6 </span>
 <span class=line>      7</span> <span class=nop>           .          .           line7 </span>
 </pre>
-<h1>line3000</h1>testdata/file3000.src
+<h2>line3000</h2><p class="filename">testdata/file3000.src</p>
 <pre onClick="pprof_toggle_asm(event)">
   Total:        10ms      1.12s (flat, cum)   100%
 <span class=line>      1</span> <span class=nop>           .          .           line1 </span>

internal/driver/webhtml.go

@@ -21,189 +21,242 @@ func addTemplates(templates *template.Template) {
 	template.Must(templates.Parse(`
 {{define "css"}}
 <style type="text/css">
-html {
-  height: 100%;
-  min-height: 100%;
-  margin: 0px;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-body {
-  margin: 0px;
-  width: 100%;
+html, body {
   height: 100%;
-  min-height: 100%;
-  overflow: hidden;
 }
-#graphcontainer {
+body {
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 13px;
+  line-height: 1.4;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-height: 100%;
-  width: 100%;
-  min-width: 100%;
-  margin: 0px;
 }
-#graph {
-  flex: 1 1 auto;
-  overflow: hidden;
+a {
+  color: #2a66d9;
 }
-svg {
+.header {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  min-height: 44px;
+  background-color: #eee;
+  color: #212121;
+  padding: 0 1rem;
+}
+.header > div {
+  margin: 0 0.125em;
+}
+.header .title h1 {
+  font-size: 1.75em;
+  margin-right: 1rem;
+}
+.header .title a {
+  color: #212121;
+  text-decoration: none;
+}
+.header .title a:hover {
+  text-decoration: underline;
+}
+.header .description {
   width: 100%;
-  height: auto;
+  text-align: right;
+  white-space: nowrap;
 }
-button {
-  margin-top: 5px;
-  margin-bottom: 5px;
+@media screen and (max-width: 799px) {
+	.header input {
+		display: none;
+	}
 }
-#detailtext {
+#detailsbox {
   display: none;
+  z-index: 1;
   position: fixed;
-  top: 20px;
-  right: 10px;
+  top: 40px;
+  right: 20px;
   background-color: #ffffff;
-  min-width: 160px;
-  border: 1px solid #888;
-  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-  z-index: 1;
+  box-shadow: 0 1px 5px rgba(0,0,0,.3);
+  line-height: 24px;
+  padding: 1em;
+  text-align: left;
 }
-#closedetails {
-  float: right;
-  margin: 2px;
+.header input {
+  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='pointer-events:none;display:block;width:100%25;height:100%25;fill:#757575'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61.0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 4px center/20px 20px;
+  border: 1px solid #d1d2d3;
+  border-radius: 2px 0 0 2px;
+  padding: 0.25em;
+  padding-left: 28px;
+  margin-left: 1em;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  font-size: 1em;
+  line-height: 24px;
+  color: #212121;
+}
+.downArrow {
+  border-top: .36em solid #ccc;
+  border-left: .36em solid transparent;
+  border-right: .36em solid transparent;
+  margin-bottom: .05em;
+  margin-left: .5em;
+  transition: border-top-color 200ms;
+}
+.menu-item {
+  height: 100%;
+  text-transform: uppercase;
+  font-family: 'Roboto Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  position: relative;
 }
-#home {
-  font-size: 14pt;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  float: right;
+.menu-item.disabled {
+  opacity: 0.5;
 }
-.menubar {
-  display: inline-block;
-  background-color: #f8f8f8;
-  border: 1px solid #ccc;
-  width: 100%;
+.menu-item .menu-name:hover {
+  opacity: 0.75;
 }
-.menu-header {
-  position: relative;
-  display: inline-block;
-  padding: 2px 2px;
-  font-size: 14pt;
+.menu-item .menu-name:hover .downArrow {
+  border-top-color: #666;
+}
+.menu-item.disabled .menu-name:hover {
+  opacity: 1;
 }
-.menu {
+.menu-item.disabled .menu-name:hover .downArrow {
+  border-top-color: #ccc;
+}
+.menu-name {
+  height: 100%;
+  padding: 0 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.submenu {
   display: none;
-  position: absolute;
-  background-color: #f8f8f8;
-  border: 1px solid #888;
-  box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
   z-index: 1;
-  margin-top: 2px;
+  margin-top: -4px;
+  min-width: 10em;
+  position: absolute;
   left: 0px;
-  min-width: 5em;
+  background-color: white;
+  box-shadow: 0 1px 5px rgba(0,0,0,.3);
+  font-size: 100%;
+  text-transform: none;
 }
-.menu-header, .menu {
-  cursor: default;
+.menu-item, .submenu {
   user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
 }
-.menu hr {
-  background-color: #fff;
-  margin-top: 0px;
-  margin-bottom: 0px;
+.submenu hr {
+  border: 0;
+  border-top: 2px solid #eee;
 }
-.menu a, .menu button {
+.submenu a {
   display: block;
-  width: 100%;
-  margin: 0px;
-  padding: 2px 0px 2px 0px;
-  text-align: left;
+  padding: .5em 1em;
   text-decoration: none;
-  color: #000;
-  background-color: #f8f8f8;
-  font-size: 12pt;
-  border: none;
 }
-.menu-header:hover {
-  background-color: #ccc;
+.submenu a:hover, .submenu a.active {
+  color: white;
+  background-color: #6b82d6;
 }
-.menu a:hover, .menu button:hover {
-  background-color: #ccc;
-}
-.menu a.disabled {
+.submenu a.disabled {
   color: gray;
   pointer-events: none;
 }
-#searchbox {
-  margin-left: 10pt;
+
+#content {
+  overflow-y: scroll;
+  padding: 1em;
+}
+#top {
+  overflow-y: scroll;
+}
+#graph {
+  overflow: hidden;
 }
-#bodycontainer {
+#graph svg {
   width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: scroll;
-  padding-top: 5px;
+  height: auto;
+  padding: 10px;
+}
+#content.source .filename {
+  margin-top: 0;
+  margin-bottom: 1em;
+  font-size: 120%;
 }
-#toptable {
+#content.source pre {
+  margin-bottom: 3em;
+}
+table {
   border-spacing: 0px;
   width: 100%;
   padding-bottom: 1em;
+  white-space: nowrap;
 }
-#toptable tr th {
-  border-bottom: 1px solid black;
+table thead {
+  font-family: 'Roboto Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+table tr th {
+  background-color: #ddd;
   text-align: right;
-  padding-left: 1em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
+  padding: .3em .5em;
 }
-#toptable tr td {
-  padding-left: 1em;
-  font: monospace;
+table tr td {
+  padding: .3em .5em;
   text-align: right;
-  white-space: nowrap;
-  cursor: default;
 }
-#toptable tr th:nth-child(6),
-#toptable tr th:nth-child(7),
-#toptable tr td:nth-child(6),
-#toptable tr td:nth-child(7) {
+#top table tr th:nth-child(6),
+#top table tr th:nth-child(7),
+#top table tr td:nth-child(6),
+#top table tr td:nth-child(7) {
   text-align: left;
 }
-#toptable tr td:nth-child(6) {
-  max-width: 30em;  // Truncate very long names
+#top table tr td:nth-child(6) {
+  width: 100%;
+  text-overflow: ellipsis;
   overflow: hidden;
+  white-space: nowrap;
 }
 #flathdr1, #flathdr2, #cumhdr1, #cumhdr2, #namehdr {
   cursor: ns-resize;
 }
 .hilite {
-  background-color: #ccf;
+  background-color: #ebf5fb; 
+  font-weight: bold;
 }
 </style>
 {{end}}
 
 {{define "header"}}
-<div id="detailtext">
-<button id="closedetails">Close</button>
-{{range .Legend}}<div>{{.}}</div>{{end}}
+<div class="header">
+<div class="title">
+<h1><a href="/">pprof</a></h1>
 </div>
 
-<div class="menubar">
-
-<div class="menu-header">
+<div id="view" class="menu-item">
+<div class="menu-name">
 View
-<div class="menu">
+<i class="downArrow"></i>
+</div>
+<div class="submenu">
 <a title="{{.Help.top}}"  href="/top" id="topbtn">Top</a>
 <a title="{{.Help.graph}}" href="/" id="graphbtn">Graph</a>
 <a title="{{.Help.peek}}" href="/peek" id="peek">Peek</a>
 <a title="{{.Help.list}}" href="/source" id="list">Source</a>
 <a title="{{.Help.disasm}}" href="/disasm" id="disasm">Disassemble</a>
-<hr>
-<button title="{{.Help.details}}" id="details">Details</button>
 </div>
 </div>
 
-<div class="menu-header">
+<div id="refine" class="menu-item disabled">
+<div class="menu-name">
 Refine
-<div class="menu">
+<i class="downArrow"></i>
+</div>
+<div class="submenu">
 <a title="{{.Help.focus}}" href="{{.BaseURL}}" id="focus">Focus</a>
 <a title="{{.Help.ignore}}" href="{{.BaseURL}}" id="ignore">Ignore</a>
 <a title="{{.Help.hide}}" href="{{.BaseURL}}" id="hide">Hide</a>
@@ -213,11 +266,17 @@ Refine
 </div>
 </div>
 
-<input id="searchbox" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
-
-<span id="home">{{.Title}}</span>
+<div>
+<input id="search" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
+</div>
 
-</div> <!-- menubar -->
+<div class="description">
+<a title="{{.Help.details}}" href="#" id="details">{{.Title}}</a>
+<div id="detailsbox">
+{{range .Legend}}<div>{{.}}</div>{{end}}
+</div>
+</div>
+</div>
 
 <div id="errors">{{range .Errors}}<div>{{.}}</div>{{end}}</div>
 {{end}}
@@ -231,13 +290,9 @@ Refine
 {{template "css" .}}
 </head>
 <body>
-
 {{template "header" .}}
-<div id="graphcontainer">
 <div id="graph">
 {{.HTMLBody}}
-</div>
-
 </div>
 {{template "script" .}}
 <script>viewer({{.BaseURL}}, {{.Nodes}})</script>
@@ -477,13 +532,14 @@ function initMenus() {
   }
 
   // Set click handlers on every menu header.
-  for (const menu of document.getElementsByClassName("menu")) {
+  for (const menu of document.getElementsByClassName("submenu")) {
     const hdr = menu.parentElement;
     if (hdr == null) return;
+    if (hdr.classList.contains("disabled")) return;
     function showMenu(e) {
       // menu is a child of hdr, so this event can fire for clicks
       // inside menu. Ignore such clicks.
-      if (e.target != hdr) return;
+      if (e.target.parentElement != hdr) return;
       activeMenu = menu;
       activeMenuHdr = hdr;
       menu.style.display = "block";
@@ -497,7 +553,7 @@ function initMenus() {
     document.addEventListener(t, (e) => {
       // Note: to avoid unnecessary flicker, if the down event is inside
       // the active menu header, do not retract the menu.
-      if (activeMenuHdr != e.target.closest(".menu-header")) {
+      if (activeMenuHdr != e.target.closest(".menu-item")) {
         cancelActiveMenu();
       }
     }, { passive: true, capture: true });
@@ -505,7 +561,7 @@ function initMenus() {
 
   // If there is an active menu and an up event inside, retract the menu.
   document.addEventListener("mouseup", (e) => {
-    if (activeMenu == e.target.closest(".menu")) {
+    if (activeMenu == e.target.closest(".submenu")) {
       cancelActiveMenu();
     }
   }, { passive: true, capture: true });
@@ -515,7 +571,7 @@ function viewer(baseUrl, nodes) {
   'use strict';
 
   // Elements
-  const search = document.getElementById("searchbox")
+  const search = document.getElementById("search")
   const graph0 = document.getElementById("graph0")
   const svg = (graph0 == null ? null : graph0.parentElement)
   const toptable = document.getElementById("toptable")
@@ -526,14 +582,16 @@ function viewer(baseUrl, nodes) {
   let searchAlarm = null
   let buttonsEnabled = true
 
-  function handleDetails() {
-    const detailsText = document.getElementById("detailtext")
-    if (detailsText != null) detailsText.style.display = "block"
-  }
-
-  function handleCloseDetails() {
-    const detailsText = document.getElementById("detailtext")
-    if (detailsText != null) detailsText.style.display = "none"
+  function handleDetails(e) {
+    e.preventDefault()
+    const detailsText = document.getElementById("detailsbox")
+    if (detailsText != null) {
+      if (detailsText.style.display === "block") {
+        detailsText.style.display = "none"
+      } else {
+        detailsText.style.display = "block"
+      }
+    }
   }
 
   function handleKey(e) {
@@ -753,6 +811,9 @@ function viewer(baseUrl, nodes) {
         link.classList.toggle("disabled", !enable)
       }
     }
+    if (document.getElementById("graph") !== null) {
+      document.getElementById("refine").classList.remove("disabled")
+    }
   }
 
   // Initialize button states
@@ -782,7 +843,6 @@ function viewer(baseUrl, nodes) {
   }
 
   addAction("details", handleDetails)
-  addAction("closedetails", handleCloseDetails)
 
   search.addEventListener("input", handleSearch)
   search.addEventListener("keydown", handleKey)
@@ -807,21 +867,21 @@ function viewer(baseUrl, nodes) {
 </style>
 </head>
 <body>
-
 {{template "header" .}}
-
-<div id="bodycontainer">
+<div id="top">
 <table id="toptable">
+<thead>
 <tr>
-<th id="flathdr1">Flat
-<th id="flathdr2">Flat%
-<th>Sum%
-<th id="cumhdr1">Cum
-<th id="cumhdr2">Cum%
-<th id="namehdr">Name
-<th>Inlined?</tr>
-<tbody id="rows">
-</tbody>
+<th id="flathdr1">Flat</th>
+<th id="flathdr2">Flat%</th>
+<th>Sum%</th>
+<th id="cumhdr1">Cum</th>
+<th id="cumhdr2">Cum%</th>
+<th id="namehdr">Name</th>
+<th>Inlined?</th>
+</tr>
+</thead>
+<tbody id="rows"></tbody>
 </table>
 </div>
 
@@ -910,6 +970,7 @@ function makeTopTable(total, entries) {
 viewer({{.BaseURL}}, {{.Nodes}})
 makeTopTable({{.Total}}, {{.Top}})
 </script>
+
 </body>
 </html>
 {{end}}
@@ -925,13 +986,10 @@ makeTopTable({{.Total}}, {{.Top}})
 {{template "weblistjs" .}}
 </head>
 <body>
-
 {{template "header" .}}
-
-<div id="bodycontainer">
+<div id="content" class="source">
 {{.HTMLBody}}
 </div>
-
 {{template "script" .}}
 <script>viewer({{.BaseURL}}, null)</script>
 </body>
@@ -947,15 +1005,12 @@ makeTopTable({{.Total}}, {{.Top}})
 {{template "css" .}}
 </head>
 <body>
-
 {{template "header" .}}
-
-<div id="bodycontainer">
+<div id="content">
 <pre>
 {{.TextBody}}
 </pre>
 </div>
-
 {{template "script" .}}
 <script>viewer({{.BaseURL}}, null)</script>
 </body>

internal/report/source.go

@@ -338,7 +338,7 @@ func printHeader(w io.Writer, rpt *Report) {
 
 // printFunctionHeader prints a function header for a weblist report.
 func printFunctionHeader(w io.Writer, name, path string, flatSum, cumSum int64, rpt *Report) {
-	fmt.Fprintf(w, `<h1>%s</h1>%s
+	fmt.Fprintf(w, `<h2>%s</h2><p class="filename">%s</p>
 <pre onClick="pprof_toggle_asm(event)">
   Total:  %10s %10s (flat, cum) %s
 `,