mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 704132 - Style Inspector's left column should auto-fit text contents. r=dao r=paul
This commit is contained in:
Michael Ratcliffe
parent
c6e766666f
commit
81abadc334
@ -289,7 +289,8 @@ CssHtmlTree.prototype = {
|
||||
return false;
|
||||
}
|
||||
let propView = new PropertyView(this, aPropertyName);
|
||||
fragment.appendChild(propView.build());
|
||||
fragment.appendChild(propView.buildMain());
|
||||
fragment.appendChild(propView.buildSelectorContainer());
|
||||
if (propView.visible) {
|
||||
this.numVisibleProperties++;
|
||||
}
|
||||
@ -611,7 +612,7 @@ PropertyView.prototype = {
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
get className()
|
||||
get propertyHeaderClassName()
|
||||
{
|
||||
if (this.visible) {
|
||||
this.tree._darkStripe = !this.tree._darkStripe;
|
||||
@ -622,16 +623,31 @@ PropertyView.prototype = {
|
||||
return "property-view-hidden";
|
||||
},
|
||||
|
||||
build: function PropertyView_build()
|
||||
/**
|
||||
* Returns the className that should be assigned to the propertyView content
|
||||
* container.
|
||||
* @return string
|
||||
*/
|
||||
get propertyContentClassName()
|
||||
{
|
||||
if (this.visible) {
|
||||
let darkValue = this.tree._darkStripe ?
|
||||
"property-content darkrow" : "property-content";
|
||||
return darkValue;
|
||||
}
|
||||
return "property-content-hidden";
|
||||
},
|
||||
|
||||
buildMain: function PropertyView_buildMain()
|
||||
{
|
||||
let doc = this.tree.doc;
|
||||
this.element = doc.createElementNS(HTML_NS, "div");
|
||||
this.element.setAttribute("class", this.className);
|
||||
this.element = doc.createElementNS(HTML_NS, "tr");
|
||||
this.element.setAttribute("class", this.propertyHeaderClassName);
|
||||
this.element.addEventListener("click", this.propertyRowClick.bind(this), false);
|
||||
|
||||
this.propertyHeader = doc.createElementNS(XUL_NS, "hbox");
|
||||
this.propertyHeader = doc.createElementNS(HTML_NS, "td");
|
||||
this.element.appendChild(this.propertyHeader);
|
||||
this.propertyHeader.setAttribute("class", "property-header");
|
||||
this.propertyHeader.addEventListener("click", this.propertyHeaderClick.bind(this), false);
|
||||
|
||||
this.matchedExpander = doc.createElementNS(HTML_NS, "div");
|
||||
this.propertyHeader.appendChild(this.matchedExpander);
|
||||
@ -642,8 +658,8 @@ PropertyView.prototype = {
|
||||
name.setAttribute("class", "property-name");
|
||||
name.textContent = this.name;
|
||||
|
||||
let helpcontainer = doc.createElementNS(HTML_NS, "div");
|
||||
this.propertyHeader.appendChild(helpcontainer);
|
||||
let helpcontainer = doc.createElementNS(HTML_NS, "td");
|
||||
this.element.appendChild(helpcontainer);
|
||||
helpcontainer.setAttribute("class", "helplink-container");
|
||||
|
||||
let helplink = doc.createElementNS(HTML_NS, "a");
|
||||
@ -653,25 +669,35 @@ PropertyView.prototype = {
|
||||
helplink.textContent = CssHtmlTree.HELP_LINK_TITLE;
|
||||
helplink.addEventListener("click", this.mdnLinkClick.bind(this), false);
|
||||
|
||||
this.valueNode = doc.createElementNS(HTML_NS, "div");
|
||||
this.propertyHeader.appendChild(this.valueNode);
|
||||
this.valueNode = doc.createElementNS(HTML_NS, "td");
|
||||
this.element.appendChild(this.valueNode);
|
||||
this.valueNode.setAttribute("class", "property-value");
|
||||
this.valueNode.setAttribute("dir", "ltr");
|
||||
this.valueNode.textContent = this.value;
|
||||
|
||||
this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "div");
|
||||
this.element.appendChild(this.matchedSelectorsContainer);
|
||||
this.matchedSelectorsContainer.setAttribute("class", "rulelink");
|
||||
|
||||
return this.element;
|
||||
},
|
||||
|
||||
buildSelectorContainer: function PropertyView_buildSelectorContainer()
|
||||
{
|
||||
let doc = this.tree.doc;
|
||||
let element = doc.createElementNS(HTML_NS, "tr");
|
||||
element.setAttribute("class", this.propertyContentClassName);
|
||||
this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "td");
|
||||
this.matchedSelectorsContainer.setAttribute("colspan", "0");
|
||||
this.matchedSelectorsContainer.setAttribute("class", "rulelink");
|
||||
element.appendChild(this.matchedSelectorsContainer);
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh the panel's CSS property value.
|
||||
*/
|
||||
refresh: function PropertyView_refresh()
|
||||
{
|
||||
this.element.className = this.className;
|
||||
this.element.className = this.propertyHeaderClassName;
|
||||
this.element.nextElementSibling.className = this.propertyContentClassName;
|
||||
|
||||
if (this.prevViewedElement != this.tree.viewedElement) {
|
||||
this._matchedSelectorViews = null;
|
||||
@ -681,7 +707,7 @@ PropertyView.prototype = {
|
||||
|
||||
if (!this.tree.viewedElement || !this.visible) {
|
||||
this.valueNode.innerHTML = "";
|
||||
this.matchedSelectorsContainer.hidden = true;
|
||||
this.matchedSelectorsContainer.parentNode.hidden = true;
|
||||
this.matchedSelectorsContainer.innerHTML = "";
|
||||
this.matchedExpander.removeAttribute("open");
|
||||
return;
|
||||
@ -698,12 +724,12 @@ PropertyView.prototype = {
|
||||
refreshMatchedSelectors: function PropertyView_refreshMatchedSelectors()
|
||||
{
|
||||
let hasMatchedSelectors = this.hasMatchedSelectors;
|
||||
this.matchedSelectorsContainer.hidden = !hasMatchedSelectors;
|
||||
this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
|
||||
|
||||
if (hasMatchedSelectors) {
|
||||
this.propertyHeader.classList.add("expandable");
|
||||
this.propertyHeader.parentNode.classList.add("expandable");
|
||||
} else {
|
||||
this.propertyHeader.classList.remove("expandable");
|
||||
this.propertyHeader.parentNode.classList.remove("expandable");
|
||||
}
|
||||
|
||||
if (this.matchedExpanded && hasMatchedSelectors) {
|
||||
@ -802,7 +828,7 @@ PropertyView.prototype = {
|
||||
* event. If the class name is "helplink" then the event is allowed to bubble
|
||||
* to the mdn link icon.
|
||||
*/
|
||||
propertyHeaderClick: function PropertyView_propertyHeaderClick(aEvent)
|
||||
propertyRowClick: function PropertyView_propertyRowClick(aEvent)
|
||||
{
|
||||
if (aEvent.target.className != "helplink") {
|
||||
this.matchedExpanded = !this.matchedExpanded;
|
||||
|
||||
@ -69,8 +69,8 @@
|
||||
</div>
|
||||
|
||||
<!-- The output from #templateProperty (below) is appended here. -->
|
||||
<div id="propertyContainer">
|
||||
</div>
|
||||
<table id="propertyContainer">
|
||||
</table>
|
||||
|
||||
<xul:hbox id="footer">
|
||||
<xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
|
||||
|
||||
@ -51,17 +51,9 @@
|
||||
|
||||
|
||||
.property-header {
|
||||
padding: 4px;
|
||||
-moz-padding-start: 0;
|
||||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
padding: 5px 0;
|
||||
white-space: nowrap;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
@ -77,11 +69,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.helplink-container {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.helplink {
|
||||
display: block;
|
||||
height: 14px;
|
||||
@ -90,25 +77,25 @@
|
||||
-moz-padding-start: 14px;
|
||||
background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
|
||||
-moz-margin-end: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.property-header:not(:hover) > .helplink-container {
|
||||
.property-view:not(:hover) > .helplink-container {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expander {
|
||||
-moz-appearance: treetwisty;
|
||||
-moz-margin-start: 10px;
|
||||
padding-top: 12px;
|
||||
-moz-margin-start: 5px;
|
||||
-moz-margin-end: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.expander[open] {
|
||||
@ -123,25 +110,25 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable > .match {
|
||||
.expandable > .property-header > .match {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
font-size: 12px;
|
||||
color: -moz-FieldText;
|
||||
width: 220px;
|
||||
display: inline-block;
|
||||
}
|
||||
.property-value {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
color: grey;
|
||||
vertical-align: text-top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-view-hidden {
|
||||
.property-view-hidden,
|
||||
.property-content-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -153,7 +140,8 @@
|
||||
/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
|
||||
.rule-text {
|
||||
direction: ltr;
|
||||
-moz-padding-start: 15px;
|
||||
padding: 0;
|
||||
-moz-padding-start: 20px;
|
||||
}
|
||||
|
||||
.bestmatch {
|
||||
@ -165,15 +153,13 @@
|
||||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-flex: 1;
|
||||
overflow-y: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.darkrow {
|
||||
@ -189,7 +175,6 @@
|
||||
.headerControls {
|
||||
color: -moz-dialogtext;
|
||||
background-color: -moz-dialog;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.onlyuserstyles {
|
||||
@ -197,14 +182,6 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.searchfield {
|
||||
-moz-margin-start: 10px;
|
||||
}
|
||||
|
||||
.styleinspector-legend {
|
||||
-moz-margin-start: 12px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid -moz-dialog;
|
||||
}
|
||||
|
||||
@ -51,17 +51,9 @@
|
||||
|
||||
|
||||
.property-header {
|
||||
padding: 4px;
|
||||
-moz-padding-start: 0;
|
||||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
padding: 5px 0;
|
||||
white-space: nowrap;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
@ -77,11 +69,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.helplink-container {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.helplink {
|
||||
display: block;
|
||||
height: 14px;
|
||||
@ -90,27 +77,27 @@
|
||||
-moz-padding-start: 14px;
|
||||
background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
|
||||
-moz-margin-end: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.property-header:not(:hover) > .helplink-container {
|
||||
.property-view:not(:hover) > .helplink-container {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expander {
|
||||
-moz-appearance: treetwisty;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding-top: 12px;
|
||||
-moz-margin-start: 5px;
|
||||
-moz-margin-end: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.expander[open] {
|
||||
@ -125,25 +112,25 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable > .match {
|
||||
.expandable > .property-header > .match {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
font-size: 12px;
|
||||
color: -moz-FieldText;
|
||||
width: 220px;
|
||||
display: inline-block;
|
||||
}
|
||||
.property-value {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
color: grey;
|
||||
vertical-align: text-top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-view-hidden {
|
||||
.property-view-hidden,
|
||||
.property-content-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -155,7 +142,8 @@
|
||||
/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
|
||||
.rule-text {
|
||||
direction: ltr;
|
||||
-moz-padding-start: 15px;
|
||||
padding: 0;
|
||||
-moz-padding-start: 20px;
|
||||
}
|
||||
|
||||
.bestmatch {
|
||||
@ -167,15 +155,13 @@
|
||||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-flex: 1;
|
||||
overflow-y: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.darkrow {
|
||||
@ -191,7 +177,6 @@
|
||||
.headerControls {
|
||||
color: -moz-dialogtext;
|
||||
background-color: -moz-dialog;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.onlyuserstyles {
|
||||
@ -199,14 +184,6 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.searchfield {
|
||||
-moz-margin-start: 10px;
|
||||
}
|
||||
|
||||
.styleinspector-legend {
|
||||
-moz-margin-start: 12px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid -moz-dialog;
|
||||
}
|
||||
|
||||
@ -50,17 +50,9 @@
|
||||
}
|
||||
|
||||
.property-header {
|
||||
padding: 4px;
|
||||
-moz-padding-start: 0;
|
||||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.rule-unmatched {
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
-moz-padding-start: 4px;
|
||||
-moz-padding-end: 0;
|
||||
padding: 5px 0;
|
||||
white-space: nowrap;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
@ -76,11 +68,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.helplink-container {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.helplink {
|
||||
display: block;
|
||||
height: 14px;
|
||||
@ -89,19 +76,16 @@
|
||||
-moz-padding-start: 14px;
|
||||
background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
|
||||
-moz-margin-end: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.property-header:not(:hover) > .helplink-container {
|
||||
.property-view:not(:hover) > .helplink-container {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.unmatchedSelectorTable {
|
||||
-moz-margin-start: 15px;
|
||||
}
|
||||
|
||||
.rulelink {
|
||||
color: -moz-dialogtext;
|
||||
-moz-margin-start: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expander {
|
||||
@ -110,6 +94,8 @@
|
||||
-moz-margin-start: 5px;
|
||||
-moz-margin-end: 5px;
|
||||
background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.expander[open] {
|
||||
@ -124,25 +110,25 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable > .match {
|
||||
.expandable > .property-header > .match {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.only-unmatched {
|
||||
-moz-margin-start: 0;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
font-size: 12px;
|
||||
color: -moz-FieldText;
|
||||
width: 220px;
|
||||
display: inline-block;
|
||||
}
|
||||
.property-value {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
color: grey;
|
||||
vertical-align: text-top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-view-hidden {
|
||||
.property-view-hidden,
|
||||
.property-content-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -154,7 +140,8 @@
|
||||
/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
|
||||
.rule-text {
|
||||
direction: ltr;
|
||||
-moz-padding-start: 15px;
|
||||
padding: 0;
|
||||
-moz-padding-start: 20px;
|
||||
}
|
||||
|
||||
.bestmatch {
|
||||
@ -166,15 +153,13 @@
|
||||
.parentmatch {
|
||||
color: #666;
|
||||
}
|
||||
.unmatched {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
display: -moz-box;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-flex: 1;
|
||||
overflow-y: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.darkrow {
|
||||
@ -190,7 +175,6 @@
|
||||
.headerControls {
|
||||
color: -moz-dialogtext;
|
||||
background-color: -moz-dialog;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.onlyuserstyles {
|
||||
@ -198,14 +182,6 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.searchfield {
|
||||
-moz-margin-start: 10px;
|
||||
}
|
||||
|
||||
.styleinspector-legend {
|
||||
-moz-margin-start: 12px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid -moz-dialog;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user