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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1259413003: 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 2px hsla(0, 0%, 0%, 0.2)) drop-shadow(0 2p x 6px 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%, 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;
171 } 132 }
172 133
173 #tag-name { 134 #tag-name {
174 /* Keep this in sync with view-source.css (.html-tag) */ 135 /* Keep this in sync with view-source.css (.html-tag) */
175 color: rgb(136, 18, 128); 136 color: rgb(136, 18, 128);
176 } 137 }
177 138
178 #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) */
179 color: rgb(153, 69, 0); 146 color: rgb(153, 69, 0);
180 } 147 }
181 148
182 #class-name {
183 color: rgb(26, 26, 166);
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%, 85%);
193 padding-left: 12px;
194 margin-left: 12px;
195 float: right;
196 flex: 0 0 auto;
197 white-space: nowrap;
198 display: flex;
199 align-items: center;
200 color: hsl(0, 0%, 35%);
201 }
202
203 #node-width {
204 margin-right: 2px;
205 }
206
207 #node-height {
208 margin-left: 2px;
209 }
210
211 .editor-anchor { 149 .editor-anchor {
212 height: 12px; 150 height: 12px;
213 width: 12px; 151 width: 12px;
214 position: absolute; 152 position: absolute;
215 } 153 }
216 154
217 </style> 155 </style>
218 <script> 156 <script>
219 const lightGridColor = "rgba(0,0,0,0.2)"; 157 const lightGridColor = "rgba(0,0,0,0.2)";
220 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
409 resetCanvas(canvas); 347 resetCanvas(canvas);
410 348
411 window.labelsCanvas = document.getElementById("labels-canvas"); 349 window.labelsCanvas = document.getElementById("labels-canvas");
412 resetCanvas(labelsCanvas); 350 resetCanvas(labelsCanvas);
413 351
414 window.canvasWidth = viewportSize.width; 352 window.canvasWidth = viewportSize.width;
415 window.canvasHeight = viewportSize.height; 353 window.canvasHeight = viewportSize.height;
416 354
417 window._controlsVisible = false; 355 window._controlsVisible = false;
418 document.querySelector(".controls-line").style.visibility = "hidden"; 356 document.querySelector(".controls-line").style.visibility = "hidden";
419 document.getElementById("tooltip-container").classList.add("hidden"); 357 document.getElementById("element-title").style.visibility = "hidden";
420 var editor = document.getElementById("editor"); 358 var editor = document.getElementById("editor");
421 editor.style.visibility = "hidden"; 359 editor.style.visibility = "hidden";
422 editor.textContent = ""; 360 editor.textContent = "";
423 document.body.classList.remove("dimmed"); 361 document.body.classList.remove("dimmed");
424 window._gridPainted = false; 362 window._gridPainted = false;
425 } 363 }
426 364
427 function _drawElementTitle(elementInfo, bounds) 365 function _drawElementTitle(elementInfo, bounds)
428 { 366 {
429 // Reset position before measuring to ensure line-wraps are consistent.
430 var elementTitle = document.getElementById("element-tooltip");
431 elementTitle.style.top = "0";
432 elementTitle.style.left = "0";
433 document.getElementById("tooltip-container").classList.remove("hidden");
434
435 document.getElementById("tag-name").textContent = elementInfo.tagName; 367 document.getElementById("tag-name").textContent = elementInfo.tagName;
436 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : ""; 368 document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
437 document.getElementById("node-id").classList.toggle("hidden", !elementInfo.i dValue);
438 var className = elementInfo.className; 369 var className = elementInfo.className;
439 if (className && className.length > 50) 370 if (className && className.length > 50)
440 className = className.substring(0, 50) + "\u2026"; 371 className = className.substring(0, 50) + "\u2026";
441 document.getElementById("class-name").textContent = className || ""; 372 document.getElementById("class-name").textContent = className || "";
442 document.getElementById("class-name").classList.toggle("hidden", !className) ;
443 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 373 document.getElementById("node-width").textContent = elementInfo.nodeWidth;
444 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 374 document.getElementById("node-height").textContent = elementInfo.nodeHeight;
375 var elementTitle = document.getElementById("element-title");
445 376
446 var titleWidth = elementTitle.offsetWidth; 377 var titleWidth = elementTitle.offsetWidth + 6;
447 var titleHeight = elementTitle.offsetHeight; 378 var titleHeight = elementTitle.offsetHeight + 4;
448 var arrowRadius = 8;
449 var pageMargin = 2;
450 379
451 var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2); 380 var anchorTop = bounds.minY;
452 boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin); 381 var anchorBottom = bounds.maxY;
382 var anchorLeft = bounds.minX;
453 383
454 var boxY = bounds.minY - arrowRadius - titleHeight; 384 const arrowHeight = 7;
455 var onTop = true; 385 var renderArrowUp = false;
456 if (boxY < 0) { 386 var renderArrowDown = false;
457 boxY = bounds.maxY + arrowRadius; 387
458 onTop = false; 388 var boxX = Math.max(2, anchorLeft);
459 } else if (bounds.minY > canvasHeight) { 389 if (boxX + titleWidth > canvasWidth)
460 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);
461 } 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();
462 430
463 elementTitle.style.top = boxY + "px"; 431 context.restore();
464 elementTitle.style.left = boxX + "px";
465 432
466 var tooltipArrow = document.getElementById("element-tooltip-arrow"); 433 elementTitle.style.visibility = "visible";
467 // Center arrow if possible. Otherwise, try the bounds of the element. 434 elementTitle.style.top = (boxY + 3) + "px";
468 var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - arrowRadius; 435 elementTitle.style.left = (boxX + 3) + "px";
469 var tooltipBorderRadius = 2;
470 if (arrowX < pageMargin + tooltipBorderRadius)
471 arrowX = bounds.maxX - arrowRadius * 2;
472 else if (arrowX + arrowRadius * 2 > canvasWidth - pageMargin - tooltipBorder Radius)
473 arrowX = bounds.minX;
474 // Hide arrow if element is completely off the sides of the page.
475 var arrowHidden = arrowX < pageMargin + tooltipBorderRadius || arrowX + arro wRadius * 2 > canvasWidth - pageMargin - tooltipBorderRadius;
476 tooltipArrow.classList.toggle("hidden", arrowHidden);
477 if (!arrowHidden) {
478 tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
479 tooltipArrow.style.top = (onTop ? boxY + titleHeight : boxY - arrowRadiu s) + "px";
480 tooltipArrow.style.left = arrowX + "px";
481 }
482 } 436 }
483 437
484 function _drawRulers(bounds, rulerAtRight, rulerAtBottom) 438 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
485 { 439 {
486 context.save(); 440 context.save();
487 var width = canvasWidth; 441 var width = canvasWidth;
488 var height = canvasHeight; 442 var height = canvasHeight;
489 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 443 context.strokeStyle = "rgba(128, 128, 128, 0.3)";
490 context.lineWidth = 1; 444 context.lineWidth = 1;
491 context.translate(0.5, 0.5); 445 context.translate(0.5, 0.5);
(...skipping 385 matching lines...) Expand 10 before | Expand all | Expand 10 after
877 </head> 831 </head>
878 <body class="fill"> 832 <body class="fill">
879 <div class="controls-line"> 833 <div class="controls-line">
880 <div class="message-box"><div id="paused-in-debugger"></div></div> 834 <div class="message-box"><div id="paused-in-debugger"></div></div>
881 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div> 835 <div class="button" id="resume-button" title="Resume script execution (F8)." ><div class="glyph"></div></div>
882 <div class="button" id="step-over-button" title="Step over next function cal l (F10)."><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>
883 </div> 837 </div>
884 </body> 838 </body>
885 <canvas id="canvas" class="fill"></canvas> 839 <canvas id="canvas" class="fill"></canvas>
886 <canvas id="labels-canvas" class="fill"></canvas> 840 <canvas id="labels-canvas" class="fill"></canvas>
887 <div id="tooltip-container" class="hidden"> 841 <div id="element-title">
888 <div id="element-tooltip"> 842 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></s pan>
889 <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>
890 <div id="dimensions"><span id="node-width"></span>&#xD7;<span id="node-hei ght"></span></div>
891 </div>
892 <div id="element-tooltip-arrow"></div>
893 </div> 844 </div>
894 <div id="editor" class="fill"></div> 845 <div id="editor" class="fill"></div>
895 <div id="log"></div> 846 <div id="log"></div>
896 </html> 847 </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