| Index: tools/win/sizeviewer/template.html
|
| diff --git a/tools/win/sizeviewer/template.html b/tools/win/sizeviewer/template.html
|
| index ffbffbb1f1574a2c7ec30b20d12e640bee97b527..a5fe1332e8a1096c02fb84121546d21dd5ba76f2 100644
|
| --- a/tools/win/sizeviewer/template.html
|
| +++ b/tools/win/sizeviewer/template.html
|
| @@ -1,199 +1,380 @@
|
| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| - <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
| - <link type="text/css" rel="stylesheet" href="style.css"/>
|
| - <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
| + <script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
| <style type="text/css">
|
| +/* ----------------------------------------- Slightly modified codemirror.css */
|
|
|
| -body {
|
| - overflow: hidden;
|
| - margin: 0;
|
| - font-size: 14px;
|
| - font-family: "Helvetica Neue", Helvetica;
|
| +/* BASICS */
|
| +
|
| +.CodeMirror {
|
| + /* Set height, width, borders, and global font properties here */
|
| + font-family: 'Consolas', 'Monaco', 'Courier';
|
| + font-size: 12px;
|
| + height: 300px;
|
| +}
|
| +.CodeMirror-scroll {
|
| + /* Set scrolling behaviour here */
|
| + overflow: auto;
|
| }
|
|
|
| -#chart, #header, #footer {
|
| - position: absolute;
|
| - top: 0;
|
| +/* PADDING */
|
| +
|
| +.CodeMirror-lines {
|
| + padding: 4px 0; /* Vertical padding around content */
|
| +}
|
| +.CodeMirror pre {
|
| + padding: 0 4px; /* Horizontal padding of content */
|
| }
|
|
|
| -#header, #footer {
|
| - z-index: 1;
|
| - display: block;
|
| - font-size: 36px;
|
| - font-weight: 300;
|
| - text-shadow: 0 1px 0 #fff;
|
| +.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
| + background-color: white; /* The little square between H and V scrollbars */
|
| }
|
|
|
| -#header.inverted, #footer.inverted {
|
| - color: #fff;
|
| - text-shadow: 0 1px 4px #000;
|
| +/* GUTTER */
|
| +
|
| +.CodeMirror-gutters {
|
| + border-right: 1px solid #ddd;
|
| + background-color: #f7f7f7;
|
| + white-space: nowrap;
|
| +}
|
| +.CodeMirror-linenumbers {}
|
| +.CodeMirror-linenumber {
|
| + padding: 0 3px 0 5px;
|
| + min-width: 20px;
|
| + text-align: right;
|
| + color: #999;
|
| + -moz-box-sizing: content-box;
|
| + box-sizing: content-box;
|
| }
|
|
|
| -#header {
|
| - top: 80px;
|
| - left: 140px;
|
| - width: 1000px;
|
| +.CodeMirror-guttermarker { color: black; }
|
| +.CodeMirror-guttermarker-subtle { color: #999; }
|
| +
|
| +/* CURSOR */
|
| +
|
| +.CodeMirror div.CodeMirror-cursor {
|
| + border-left: 1px solid black;
|
| +}
|
| +/* Shown when moving in bi-directional text */
|
| +.CodeMirror div.CodeMirror-secondarycursor {
|
| + border-left: 1px solid silver;
|
| +}
|
| +.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
|
| + width: auto;
|
| + border: 0;
|
| + background: #7e7;
|
| +}
|
| +.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
|
| + z-index: 1;
|
| }
|
|
|
| -#footer {
|
| - top: 1080px;
|
| - right: 140px;
|
| - text-align: right;
|
| +.cm-animate-fat-cursor {
|
| + width: auto;
|
| + border: 0;
|
| + -webkit-animation: blink 1.06s steps(1) infinite;
|
| + -moz-animation: blink 1.06s steps(1) infinite;
|
| + animation: blink 1.06s steps(1) infinite;
|
| }
|
| +@-moz-keyframes blink {
|
| + 0% { background: #7e7; }
|
| + 50% { background: none; }
|
| + 100% { background: #7e7; }
|
| +}
|
| +@-webkit-keyframes blink {
|
| + 0% { background: #7e7; }
|
| + 50% { background: none; }
|
| + 100% { background: #7e7; }
|
| +}
|
| +@keyframes blink {
|
| + 0% { background: #7e7; }
|
| + 50% { background: none; }
|
| + 100% { background: #7e7; }
|
| +}
|
| +
|
| +/* Can style cursor different in overwrite (non-insert) mode */
|
| +div.CodeMirror-overwrite div.CodeMirror-cursor {}
|
|
|
| -rect {
|
| - fill: none;
|
| - pointer-events: all;
|
| +.cm-tab { display: inline-block; text-decoration: inherit; }
|
| +
|
| +.CodeMirror-ruler {
|
| + border-left: 1px solid #ccc;
|
| + position: absolute;
|
| }
|
|
|
| -pre {
|
| - font-size: 18px;
|
| +/* DEFAULT THEME */
|
| +
|
| +.cm-s-default .cm-keyword {color: #708;}
|
| +.cm-s-default .cm-atom {color: #219;}
|
| +.cm-s-default .cm-number {color: #164;}
|
| +.cm-s-default .cm-def {color: #00f;}
|
| +.cm-s-default .cm-variable,
|
| +.cm-s-default .cm-punctuation,
|
| +.cm-s-default .cm-property,
|
| +.cm-s-default .cm-operator {}
|
| +.cm-s-default .cm-variable-2 {color: #05a;}
|
| +.cm-s-default .cm-variable-3 {color: #085;}
|
| +.cm-s-default .cm-comment {color: #a50;}
|
| +.cm-s-default .cm-string {color: #a11;}
|
| +.cm-s-default .cm-string-2 {color: #f50;}
|
| +.cm-s-default .cm-meta {color: #555;}
|
| +.cm-s-default .cm-qualifier {color: #555;}
|
| +.cm-s-default .cm-builtin {color: #30a;}
|
| +.cm-s-default .cm-bracket {color: #997;}
|
| +.cm-s-default .cm-tag {color: #170;}
|
| +.cm-s-default .cm-attribute {color: #00c;}
|
| +.cm-s-default .cm-header {color: blue;}
|
| +.cm-s-default .cm-quote {color: #090;}
|
| +.cm-s-default .cm-hr {color: #999;}
|
| +.cm-s-default .cm-link {color: #00c;}
|
| +
|
| +.cm-negative {color: #d44;}
|
| +.cm-positive {color: #292;}
|
| +.cm-header, .cm-strong {font-weight: bold;}
|
| +.cm-em {font-style: italic;}
|
| +.cm-link {text-decoration: underline;}
|
| +.cm-strikethrough {text-decoration: line-through;}
|
| +
|
| +.cm-s-default .cm-error {color: #f00;}
|
| +.cm-invalidchar {color: #f00;}
|
| +
|
| +/* Default styles for common addons */
|
| +
|
| +div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
| +div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
| +.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
| +.CodeMirror-activeline-background {background: #e8f2ff;}
|
| +
|
| +/* STOP */
|
| +
|
| +/* The rest of this file contains styles related to the mechanics of
|
| + the editor. You probably shouldn't touch them. */
|
| +
|
| +.CodeMirror {
|
| + line-height: 1;
|
| + position: relative;
|
| + overflow: hidden;
|
| + background: white;
|
| + color: black;
|
| }
|
|
|
| -line {
|
| - stroke: #000;
|
| - stroke-width: 1.5px;
|
| +.CodeMirror-scroll {
|
| + /* 30px is the magic margin used to hide the element's real scrollbars */
|
| + /* See overflow: hidden in .CodeMirror */
|
| + margin-bottom: -30px; margin-right: -30px;
|
| + padding-bottom: 30px;
|
| + height: 100%;
|
| + outline: none; /* Prevent dragging from highlighting the element */
|
| + position: relative;
|
| + -moz-box-sizing: content-box;
|
| + box-sizing: content-box;
|
| +}
|
| +.CodeMirror-sizer {
|
| + position: relative;
|
| + border-right: 30px solid transparent;
|
| + -moz-box-sizing: content-box;
|
| + box-sizing: content-box;
|
| }
|
|
|
| -.string, .regexp {
|
| - color: #f39;
|
| +/* The fake, visible scrollbars. Used to force redraw during scrolling
|
| + before actuall scrolling happens, thus preventing shaking and
|
| + flickering artifacts. */
|
| +.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
| + position: absolute;
|
| + z-index: 6;
|
| + display: none;
|
| +}
|
| +.CodeMirror-vscrollbar {
|
| + right: 0; top: 0;
|
| + overflow-x: hidden;
|
| + overflow-y: scroll;
|
| +}
|
| +.CodeMirror-hscrollbar {
|
| + bottom: 0; left: 0;
|
| + overflow-y: hidden;
|
| + overflow-x: scroll;
|
| +}
|
| +.CodeMirror-scrollbar-filler {
|
| + right: 0; bottom: 0;
|
| +}
|
| +.CodeMirror-gutter-filler {
|
| + left: 0; bottom: 0;
|
| }
|
|
|
| -.keyword {
|
| - color: #00c;
|
| +.CodeMirror-gutters {
|
| + position: absolute; left: 0; top: 0;
|
| + padding-bottom: 30px;
|
| + z-index: 3;
|
| +}
|
| +.CodeMirror-gutter {
|
| + white-space: normal;
|
| + height: 100%;
|
| + -moz-box-sizing: content-box;
|
| + box-sizing: content-box;
|
| + padding-bottom: 30px;
|
| + margin-bottom: -32px;
|
| + display: inline-block;
|
| + /* Hack to make IE7 behave */
|
| + *zoom:1;
|
| + *display:inline;
|
| +}
|
| +.CodeMirror-gutter-wrapper {
|
| + position: absolute;
|
| + z-index: 4;
|
| + height: 100%;
|
| +}
|
| +.CodeMirror-gutter-elt {
|
| + position: absolute;
|
| + cursor: default;
|
| + z-index: 4;
|
| }
|
|
|
| -.comment {
|
| - color: #777;
|
| - font-style: oblique;
|
| +.CodeMirror-lines {
|
| + cursor: text;
|
| + min-height: 1px; /* prevents collapsing before first draw */
|
| +}
|
| +.CodeMirror pre {
|
| + /* Reset some styles that the rest of the page might have set */
|
| + -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
| + border-width: 0;
|
| + background: transparent;
|
| + font-family: inherit;
|
| + font-size: inherit;
|
| + margin: 0;
|
| + white-space: pre;
|
| + word-wrap: normal;
|
| + line-height: inherit;
|
| + color: inherit;
|
| + z-index: 2;
|
| + position: relative;
|
| + overflow: visible;
|
| +}
|
| +.CodeMirror-wrap pre {
|
| + word-wrap: break-word;
|
| + white-space: pre-wrap;
|
| + word-break: normal;
|
| }
|
|
|
| -.number {
|
| - color: #369;
|
| +.CodeMirror-linebackground {
|
| + position: absolute;
|
| + left: 0; right: 0; top: 0; bottom: 0;
|
| + z-index: 0;
|
| }
|
|
|
| -.class, .special {
|
| - color: #1181B8;
|
| +.CodeMirror-linewidget {
|
| + position: relative;
|
| + z-index: 2;
|
| + overflow: auto;
|
| }
|
|
|
| -a:link, a:visited {
|
| - color: #000;
|
| - text-decoration: none;
|
| +.CodeMirror-widget {}
|
| +
|
| +.CodeMirror-wrap .CodeMirror-scroll {
|
| + overflow-x: hidden;
|
| }
|
|
|
| -a:hover {
|
| - color: #666;
|
| +.CodeMirror-measure {
|
| + position: absolute;
|
| + width: 100%;
|
| + height: 0;
|
| + overflow: hidden;
|
| + visibility: hidden;
|
| }
|
| +.CodeMirror-measure pre { position: static; }
|
|
|
| -.hint {
|
| +.CodeMirror div.CodeMirror-cursor {
|
| position: absolute;
|
| - right: 0;
|
| - width: 1280px;
|
| - font-size: 12px;
|
| - color: #999;
|
| + border-right: none;
|
| + width: 0;
|
| +}
|
| +
|
| +div.CodeMirror-cursors {
|
| + visibility: hidden;
|
| + position: relative;
|
| + z-index: 3;
|
| }
|
| -.chart {
|
| - display: block;
|
| - margin: auto;
|
| - margin-top: 60px;
|
| - font-size: 11px;
|
| +.CodeMirror-focused div.CodeMirror-cursors {
|
| + visibility: visible;
|
| }
|
|
|
| -rect {
|
| - stroke: #eee;
|
| - fill: #aaa;
|
| - fill-opacity: .8;
|
| +.CodeMirror-selected { background: #d9d9d9; }
|
| +.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
| +.CodeMirror-crosshair { cursor: crosshair; }
|
| +
|
| +.cm-searching {
|
| + background: #ffa;
|
| + background: rgba(255, 255, 0, .4);
|
| }
|
|
|
| -rect.parent {
|
| - cursor: pointer;
|
| - fill: steelblue;
|
| +/* IE7 hack to prevent it from returning funny offsetTops on the spans */
|
| +.CodeMirror span { *vertical-align: text-bottom; }
|
| +
|
| +/* Used to force a border model for a node */
|
| +.cm-force-border { padding-right: .1px; }
|
| +
|
| +@media print {
|
| + /* Hide the cursor when printing */
|
| + .CodeMirror div.CodeMirror-cursors {
|
| + visibility: hidden;
|
| + }
|
| }
|
|
|
| -text {
|
| - pointer-events: none;
|
| +/* See issue #2901 */
|
| +.cm-tab-wrap-hack:after { content: ''; }
|
| +
|
| +/* Help users use markselection to safely style text background */
|
| +span.CodeMirror-selectedtext { background: none; }
|
| +
|
| +/* ---------------------------------- End of slightly modified codemirror.css */
|
| +
|
| +body {
|
| + font-family: "Helvetica Neue", Helvetica, Arial;
|
| }
|
|
|
| +#outer {
|
| + width: 1500px;
|
| + height: 800px;
|
| + display: flex;
|
| +}
|
| +.CodeMirror {
|
| + border: 1px solid black;
|
| + margin-top: 3px;
|
| +}
|
| +.CodeMirror-linenumbers {
|
| + width: 150px;
|
| +}
|
| +.linebg-top10 { background: #f88; }
|
| +.linebg-top25 { background: #fbb; }
|
| +.linebg-top50 { background: #fee; }
|
| +.symbol-tag { background: #eee; }
|
| +.charts-tooltip { z-index: 1000; }
|
| </style>
|
| </head>
|
| <body>
|
| - <div id="body">
|
| - <div id="footer">
|
| - $dllname
|
| + <h1 id='title'>Loading...</h1>
|
| + <div id="outer">
|
| + <div id="tree>">
|
| + <button onclick="tree.goUpAndDraw()">Go up</button>
|
| + <div id="chart_div" style="width: 600px; height: 750px;">
|
| + </div>
|
| </div>
|
| - </div>
|
| - <script type="text/javascript">
|
| -
|
| -var w = 1120,
|
| - h = 1000,
|
| - x = d3.scale.linear().range([0, w]),
|
| - y = d3.scale.linear().range([0, h]);
|
| -
|
| -var vis = d3.select("#body").append("div")
|
| - .attr("class", "chart")
|
| - .style("width", w + "px")
|
| - .style("height", h + "px")
|
| - .append("svg:svg")
|
| - .attr("width", w)
|
| - .attr("height", h);
|
| -
|
| -var partition = d3.layout.partition()
|
| - .value(function(d) { return d.size; });
|
| -
|
| -(function(root) {
|
| - var g = vis.selectAll("g")
|
| - .data(partition.nodes(root))
|
| - .enter().append("svg:g")
|
| - .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
|
| - .on("click", click);
|
| -
|
| - var kx = w / root.dx,
|
| - ky = h / 1;
|
| -
|
| - g.append("svg:rect")
|
| - .attr("width", root.dy * kx)
|
| - .attr("height", function(d) { return d.dx * ky; })
|
| - .attr("class", function(d) { return d.children ? "parent" : "child"; });
|
| -
|
| - g.append("svg:text")
|
| - .attr("transform", transform)
|
| - .attr("dy", ".35em")
|
| - .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
|
| - .text(function(d) { return d.name; })
|
| -
|
| - d3.select(window)
|
| - .on("click", function() { click(root); })
|
| -
|
| - function click(d) {
|
| - if (!d.children) return;
|
| -
|
| - kx = (d.y ? w - 40 : w) / (1 - d.y);
|
| - ky = h / d.dx;
|
| - x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
|
| - y.domain([d.x, d.x + d.dx]);
|
| -
|
| - var t = g.transition()
|
| - .duration(d3.event.altKey ? 7500 : 750)
|
| - .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
|
| -
|
| - t.select("rect")
|
| - .attr("width", d.dy * kx)
|
| - .attr("height", function(d) { return d.dx * ky; });
|
| -
|
| - t.select("text")
|
| - .attr("transform", transform)
|
| - .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
|
| -
|
| - d3.event.stopPropagation();
|
| - }
|
| + <div id=source">
|
| + <textarea id="source_view" style="width: 850px; height: 600px;">
|
| +/*
|
|
|
| - function transform(d) {
|
| - return "translate(8," + d.dx * ky / 2 + ")";
|
| - }
|
| -})($data);
|
| +Drill down on the left to an interesting file to see a line-by-line breakdown.
|
| +
|
| +Largest lines are annotated here in darkest red.
|
|
|
| - </script>
|
| +Click on a line with bytes assigned to see contributing symbols below
|
| +
|
| +*/
|
| + </textarea>
|
| + <textarea id="symlist_view" style="width: 850px; height: 100px;">
|
| + </textarea>
|
| + </div>
|
| </body>
|
| -</html>
|
| +<!--
|
| +Various things appended: codemirror.js, clike.js, various g_xxx variables ending
|
| +with main.js, followed by the closing html tag.
|
| +-->
|
|
|
Chromium Code Reviews
Issue 801123002:
Improve sizeviewer for Windows (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master