Bladeren bron

Indentation (#268)

Indenting the JS and HTML sources for readability
Taco de Wolff 7 jaren geleden
bovenliggende
commit
0a0dc5ed0d
1 gewijzigde bestanden met toevoegingen van 227 en 229 verwijderingen
  1. 227
    229
      internal/driver/webhtml.go

+ 227
- 229
internal/driver/webhtml.go Bestand weergeven

@@ -240,50 +240,50 @@ table tr td {
240 240
 
241 241
 {{define "header"}}
242 242
 <div class="header">
243
-<div class="title">
244
-<h1><a href="/">pprof</a></h1>
245
-</div>
243
+  <div class="title">
244
+    <h1><a href="/">pprof</a></h1>
245
+  </div>
246 246
 
247
-<div id="view" class="menu-item">
248
-<div class="menu-name">
249
-View
250
-<i class="downArrow"></i>
251
-</div>
252
-<div class="submenu">
253
-<a title="{{.Help.top}}"  href="/top" id="topbtn">Top</a>
254
-<a title="{{.Help.graph}}" href="/" id="graphbtn">Graph</a>
255
-<a title="{{.Help.flamegraph}}" href="/flamegraph" id="flamegraph">Flame Graph</a>
256
-<a title="{{.Help.peek}}" href="/peek" id="peek">Peek</a>
257
-<a title="{{.Help.list}}" href="/source" id="list">Source</a>
258
-<a title="{{.Help.disasm}}" href="/disasm" id="disasm">Disassemble</a>
259
-</div>
260
-</div>
247
+  <div id="view" class="menu-item">
248
+    <div class="menu-name">
249
+      View
250
+      <i class="downArrow"></i>
251
+    </div>
252
+    <div class="submenu">
253
+      <a title="{{.Help.top}}"  href="/top" id="topbtn">Top</a>
254
+      <a title="{{.Help.graph}}" href="/" id="graphbtn">Graph</a>
255
+      <a title="{{.Help.flamegraph}}" href="/flamegraph" id="flamegraph">Flame Graph</a>
256
+      <a title="{{.Help.peek}}" href="/peek" id="peek">Peek</a>
257
+      <a title="{{.Help.list}}" href="/source" id="list">Source</a>
258
+      <a title="{{.Help.disasm}}" href="/disasm" id="disasm">Disassemble</a>
259
+    </div>
260
+  </div>
261 261
 
262
-<div id="refine" class="menu-item disabled">
263
-<div class="menu-name">
264
-Refine
265
-<i class="downArrow"></i>
266
-</div>
267
-<div class="submenu">
268
-<a title="{{.Help.focus}}" href="{{.BaseURL}}" id="focus">Focus</a>
269
-<a title="{{.Help.ignore}}" href="{{.BaseURL}}" id="ignore">Ignore</a>
270
-<a title="{{.Help.hide}}" href="{{.BaseURL}}" id="hide">Hide</a>
271
-<a title="{{.Help.show}}" href="{{.BaseURL}}" id="show">Show</a>
272
-<hr>
273
-<a title="{{.Help.reset}}" href="{{.BaseURL}}">Reset</a>
274
-</div>
275
-</div>
262
+  <div id="refine" class="menu-item disabled">
263
+    <div class="menu-name">
264
+      Refine
265
+      <i class="downArrow"></i>
266
+    </div>
267
+    <div class="submenu">
268
+      <a title="{{.Help.focus}}" href="{{.BaseURL}}" id="focus">Focus</a>
269
+      <a title="{{.Help.ignore}}" href="{{.BaseURL}}" id="ignore">Ignore</a>
270
+      <a title="{{.Help.hide}}" href="{{.BaseURL}}" id="hide">Hide</a>
271
+      <a title="{{.Help.show}}" href="{{.BaseURL}}" id="show">Show</a>
272
+      <hr>
273
+      <a title="{{.Help.reset}}" href="{{.BaseURL}}">Reset</a>
274
+    </div>
275
+  </div>
276 276
 
277
-<div>
278
-<input id="search" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
279
-</div>
277
+  <div>
278
+    <input id="search" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
279
+  </div>
280 280
 
281
-<div class="description">
282
-<a title="{{.Help.details}}" href="#" id="details">{{.Title}}</a>
283
-<div id="detailsbox">
284
-{{range .Legend}}<div>{{.}}</div>{{end}}
285
-</div>
286
-</div>
281
+  <div class="description">
282
+    <a title="{{.Help.details}}" href="#" id="details">{{.Title}}</a>
283
+    <div id="detailsbox">
284
+      {{range .Legend}}<div>{{.}}</div>{{end}}
285
+    </div>
286
+  </div>
287 287
 </div>
288 288
 
289 289
 <div id="errors">{{range .Errors}}<div>{{.}}</div>{{end}}</div>
@@ -293,17 +293,17 @@ Refine
293 293
 <!DOCTYPE html>
294 294
 <html>
295 295
 <head>
296
-<meta charset="utf-8">
297
-<title>{{.Title}}</title>
298
-{{template "css" .}}
296
+  <meta charset="utf-8">
297
+  <title>{{.Title}}</title>
298
+  {{template "css" .}}
299 299
 </head>
300 300
 <body>
301
-{{template "header" .}}
302
-<div id="graph">
303
-{{.HTMLBody}}
304
-</div>
305
-{{template "script" .}}
306
-<script>viewer({{.BaseURL}}, {{.Nodes}})</script>
301
+  {{template "header" .}}
302
+  <div id="graph">
303
+    {{.HTMLBody}}
304
+  </div>
305
+  {{template "script" .}}
306
+  <script>viewer({{.BaseURL}}, {{.Nodes}})</script>
307 307
 </body>
308 308
 </html>
309 309
 {{end}}
@@ -757,8 +757,8 @@ function viewer(baseUrl, nodes) {
757 757
     // The selection can be in one of two modes: regexp-based or
758 758
     // list-based.  Construct regular expression depending on mode.
759 759
     let re = regexpActive
760
-        ? search.value
761
-        : Array.from(selected.keys()).map(key => quotemeta(nodes[key])).join("|")
760
+      ? search.value
761
+      : Array.from(selected.keys()).map(key => quotemeta(nodes[key])).join("|")
762 762
 
763 763
     // Copy params from this page's URL.
764 764
     const params = url.searchParams
@@ -868,117 +868,115 @@ function viewer(baseUrl, nodes) {
868 868
 <!DOCTYPE html>
869 869
 <html>
870 870
 <head>
871
-<meta charset="utf-8">
872
-<title>{{.Title}}</title>
873
-{{template "css" .}}
874
-<style type="text/css">
875
-</style>
871
+  <meta charset="utf-8">
872
+  <title>{{.Title}}</title>
873
+  {{template "css" .}}
874
+  <style type="text/css">
875
+  </style>
876 876
 </head>
877 877
 <body>
878
-{{template "header" .}}
879
-<div id="top">
880
-<table id="toptable">
881
-<thead>
882
-<tr>
883
-<th id="flathdr1">Flat</th>
884
-<th id="flathdr2">Flat%</th>
885
-<th>Sum%</th>
886
-<th id="cumhdr1">Cum</th>
887
-<th id="cumhdr2">Cum%</th>
888
-<th id="namehdr">Name</th>
889
-<th>Inlined?</th>
890
-</tr>
891
-</thead>
892
-<tbody id="rows"></tbody>
893
-</table>
894
-</div>
895
-
896
-{{template "script" .}}
897
-<script>
898
-function makeTopTable(total, entries) {
899
-  const rows = document.getElementById("rows")
900
-  if (rows == null) return
878
+  {{template "header" .}}
879
+  <div id="top">
880
+    <table id="toptable">
881
+      <thead>
882
+        <tr>
883
+          <th id="flathdr1">Flat</th>
884
+          <th id="flathdr2">Flat%</th>
885
+          <th>Sum%</th>
886
+          <th id="cumhdr1">Cum</th>
887
+          <th id="cumhdr2">Cum%</th>
888
+          <th id="namehdr">Name</th>
889
+          <th>Inlined?</th>
890
+        </tr>
891
+      </thead>
892
+      <tbody id="rows"></tbody>
893
+    </table>
894
+  </div>
895
+  {{template "script" .}}
896
+  <script>
897
+    function makeTopTable(total, entries) {
898
+      const rows = document.getElementById("rows")
899
+      if (rows == null) return
900
+
901
+      // Store initial index in each entry so we have stable node ids for selection.
902
+      for (let i = 0; i < entries.length; i++) {
903
+        entries[i].Id = "node" + i
904
+      }
901 905
 
902
-  // Store initial index in each entry so we have stable node ids for selection.
903
-  for (let i = 0; i < entries.length; i++) {
904
-    entries[i].Id = "node" + i
905
-  }
906
+      // Which column are we currently sorted by and in what order?
907
+      let currentColumn = ""
908
+      let descending = false
909
+      sortBy("Flat")
910
+
911
+      function sortBy(column) {
912
+        // Update sort criteria
913
+        if (column == currentColumn) {
914
+          descending = !descending  // Reverse order
915
+        } else {
916
+          currentColumn = column
917
+          descending = (column != "Name")
918
+        }
906 919
 
907
-  // Which column are we currently sorted by and in what order?
908
-  let currentColumn = ""
909
-  let descending = false
910
-  sortBy("Flat")
920
+        // Sort according to current criteria.
921
+        function cmp(a, b) {
922
+          const av = a[currentColumn]
923
+          const bv = b[currentColumn]
924
+          if (av < bv) return -1
925
+          if (av > bv) return +1
926
+          return 0
927
+        }
928
+        entries.sort(cmp)
929
+        if (descending) entries.reverse()
911 930
 
912
-  function sortBy(column) {
913
-    // Update sort criteria
914
-    if (column == currentColumn) {
915
-      descending = !descending  // Reverse order
916
-    } else {
917
-      currentColumn = column
918
-      descending = (column != "Name")
919
-    }
931
+        function addCell(tr, val) {
932
+          const td = document.createElement('td')
933
+          td.textContent = val
934
+          tr.appendChild(td)
935
+        }
920 936
 
921
-    // Sort according to current criteria.
922
-    function cmp(a, b) {
923
-      const av = a[currentColumn]
924
-      const bv = b[currentColumn]
925
-      if (av < bv) return -1
926
-      if (av > bv) return +1
927
-      return 0
928
-    }
929
-    entries.sort(cmp)
930
-    if (descending) entries.reverse()
937
+        function percent(v) {
938
+          return (v * 100.0 / total).toFixed(2) + "%"
939
+        }
931 940
 
932
-    function addCell(tr, val) {
933
-      const td = document.createElement('td')
934
-      td.textContent = val
935
-      tr.appendChild(td)
936
-    }
941
+        // Generate rows
942
+        const fragment = document.createDocumentFragment()
943
+        let sum = 0
944
+        for (const row of entries) {
945
+          const tr = document.createElement('tr')
946
+          tr.id = row.Id
947
+          sum += row.Flat
948
+          addCell(tr, row.FlatFormat)
949
+          addCell(tr, percent(row.Flat))
950
+          addCell(tr, percent(sum))
951
+          addCell(tr, row.CumFormat)
952
+          addCell(tr, percent(row.Cum))
953
+          addCell(tr, row.Name)
954
+          addCell(tr, row.InlineLabel)
955
+          fragment.appendChild(tr)
956
+        }
937 957
 
938
-    function percent(v) {
939
-      return (v * 100.0 / total).toFixed(2) + "%"
940
-    }
958
+        rows.textContent = ''  // Remove old rows
959
+        rows.appendChild(fragment)
960
+      }
941 961
 
942
-    // Generate rows
943
-    const fragment = document.createDocumentFragment()
944
-    let sum = 0
945
-    for (const row of entries) {
946
-      const tr = document.createElement('tr')
947
-      tr.id = row.Id
948
-      sum += row.Flat
949
-      addCell(tr, row.FlatFormat)
950
-      addCell(tr, percent(row.Flat))
951
-      addCell(tr, percent(sum))
952
-      addCell(tr, row.CumFormat)
953
-      addCell(tr, percent(row.Cum))
954
-      addCell(tr, row.Name)
955
-      addCell(tr, row.InlineLabel)
956
-      fragment.appendChild(tr)
962
+      // Make different column headers trigger sorting.
963
+      function bindSort(id, column) {
964
+        const hdr = document.getElementById(id)
965
+        if (hdr == null) return
966
+        const fn = function() { sortBy(column) }
967
+        hdr.addEventListener("click", fn)
968
+        hdr.addEventListener("touch", fn)
969
+      }
970
+      bindSort("flathdr1", "Flat")
971
+      bindSort("flathdr2", "Flat")
972
+      bindSort("cumhdr1", "Cum")
973
+      bindSort("cumhdr2", "Cum")
974
+      bindSort("namehdr", "Name")
957 975
     }
958 976
 
959
-    rows.textContent = ''  // Remove old rows
960
-    rows.appendChild(fragment)
961
-  }
962
-
963
-  // Make different column headers trigger sorting.
964
-  function bindSort(id, column) {
965
-    const hdr = document.getElementById(id)
966
-    if (hdr == null) return
967
-    const fn = function() { sortBy(column) }
968
-    hdr.addEventListener("click", fn)
969
-    hdr.addEventListener("touch", fn)
970
-  }
971
-  bindSort("flathdr1", "Flat")
972
-  bindSort("flathdr2", "Flat")
973
-  bindSort("cumhdr1", "Cum")
974
-  bindSort("cumhdr2", "Cum")
975
-  bindSort("namehdr", "Name")
976
-}
977
-
978
-viewer({{.BaseURL}}, {{.Nodes}})
979
-makeTopTable({{.Total}}, {{.Top}})
980
-</script>
981
-
977
+    viewer({{.BaseURL}}, {{.Nodes}})
978
+    makeTopTable({{.Total}}, {{.Top}})
979
+  </script>
982 980
 </body>
983 981
 </html>
984 982
 {{end}}
@@ -987,19 +985,19 @@ makeTopTable({{.Total}}, {{.Top}})
987 985
 <!DOCTYPE html>
988 986
 <html>
989 987
 <head>
990
-<meta charset="utf-8">
991
-<title>{{.Title}}</title>
992
-{{template "css" .}}
993
-{{template "weblistcss" .}}
994
-{{template "weblistjs" .}}
988
+  <meta charset="utf-8">
989
+  <title>{{.Title}}</title>
990
+  {{template "css" .}}
991
+  {{template "weblistcss" .}}
992
+  {{template "weblistjs" .}}
995 993
 </head>
996 994
 <body>
997
-{{template "header" .}}
998
-<div id="content" class="source">
999
-{{.HTMLBody}}
1000
-</div>
1001
-{{template "script" .}}
1002
-<script>viewer({{.BaseURL}}, null)</script>
995
+  {{template "header" .}}
996
+  <div id="content" class="source">
997
+    {{.HTMLBody}}
998
+  </div>
999
+  {{template "script" .}}
1000
+  <script>viewer({{.BaseURL}}, null)</script>
1003 1001
 </body>
1004 1002
 </html>
1005 1003
 {{end}}
@@ -1008,19 +1006,19 @@ makeTopTable({{.Total}}, {{.Top}})
1008 1006
 <!DOCTYPE html>
1009 1007
 <html>
1010 1008
 <head>
1011
-<meta charset="utf-8">
1012
-<title>{{.Title}}</title>
1013
-{{template "css" .}}
1009
+  <meta charset="utf-8">
1010
+  <title>{{.Title}}</title>
1011
+  {{template "css" .}}
1014 1012
 </head>
1015 1013
 <body>
1016
-{{template "header" .}}
1017
-<div id="content">
1018
-<pre>
1019
-{{.TextBody}}
1020
-</pre>
1021
-</div>
1022
-{{template "script" .}}
1023
-<script>viewer({{.BaseURL}}, null)</script>
1014
+  {{template "header" .}}
1015
+  <div id="content">
1016
+    <pre>
1017
+      {{.TextBody}}
1018
+    </pre>
1019
+  </div>
1020
+  {{template "script" .}}
1021
+  <script>viewer({{.BaseURL}}, null)</script>
1024 1022
 </body>
1025 1023
 </html>
1026 1024
 {{end}}
@@ -1029,85 +1027,85 @@ makeTopTable({{.Total}}, {{.Top}})
1029 1027
 <!DOCTYPE html>
1030 1028
 <html>
1031 1029
 <head>
1032
-<meta charset="utf-8">
1033
-<title>{{.Title}}</title>
1034
-{{template "css" .}}
1035
-<style type="text/css">{{template "d3flamegraphcss" .}}</style>
1036
-<style type="text/css">
1037
-.flamegraph-content {
1038
-    width: 90%;
1039
-    min-width: 80%;
1040
-    margin-left: 5%;
1041
-}
1042
-.flamegraph-details {
1043
-    height: 1.2em;
1044
-    width: 90%;
1045
-    min-width: 90%;
1046
-    margin-left: 5%;
1047
-    padding-bottom: 41px;
1048
-}
1049
-</style>
1030
+  <meta charset="utf-8">
1031
+  <title>{{.Title}}</title>
1032
+  {{template "css" .}}
1033
+  <style type="text/css">{{template "d3flamegraphcss" .}}</style>
1034
+  <style type="text/css">
1035
+    .flamegraph-content {
1036
+      width: 90%;
1037
+      min-width: 80%;
1038
+      margin-left: 5%;
1039
+    }
1040
+    .flamegraph-details {
1041
+      height: 1.2em;
1042
+      width: 90%;
1043
+      min-width: 90%;
1044
+      margin-left: 5%;
1045
+      padding-bottom: 41px;
1046
+    }
1047
+  </style>
1050 1048
 </head>
1051 1049
 <body>
1052
-{{template "header" .}}
1053
-<div id="bodycontainer">
1054
-  <div class="flamegraph-content">
1055
-    <div id="chart"></div>
1050
+  {{template "header" .}}
1051
+  <div id="bodycontainer">
1052
+    <div class="flamegraph-content">
1053
+      <div id="chart"></div>
1054
+    </div>
1055
+    <div id="flamegraphdetails" class="flamegraph-details"></div>
1056 1056
   </div>
1057
-  <div id="flamegraphdetails" class="flamegraph-details"></div>
1058
-</div>
1059
-{{template "script" .}}
1060
-<script>viewer({{.BaseURL}}, {{.Nodes}})</script>
1061
-<script>{{template "d3script" .}}</script>
1062
-<script>{{template "d3tipscript" .}}</script>
1063
-<script>{{template "d3flamegraphscript" .}}</script>
1064
-<script type="text/javascript">
1057
+  {{template "script" .}}
1058
+  <script>viewer({{.BaseURL}}, {{.Nodes}})</script>
1059
+  <script>{{template "d3script" .}}</script>
1060
+  <script>{{template "d3tipscript" .}}</script>
1061
+  <script>{{template "d3flamegraphscript" .}}</script>
1062
+  <script type="text/javascript">
1065 1063
     var data = {{.FlameGraph}};
1066 1064
     var label = function(d) {
1067
-        return d.data.n + " (" + d.data.p + ", " + d.data.l + ")";
1065
+      return d.data.n + " (" + d.data.p + ", " + d.data.l + ")";
1068 1066
     };
1069 1067
 
1070 1068
     var width = document.getElementById("chart").clientWidth;
1071 1069
 
1072 1070
     var flameGraph = d3.flameGraph()
1073
-        .width(width)
1074
-        .cellHeight(18)
1075
-        .minFrameSize(1)
1076
-        .transitionDuration(750)
1077
-        .transitionEase(d3.easeCubic)
1078
-        .sort(true)
1079
-        .title("")
1080
-        .label(label)
1081
-        .details(document.getElementById("flamegraphdetails"));
1071
+      .width(width)
1072
+      .cellHeight(18)
1073
+      .minFrameSize(1)
1074
+      .transitionDuration(750)
1075
+      .transitionEase(d3.easeCubic)
1076
+      .sort(true)
1077
+      .title("")
1078
+      .label(label)
1079
+      .details(document.getElementById("flamegraphdetails"));
1082 1080
 
1083 1081
     var tip = d3.tip()
1084
-        .direction("s")
1085
-        .offset([8, 0])
1086
-        .attr('class', 'd3-flame-graph-tip')
1087
-        .html(function(d) { return "name: " + d.data.n + ", value: " + d.data.l; });
1082
+      .direction("s")
1083
+      .offset([8, 0])
1084
+      .attr('class', 'd3-flame-graph-tip')
1085
+      .html(function(d) { return "name: " + d.data.n + ", value: " + d.data.l; });
1088 1086
 
1089 1087
     flameGraph.tooltip(tip);
1090 1088
 
1091 1089
     d3.select("#chart")
1092
-        .datum(data)
1093
-        .call(flameGraph);
1090
+      .datum(data)
1091
+      .call(flameGraph);
1094 1092
 
1095 1093
     function clear() {
1096
-        flameGraph.clear();
1094
+      flameGraph.clear();
1097 1095
     }
1098 1096
 
1099 1097
     function resetZoom() {
1100
-        flameGraph.resetZoom();
1098
+      flameGraph.resetZoom();
1101 1099
     }
1102 1100
 
1103 1101
     window.addEventListener("resize", function() {
1104
-        var width = document.getElementById("chart").clientWidth;
1105
-        var graphs = document.getElementsByClassName("d3-flame-graph");
1106
-        if (graphs.length > 0) {
1107
-            graphs[0].setAttribute("width", width);
1108
-        }
1109
-        flameGraph.width(width);
1110
-        flameGraph.resetZoom();
1102
+      var width = document.getElementById("chart").clientWidth;
1103
+      var graphs = document.getElementsByClassName("d3-flame-graph");
1104
+      if (graphs.length > 0) {
1105
+        graphs[0].setAttribute("width", width);
1106
+      }
1107
+      flameGraph.width(width);
1108
+      flameGraph.resetZoom();
1111 1109
     }, true);
1112 1110
 
1113 1111
     var searchbox = document.getElementById("searchbox");
@@ -1132,7 +1130,7 @@ makeTopTable({{.Total}}, {{.Top}})
1132 1130
     }
1133 1131
 
1134 1132
     searchbox.addEventListener("input", handleSearch);
1135
-</script>
1133
+  </script>
1136 1134
 </body>
1137 1135
 </html>
1138 1136
 {{end}}