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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1271343004: Revert of 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;
36 } 35 }
37 36
38 body.platform-mac { 37 body.platform-mac {
39 font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif; 38 font-size: 11px;
39 font-family: Menlo, Monaco;
40 } 40 }
41 41
42 body.platform-windows { 42 body.platform-windows {
43 font-family: 'Segoe UI', Tahoma, sans-serif; 43 font-size: 12px;
44 font-family: Consolas, Lucida Console;
44 } 45 }
45 46
46 body.platform-linux { 47 body.platform-linux {
47 font-family: Ubuntu, Arial, sans-serif; 48 font-size: 11px;
48 }
49
50 body.platform-mac .monospace {
51 font-family: Menlo, Monaco;
52 }
53
54 body.platform-windows .monospace {
55 font-family: Consolas, Lucida Console;
56 }
57
58 body.platform-linux .monospace {
59 font-family: dejavu sans mono; 49 font-family: dejavu sans mono;
60 } 50 }
61 51
62 .fill { 52 .fill {
63 position: absolute; 53 position: absolute;
64 top: 0; 54 top: 0;
65 right: 0; 55 right: 0;
66 bottom: 0; 56 bottom: 0;
67 left: 0; 57 left: 0;
68 } 58 }
69 59
70 .dimmed { 60 .dimmed {
71 background-color: rgba(0, 0, 0, 0.31); 61 background-color: rgba(0, 0, 0, 0.31);
72 } 62 }
73 63
74 .hidden {
75 display: none !important;
76 }
77
78 #canvas, #labels-canvas { 64 #canvas, #labels-canvas {
79 pointer-events: none; 65 pointer-events: none;
80 } 66 }
81 67
82 .controls-line { 68 .controls-line {
83 display: flex; 69 display: flex;
84 justify-content: center; 70 justify-content: center;
85 margin: 10px 0; 71 margin: 10px 0;
86 } 72 }
87 73
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
129 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAA AKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVo hVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAA AASUVORK5CYII=); 115 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAA AKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVo hVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAA AASUVORK5CYII=);
130 -webkit-mask-size: 13px 10px; 116 -webkit-mask-size: 13px 10px;
131 background-color: rgb(66, 129, 235); 117 background-color: rgb(66, 129, 235);
132 } 118 }
133 119
134 #step-over-button .glyph { 120 #step-over-button .glyph {
135 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAA AKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8 qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQ TVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9 fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8S h3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==); 121 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAA AKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8 qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQ TVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9 fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8S h3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
136 -webkit-mask-size: 18px 10px; 122 -webkit-mask-size: 18px 10px;
137 } 123 }
138 124
139 #tooltip-container { 125 .px {
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)); 126 color: rgb(128, 128, 128);
141 } 127 }
142 128
143 #element-tooltip, 129 #element-title {
144 #element-tooltip-arrow {
145 position: absolute; 130 position: absolute;
146 z-index: 10; 131 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;
177 } 132 }
178 133
179 #tag-name { 134 #tag-name {
180 /* Keep this in sync with view-source.css (.html-tag) */ 135 /* Keep this in sync with view-source.css (.html-tag) */
181 color: rgb(136, 18, 128); 136 color: rgb(136, 18, 128);
182 } 137 }
183 138
184 #node-id { 139 #node-id {
140 /* Keep this in sync with view-source.css (.html-attribute-value) */
141 color: rgb(26, 26, 166);
142 }
143
144 #class-name {
145 /* Keep this in sync with view-source.css (.html-attribute-name) */
185 color: rgb(153, 69, 0); 146 color: rgb(153, 69, 0);
186 } 147 }
187 148
188 #class-name {
189 color: rgb(26, 26, 166);
190 }
191
192 #element-description {
193 flex: 1 1;
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;
215 }
216
217 .editor-anchor { 149 .editor-anchor {
218 height: 12px; 150 height: 12px;
219 width: 12px; 151 width: 12px;
220 position: absolute; 152 position: absolute;
221 } 153 }
222 154
223 </style> 155 </style>
224 <script> 156 <script>
225 const lightGridColor = "rgba(0,0,0,0.2)"; 157 const lightGridColor = "rgba(0,0,0,0.2)";
226 const darkGridColor = "rgba(0,0,0,0.7)"; 158 const darkGridColor = "rgba(0,0,0,0.7)";
(...skipping 188 matching lines...) Expand 10 before | Expand all | Expand 10 after
415 resetCanvas(canvas); 347 resetCanvas(canvas);
416 348
417 window.labelsCanvas = document.getElementById("labels-canvas"); 349 window.labelsCanvas = document.getElementById("labels-canvas");
418 resetCanvas(labelsCanvas); 350 resetCanvas(labelsCanvas);
419 351
420 window.canvasWidth = viewportSize.width; 352 window.canvasWidth = viewportSize.width;
421 window.canvasHeight = viewportSize.height; 353 window.canvasHeight = viewportSize.height;
422 354
423 window._controlsVisible = false; 355 window._controlsVisible = false;
424 document.querySelector(".controls-line").style.visibility = "hidden"; 356 document.querySelector(".controls-line").style.visibility = "hidden";
425 document.getElementById("tooltip-container").classList.add("hidden"); 357 document.getElementById("element-title").style.visibility = "hidden";
426 var editor = document.getElementById("editor"); 358 var editor = document.getElementById("editor");
427 editor.style.visibility = "hidden"; 359 editor.style.visibility = "hidden";
428 editor.textContent = ""; 360 editor.textContent = "";
429 document.body.classList.remove("dimmed"); 361 document.body.classList.remove("dimmed");
430 window._gridPainted = false; 362 window._gridPainted = false;
431 } 363 }
432 364
433 function _drawElementTitle(elementInfo, bounds) 365 function _drawElementTitle(elementInfo, bounds)
434 { 366 {
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
441 document.getElementById("tag-name").textContent = elementInfo.tagName; 367 document.getElementById("tag-name").textContent = elementInfo.tagName;
442 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : ""; 368 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
443 document.getElementById("node-id").classList.toggle("hidden", !elementInfo.i dValue);
444 var className = elementInfo.className; 369 var className = elementInfo.className;
445 if (className && className.length > 50) 370 if (className && className.length > 50)
446 className = className.substring(0, 50) + "\u2026"; 371 className = className.substring(0, 50) + "\u2026";
447 document.getElementById("class-name").textContent = className || ""; 372 document.getElementById("class-name").textContent = className || "";
448 document.getElementById("class-name").classList.toggle("hidden", !className) ;
449 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 373 document.getElementById("node-width").textContent = elementInfo.nodeWidth;
450 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 374 document.getElementById("node-height").textContent = elementInfo.nodeHeight;
375 var elementTitle = document.getElementById("element-title");
451 376
452 var titleWidth = elementTitle.offsetWidth; 377 var titleWidth = elementTitle.offsetWidth + 6;
453 var titleHeight = elementTitle.offsetHeight; 378 var titleHeight = elementTitle.offsetHeight + 4;
454 var arrowRadius = 8;
455 var pageMargin = 2;
456 379
457 var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2); 380 var anchorTop = bounds.minY;
458 boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin); 381 var anchorBottom = bounds.maxY;
382 var anchorLeft = bounds.minX;
459 383
460 var boxY = bounds.minY - arrowRadius - titleHeight; 384 const arrowHeight = 7;
461 var onTop = true; 385 var renderArrowUp = false;
462 if (boxY < 0) { 386 var renderArrowDown = false;
463 boxY = bounds.maxY + arrowRadius; 387
464 onTop = false; 388 var boxX = Math.max(2, anchorLeft);
465 } else if (bounds.minY > canvasHeight) { 389 if (boxX + titleWidth > canvasWidth)
466 boxY = canvasHeight - arrowRadius - titleHeight; 390 boxX = canvasWidth - titleWidth - 2;
391
392 var boxY;
393 if (anchorTop > canvasHeight) {
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);
467 } 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();
468 430
469 elementTitle.style.top = boxY + "px"; 431 context.restore();
470 elementTitle.style.left = boxX + "px";
471 432
472 var tooltipArrow = document.getElementById("element-tooltip-arrow"); 433 elementTitle.style.visibility = "visible";
473 // Center arrow if possible. Otherwise, try the bounds of the element. 434 elementTitle.style.top = (boxY + 3) + "px";
474 var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - arrowRadius; 435 elementTitle.style.left = (boxX + 3) + "px";
475 var tooltipBorderRadius = 2;
476 if (arrowX < pageMargin + tooltipBorderRadius)
477 arrowX = bounds.maxX - arrowRadius * 2;
478 else if (arrowX + arrowRadius * 2 > canvasWidth - pageMargin - tooltipBorder Radius)
479 arrowX = bounds.minX;
480 // Hide arrow if element is completely off the sides of the page.
481 var arrowHidden = arrowX < pageMargin + tooltipBorderRadius || arrowX + arro wRadius * 2 > canvasWidth - pageMargin - tooltipBorderRadius;
482 tooltipArrow.classList.toggle("hidden", arrowHidden);
483 if (!arrowHidden) {
484 tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
485 tooltipArrow.style.top = (onTop ? boxY + titleHeight : boxY - arrowRadiu s) + "px";
486 tooltipArrow.style.left = arrowX + "px";
487 }
488 } 436 }
489 437
490 function _drawRulers(bounds, rulerAtRight, rulerAtBottom) 438 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
491 { 439 {
492 context.save(); 440 context.save();
493 var width = canvasWidth; 441 var width = canvasWidth;
494 var height = canvasHeight; 442 var height = canvasHeight;
495 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 443 context.strokeStyle = "rgba(128, 128, 128, 0.3)";
496 context.lineWidth = 1; 444 context.lineWidth = 1;
497 context.translate(0.5, 0.5); 445 context.translate(0.5, 0.5);
(...skipping 389 matching lines...) Expand 10 before | Expand all | Expand 10 after
887 </head> 835 </head>
888 <body class="fill"> 836 <body class="fill">
889 <div class="controls-line"> 837 <div class="controls-line">
890 <div class="message-box"><div id="paused-in-debugger"></div></div> 838 <div class="message-box"><div id="paused-in-debugger"></div></div>
891 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div> 839 <div class="button" id="resume-button" title="Resume script execution (F8)." ><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> 840 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><div class="glyph"></div></div>
893 </div> 841 </div>
894 </body> 842 </body>
895 <canvas id="canvas" class="fill"></canvas> 843 <canvas id="canvas" class="fill"></canvas>
896 <canvas id="labels-canvas" class="fill"></canvas> 844 <canvas id="labels-canvas" class="fill"></canvas>
897 <div id="tooltip-container" class="hidden"> 845 <div id="element-title">
898 <div id="element-tooltip"> 846 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></s pan>
899 <div id="element-description" class="monospace"><span id="tag-name"></span ><span id="node-id"></span><span id="class-name"></span></div> 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>
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>
903 </div> 848 </div>
904 <div id="editor" class="fill"></div> 849 <div id="editor" class="fill"></div>
905 <div id="log"></div> 850 <div id="log"></div>
906 </html> 851 </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