Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 17:55:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1141571 - Replace box model's old tooltip mechanism with title attributes. r=pbrosset

Browse Source
This commit is contained in:
Jan Keromnes 2015-04-14 05:59:00 +02:00
parent 109759719f
commit 3640dc402f
3 changed files with 20 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
browser/devtools/layoutview/view.css
View File

@ -169,16 +169,9 @@ body {
transform: rotate(90deg);
}
.tooltip {
position: absolute;
bottom: 0;
right: 2px;
pointer-events: none;
}
body.dim > #header > #element-position,
body.dim > #main > p,
body.dim > #main > .tooltip {
body.dim > #main > p {
visibility: hidden;
}

9
browser/devtools/layoutview/view.js
View File

@ -500,19 +500,15 @@ LayoutView.prototype = {
};
let elts;
let tooltip;
let onmouseover = function(e) {
let region = e.target.getAttribute("data-box");
tooltip.textContent = e.target.getAttribute("tooltip");
this.layoutview.showBoxModel({region});
return false;
}.bind(window);
let onmouseout = function(e) {
tooltip.textContent = "";
this.layoutview.hideBoxModel();
return false;
@ -521,9 +517,8 @@ let onmouseout = function(e) {
window.setPanel = function(panel) {
this.layoutview = new LayoutView(panel, window);
// Tooltip mechanism
elts = document.querySelectorAll("*[tooltip]");
tooltip = document.querySelector(".tooltip");
// Box model highlighter mechanism
elts = document.querySelectorAll("*[title]");
for (let i = 0; i < elts.length; i++) {
let elt = elts[i];
elt.addEventListener("mouseover", onmouseover, true);

36
browser/devtools/layoutview/view.xhtml
View File

@ -30,33 +30,31 @@
<div id="main">
<div id="margins" data-box="margin" tooltip="&margin.tooltip;">
<div id="borders" data-box="border" tooltip="&border.tooltip;">
<div id="padding" data-box="padding" tooltip="&padding.tooltip;">
<div id="content" data-box="content" tooltip="&content.tooltip;">
<div id="margins" data-box="margin" title="&margin.tooltip;">
<div id="borders" data-box="border" title="&border.tooltip;">
<div id="padding" data-box="padding" title="&padding.tooltip;">
<div id="content" data-box="content" title="&content.tooltip;">
</div>
</div>
</div>
</div>
<p class="border top"><span data-box="border" class="editable" tooltip="border-top"></span></p>
<p class="border right"><span data-box="border" class="editable" tooltip="border-right"></span></p>
<p class="border bottom"><span data-box="border" class="editable" tooltip="border-bottom"></span></p>
<p class="border left"><span data-box="border" class="editable" tooltip="border-left"></span></p>
<p class="border top"><span data-box="border" class="editable" title="border-top"></span></p>
<p class="border right"><span data-box="border" class="editable" title="border-right"></span></p>
<p class="border bottom"><span data-box="border" class="editable" title="border-bottom"></span></p>
<p class="border left"><span data-box="border" class="editable" title="border-left"></span></p>
<p class="margin top"><span data-box="margin" class="editable" tooltip="margin-top"></span></p>
<p class="margin right"><span data-box="margin" class="editable" tooltip="margin-right"></span></p>
<p class="margin bottom"><span data-box="margin" class="editable" tooltip="margin-bottom"></span></p>
<p class="margin left"><span data-box="margin" class="editable" tooltip="margin-left"></span></p>
<p class="margin top"><span data-box="margin" class="editable" title="margin-top"></span></p>
<p class="margin right"><span data-box="margin" class="editable" title="margin-right"></span></p>
<p class="margin bottom"><span data-box="margin" class="editable" title="margin-bottom"></span></p>
<p class="margin left"><span data-box="margin" class="editable" title="margin-left"></span></p>
<p class="padding top"><span data-box="padding" class="editable" tooltip="padding-top"></span></p>
<p class="padding right"><span data-box="padding" class="editable" tooltip="padding-right"></span></p>
<p class="padding bottom"><span data-box="padding" class="editable" tooltip="padding-bottom"></span></p>
<p class="padding left"><span data-box="padding" class="editable" tooltip="padding-left"></span></p>
<p class="padding top"><span data-box="padding" class="editable" title="padding-top"></span></p>
<p class="padding right"><span data-box="padding" class="editable" title="padding-right"></span></p>
<p class="padding bottom"><span data-box="padding" class="editable" title="padding-bottom"></span></p>
<p class="padding left"><span data-box="padding" class="editable" title="padding-left"></span></p>
<p class="size"><span data-box="content" tooltip="&content.tooltip;"></span></p>
<span class="tooltip"></span>
<p class="size"><span data-box="content" title="&content.tooltip;"></span></p>
</div>