Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(468)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: Source/core/inspector/InspectorOverlayPage.html

Issue 1255573004: Devtools UI: Update inspect element node description label UI (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 Copyright (C) 2012 Google Inc. All rights reserved. 2 Copyright (C) 2012 Google Inc. All rights reserved.
3 3
4 Redistribution and use in source and binary forms, with or without 4 Redistribution and use in source and binary forms, with or without
5 modification, are permitted provided that the following conditions 5 modification, are permitted provided that the following conditions
6 are met: 6 are met:
7 7
8 1. Redistributions of source code must retain the above copyright 8 1. Redistributions of source code must retain the above copyright
9 notice, this list of conditions and the following disclaimer. 9 notice, this list of conditions and the following disclaimer.
10 2. Redistributions in binary form must reproduce the above copyright 10 2. Redistributions in binary form must reproduce the above copyright
(...skipping 18 matching lines...) Expand all
29 <html> 29 <html>
30 <head> 30 <head>
31 <style> 31 <style>
32 body { 32 body {
33 margin: 0; 33 margin: 0;
34 padding: 0; 34 padding: 0;
35 } 35 }
36 36
37 body.platform-mac { 37 body.platform-mac {
38 font-size: 11px; 38 font-size: 11px;
39 font-family: Menlo, Monaco; 39 font-family: 'Lucida Grande', sans-serif;
40 } 40 }
41 41
42 body.platform-windows { 42 body.platform-windows {
43 font-size: 12px; 43 font-size: 12px;
44 font-family: Consolas, Lucida Console; 44 font-family: 'Segoe UI', Tahoma, sans-serif;
45 } 45 }
46 46
47 body.platform-linux { 47 body.platform-linux {
48 font-size: 11px; 48 font-size: 11px;
49 font-family: Ubuntu, Arial, sans-serif;
50 }
51
52 body.platform-mac .monospace {
53 font-family: Menlo, Monaco;
54 }
55
56 body.platform-windows .monospace {
57 font-family: Consolas, Lucida Console;
58 }
59
60 body.platform-linux .monospace {
49 font-family: dejavu sans mono; 61 font-family: dejavu sans mono;
50 } 62 }
51 63
52 .fill { 64 .fill {
53 position: absolute; 65 position: absolute;
54 top: 0; 66 top: 0;
55 right: 0; 67 right: 0;
56 bottom: 0; 68 bottom: 0;
57 left: 0; 69 left: 0;
58 } 70 }
59 71
60 .dimmed { 72 .dimmed {
61 background-color: rgba(0, 0, 0, 0.31); 73 background-color: rgba(0, 0, 0, 0.31);
62 } 74 }
63 75
76 .hidden {
77 display: none;
78 }
79
64 #canvas, #labels-canvas { 80 #canvas, #labels-canvas {
65 pointer-events: none; 81 pointer-events: none;
66 } 82 }
67 83
68 .controls-line { 84 .controls-line {
69 display: flex; 85 display: flex;
70 justify-content: center; 86 justify-content: center;
71 margin: 10px 0; 87 margin: 10px 0;
72 } 88 }
73 89
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
115 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAA AKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVo hVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAA AASUVORK5CYII=); 131 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAA AKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVo hVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAA AASUVORK5CYII=);
116 -webkit-mask-size: 13px 10px; 132 -webkit-mask-size: 13px 10px;
117 background-color: rgb(66, 129, 235); 133 background-color: rgb(66, 129, 235);
118 } 134 }
119 135
120 #step-over-button .glyph { 136 #step-over-button .glyph {
121 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAA AKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8 qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQ TVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9 fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8S h3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==); 137 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAA AKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8 qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQ TVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9 fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8S h3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
122 -webkit-mask-size: 18px 10px; 138 -webkit-mask-size: 18px 10px;
123 } 139 }
124 140
125 .px { 141 #element-tooltip,
126 color: rgb(128, 128, 128); 142 #element-tooltip-arrow {
143 position: absolute;
144 z-index: 10;
145 -webkit-user-select: none;
127 } 146 }
128 147
129 #element-title { 148 #element-tooltip {
130 position: absolute; 149 background-color: hsl(0, 0%, 25%);
131 z-index: 10; 150 font-size: 11px;
151 line-height: 14px;
152 padding: 5px 10px;
153 border-radius: 2px;
154 color: white;
155 display: flex;
156 align-content: stretch;
157 box-sizing: border-box;
158 max-width: calc(100% - 4px);
159 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.37);
160 }
161
162 #element-tooltip-arrow {
163 border: solid;
164 border-color: hsl(0, 0%, 25%) transparent;
165 border-width: 0 5px 5px 5px;
166 }
167
168 #element-tooltip-arrow.tooltip-arrow-top {
169 border-width: 5px 5px 0 5px;
132 } 170 }
133 171
134 #tag-name { 172 #tag-name {
135 /* Keep this in sync with view-source.css (.html-tag) */ 173 color: #E387FF;
136 color: rgb(136, 18, 128);
137 } 174 }
138 175
139 #node-id { 176 #node-id {
140 /* Keep this in sync with view-source.css (.html-attribute-value) */ 177 margin-left: 4px;
141 color: rgb(26, 26, 166); 178 color: #E0BDB1;
142 } 179 }
143 180
144 #class-name { 181 #class-name {
145 /* Keep this in sync with view-source.css (.html-attribute-name) */ 182 margin-left: 4px;
146 color: rgb(153, 69, 0); 183 color: #52B4FF;
184 }
185
186 #element-description {
187 flex: 1 1;
188 word-wrap: break-word;
189 }
190
191 #dimensions {
192 border-left: 1px solid hsl(0, 0%, 35%);
193 padding-left: 10px;
194 margin-left: 10px;
195 float: right;
196 flex: 0 0 auto;
197 white-space: nowrap;
198 display: flex;
199 align-items: center;
200 }
201
202 #node-width {
203 margin-right: 2px;
204 }
205
206 #node-height {
207 margin-left: 2px;
147 } 208 }
148 209
149 .editor-anchor { 210 .editor-anchor {
150 height: 12px; 211 height: 12px;
151 width: 12px; 212 width: 12px;
152 position: absolute; 213 position: absolute;
153 } 214 }
154 215
155 </style> 216 </style>
156 <script> 217 <script>
(...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after
347 resetCanvas(canvas); 408 resetCanvas(canvas);
348 409
349 window.labelsCanvas = document.getElementById("labels-canvas"); 410 window.labelsCanvas = document.getElementById("labels-canvas");
350 resetCanvas(labelsCanvas); 411 resetCanvas(labelsCanvas);
351 412
352 window.canvasWidth = viewportSize.width; 413 window.canvasWidth = viewportSize.width;
353 window.canvasHeight = viewportSize.height; 414 window.canvasHeight = viewportSize.height;
354 415
355 window._controlsVisible = false; 416 window._controlsVisible = false;
356 document.querySelector(".controls-line").style.visibility = "hidden"; 417 document.querySelector(".controls-line").style.visibility = "hidden";
357 document.getElementById("element-title").style.visibility = "hidden"; 418 document.getElementById("element-tooltip").style.visibility = "hidden";
419 document.getElementById("element-tooltip-arrow").style.visibility = "hidden" ;
dgozman 2015/07/24 13:57:10 Migrate to "hidden" class?
samli 2015/07/27 01:19:20 Done.
358 var editor = document.getElementById("editor"); 420 var editor = document.getElementById("editor");
359 editor.style.visibility = "hidden"; 421 editor.style.visibility = "hidden";
360 editor.textContent = ""; 422 editor.textContent = "";
361 document.body.classList.remove("dimmed"); 423 document.body.classList.remove("dimmed");
362 window._gridPainted = false; 424 window._gridPainted = false;
363 } 425 }
364 426
365 function _drawElementTitle(elementInfo, bounds) 427 function _drawElementTitle(elementInfo, bounds)
366 { 428 {
429 // Reset position before measuring to ensure line-wraps are consistent.
430 var elementTitle = document.getElementById("element-tooltip");
431 elementTitle.style.top = "0px";
dgozman 2015/07/24 13:57:10 We usually use "0" without "px".
samli 2015/07/27 01:19:20 Done.
432 elementTitle.style.left = "0px";
433
367 document.getElementById("tag-name").textContent = elementInfo.tagName; 434 document.getElementById("tag-name").textContent = elementInfo.tagName;
368 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : ""; 435 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
436 document.getElementById("node-id").classList.toggle("hidden", !elementInfo.i dValue);
369 var className = elementInfo.className; 437 var className = elementInfo.className;
370 if (className && className.length > 50) 438 if (className && className.length > 50)
371 className = className.substring(0, 50) + "\u2026"; 439 className = className.substring(0, 50) + "\u2026";
372 document.getElementById("class-name").textContent = className || ""; 440 document.getElementById("class-name").textContent = className || "";
441 document.getElementById("class-name").classList.toggle("hidden", !className) ;
373 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 442 document.getElementById("node-width").textContent = elementInfo.nodeWidth;
374 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 443 document.getElementById("node-height").textContent = elementInfo.nodeHeight;
375 var elementTitle = document.getElementById("element-title");
376 444
377 var titleWidth = elementTitle.offsetWidth + 6; 445 var titleWidth = elementTitle.offsetWidth;
378 var titleHeight = elementTitle.offsetHeight + 4; 446 var titleHeight = elementTitle.offsetHeight;
447 const arrowRadius = 5;
448 const pageMargin = 2;
dgozman 2015/07/24 13:57:10 var
samli 2015/07/27 01:19:20 Done.
379 449
380 var anchorTop = bounds.minY; 450 var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2);
381 var anchorBottom = bounds.maxY; 451 boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin);
382 var anchorLeft = bounds.minX;
383 452
384 const arrowHeight = 7; 453 var boxY = bounds.minY - arrowRadius - titleHeight;
385 var renderArrowUp = false; 454 var arrowY = bounds.minY - arrowRadius;
386 var renderArrowDown = false; 455 var onTop = true;
387 456 if (boxY < 0) {
388 var boxX = Math.max(2, anchorLeft); 457 boxY = bounds.maxY + arrowRadius;
389 if (boxX + titleWidth > canvasWidth) 458 arrowY = bounds.maxY;
390 boxX = canvasWidth - titleWidth - 2; 459 onTop = false;
391 460 } else if (bounds.minY > canvasHeight) {
392 var boxY; 461 boxY = canvasHeight - arrowRadius - titleHeight;
393 if (anchorTop > canvasHeight) { 462 arrowY = canvasHeight - arrowRadius;
394 boxY = canvasHeight - titleHeight - arrowHeight;
395 renderArrowDown = true;
396 } else if (anchorBottom < 0) {
397 boxY = arrowHeight;
398 renderArrowUp = true;
399 } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
400 boxY = anchorBottom + arrowHeight - 4;
401 renderArrowUp = true;
402 } else if (anchorTop - titleHeight - arrowHeight > 0) {
403 boxY = anchorTop - titleHeight - arrowHeight + 3;
404 renderArrowDown = true;
405 } else
406 boxY = arrowHeight;
407
408 context.save();
409 context.translate(0.5, 0.5);
410 context.beginPath();
411 context.moveTo(boxX, boxY);
412 if (renderArrowUp) {
413 context.lineTo(boxX + 2 * arrowHeight, boxY);
414 context.lineTo(boxX + 3 * arrowHeight, boxY - arrowHeight);
415 context.lineTo(boxX + 4 * arrowHeight, boxY);
416 } 463 }
417 context.lineTo(boxX + titleWidth, boxY);
418 context.lineTo(boxX + titleWidth, boxY + titleHeight);
419 if (renderArrowDown) {
420 context.lineTo(boxX + 4 * arrowHeight, boxY + titleHeight);
421 context.lineTo(boxX + 3 * arrowHeight, boxY + titleHeight + arrowHeight) ;
422 context.lineTo(boxX + 2 * arrowHeight, boxY + titleHeight);
423 }
424 context.lineTo(boxX, boxY + titleHeight);
425 context.closePath();
426 context.fillStyle = "rgb(255, 255, 194)";
427 context.fill();
428 context.strokeStyle = "rgb(128, 128, 128)";
429 context.stroke();
430
431 context.restore();
432 464
433 elementTitle.style.visibility = "visible"; 465 elementTitle.style.visibility = "visible";
434 elementTitle.style.top = (boxY + 3) + "px"; 466 elementTitle.style.top = boxY + "px";
435 elementTitle.style.left = (boxX + 3) + "px"; 467 elementTitle.style.left = boxX + "px";
468
469 var tooltipArrow = document.getElementById("element-tooltip-arrow");
470 var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - arrowRadius;
471
472 tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
473 tooltipArrow.style.visibility = "visible";
474 tooltipArrow.style.top = arrowY + "px";
475 tooltipArrow.style.left = arrowX + "px";
436 } 476 }
437 477
438 function _drawRulers(bounds, rulerAtRight, rulerAtBottom) 478 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
439 { 479 {
440 context.save(); 480 context.save();
441 var width = canvasWidth; 481 var width = canvasWidth;
442 var height = canvasHeight; 482 var height = canvasHeight;
443 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 483 context.strokeStyle = "rgba(128, 128, 128, 0.3)";
444 context.lineWidth = 1; 484 context.lineWidth = 1;
445 context.translate(0.5, 0.5); 485 context.translate(0.5, 0.5);
(...skipping 385 matching lines...) Expand 10 before | Expand all | Expand 10 after
831 </head> 871 </head>
832 <body class="fill"> 872 <body class="fill">
833 <div class="controls-line"> 873 <div class="controls-line">
834 <div class="message-box"><div id="paused-in-debugger"></div></div> 874 <div class="message-box"><div id="paused-in-debugger"></div></div>
835 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div> 875 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div>
836 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div> 876 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div>
837 </div> 877 </div>
838 </body> 878 </body>
839 <canvas id="canvas" class="fill"></canvas> 879 <canvas id="canvas" class="fill"></canvas>
840 <canvas id="labels-canvas" class="fill"></canvas> 880 <canvas id="labels-canvas" class="fill"></canvas>
841 <div id="element-title"> 881 <div id="element-tooltip">
842 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></s pan> 882 <div id="element-description"><span id="tag-name"></span><span id="node-id"></ span><span id="class-name"></span></div>
843 <span id="node-width"></span><span class="px">px</span><span class="px"> &#xD7 ; </span><span id="node-height"></span><span class="px">px</span> 883 <div id="dimensions"><span id="node-width"></span>&#xD7;<span id="node-height" ></span></div>
844 </div> 884 </div>
885 <div id="element-tooltip-arrow"></div>
845 <div id="editor" class="fill"></div> 886 <div id="editor" class="fill"></div>
846 <div id="log"></div> 887 <div id="log"></div>
847 </html> 888 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698