mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 663778 - Changes to layout view for box model highlighter r=pbrosset
This commit is contained in:
Michael Ratcliffe
parent
0d01d793aa
commit
d72a047ee5
@ -54,23 +54,23 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#margins {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
#content {
|
||||
height: 20px;
|
||||
#content,
|
||||
#borders {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
#content {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#margins,
|
||||
#padding {
|
||||
border-style: solid;
|
||||
border-width: 25px;
|
||||
}
|
||||
|
||||
#borders {
|
||||
border-width: 2px;
|
||||
box-shadow: 0 0 16px black;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#main > p {
|
||||
@ -89,55 +89,44 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.border.top {
|
||||
left: 0; top: 23px;
|
||||
width: 98px;
|
||||
}
|
||||
|
||||
.border.bottom {
|
||||
right: 0; bottom: 22px;
|
||||
width: 98px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.border.left {
|
||||
top: 42px; left: 0;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.border.right{
|
||||
bottom: 42px; right: 0;
|
||||
width: 56px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.top, .bottom {
|
||||
.top,
|
||||
.bottom {
|
||||
width: calc(100% - 2px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.padding.top {
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.padding.bottom {
|
||||
bottom: 57px;
|
||||
}
|
||||
|
||||
.border.top {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.border.bottom {
|
||||
bottom: 31px;
|
||||
}
|
||||
|
||||
.margin.top {
|
||||
top: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.margin.bottom {
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
.padding.top {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.padding.bottom {
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
.size,
|
||||
.margin.left,
|
||||
.margin.right,
|
||||
.border.left,
|
||||
.border.right,
|
||||
.padding.left,
|
||||
.padding.right {
|
||||
top: 0;
|
||||
top: 22px;
|
||||
line-height: 132px;
|
||||
}
|
||||
|
||||
@ -146,15 +135,30 @@ body {
|
||||
}
|
||||
|
||||
.margin.right,
|
||||
.margin.left {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.margin.left,
|
||||
.border.left,
|
||||
.border.right,
|
||||
.padding.right,
|
||||
.padding.left {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.padding.left {
|
||||
left: 52px;
|
||||
}
|
||||
|
||||
.padding.right {
|
||||
right: 51px;
|
||||
}
|
||||
|
||||
.border.left {
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
.border.right {
|
||||
right: 26px;
|
||||
}
|
||||
|
||||
.margin.right {
|
||||
right: 0;
|
||||
}
|
||||
@ -163,14 +167,6 @@ body {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.padding.left {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.padding.right {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@ -239,12 +239,41 @@ LayoutView.prototype = {
|
||||
|
||||
this._lastRequest = lastRequest;
|
||||
return this._lastRequest;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showBoxModel: function(options={}) {
|
||||
let toolbox = this.inspector.toolbox;
|
||||
let nodeFront = this.inspector.selection.nodeFront;
|
||||
|
||||
toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
|
||||
},
|
||||
|
||||
hideBoxModel: function() {
|
||||
let toolbox = this.inspector.toolbox;
|
||||
|
||||
toolbox.highlighterUtils.unhighlight();
|
||||
},
|
||||
};
|
||||
|
||||
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: region});
|
||||
|
||||
return false;
|
||||
}.bind(window);
|
||||
|
||||
let onmouseout = function(e) {
|
||||
tooltip.textContent = "";
|
||||
this.layoutview.hideBoxModel();
|
||||
|
||||
return false;
|
||||
}.bind(window);
|
||||
|
||||
window.setPanel = function(panel) {
|
||||
this.layoutview = new LayoutView(panel, window);
|
||||
|
||||
@ -276,11 +305,3 @@ window.onunload = function() {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function onmouseover(e) {
|
||||
tooltip.textContent = e.target.getAttribute("tooltip");
|
||||
}
|
||||
|
||||
function onmouseout(e) {
|
||||
tooltip.textContent = "";
|
||||
}
|
||||
@ -30,31 +30,31 @@
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div id="margins" tooltip="&margins.tooltip;">
|
||||
<div id="borders" tooltip="&borders.tooltip;">
|
||||
<div id="padding" tooltip="&padding.tooltip;">
|
||||
<div id="content" tooltip="&content.tooltip;">
|
||||
<div id="margins" data-box="margin" tooltip="&margins.tooltip;">
|
||||
<div id="borders" data-box="border" tooltip="&borders.tooltip;">
|
||||
<div id="padding" data-box="padding" tooltip="&padding.tooltip;">
|
||||
<div id="content" data-box="content" tooltip="&content.tooltip;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="border top"><span tooltip="border-top"></span></p>
|
||||
<p class="border right"><span tooltip="border-right"></span></p>
|
||||
<p class="border bottom"><span tooltip="border-bottom"></span></p>
|
||||
<p class="border left"><span tooltip="border-left"></span></p>
|
||||
<p class="border top"><span data-box="border" tooltip="border-top"></span></p>
|
||||
<p class="border right"><span data-box="border" tooltip="border-right"></span></p>
|
||||
<p class="border bottom"><span data-box="border" tooltip="border-bottom"></span></p>
|
||||
<p class="border left"><span data-box="border" tooltip="border-left"></span></p>
|
||||
|
||||
<p class="margin top"><span tooltip="margin-top"></span></p>
|
||||
<p class="margin right"><span tooltip="margin-right"></span></p>
|
||||
<p class="margin bottom"><span tooltip="margin-bottom"></span></p>
|
||||
<p class="margin left"><span tooltip="margin-left"></span></p>
|
||||
<p class="margin top"><span data-box="margin" tooltip="margin-top"></span></p>
|
||||
<p class="margin right"><span data-box="margin" tooltip="margin-right"></span></p>
|
||||
<p class="margin bottom"><span data-box="margin" tooltip="margin-bottom"></span></p>
|
||||
<p class="margin left"><span data-box="margin" tooltip="margin-left"></span></p>
|
||||
|
||||
<p class="padding top"><span tooltip="padding-top"></span></p>
|
||||
<p class="padding right"><span tooltip="padding-right"></span></p>
|
||||
<p class="padding bottom"><span tooltip="padding-bottom"></span></p>
|
||||
<p class="padding left"><span tooltip="padding-left"></span></p>
|
||||
<p class="padding top"><span data-box="padding" tooltip="padding-top"></span></p>
|
||||
<p class="padding right"><span data-box="padding" tooltip="padding-right"></span></p>
|
||||
<p class="padding bottom"><span data-box="padding" tooltip="padding-bottom"></span></p>
|
||||
<p class="padding left"><span data-box="padding" tooltip="padding-left"></span></p>
|
||||
|
||||
<p class="size"><span tooltip="&content.tooltip;"></span></p>
|
||||
<p class="size"><span data-box="content" tooltip="&content.tooltip;"></span></p>
|
||||
|
||||
<span class="tooltip"></span>
|
||||
|
||||
|
||||
@ -11,36 +11,40 @@
|
||||
}
|
||||
|
||||
.theme-body {
|
||||
color: hsl(210,100%,85%) !important;
|
||||
color: hsl(210,53%,45%) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: white;
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#main > .border {
|
||||
color: hsl(210,53%,45%);
|
||||
}
|
||||
|
||||
.border > span {
|
||||
background-color: hsl(210,100%,85%);
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted
|
||||
background-color: #80d4ff;
|
||||
border-color: hsl(210,100%,85%);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#padding,
|
||||
#margins {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
outline: dotted 1px hsl(210,100%,85%);
|
||||
}
|
||||
|
||||
#padding {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
border-style: solid;
|
||||
background-color: #66cc52;
|
||||
}
|
||||
|
||||
#borders {
|
||||
border-style: solid;
|
||||
background-color: #ffe431;
|
||||
border-style: dotted;
|
||||
border-color: hsl(210,100%,85%);
|
||||
box-shadow: 0 0 8px #000;
|
||||
}
|
||||
|
||||
#margins {
|
||||
background-color: #d89b28;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -11,36 +11,40 @@
|
||||
}
|
||||
|
||||
.theme-body {
|
||||
color: hsl(210,100%,85%) !important;
|
||||
color: hsl(210,53%,45%) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: white;
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#main > .border {
|
||||
color: hsl(210,53%,45%);
|
||||
}
|
||||
|
||||
.border > span {
|
||||
background-color: hsl(210,100%,85%);
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted
|
||||
background-color: #80d4ff;
|
||||
border-color: hsl(210,100%,85%);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#padding,
|
||||
#margins {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
outline: dotted 1px hsl(210,100%,85%);
|
||||
}
|
||||
|
||||
#padding {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
border-style: solid;
|
||||
background-color: #66cc52;
|
||||
}
|
||||
|
||||
#borders {
|
||||
border-style: solid;
|
||||
background-color: #ffe431;
|
||||
border-style: dotted;
|
||||
border-color: hsl(210,100%,85%);
|
||||
box-shadow: 0 0 8px #000;
|
||||
}
|
||||
|
||||
#margins {
|
||||
background-color: #d89b28;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -11,36 +11,40 @@
|
||||
}
|
||||
|
||||
.theme-body {
|
||||
color: hsl(210,100%,85%) !important;
|
||||
color: hsl(210,53%,45%) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: white;
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#main > .border {
|
||||
color: hsl(210,53%,45%);
|
||||
}
|
||||
|
||||
.border > span {
|
||||
background-color: hsl(210,100%,85%);
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-color: hsla(210,100%,85%,0.7);
|
||||
border-style: dotted
|
||||
background-color: #80d4ff;
|
||||
border-color: hsl(210,100%,85%);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
#padding,
|
||||
#margins {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
outline: dotted 1px hsl(210,100%,85%);
|
||||
}
|
||||
|
||||
#padding {
|
||||
border-color: hsla(210,100%,85%,0.2);
|
||||
border-style: solid;
|
||||
background-color: #66cc52;
|
||||
}
|
||||
|
||||
#borders {
|
||||
border-style: solid;
|
||||
background-color: #ffe431;
|
||||
border-style: dotted;
|
||||
border-color: hsl(210,100%,85%);
|
||||
box-shadow: 0 0 8px #000;
|
||||
}
|
||||
|
||||
#margins {
|
||||
background-color: #d89b28;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user