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

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, 4 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 14 matching lines...) Expand all
25 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 25 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
26 THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27 --> 27 -->
28 <!DOCTYPE html> 28 <!DOCTYPE html>
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 font-size: 11px;
35 } 36 }
36 37
37 body.platform-mac { 38 body.platform-mac {
38 font-size: 11px; 39 font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
40 }
41
42 body.platform-windows {
43 font-family: 'Segoe UI', Tahoma, sans-serif;
44 }
45
46 body.platform-linux {
47 font-family: Ubuntu, Arial, sans-serif;
48 }
49
50 body.platform-mac .monospace {
39 font-family: Menlo, Monaco; 51 font-family: Menlo, Monaco;
40 } 52 }
41 53
42 body.platform-windows { 54 body.platform-windows .monospace {
43 font-size: 12px;
44 font-family: Consolas, Lucida Console; 55 font-family: Consolas, Lucida Console;
45 } 56 }
46 57
47 body.platform-linux { 58 body.platform-linux .monospace {
48 font-size: 11px;
49 font-family: dejavu sans mono; 59 font-family: dejavu sans mono;
50 } 60 }
51 61
52 .fill { 62 .fill {
53 position: absolute; 63 position: absolute;
54 top: 0; 64 top: 0;
55 right: 0; 65 right: 0;
56 bottom: 0; 66 bottom: 0;
57 left: 0; 67 left: 0;
58 } 68 }
59 69
60 .dimmed { 70 .dimmed {
61 background-color: rgba(0, 0, 0, 0.31); 71 background-color: rgba(0, 0, 0, 0.31);
62 } 72 }
63 73
74 .hidden {
75 display: none !important;
76 }
77
64 #canvas, #labels-canvas { 78 #canvas, #labels-canvas {
65 pointer-events: none; 79 pointer-events: none;
66 } 80 }
67 81
68 .controls-line { 82 .controls-line {
69 display: flex; 83 display: flex;
70 justify-content: center; 84 justify-content: center;
71 margin: 10px 0; 85 margin: 10px 0;
72 } 86 }
73 87
(...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=); 129 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAA AKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVo hVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAA AASUVORK5CYII=);
116 -webkit-mask-size: 13px 10px; 130 -webkit-mask-size: 13px 10px;
117 background-color: rgb(66, 129, 235); 131 background-color: rgb(66, 129, 235);
118 } 132 }
119 133
120 #step-over-button .glyph { 134 #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==); 135 -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; 136 -webkit-mask-size: 18px 10px;
123 } 137 }
124 138
125 .px { 139 #tooltip-container {
126 color: rgb(128, 128, 128); 140 -webkit-filter: drop-shadow(0 1px 1px hsla(0, 0%, 0%, 0.1)) drop-shadow(0 0p x 1px hsla(0, 0%, 0%, 0.2));
127 } 141 }
128 142
129 #element-title { 143 #element-tooltip,
144 #element-tooltip-arrow {
130 position: absolute; 145 position: absolute;
131 z-index: 10; 146 z-index: 10;
147 -webkit-user-select: none;
148 }
149
150 #element-tooltip {
151 background-color: hsl(0, 0%, 97%);
152 font-size: 11px;
153 line-height: 14px;
154 padding: 5px 6px;
155 border-radius: 2px;
156 color: white;
157 display: flex;
158 align-content: stretch;
159 box-sizing: border-box;
160 max-width: calc(100% - 4px);
161 border: 1px solid hsla(0, 0%, 0%, 0.1);
162 z-index: 1;
163 background-clip: padding-box;
164 }
165
166 #element-tooltip-arrow {
167 border: solid;
168 border-color: hsl(0, 0%, 97%) transparent;
169 border-width: 0 8px 8px 8px;
170 z-index: 2;
171 margin-top: 1px;
172 }
173
174 #element-tooltip-arrow.tooltip-arrow-top {
175 border-width: 8px 8px 0 8px;
176 margin-top: -1px;
132 } 177 }
133 178
134 #tag-name { 179 #tag-name {
135 /* Keep this in sync with view-source.css (.html-tag) */ 180 /* Keep this in sync with view-source.css (.html-tag) */
136 color: rgb(136, 18, 128); 181 color: rgb(136, 18, 128);
137 } 182 }
138 183
139 #node-id { 184 #node-id {
140 /* Keep this in sync with view-source.css (.html-attribute-value) */ 185 color: rgb(153, 69, 0);
186 }
187
188 #class-name {
141 color: rgb(26, 26, 166); 189 color: rgb(26, 26, 166);
142 } 190 }
143 191
144 #class-name { 192 #element-description {
145 /* Keep this in sync with view-source.css (.html-attribute-name) */ 193 flex: 1 1;
146 color: rgb(153, 69, 0); 194 word-wrap: break-word;
195 }
196
197 #dimensions {
198 border-left: 1px solid hsl(0, 0%, 85%);
199 padding-left: 7px;
200 margin-left: 7px;
201 float: right;
202 flex: 0 0 auto;
203 white-space: nowrap;
204 display: flex;
205 align-items: center;
206 color: hsl(0, 0%, 35%);
207 }
208
209 #node-width {
210 margin-right: 2px;
211 }
212
213 #node-height {
214 margin-left: 2px;
147 } 215 }
148 216
149 .editor-anchor { 217 .editor-anchor {
150 height: 12px; 218 height: 12px;
151 width: 12px; 219 width: 12px;
152 position: absolute; 220 position: absolute;
153 } 221 }
154 222
155 </style> 223 </style>
156 <script> 224 <script>
(...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after
347 resetCanvas(canvas); 415 resetCanvas(canvas);
348 416
349 window.labelsCanvas = document.getElementById("labels-canvas"); 417 window.labelsCanvas = document.getElementById("labels-canvas");
350 resetCanvas(labelsCanvas); 418 resetCanvas(labelsCanvas);
351 419
352 window.canvasWidth = viewportSize.width; 420 window.canvasWidth = viewportSize.width;
353 window.canvasHeight = viewportSize.height; 421 window.canvasHeight = viewportSize.height;
354 422
355 window._controlsVisible = false; 423 window._controlsVisible = false;
356 document.querySelector(".controls-line").style.visibility = "hidden"; 424 document.querySelector(".controls-line").style.visibility = "hidden";
357 document.getElementById("element-title").style.visibility = "hidden"; 425 document.getElementById("tooltip-container").classList.add("hidden");
358 var editor = document.getElementById("editor"); 426 var editor = document.getElementById("editor");
359 editor.style.visibility = "hidden"; 427 editor.style.visibility = "hidden";
360 editor.textContent = ""; 428 editor.textContent = "";
361 document.body.classList.remove("dimmed"); 429 document.body.classList.remove("dimmed");
362 window._gridPainted = false; 430 window._gridPainted = false;
363 } 431 }
364 432
365 function _drawElementTitle(elementInfo, bounds) 433 function _drawElementTitle(elementInfo, bounds)
366 { 434 {
435 // Reset position before measuring to ensure line-wraps are consistent.
436 var elementTitle = document.getElementById("element-tooltip");
437 elementTitle.style.top = "0";
438 elementTitle.style.left = "0";
439 document.getElementById("tooltip-container").classList.remove("hidden");
440
367 document.getElementById("tag-name").textContent = elementInfo.tagName; 441 document.getElementById("tag-name").textContent = elementInfo.tagName;
368 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : ""; 442 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
443 document.getElementById("node-id").classList.toggle("hidden", !elementInfo.i dValue);
369 var className = elementInfo.className; 444 var className = elementInfo.className;
370 if (className && className.length > 50) 445 if (className && className.length > 50)
371 className = className.substring(0, 50) + "\u2026"; 446 className = className.substring(0, 50) + "\u2026";
372 document.getElementById("class-name").textContent = className || ""; 447 document.getElementById("class-name").textContent = className || "";
448 document.getElementById("class-name").classList.toggle("hidden", !className) ;
373 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 449 document.getElementById("node-width").textContent = elementInfo.nodeWidth;
374 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 450 document.getElementById("node-height").textContent = elementInfo.nodeHeight;
375 var elementTitle = document.getElementById("element-title");
376 451
377 var titleWidth = elementTitle.offsetWidth + 6; 452 var titleWidth = elementTitle.offsetWidth;
378 var titleHeight = elementTitle.offsetHeight + 4; 453 var titleHeight = elementTitle.offsetHeight;
454 var arrowRadius = 8;
455 var pageMargin = 2;
379 456
380 var anchorTop = bounds.minY; 457 var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2);
381 var anchorBottom = bounds.maxY; 458 boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin);
382 var anchorLeft = bounds.minX;
383 459
384 const arrowHeight = 7; 460 var boxY = bounds.minY - arrowRadius - titleHeight;
385 var renderArrowUp = false; 461 var onTop = true;
386 var renderArrowDown = false; 462 if (boxY < 0) {
463 boxY = bounds.maxY + arrowRadius;
464 onTop = false;
465 } else if (bounds.minY > canvasHeight) {
466 boxY = canvasHeight - arrowRadius - titleHeight;
467 }
387 468
388 var boxX = Math.max(2, anchorLeft); 469 elementTitle.style.top = boxY + "px";
389 if (boxX + titleWidth > canvasWidth) 470 elementTitle.style.left = boxX + "px";
390 boxX = canvasWidth - titleWidth - 2;
391 471
392 var boxY; 472 var tooltipArrow = document.getElementById("element-tooltip-arrow");
393 if (anchorTop > canvasHeight) { 473 // Center arrow if possible. Otherwise, try the bounds of the element.
394 boxY = canvasHeight - titleHeight - arrowHeight; 474 var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - arrowRadius;
395 renderArrowDown = true; 475 var tooltipBorderRadius = 2;
396 } else if (anchorBottom < 0) { 476 if (arrowX < pageMargin + tooltipBorderRadius)
397 boxY = arrowHeight; 477 arrowX = bounds.maxX - arrowRadius * 2;
398 renderArrowUp = true; 478 else if (arrowX + arrowRadius * 2 > canvasWidth - pageMargin - tooltipBorder Radius)
399 } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) { 479 arrowX = bounds.minX;
400 boxY = anchorBottom + arrowHeight - 4; 480 // Hide arrow if element is completely off the sides of the page.
401 renderArrowUp = true; 481 var arrowHidden = arrowX < pageMargin + tooltipBorderRadius || arrowX + arro wRadius * 2 > canvasWidth - pageMargin - tooltipBorderRadius;
402 } else if (anchorTop - titleHeight - arrowHeight > 0) { 482 tooltipArrow.classList.toggle("hidden", arrowHidden);
403 boxY = anchorTop - titleHeight - arrowHeight + 3; 483 if (!arrowHidden) {
404 renderArrowDown = true; 484 tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
405 } else 485 tooltipArrow.style.top = (onTop ? boxY + titleHeight : boxY - arrowRadiu s) + "px";
406 boxY = arrowHeight; 486 tooltipArrow.style.left = arrowX + "px";
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 } 487 }
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
433 elementTitle.style.visibility = "visible";
434 elementTitle.style.top = (boxY + 3) + "px";
435 elementTitle.style.left = (boxX + 3) + "px";
436 } 488 }
437 489
438 function _drawRulers(bounds, rulerAtRight, rulerAtBottom) 490 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
439 { 491 {
440 context.save(); 492 context.save();
441 var width = canvasWidth; 493 var width = canvasWidth;
442 var height = canvasHeight; 494 var height = canvasHeight;
443 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 495 context.strokeStyle = "rgba(128, 128, 128, 0.3)";
444 context.lineWidth = 1; 496 context.lineWidth = 1;
445 context.translate(0.5, 0.5); 497 context.translate(0.5, 0.5);
(...skipping 389 matching lines...) Expand 10 before | Expand all | Expand 10 after
835 </head> 887 </head>
836 <body class="fill"> 888 <body class="fill">
837 <div class="controls-line"> 889 <div class="controls-line">
838 <div class="message-box"><div id="paused-in-debugger"></div></div> 890 <div class="message-box"><div id="paused-in-debugger"></div></div>
839 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div> 891 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div>
840 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div> 892 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div>
841 </div> 893 </div>
842 </body> 894 </body>
843 <canvas id="canvas" class="fill"></canvas> 895 <canvas id="canvas" class="fill"></canvas>
844 <canvas id="labels-canvas" class="fill"></canvas> 896 <canvas id="labels-canvas" class="fill"></canvas>
845 <div id="element-title"> 897 <div id="tooltip-container" class="hidden">
846 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></s pan> 898 <div id="element-tooltip">
847 <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> 899 <div id="element-description" class="monospace"><span id="tag-name"></span ><span id="node-id"></span><span id="class-name"></span></div>
900 <div id="dimensions"><span id="node-width"></span>&#xD7;<span id="node-hei ght"></span></div>
901 </div>
902 <div id="element-tooltip-arrow"></div>
848 </div> 903 </div>
849 <div id="editor" class="fill"></div> 904 <div id="editor" class="fill"></div>
850 <div id="log"></div> 905 <div id="log"></div>
851 </html> 906 </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