wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 700036 - Put the style inspector into a xul document. r=dcamp

Browse Source 
--HG--
rename : browser/devtools/styleinspector/csshtmltree.xhtml => browser/devtools/styleinspector/csshtmltree.xul
rename : browser/devtools/styleinspector/cssruleview.xhtml => browser/devtools/styleinspector/cssruleview.xul
This commit is contained in:
Dão Gottwald 2011-11-05 12:31:00 -07:00
parent f008e40078
commit 8bfa865042
11 changed files with 70 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
browser/devtools/highlighter/inspector.jsm
View File

@ -1340,8 +1340,7 @@ InspectorUI.prototype = {
iframe.removeEventListener("load", boundLoadListener, true);
let doc = iframe.contentDocument;
this.ruleView = new CssRuleView(doc);
let body = doc.getElementById("ruleview-body");
body.appendChild(this.ruleView.element);
doc.documentElement.appendChild(this.ruleView.element);
this.ruleView.highlight(this.selection);
Services.obs.notifyObservers(null,
INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, null);
@ -1349,7 +1348,7 @@ InspectorUI.prototype = {
iframe.addEventListener("load", boundLoadListener, true);
iframe.setAttribute("src", "chrome://browser/content/devtools/cssruleview.xhtml");
iframe.setAttribute("src", "chrome://browser/content/devtools/cssruleview.xul");
},
/**

4
browser/devtools/jar.mn
View File

@ -3,8 +3,8 @@ browser.jar:
content/browser/NetworkPanel.xhtml (webconsole/NetworkPanel.xhtml)
* content/browser/scratchpad.xul (scratchpad/scratchpad.xul)
* content/browser/scratchpad.js (scratchpad/scratchpad.js)
content/browser/csshtmltree.xhtml (styleinspector/csshtmltree.xhtml)
content/browser/devtools/cssruleview.xhtml (styleinspector/cssruleview.xhtml)
content/browser/devtools/csshtmltree.xul (styleinspector/csshtmltree.xul)
content/browser/devtools/cssruleview.xul (styleinspector/cssruleview.xul)
content/browser/devtools/styleinspector.css (styleinspector/styleinspector.css)
content/browser/orion.js (sourceeditor/orion/orion.js)
content/browser/orion.css (sourceeditor/orion/orion.css)

8
browser/devtools/styleinspector/CssHtmlTree.jsm
View File

@ -69,7 +69,7 @@ function CssHtmlTree(aStyleInspector)
this.getRTLAttr = this.win.getComputedStyle(this.win.gBrowser).direction;
this.propertyViews = [];
// The document in which we display the results (csshtmltree.xhtml).
// The document in which we display the results (csshtmltree.xul).
this.styleDocument = this.styleWin.contentWindow.document;
// Nodes used in templating
@ -327,8 +327,8 @@ CssHtmlTree.prototype = {
CssHtmlTree.propertyNames = [];
// Here we build and cache a list of css properties supported by the browser
// We could use any element but let's use the main document's body
let styles = this.styleWin.contentWindow.getComputedStyle(this.styleDocument.body);
// We could use any element but let's use the main document's root element
let styles = this.styleWin.contentWindow.getComputedStyle(this.styleDocument.documentElement);
let mozProps = [];
for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
let prop = styles.item(i);
@ -414,7 +414,7 @@ CssHtmlTree.prototype = {
delete this.templateProperty;
delete this.panel;
// The document in which we display the results (csshtmltree.xhtml).
// The document in which we display the results (csshtmltree.xul).
delete this.styleDocument;
// The element that we're inspecting, and the document that it comes from.

6
browser/devtools/styleinspector/StyleInspector.jsm
View File

@ -112,7 +112,7 @@ StyleInspector.prototype = {
let boundIframeOnLoad = function loadedInitializeIframe() {
if (this.iframe &&
this.iframe.getAttribute("src") ==
"chrome://browser/content/csshtmltree.xhtml") {
"chrome://browser/content/devtools/csshtmltree.xul") {
let selectedNode = this.selectedNode || null;
this.cssHtmlTree = new CssHtmlTree(this);
this.cssLogic.highlight(selectedNode);
@ -164,7 +164,7 @@ StyleInspector.prototype = {
iframe.flex = 1;
iframe.setAttribute("tooltip", "aHTMLTooltip");
iframe.addEventListener("load", boundIframeOnLoad, true);
iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
iframe.setAttribute("src", "chrome://browser/content/devtools/csshtmltree.xul");
panel.appendChild(iframe);
popupSet.appendChild(panel);
@ -266,7 +266,7 @@ StyleInspector.prototype = {
this.selectNode(aSelection);
if (this.openDocked) {
if (!this.iframeReady) {
this.iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
this.iframe.setAttribute("src", "chrome://browser/content/devtools/csshtmltree.xul");
}
} else {
this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,

70
browser/devtools/styleinspector/csshtmltree.xhtml → browser/devtools/styleinspector/csshtmltree.xul
View File

@ -1,20 +1,4 @@
<!DOCTYPE html [
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
%htmlDTD;
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
%inspectorDTD;
<!ELEMENT loop ANY>
<!ATTLIST li foreach CDATA #IMPLIED>
<!ATTLIST div foreach CDATA #IMPLIED>
<!ATTLIST loop foreach CDATA #IMPLIED>
<!ATTLIST a target CDATA #IMPLIED>
<!ATTLIST a __pathElement CDATA #IMPLIED>
<!ATTLIST div _id CDATA #IMPLIED>
<!ATTLIST div save CDATA #IMPLIED>
<!ATTLIST table save CDATA #IMPLIED>
<!ATTLIST loop if CDATA #IMPLIED>
<!ATTLIST tr if CDATA #IMPLIED>
]>
<?xml version="1.0"?>
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1/GPL 2.0/LGPL 2.1
-
@ -52,15 +36,25 @@
- the terms of any one of the MPL, the GPL or the LGPL.
-
- ***** END LICENSE BLOCK ***** -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="chrome://browser/skin/devtools/csshtmltree.css" />
</head>
<body role="application">
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
%inspectorDTD;
<!ELEMENT loop ANY>
<!ATTLIST li foreach CDATA #IMPLIED>
<!ATTLIST div foreach CDATA #IMPLIED>
<!ATTLIST loop foreach CDATA #IMPLIED>
<!ATTLIST a target CDATA #IMPLIED>
<!ATTLIST a __pathElement CDATA #IMPLIED>
<!ATTLIST div _id CDATA #IMPLIED>
<!ATTLIST div save CDATA #IMPLIED>
<!ATTLIST table save CDATA #IMPLIED>
<!ATTLIST loop if CDATA #IMPLIED>
<!ATTLIST tr if CDATA #IMPLIED>
]>
<xul:window xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- The output from #templateRoot (below) is inserted here. -->
<div id="root"></div>
@ -91,7 +85,7 @@ To visually debug the templates without running firefox, alter the display:none
-->
<div id="templateRoot">
<xul:hbox class="header" flex="1">
<label class="userStylesLabel" dir="${getRTLAttr}">
<label class="userStylesLabel">
<input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
&userStylesLabel;
@ -107,12 +101,12 @@ To visually debug the templates without running firefox, alter the display:none
at. For data it needs an instance of CssHtmlTree.
-->
<div id="templatePath">
<span class="selectedElementLabel" dir="${getRTLAttr}">
<span class="selectedElementLabel">
&selectedElementLabel;
</span>
<!-- following broken in RTL mode, see bug 699900 -->
<ol>
<li foreach="item in ${pathElements}" dir="${getRTLAttr}">
<li foreach="item in ${pathElements}">
<a href="#" onclick="${pathClick}" __pathElement="${item.element}">
${__element.pathElement = item.element; item.display}
</a>
@ -127,11 +121,11 @@ To visually debug the templates without running firefox, alter the display:none
}
-->
<div id="templateProperty">
<div class="${className}" save="${element}" dir="${getRTLAttr}">
<div class="${className}" save="${element}">
<div class="property-header" save="${propertyHeader}"
onclick="${propertyHeaderClick}">
<div save="${matchedExpander}" class="match expander" dir="${getRTLAttr}"></div>
<div class="property-name" dir="${getRTLAttr}">${name}</div>
<div save="${matchedExpander}" class="match expander"/>
<div class="property-name">${name}</div>
<div class="helplink-container">
<a href="${link}" class="helplink" title="&helpLinkTitle;" onclick="${mdnLinkClick}">
&helpLinkTitle;
@ -140,16 +134,15 @@ To visually debug the templates without running firefox, alter the display:none
<div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
</div>
<div save="${matchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
<div save="${matchedSelectorsContainer}" class="rulelink">
</div>
<div save="${unmatchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
<div save="${unmatchedSelectorsContainer}" class="rulelink">
<div save="${unmatchedTitleBlock}" onclick="${unmatchedSelectorsClick}"
class="rule-unmatched">
<div save="${unmatchedExpander}" class="expander" dir="${getRTLAttr}"></div>
<div save="${unmatchedExpander}" class="expander"/>
<div save="${unmatchedSelectorsTitleNode}">&unmatchedSelectors;</div>
</div>
<div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"
dir="${getRTLAttr}"></div>
<div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"/>
</div>
</div>
</div>
@ -205,5 +198,4 @@ To visually debug the templates without running firefox, alter the display:none
</div>
</div>
</body>
</html>
</xul:window>

27
browser/devtools/styleinspector/cssruleview.xhtml → browser/devtools/styleinspector/cssruleview.xul
View File

@ -1,9 +1,4 @@
<!DOCTYPE html [
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
%htmlDTD;
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
%inspectorDTD;
]>
<?xml version="1.0"?>
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1/GPL 2.0/LGPL 2.1
-
@ -39,15 +34,11 @@
- the terms of any one of the MPL, the GPL or the LGPL.
-
- ***** END LICENSE BLOCK ***** -->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="chrome://browser/content/devtools/styleinspector.css" />
<link rel="stylesheet" type="text/css"
href="chrome://browser/skin/devtools/csshtmltree.css" />
</head>
<body role="application" id="ruleview-body"></body>
</html>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://browser/content/devtools/styleinspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
%inspectorDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>

5
browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js
View File

@ -46,15 +46,14 @@ function startTest()
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let testElement = doc.getElementById("testid");
ruleDialog = openDialog("chrome://browser/content/devtools/cssruleview.xhtml",
ruleDialog = openDialog("chrome://browser/content/devtools/cssruleview.xul",
"cssruleviewtest",
"width=200,height=350");
ruleDialog.addEventListener("load", function onLoad(evt) {
ruleDialog.removeEventListener("load", onLoad);
let doc = ruleDialog.document;
let body = doc.getElementById("ruleview-body");
ruleView = new CssRuleView(doc);
body.appendChild(ruleView.element);
doc.documentElement.appendChild(ruleView.element);
ruleView.highlight(testElement);
waitForFocus(testCancelNew, ruleDialog);
}, true);

5
browser/devtools/webconsole/HUDService.jsm
View File

@ -4648,7 +4648,7 @@ function JSTermHelper(aJSTerm)
});
let iframe = createAndAppendElement(panel, "iframe", {
src: "chrome://browser/content/devtools/cssruleview.xhtml",
src: "chrome://browser/content/devtools/cssruleview.xul",
flex: "1",
});
@ -4656,8 +4656,7 @@ function JSTermHelper(aJSTerm)
panel.removeEventListener("load", onLoad, true);
let doc = iframe.contentDocument;
let view = new CssRuleView(doc);
let body = doc.getElementById("ruleview-body");
body.appendChild(view.element);
doc.documentElement.appendChild(view.element);
view.highlight(aNode);
}, true);

19
browser/themes/gnomestripe/browser/devtools/csshtmltree.css
View File

@ -37,19 +37,10 @@
*
* ***** END LICENSE BLOCK ***** */
html {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
:root {
-moz-appearance: none;
background: -moz-Field;
margin: 0;
width: 100%;
height: 100%;
display: -moz-box;
-moz-box-orient: vertical;
color: -moz-FieldText;
}
#root {
@ -152,7 +143,7 @@ body {
background: url("chrome://browser/skin/devtools/arrows.png") 48px 0;
}
.expander[dir="rtl"] {
.expander:-moz-locale-dir(rtl) {
float: right;
background-position: 40px 0;
}
@ -314,7 +305,7 @@ body {
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
.ruleview-expander:-moz-locale-dir(rtl) {
background-position: 16px 0;
}

19
browser/themes/pinstripe/browser/devtools/csshtmltree.css
View File

@ -37,19 +37,10 @@
*
* ***** END LICENSE BLOCK ***** */
html {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
:root {
-moz-appearance: none;
background: -moz-Field;
margin: 0;
width: 100%;
height: 100%;
display: -moz-box;
-moz-box-orient: vertical;
color: -moz-FieldText;
}
#root {
@ -151,7 +142,7 @@ body {
-moz-margin-end: 5px;
}
.expander[dir="rtl"] {
.expander:-moz-locale-dir(rtl) {
float: right;
}
@ -312,7 +303,7 @@ body {
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
.ruleview-expander:-moz-locale-dir(rtl) {
background-position: 16px 0;
}

19
browser/themes/winstripe/browser/devtools/csshtmltree.css
View File

@ -37,19 +37,10 @@
*
* ***** END LICENSE BLOCK ***** */
html {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
:root {
-moz-appearance: none;
background: -moz-Field;
margin: 0;
width: 100%;
height: 100%;
display: -moz-box;
-moz-box-orient: vertical;
color: -moz-FieldText;
}
#root {
@ -152,7 +143,7 @@ body {
background-image: url("chrome://global/skin/tree/twisty-clsd.png");
}
.expander[dir="rtl"] {
.expander:-moz-locale-dir(rtl) {
float: right;
}
@ -313,7 +304,7 @@ body {
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
.ruleview-expander:-moz-locale-dir(rtl) {
background-position: 16px 0;
}