Lock video controls' position during fullscreen
[chromium-blink-merge.git] / tools / win / sizeviewer / template.html
bloba5fe1332e8a1096c02fb84121546d21dd5ba76f2
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 */
8 /* BASICS */
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;
16 .CodeMirror-scroll {
17 /* Set scrolling behaviour here */
18 overflow: auto;
21 /* PADDING */
23 .CodeMirror-lines {
24 padding: 4px 0; /* Vertical padding around content */
26 .CodeMirror pre {
27 padding: 0 4px; /* Horizontal padding of content */
30 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
31 background-color: white; /* The little square between H and V scrollbars */
34 /* GUTTER */
36 .CodeMirror-gutters {
37 border-right: 1px solid #ddd;
38 background-color: #f7f7f7;
39 white-space: nowrap;
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;
51 .CodeMirror-guttermarker { color: black; }
52 .CodeMirror-guttermarker-subtle { color: #999; }
54 /* CURSOR */
56 .CodeMirror div.CodeMirror-cursor {
57 border-left: 1px solid black;
59 /* Shown when moving in bi-directional text */
60 .CodeMirror div.CodeMirror-secondarycursor {
61 border-left: 1px solid silver;
63 .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
64 width: auto;
65 border: 0;
66 background: #7e7;
68 .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
69 z-index: 1;
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;
79 @-moz-keyframes blink {
80 0% { background: #7e7; }
81 50% { background: none; }
82 100% { background: #7e7; }
84 @-webkit-keyframes blink {
85 0% { background: #7e7; }
86 50% { background: none; }
87 100% { background: #7e7; }
89 @keyframes blink {
90 0% { background: #7e7; }
91 50% { background: none; }
92 100% { background: #7e7; }
95 /* Can style cursor different in overwrite (non-insert) mode */
96 div.CodeMirror-overwrite div.CodeMirror-cursor {}
98 .cm-tab { display: inline-block; text-decoration: inherit; }
100 .CodeMirror-ruler {
101 border-left: 1px solid #ccc;
102 position: absolute;
105 /* DEFAULT THEME */
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;}
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;}
138 .cm-s-default .cm-error {color: #f00;}
139 .cm-invalidchar {color: #f00;}
141 /* Default styles for common addons */
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;}
148 /* STOP */
150 /* The rest of this file contains styles related to the mechanics of
151 the editor. You probably shouldn't touch them. */
153 .CodeMirror {
154 line-height: 1;
155 position: relative;
156 overflow: hidden;
157 background: white;
158 color: black;
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;
172 .CodeMirror-sizer {
173 position: relative;
174 border-right: 30px solid transparent;
175 -moz-box-sizing: content-box;
176 box-sizing: content-box;
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;
187 .CodeMirror-vscrollbar {
188 right: 0; top: 0;
189 overflow-x: hidden;
190 overflow-y: scroll;
192 .CodeMirror-hscrollbar {
193 bottom: 0; left: 0;
194 overflow-y: hidden;
195 overflow-x: scroll;
197 .CodeMirror-scrollbar-filler {
198 right: 0; bottom: 0;
200 .CodeMirror-gutter-filler {
201 left: 0; bottom: 0;
204 .CodeMirror-gutters {
205 position: absolute; left: 0; top: 0;
206 padding-bottom: 30px;
207 z-index: 3;
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;
221 .CodeMirror-gutter-wrapper {
222 position: absolute;
223 z-index: 4;
224 height: 100%;
226 .CodeMirror-gutter-elt {
227 position: absolute;
228 cursor: default;
229 z-index: 4;
232 .CodeMirror-lines {
233 cursor: text;
234 min-height: 1px; /* prevents collapsing before first draw */
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;
252 .CodeMirror-wrap pre {
253 word-wrap: break-word;
254 white-space: pre-wrap;
255 word-break: normal;
258 .CodeMirror-linebackground {
259 position: absolute;
260 left: 0; right: 0; top: 0; bottom: 0;
261 z-index: 0;
264 .CodeMirror-linewidget {
265 position: relative;
266 z-index: 2;
267 overflow: auto;
270 .CodeMirror-widget {}
272 .CodeMirror-wrap .CodeMirror-scroll {
273 overflow-x: hidden;
276 .CodeMirror-measure {
277 position: absolute;
278 width: 100%;
279 height: 0;
280 overflow: hidden;
281 visibility: hidden;
283 .CodeMirror-measure pre { position: static; }
285 .CodeMirror div.CodeMirror-cursor {
286 position: absolute;
287 border-right: none;
288 width: 0;
291 div.CodeMirror-cursors {
292 visibility: hidden;
293 position: relative;
294 z-index: 3;
296 .CodeMirror-focused div.CodeMirror-cursors {
297 visibility: visible;
300 .CodeMirror-selected { background: #d9d9d9; }
301 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
302 .CodeMirror-crosshair { cursor: crosshair; }
304 .cm-searching {
305 background: #ffa;
306 background: rgba(255, 255, 0, .4);
309 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
310 .CodeMirror span { *vertical-align: text-bottom; }
312 /* Used to force a border model for a node */
313 .cm-force-border { padding-right: .1px; }
315 @media print {
316 /* Hide the cursor when printing */
317 .CodeMirror div.CodeMirror-cursors {
318 visibility: hidden;
322 /* See issue #2901 */
323 .cm-tab-wrap-hack:after { content: ''; }
325 /* Help users use markselection to safely style text background */
326 span.CodeMirror-selectedtext { background: none; }
328 /* ---------------------------------- End of slightly modified codemirror.css */
330 body {
331 font-family: "Helvetica Neue", Helvetica, Arial;
334 #outer {
335 width: 1500px;
336 height: 800px;
337 display: flex;
339 .CodeMirror {
340 border: 1px solid black;
341 margin-top: 3px;
343 .CodeMirror-linenumbers {
344 width: 150px;
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;">
365 Drill down on the left to an interesting file to see a line-by-line breakdown.
367 Largest lines are annotated here in darkest red.
369 Click on a line with bytes assigned to see contributing symbols below
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.