tools/win/sizeviewer/template.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   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, .CodeMirror-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 */
 329
 330 body {
 331   font-family: "Helvetica Neue", Helvetica, Arial;
 332 }
 333
 334 #outer {
 335   width: 1500px;
 336   height: 800px;
 337   display: flex;
 338 }
 339 .CodeMirror {
 340   border: 1px solid black;
 341   margin-top: 3px;
 342 }
 343 .CodeMirror-linenumbers {
 344   width: 150px;
 345 }
 346 .linebg-top10 { background: #f88; }
 347 .linebg-top25 { background: #fbb; }
 348 .linebg-top50 { background: #fee; }
 349 .symbol-tag { background: #eee; }
 350 .charts-tooltip { z-index: 1000; }
 351     </style>
 352   </head>
 353   <body>
 354     <h1 id='title'>Loading...</h1>
 355     <div id="outer">
 356       <div id="tree>">
 357         <button onclick="tree.goUpAndDraw()">Go up</button>
 358         <div id="chart_div" style="width: 600px; height: 750px;">
 359         </div>
 360       </div>
 361       <div id=source">
 362         <textarea id="source_view" style="width: 850px; height: 600px;">
 363 /*
 364
 365 Drill down on the left to an interesting file to see a line-by-line breakdown.
 366
 367 Largest lines are annotated here in darkest red.
 368
 369 Click on a line with bytes assigned to see contributing symbols below
 370
 371 */
 372         </textarea>
 373         <textarea id="symlist_view" style="width: 850px; height: 100px;">
 374         </textarea>
 375       </div>
 376   </body>
 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 -->