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

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 2px hsla(0, 0%, 0%, 0.2)) drop-shadow(0 2p x 6px 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%, 98%);
152 font-size: 11px;
153 line-height: 14px;
154 padding: 8px 10px;
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 }
162
163 #element-tooltip-arrow {
164 border: solid;
165 border-color: hsl(0, 0%, 98%) transparent;
166 border-width: 0 8px 8px 8px;
167 }
168
169 #element-tooltip-arrow.tooltip-arrow-top {
170 border-width: 8px 8px 0 8px;
132 } 171 }
133 172
134 #tag-name { 173 #tag-name {
135 /* Keep this in sync with view-source.css (.html-tag) */ 174 /* Keep this in sync with view-source.css (.html-tag) */
136 color: rgb(136, 18, 128); 175 color: rgb(136, 18, 128);
137 } 176 }
138 177
139 #node-id { 178 #node-id {
140 /* Keep this in sync with view-source.css (.html-attribute-value) */ 179 margin-left: 4px;
paulirish 2015/07/30 03:32:30 I don't think we should add space in between as it
samli 2015/07/30 03:38:28 Good point. Done.
180 color: rgb(153, 69, 0);
181 }
182
183 #class-name {
184 margin-left: 4px;
141 color: rgb(26, 26, 166); 185 color: rgb(26, 26, 166);
142 } 186 }
143 187
144 #class-name { 188 #element-description {
145 /* Keep this in sync with view-source.css (.html-attribute-name) */ 189 flex: 1 1;
146 color: rgb(153, 69, 0); 190 word-wrap: break-word;
191 }
192
193 #dimensions {
194 border-left: 1px solid hsl(0, 0%, 85%);
195 padding-left: 12px;
196 margin-left: 12px;
197 float: right;
198 flex: 0 0 auto;
199 white-space: nowrap;
200 display: flex;
201 align-items: center;
202 color: hsl(0, 0%, 35%);
203 }
204
205 #node-width {
206 margin-right: 2px;
207 }
208
209 #node-height {
210 margin-left: 2px;
147 } 211 }
148 212
149 .editor-anchor { 213 .editor-anchor {
150 height: 12px; 214 height: 12px;
151 width: 12px; 215 width: 12px;
152 position: absolute; 216 position: absolute;
153 } 217 }
154 218
155 </style> 219 </style>
156 <script> 220 <script>
(...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after
347 resetCanvas(canvas); 411 resetCanvas(canvas);
348 412
349 window.labelsCanvas = document.getElementById("labels-canvas"); 413 window.labelsCanvas = document.getElementById("labels-canvas");
350 resetCanvas(labelsCanvas); 414 resetCanvas(labelsCanvas);
351 415
352 window.canvasWidth = viewportSize.width; 416 window.canvasWidth = viewportSize.width;
353 window.canvasHeight = viewportSize.height; 417 window.canvasHeight = viewportSize.height;
354 418
355 window._controlsVisible = false; 419 window._controlsVisible = false;
356 document.querySelector(".controls-line").style.visibility = "hidden"; 420 document.querySelector(".controls-line").style.visibility = "hidden";
357 document.getElementById("element-title").style.visibility = "hidden"; 421 document.getElementById("tooltip-container").classList.add("hidden");
358 var editor = document.getElementById("editor"); 422 var editor = document.getElementById("editor");
359 editor.style.visibility = "hidden"; 423 editor.style.visibility = "hidden";
360 editor.textContent = ""; 424 editor.textContent = "";
361 document.body.classList.remove("dimmed"); 425 document.body.classList.remove("dimmed");
362 window._gridPainted = false; 426 window._gridPainted = false;
363 } 427 }
364 428
365 function _drawElementTitle(elementInfo, bounds) 429 function _drawElementTitle(elementInfo, bounds)
366 { 430 {
431 // Reset position before measuring to ensure line-wraps are consistent.
432 var elementTitle = document.getElementById("element-tooltip");
433 elementTitle.style.top = "0";
434 elementTitle.style.left = "0";
435 document.getElementById("tooltip-container").classList.remove("hidden");
436
367 document.getElementById("tag-name").textContent = elementInfo.tagName; 437 document.getElementById("tag-name").textContent = elementInfo.tagName;
368 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : ""; 438 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
439 document.getElementById("node-id").classList.toggle("hidden", !elementInfo.i dValue);
369 var className = elementInfo.className; 440 var className = elementInfo.className;
370 if (className && className.length > 50) 441 if (className && className.length > 50)
371 className = className.substring(0, 50) + "\u2026"; 442 className = className.substring(0, 50) + "\u2026";
372 document.getElementById("class-name").textContent = className || ""; 443 document.getElementById("class-name").textContent = className || "";
444 document.getElementById("class-name").classList.toggle("hidden", !className) ;
373 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 445 document.getElementById("node-width").textContent = elementInfo.nodeWidth;
374 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 446 document.getElementById("node-height").textContent = elementInfo.nodeHeight;
375 var elementTitle = document.getElementById("element-title");
376 447
377 var titleWidth = elementTitle.offsetWidth + 6; 448 var titleWidth = elementTitle.offsetWidth;
378 var titleHeight = elementTitle.offsetHeight + 4; 449 var titleHeight = elementTitle.offsetHeight;
450 var arrowRadius = 8;
451 var pageMargin = 2;
379 452
380 var anchorTop = bounds.minY; 453 var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2);
381 var anchorBottom = bounds.maxY; 454 boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin);
382 var anchorLeft = bounds.minX;
383 455
384 const arrowHeight = 7; 456 var boxY = bounds.minY - arrowRadius - titleHeight;
385 var renderArrowUp = false; 457 var arrowY = bounds.minY - arrowRadius;
386 var renderArrowDown = false; 458 var onTop = true;
459 if (boxY < 0) {
460 boxY = bounds.maxY + arrowRadius;
461 arrowY = bounds.maxY;
462 onTop = false;
463 } else if (bounds.minY > canvasHeight) {
464 boxY = canvasHeight - arrowRadius - titleHeight;
465 arrowY = canvasHeight - arrowRadius;
466 }
387 467
388 var boxX = Math.max(2, anchorLeft); 468 elementTitle.style.top = boxY + "px";
389 if (boxX + titleWidth > canvasWidth) 469 elementTitle.style.left = boxX + "px";
390 boxX = canvasWidth - titleWidth - 2;
391 470
392 var boxY; 471 var tooltipArrow = document.getElementById("element-tooltip-arrow");
393 if (anchorTop > canvasHeight) { 472 var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - 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 473
408 context.save(); 474 tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
409 context.translate(0.5, 0.5); 475 tooltipArrow.style.top = arrowY + "px";
410 context.beginPath(); 476 tooltipArrow.style.left = arrowX + "px";
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 }
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 } 477 }
437 478
438 function _drawRulers(bounds, rulerAtRight, rulerAtBottom) 479 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
439 { 480 {
440 context.save(); 481 context.save();
441 var width = canvasWidth; 482 var width = canvasWidth;
442 var height = canvasHeight; 483 var height = canvasHeight;
443 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 484 context.strokeStyle = "rgba(128, 128, 128, 0.3)";
444 context.lineWidth = 1; 485 context.lineWidth = 1;
445 context.translate(0.5, 0.5); 486 context.translate(0.5, 0.5);
(...skipping 385 matching lines...) Expand 10 before | Expand all | Expand 10 after
831 </head> 872 </head>
832 <body class="fill"> 873 <body class="fill">
833 <div class="controls-line"> 874 <div class="controls-line">
834 <div class="message-box"><div id="paused-in-debugger"></div></div> 875 <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> 876 <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> 877 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div>
837 </div> 878 </div>
838 </body> 879 </body>
839 <canvas id="canvas" class="fill"></canvas> 880 <canvas id="canvas" class="fill"></canvas>
840 <canvas id="labels-canvas" class="fill"></canvas> 881 <canvas id="labels-canvas" class="fill"></canvas>
841 <div id="element-title"> 882 <div id="tooltip-container" class="hidden">
842 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></s pan> 883 <div id="element-tooltip">
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> 884 <div id="element-description"><span id="tag-name"></span><span id="node-id "></span><span id="class-name"></span></div>
885 <div id="dimensions"><span id="node-width"></span>&#xD7;<span id="node-hei ght"></span></div>
886 </div>
887 <div id="element-tooltip-arrow"></div>
844 </div> 888 </div>
845 <div id="editor" class="fill"></div> 889 <div id="editor" class="fill"></div>
846 <div id="log"></div> 890 <div id="log"></div>
847 </html> 891 </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