| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | 4 <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| 5 <link type="text/css" rel="stylesheet" href="style.css"/> | |
| 6 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| 7 <style type="text/css"> | 5 <style type="text/css"> |
| 6 /* ----------------------------------------- Slightly modified codemirror.css */ |
| 7 |
| 8 /* BASICS */ |
| 9 |
| 10 .CodeMirror { |
| 11 /* Set height, width, borders, and global font properties here */ |
| 12 font-family: 'Consolas', 'Monaco', 'Courier'; |
| 13 font-size: 12px; |
| 14 height: 300px; |
| 15 } |
| 16 .CodeMirror-scroll { |
| 17 /* Set scrolling behaviour here */ |
| 18 overflow: auto; |
| 19 } |
| 20 |
| 21 /* PADDING */ |
| 22 |
| 23 .CodeMirror-lines { |
| 24 padding: 4px 0; /* Vertical padding around content */ |
| 25 } |
| 26 .CodeMirror pre { |
| 27 padding: 0 4px; /* Horizontal padding of content */ |
| 28 } |
| 29 |
| 30 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { |
| 31 background-color: white; /* The little square between H and V scrollbars */ |
| 32 } |
| 33 |
| 34 /* GUTTER */ |
| 35 |
| 36 .CodeMirror-gutters { |
| 37 border-right: 1px solid #ddd; |
| 38 background-color: #f7f7f7; |
| 39 white-space: nowrap; |
| 40 } |
| 41 .CodeMirror-linenumbers {} |
| 42 .CodeMirror-linenumber { |
| 43 padding: 0 3px 0 5px; |
| 44 min-width: 20px; |
| 45 text-align: right; |
| 46 color: #999; |
| 47 -moz-box-sizing: content-box; |
| 48 box-sizing: content-box; |
| 49 } |
| 50 |
| 51 .CodeMirror-guttermarker { color: black; } |
| 52 .CodeMirror-guttermarker-subtle { color: #999; } |
| 53 |
| 54 /* CURSOR */ |
| 55 |
| 56 .CodeMirror div.CodeMirror-cursor { |
| 57 border-left: 1px solid black; |
| 58 } |
| 59 /* Shown when moving in bi-directional text */ |
| 60 .CodeMirror div.CodeMirror-secondarycursor { |
| 61 border-left: 1px solid silver; |
| 62 } |
| 63 .CodeMirror.cm-fat-cursor div.CodeMirror-cursor { |
| 64 width: auto; |
| 65 border: 0; |
| 66 background: #7e7; |
| 67 } |
| 68 .CodeMirror.cm-fat-cursor div.CodeMirror-cursors { |
| 69 z-index: 1; |
| 70 } |
| 71 |
| 72 .cm-animate-fat-cursor { |
| 73 width: auto; |
| 74 border: 0; |
| 75 -webkit-animation: blink 1.06s steps(1) infinite; |
| 76 -moz-animation: blink 1.06s steps(1) infinite; |
| 77 animation: blink 1.06s steps(1) infinite; |
| 78 } |
| 79 @-moz-keyframes blink { |
| 80 0% { background: #7e7; } |
| 81 50% { background: none; } |
| 82 100% { background: #7e7; } |
| 83 } |
| 84 @-webkit-keyframes blink { |
| 85 0% { background: #7e7; } |
| 86 50% { background: none; } |
| 87 100% { background: #7e7; } |
| 88 } |
| 89 @keyframes blink { |
| 90 0% { background: #7e7; } |
| 91 50% { background: none; } |
| 92 100% { background: #7e7; } |
| 93 } |
| 94 |
| 95 /* Can style cursor different in overwrite (non-insert) mode */ |
| 96 div.CodeMirror-overwrite div.CodeMirror-cursor {} |
| 97 |
| 98 .cm-tab { display: inline-block; text-decoration: inherit; } |
| 99 |
| 100 .CodeMirror-ruler { |
| 101 border-left: 1px solid #ccc; |
| 102 position: absolute; |
| 103 } |
| 104 |
| 105 /* DEFAULT THEME */ |
| 106 |
| 107 .cm-s-default .cm-keyword {color: #708;} |
| 108 .cm-s-default .cm-atom {color: #219;} |
| 109 .cm-s-default .cm-number {color: #164;} |
| 110 .cm-s-default .cm-def {color: #00f;} |
| 111 .cm-s-default .cm-variable, |
| 112 .cm-s-default .cm-punctuation, |
| 113 .cm-s-default .cm-property, |
| 114 .cm-s-default .cm-operator {} |
| 115 .cm-s-default .cm-variable-2 {color: #05a;} |
| 116 .cm-s-default .cm-variable-3 {color: #085;} |
| 117 .cm-s-default .cm-comment {color: #a50;} |
| 118 .cm-s-default .cm-string {color: #a11;} |
| 119 .cm-s-default .cm-string-2 {color: #f50;} |
| 120 .cm-s-default .cm-meta {color: #555;} |
| 121 .cm-s-default .cm-qualifier {color: #555;} |
| 122 .cm-s-default .cm-builtin {color: #30a;} |
| 123 .cm-s-default .cm-bracket {color: #997;} |
| 124 .cm-s-default .cm-tag {color: #170;} |
| 125 .cm-s-default .cm-attribute {color: #00c;} |
| 126 .cm-s-default .cm-header {color: blue;} |
| 127 .cm-s-default .cm-quote {color: #090;} |
| 128 .cm-s-default .cm-hr {color: #999;} |
| 129 .cm-s-default .cm-link {color: #00c;} |
| 130 |
| 131 .cm-negative {color: #d44;} |
| 132 .cm-positive {color: #292;} |
| 133 .cm-header, .cm-strong {font-weight: bold;} |
| 134 .cm-em {font-style: italic;} |
| 135 .cm-link {text-decoration: underline;} |
| 136 .cm-strikethrough {text-decoration: line-through;} |
| 137 |
| 138 .cm-s-default .cm-error {color: #f00;} |
| 139 .cm-invalidchar {color: #f00;} |
| 140 |
| 141 /* Default styles for common addons */ |
| 142 |
| 143 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} |
| 144 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} |
| 145 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } |
| 146 .CodeMirror-activeline-background {background: #e8f2ff;} |
| 147 |
| 148 /* STOP */ |
| 149 |
| 150 /* The rest of this file contains styles related to the mechanics of |
| 151 the editor. You probably shouldn't touch them. */ |
| 152 |
| 153 .CodeMirror { |
| 154 line-height: 1; |
| 155 position: relative; |
| 156 overflow: hidden; |
| 157 background: white; |
| 158 color: black; |
| 159 } |
| 160 |
| 161 .CodeMirror-scroll { |
| 162 /* 30px is the magic margin used to hide the element's real scrollbars */ |
| 163 /* See overflow: hidden in .CodeMirror */ |
| 164 margin-bottom: -30px; margin-right: -30px; |
| 165 padding-bottom: 30px; |
| 166 height: 100%; |
| 167 outline: none; /* Prevent dragging from highlighting the element */ |
| 168 position: relative; |
| 169 -moz-box-sizing: content-box; |
| 170 box-sizing: content-box; |
| 171 } |
| 172 .CodeMirror-sizer { |
| 173 position: relative; |
| 174 border-right: 30px solid transparent; |
| 175 -moz-box-sizing: content-box; |
| 176 box-sizing: content-box; |
| 177 } |
| 178 |
| 179 /* The fake, visible scrollbars. Used to force redraw during scrolling |
| 180 before actuall scrolling happens, thus preventing shaking and |
| 181 flickering artifacts. */ |
| 182 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .C
odeMirror-gutter-filler { |
| 183 position: absolute; |
| 184 z-index: 6; |
| 185 display: none; |
| 186 } |
| 187 .CodeMirror-vscrollbar { |
| 188 right: 0; top: 0; |
| 189 overflow-x: hidden; |
| 190 overflow-y: scroll; |
| 191 } |
| 192 .CodeMirror-hscrollbar { |
| 193 bottom: 0; left: 0; |
| 194 overflow-y: hidden; |
| 195 overflow-x: scroll; |
| 196 } |
| 197 .CodeMirror-scrollbar-filler { |
| 198 right: 0; bottom: 0; |
| 199 } |
| 200 .CodeMirror-gutter-filler { |
| 201 left: 0; bottom: 0; |
| 202 } |
| 203 |
| 204 .CodeMirror-gutters { |
| 205 position: absolute; left: 0; top: 0; |
| 206 padding-bottom: 30px; |
| 207 z-index: 3; |
| 208 } |
| 209 .CodeMirror-gutter { |
| 210 white-space: normal; |
| 211 height: 100%; |
| 212 -moz-box-sizing: content-box; |
| 213 box-sizing: content-box; |
| 214 padding-bottom: 30px; |
| 215 margin-bottom: -32px; |
| 216 display: inline-block; |
| 217 /* Hack to make IE7 behave */ |
| 218 *zoom:1; |
| 219 *display:inline; |
| 220 } |
| 221 .CodeMirror-gutter-wrapper { |
| 222 position: absolute; |
| 223 z-index: 4; |
| 224 height: 100%; |
| 225 } |
| 226 .CodeMirror-gutter-elt { |
| 227 position: absolute; |
| 228 cursor: default; |
| 229 z-index: 4; |
| 230 } |
| 231 |
| 232 .CodeMirror-lines { |
| 233 cursor: text; |
| 234 min-height: 1px; /* prevents collapsing before first draw */ |
| 235 } |
| 236 .CodeMirror pre { |
| 237 /* Reset some styles that the rest of the page might have set */ |
| 238 -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; |
| 239 border-width: 0; |
| 240 background: transparent; |
| 241 font-family: inherit; |
| 242 font-size: inherit; |
| 243 margin: 0; |
| 244 white-space: pre; |
| 245 word-wrap: normal; |
| 246 line-height: inherit; |
| 247 color: inherit; |
| 248 z-index: 2; |
| 249 position: relative; |
| 250 overflow: visible; |
| 251 } |
| 252 .CodeMirror-wrap pre { |
| 253 word-wrap: break-word; |
| 254 white-space: pre-wrap; |
| 255 word-break: normal; |
| 256 } |
| 257 |
| 258 .CodeMirror-linebackground { |
| 259 position: absolute; |
| 260 left: 0; right: 0; top: 0; bottom: 0; |
| 261 z-index: 0; |
| 262 } |
| 263 |
| 264 .CodeMirror-linewidget { |
| 265 position: relative; |
| 266 z-index: 2; |
| 267 overflow: auto; |
| 268 } |
| 269 |
| 270 .CodeMirror-widget {} |
| 271 |
| 272 .CodeMirror-wrap .CodeMirror-scroll { |
| 273 overflow-x: hidden; |
| 274 } |
| 275 |
| 276 .CodeMirror-measure { |
| 277 position: absolute; |
| 278 width: 100%; |
| 279 height: 0; |
| 280 overflow: hidden; |
| 281 visibility: hidden; |
| 282 } |
| 283 .CodeMirror-measure pre { position: static; } |
| 284 |
| 285 .CodeMirror div.CodeMirror-cursor { |
| 286 position: absolute; |
| 287 border-right: none; |
| 288 width: 0; |
| 289 } |
| 290 |
| 291 div.CodeMirror-cursors { |
| 292 visibility: hidden; |
| 293 position: relative; |
| 294 z-index: 3; |
| 295 } |
| 296 .CodeMirror-focused div.CodeMirror-cursors { |
| 297 visibility: visible; |
| 298 } |
| 299 |
| 300 .CodeMirror-selected { background: #d9d9d9; } |
| 301 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } |
| 302 .CodeMirror-crosshair { cursor: crosshair; } |
| 303 |
| 304 .cm-searching { |
| 305 background: #ffa; |
| 306 background: rgba(255, 255, 0, .4); |
| 307 } |
| 308 |
| 309 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ |
| 310 .CodeMirror span { *vertical-align: text-bottom; } |
| 311 |
| 312 /* Used to force a border model for a node */ |
| 313 .cm-force-border { padding-right: .1px; } |
| 314 |
| 315 @media print { |
| 316 /* Hide the cursor when printing */ |
| 317 .CodeMirror div.CodeMirror-cursors { |
| 318 visibility: hidden; |
| 319 } |
| 320 } |
| 321 |
| 322 /* See issue #2901 */ |
| 323 .cm-tab-wrap-hack:after { content: ''; } |
| 324 |
| 325 /* Help users use markselection to safely style text background */ |
| 326 span.CodeMirror-selectedtext { background: none; } |
| 327 |
| 328 /* ---------------------------------- End of slightly modified codemirror.css */ |
| 8 | 329 |
| 9 body { | 330 body { |
| 10 overflow: hidden; | 331 font-family: "Helvetica Neue", Helvetica, Arial; |
| 11 margin: 0; | 332 } |
| 12 font-size: 14px; | 333 |
| 13 font-family: "Helvetica Neue", Helvetica; | 334 #outer { |
| 14 } | 335 width: 1500px; |
| 15 | 336 height: 800px; |
| 16 #chart, #header, #footer { | 337 display: flex; |
| 17 position: absolute; | 338 } |
| 18 top: 0; | 339 .CodeMirror { |
| 19 } | 340 border: 1px solid black; |
| 20 | 341 margin-top: 3px; |
| 21 #header, #footer { | 342 } |
| 22 z-index: 1; | 343 .CodeMirror-linenumbers { |
| 23 display: block; | 344 width: 150px; |
| 24 font-size: 36px; | 345 } |
| 25 font-weight: 300; | 346 .linebg-top10 { background: #f88; } |
| 26 text-shadow: 0 1px 0 #fff; | 347 .linebg-top25 { background: #fbb; } |
| 27 } | 348 .linebg-top50 { background: #fee; } |
| 28 | 349 .symbol-tag { background: #eee; } |
| 29 #header.inverted, #footer.inverted { | 350 .charts-tooltip { z-index: 1000; } |
| 30 color: #fff; | |
| 31 text-shadow: 0 1px 4px #000; | |
| 32 } | |
| 33 | |
| 34 #header { | |
| 35 top: 80px; | |
| 36 left: 140px; | |
| 37 width: 1000px; | |
| 38 } | |
| 39 | |
| 40 #footer { | |
| 41 top: 1080px; | |
| 42 right: 140px; | |
| 43 text-align: right; | |
| 44 } | |
| 45 | |
| 46 rect { | |
| 47 fill: none; | |
| 48 pointer-events: all; | |
| 49 } | |
| 50 | |
| 51 pre { | |
| 52 font-size: 18px; | |
| 53 } | |
| 54 | |
| 55 line { | |
| 56 stroke: #000; | |
| 57 stroke-width: 1.5px; | |
| 58 } | |
| 59 | |
| 60 .string, .regexp { | |
| 61 color: #f39; | |
| 62 } | |
| 63 | |
| 64 .keyword { | |
| 65 color: #00c; | |
| 66 } | |
| 67 | |
| 68 .comment { | |
| 69 color: #777; | |
| 70 font-style: oblique; | |
| 71 } | |
| 72 | |
| 73 .number { | |
| 74 color: #369; | |
| 75 } | |
| 76 | |
| 77 .class, .special { | |
| 78 color: #1181B8; | |
| 79 } | |
| 80 | |
| 81 a:link, a:visited { | |
| 82 color: #000; | |
| 83 text-decoration: none; | |
| 84 } | |
| 85 | |
| 86 a:hover { | |
| 87 color: #666; | |
| 88 } | |
| 89 | |
| 90 .hint { | |
| 91 position: absolute; | |
| 92 right: 0; | |
| 93 width: 1280px; | |
| 94 font-size: 12px; | |
| 95 color: #999; | |
| 96 } | |
| 97 .chart { | |
| 98 display: block; | |
| 99 margin: auto; | |
| 100 margin-top: 60px; | |
| 101 font-size: 11px; | |
| 102 } | |
| 103 | |
| 104 rect { | |
| 105 stroke: #eee; | |
| 106 fill: #aaa; | |
| 107 fill-opacity: .8; | |
| 108 } | |
| 109 | |
| 110 rect.parent { | |
| 111 cursor: pointer; | |
| 112 fill: steelblue; | |
| 113 } | |
| 114 | |
| 115 text { | |
| 116 pointer-events: none; | |
| 117 } | |
| 118 | |
| 119 </style> | 351 </style> |
| 120 </head> | 352 </head> |
| 121 <body> | 353 <body> |
| 122 <div id="body"> | 354 <h1 id='title'>Loading...</h1> |
| 123 <div id="footer"> | 355 <div id="outer"> |
| 124 $dllname | 356 <div id="tree>"> |
| 357 <button onclick="tree.goUpAndDraw()">Go up</button> |
| 358 <div id="chart_div" style="width: 600px; height: 750px;"> |
| 359 </div> |
| 125 </div> | 360 </div> |
| 126 </div> | 361 <div id=source"> |
| 127 <script type="text/javascript"> | 362 <textarea id="source_view" style="width: 850px; height: 600px;"> |
| 128 | 363 /* |
| 129 var w = 1120, | 364 |
| 130 h = 1000, | 365 Drill down on the left to an interesting file to see a line-by-line breakdown. |
| 131 x = d3.scale.linear().range([0, w]), | 366 |
| 132 y = d3.scale.linear().range([0, h]); | 367 Largest lines are annotated here in darkest red. |
| 133 | 368 |
| 134 var vis = d3.select("#body").append("div") | 369 Click on a line with bytes assigned to see contributing symbols below |
| 135 .attr("class", "chart") | 370 |
| 136 .style("width", w + "px") | 371 */ |
| 137 .style("height", h + "px") | 372 </textarea> |
| 138 .append("svg:svg") | 373 <textarea id="symlist_view" style="width: 850px; height: 100px;"> |
| 139 .attr("width", w) | 374 </textarea> |
| 140 .attr("height", h); | 375 </div> |
| 141 | |
| 142 var partition = d3.layout.partition() | |
| 143 .value(function(d) { return d.size; }); | |
| 144 | |
| 145 (function(root) { | |
| 146 var g = vis.selectAll("g") | |
| 147 .data(partition.nodes(root)) | |
| 148 .enter().append("svg:g") | |
| 149 .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.
x) + ")"; }) | |
| 150 .on("click", click); | |
| 151 | |
| 152 var kx = w / root.dx, | |
| 153 ky = h / 1; | |
| 154 | |
| 155 g.append("svg:rect") | |
| 156 .attr("width", root.dy * kx) | |
| 157 .attr("height", function(d) { return d.dx * ky; }) | |
| 158 .attr("class", function(d) { return d.children ? "parent" : "child"; }); | |
| 159 | |
| 160 g.append("svg:text") | |
| 161 .attr("transform", transform) | |
| 162 .attr("dy", ".35em") | |
| 163 .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; }) | |
| 164 .text(function(d) { return d.name; }) | |
| 165 | |
| 166 d3.select(window) | |
| 167 .on("click", function() { click(root); }) | |
| 168 | |
| 169 function click(d) { | |
| 170 if (!d.children) return; | |
| 171 | |
| 172 kx = (d.y ? w - 40 : w) / (1 - d.y); | |
| 173 ky = h / d.dx; | |
| 174 x.domain([d.y, 1]).range([d.y ? 40 : 0, w]); | |
| 175 y.domain([d.x, d.x + d.dx]); | |
| 176 | |
| 177 var t = g.transition() | |
| 178 .duration(d3.event.altKey ? 7500 : 750) | |
| 179 .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(
d.x) + ")"; }); | |
| 180 | |
| 181 t.select("rect") | |
| 182 .attr("width", d.dy * kx) | |
| 183 .attr("height", function(d) { return d.dx * ky; }); | |
| 184 | |
| 185 t.select("text") | |
| 186 .attr("transform", transform) | |
| 187 .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; }); | |
| 188 | |
| 189 d3.event.stopPropagation(); | |
| 190 } | |
| 191 | |
| 192 function transform(d) { | |
| 193 return "translate(8," + d.dx * ky / 2 + ")"; | |
| 194 } | |
| 195 })($data); | |
| 196 | |
| 197 </script> | |
| 198 </body> | 376 </body> |
| 199 </html> | 377 <!-- |
| 378 Various things appended: codemirror.js, clike.js, various g_xxx variables ending |
| 379 with main.js, followed by the closing html tag. |
| 380 --> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 801123002:
Improve sizeviewer for Windows (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master