mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 694958 - [highlighter] [infobar] limit the size of the infobar. r=dao
This commit is contained in:
Blake Winton
parent
6753540f02
commit
c52c3d6265
@ -48,6 +48,7 @@
|
||||
|
||||
#highlighter-nodeinfobar-container {
|
||||
position: absolute;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-container:not([disable-transitions]) {
|
||||
@ -60,15 +61,17 @@
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-container[locked] > #highlighter-nodeinfobar {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-id,
|
||||
.highlighter-nodeinfobar-class,
|
||||
#highlighter-nodeinfobar-tagname {
|
||||
html|*#highlighter-nodeinfobar-id,
|
||||
html|*#highlighter-nodeinfobar-classes,
|
||||
html|*#highlighter-nodeinfobar-tagname {
|
||||
-moz-user-select: text;
|
||||
cursor: text;
|
||||
}
|
||||
@ -89,10 +92,6 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-id:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-tagname {
|
||||
html|*#highlighter-nodeinfobar-tagname {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
@ -409,11 +409,11 @@ Highlighter.prototype = {
|
||||
*
|
||||
* <box id="highlighter-nodeinfobar-container">
|
||||
* <box id="Highlighter-nodeinfobar-arrow-top"/>
|
||||
* <vbox id="highlighter-nodeinfobar">
|
||||
* <label id="highlighter-nodeinfobar-tagname"/>
|
||||
* <label id="highlighter-nodeinfobar-id"/>
|
||||
* <vbox id="highlighter-nodeinfobar-classes"/>
|
||||
* </vbox>
|
||||
* <hbox id="highlighter-nodeinfobar">
|
||||
* <xhtml:span id="highlighter-nodeinfobar-tagname"/>
|
||||
* <xhtml:span id="highlighter-nodeinfobar-id"/>
|
||||
* <xhtml:span id="highlighter-nodeinfobar-classes"/>
|
||||
* </hbox>
|
||||
* <box id="Highlighter-nodeinfobar-arrow-bottom"/>
|
||||
* </box>
|
||||
*
|
||||
@ -438,16 +438,16 @@ Highlighter.prototype = {
|
||||
arrowBoxBottom.className = "highlighter-nodeinfobar-arrow";
|
||||
arrowBoxBottom.id = "highlighter-nodeinfobar-arrow-bottom";
|
||||
|
||||
let tagNameLabel = this.chromeDoc.createElement("label");
|
||||
let tagNameLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
|
||||
tagNameLabel.id = "highlighter-nodeinfobar-tagname";
|
||||
tagNameLabel.className = "plain";
|
||||
|
||||
let idLabel = this.chromeDoc.createElement("label");
|
||||
let idLabel = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
|
||||
idLabel.id = "highlighter-nodeinfobar-id";
|
||||
idLabel.className = "plain";
|
||||
|
||||
let classesBox = this.chromeDoc.createElement("hbox");
|
||||
let classesBox = this.chromeDoc.createElementNS("http://www.w3.org/1999/xhtml", "span");
|
||||
classesBox.id = "highlighter-nodeinfobar-classes";
|
||||
// Add some content to force a better boundingClientRect down below.
|
||||
classesBox.textContent = " ";
|
||||
|
||||
nodeInfobar.appendChild(tagNameLabel);
|
||||
nodeInfobar.appendChild(idLabel);
|
||||
@ -540,20 +540,9 @@ Highlighter.prototype = {
|
||||
|
||||
// Classes
|
||||
let classes = this.nodeInfo.classesBox;
|
||||
while (classes.hasChildNodes()) {
|
||||
classes.removeChild(classes.firstChild);
|
||||
}
|
||||
|
||||
if (this.node.className) {
|
||||
let fragment = this.chromeDoc.createDocumentFragment();
|
||||
for (let i = 0; i < this.node.classList.length; i++) {
|
||||
let classLabel = this.chromeDoc.createElement("label");
|
||||
classLabel.className = "highlighter-nodeinfobar-class plain";
|
||||
classLabel.textContent = "." + this.node.classList[i];
|
||||
fragment.appendChild(classLabel);
|
||||
}
|
||||
classes.appendChild(fragment);
|
||||
}
|
||||
classes.textContent = this.node.classList.length ?
|
||||
"." + Array.join(this.node.classList, ".") : "";
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -25,7 +25,7 @@ function test()
|
||||
function setupInfobarTest()
|
||||
{
|
||||
nodes = [
|
||||
{node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1 .class2"},
|
||||
{node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1.class2"},
|
||||
{node: doc.querySelector("#vertical"), position: "overlap", tag: "DIV", id: "#vertical", classes: ""},
|
||||
{node: doc.querySelector("#bottom"), position: "top", tag: "DIV", id: "#bottom", classes: ""},
|
||||
{node: doc.querySelector("body"), position: "overlap", tag: "BODY", id: "", classes: ""},
|
||||
@ -86,14 +86,7 @@ function test()
|
||||
is(idLabel.textContent, nodes[cursor].id, "node " + cursor + ": id matches.");
|
||||
|
||||
let classesBox = document.getElementById("highlighter-nodeinfobar-classes");
|
||||
|
||||
let displayedClasses = [];
|
||||
for (let i = 0; i < classesBox.childNodes.length; i++) {
|
||||
displayedClasses.push(classesBox.childNodes[i].textContent);
|
||||
}
|
||||
displayedClasses = displayedClasses.join(" ");
|
||||
|
||||
is(displayedClasses, nodes[cursor].classes, "node " + cursor + ": classes match.");
|
||||
is(classesBox.textContent, nodes[cursor].classes, "node " + cursor + ": classes match.");
|
||||
}
|
||||
|
||||
function finishUp() {
|
||||
|
||||
@ -2019,21 +2019,18 @@ panel[dimmed="true"] {
|
||||
|
||||
/* Highlighter - Node Infobar - text */
|
||||
|
||||
#highlighter-nodeinfobar-tagname {
|
||||
html|*#highlighter-nodeinfobar-tagname {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-id {
|
||||
html|*#highlighter-nodeinfobar-id {
|
||||
color: hsl(90, 79%, 52%);
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-class {
|
||||
color: hsl(200, 100%, 65%);
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar - box & arrow */
|
||||
|
||||
#highlighter-nodeinfobar {
|
||||
color: hsl(200, 100%, 65%);
|
||||
border: 1px solid hsla(210, 19%, 63%, .5);
|
||||
border-radius: 3px;
|
||||
padding: 8px 16px;
|
||||
|
||||
@ -2768,21 +2768,18 @@ panel[dimmed="true"] {
|
||||
|
||||
/* Highlighter - Node Infobar - text */
|
||||
|
||||
#highlighter-nodeinfobar-tagname {
|
||||
html|*#highlighter-nodeinfobar-tagname {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-id {
|
||||
html|*#highlighter-nodeinfobar-id {
|
||||
color: hsl(90, 79%, 52%);
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-class {
|
||||
color: hsl(200, 100%, 65%);
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar - box & arrow */
|
||||
|
||||
#highlighter-nodeinfobar {
|
||||
color: hsl(200, 100%, 65%);
|
||||
border: 1px solid hsla(210, 19%, 63%, .5);
|
||||
border-radius: 3px;
|
||||
padding: 8px 16px;
|
||||
|
||||
@ -2699,21 +2699,18 @@ panel[dimmed="true"] {
|
||||
|
||||
/* Highlighter - Node Infobar - text */
|
||||
|
||||
#highlighter-nodeinfobar-tagname {
|
||||
html|*#highlighter-nodeinfobar-tagname {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#highlighter-nodeinfobar-id {
|
||||
html|*#highlighter-nodeinfobar-id {
|
||||
color: hsl(90, 79%, 52%);
|
||||
}
|
||||
|
||||
.highlighter-nodeinfobar-class {
|
||||
color: hsl(200, 100%, 65%);
|
||||
}
|
||||
|
||||
/* Highlighter - Node Infobar - box & arrow */
|
||||
|
||||
#highlighter-nodeinfobar {
|
||||
color: hsl(200, 100%, 65%);
|
||||
border: 1px solid hsla(210, 19%, 63%, .5);
|
||||
border-radius: 3px;
|
||||
padding: 8px 16px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user