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 693887 - Implement a rule-centric view for the style inspector. r=robcee, r=dao

Browse Source
This commit is contained in:
Dave Camp 2011-11-01 18:06:48 -07:00
parent 67aea4c33b
commit 3541ba3884
15 changed files with 2203 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
browser/devtools/jar.mn
View File

@ -4,7 +4,8 @@ browser.jar:
* 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/styleinspector.css (styleinspector/styleinspector.css)
content/browser/orion.js (sourceeditor/orion/orion.js)
content/browser/orion.css (sourceeditor/orion/orion.css)
content/browser/orion-mozilla.css (sourceeditor/orion/mozilla.css)

56
browser/devtools/styleinspector/CssLogic.jsm
View File

@ -820,6 +820,36 @@ CssLogic.sheetMediaAllowed = function CssLogic_sheetMediaAllowed(aDomObject)
return result;
};
/**
* Return a shortened version of a style sheet's source.
*
* @param {CSSStyleSheet} aSheet the DOM object for the style sheet.
*/
CssLogic.shortSource = function CssLogic_shortSource(aSheet)
{
// Use a string like "inline" if there is no source href
if (!aSheet || !aSheet.href) {
return CssLogic.l10n("rule.sourceInline");
}
// We try, in turn, the filename, filePath, query string, whole thing
let url = Services.io.newURI(aSheet.href, null, null);
url = url.QueryInterface(Ci.nsIURL);
if (url.fileName) {
return url.fileName;
}
if (url.filePath) {
return url.filePath;
}
if (url.query) {
return url.query;
}
return this.domSheet.href;
}
/**
* A safe way to access cached bits of information about a stylesheet.
*
@ -885,31 +915,7 @@ CssSheet.prototype = {
return this._shortSource;
}
// Use a string like "inline" if there is no source href
if (!this.domSheet.href) {
this._shortSource = CssLogic.l10n("rule.sourceInline");
return this._shortSource;
}
// We try, in turn, the filename, filePath, query string, whole thing
let url = Services.io.newURI(this.domSheet.href, null, null);
url = url.QueryInterface(Ci.nsIURL);
if (url.fileName) {
this._shortSource = url.fileName;
return this._shortSource;
}
if (url.filePath) {
this._shortSource = url.filePath;
return this._shortSource;
}
if (url.query) {
this._shortSource = url.query;
return this._shortSource;
}
this._shortSource = this.domSheet.href;
this._shortSource = CssLogic.shortSource(this.domSheet);
return this._shortSource;
},

1248
browser/devtools/styleinspector/CssRuleView.jsm Normal file
View File

File diff suppressed because it is too large Load Diff

53
browser/devtools/styleinspector/cssruleview.xhtml Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html [
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
%htmlDTD;
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/styleinspector.dtd">
%inspectorDTD;
]>
<!-- ***** BEGIN LICENSE BLOCK *****
- Version: MPL 1.1/GPL 2.0/LGPL 2.1
-
- The contents of this file are subject to the Mozilla Public License Version
- 1.1 (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
- http://www.mozilla.org/MPL/
-
- Software distributed under the License is distributed on an "AS IS" basis,
- WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- for the specific language governing rights and limitations under the
- License.
-
- The Original Code is the Mozilla Inspector Module.
-
- The Initial Developer of the Original Code is The Mozilla Foundation.
- Portions created by the Initial Developer are Copyright (C) 2011
- the Initial Developer. All Rights Reserved.
-
- Contributor(s):
- Dave Camp (dcamp@mozilla.com) (original author)
-
- Alternatively, the contents of this file may be used under the terms of
- either the GNU General Public License Version 2 or later (the "GPL"), or
- the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- in which case the provisions of the GPL or the LGPL are applicable instead
- of those above. If you wish to allow use of your version of this file only
- under the terms of either the GPL or the LGPL, and not to allow others to
- use your version of this file under the terms of the MPL, indicate your
- decision by deleting the provisions above and replace them with the notice
- and other provisions required by the LGPL or the GPL. If you do not delete
- the provisions above, a recipient may use your version of this file under
- 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>

40
browser/devtools/styleinspector/styleinspector.css Normal file
View File

@ -0,0 +1,40 @@
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is the Mozilla Inspector Module.
*
* The Initial Developer of the Original Code is
* The Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Dave Camp <dcamp@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
.ruleview-computedlist:not(.styleinspector-open) {
display: none;
}

4
browser/devtools/styleinspector/test/browser/Makefile.in
View File

@ -52,6 +52,10 @@ _BROWSER_TEST_FILES = \
browser_styleinspector_bug_672746_default_styles.js \
browser_styleinspector_bug_672744_search_filter.js \
browser_bug_692400_element_style.js \
browser_ruleview_editor.js \
browser_ruleview_manipulation.js \
browser_ruleview_override.js \
browser_ruleview_ui.js \
head.js \
$(NULL)

121
browser/devtools/styleinspector/test/browser/browser_ruleview_editor.js Normal file
View File

@ -0,0 +1,121 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
Cu.import("resource:///modules/devtools/CssRuleView.jsm");
let doc = content.document;
function expectDone(aValue, aCommit, aNext)
{
return function(aDoneValue, aDoneCommit) {
dump("aDoneValue: " + aDoneValue + " commit: " + aDoneCommit + "\n");
is(aDoneValue, aValue, "Should get expected value");
is(aDoneCommit, aDoneCommit, "Should get expected commit value");
aNext();
}
}
function clearBody()
{
doc.body.innerHTML = "";
}
function createSpan()
{
let span = doc.createElement("span");
span.setAttribute("tabindex", "0");
span.textContent = "Edit Me!";
doc.body.appendChild(span);
return span;
}
function testReturnCommit()
{
clearBody();
let span = createSpan();
_editableField({
element: span,
initial: "explicit initial",
start: function() {
is(span.inplaceEditor.input.value, "explicit initial", "Explicit initial value should be used.");
span.inplaceEditor.input.value = "Test Value";
EventUtils.sendKey("return", span.inplaceEditor.input);
},
done: expectDone("Test Value", true, testBlurCommit)
});
span.focus();
}
function testBlurCommit()
{
clearBody();
let span = createSpan();
_editableField({
element: span,
start: function() {
is(span.inplaceEditor.input.value, "Edit Me!", "textContent of the span used.");
span.inplaceEditor.input.value = "Test Value";
span.inplaceEditor.input.blur();
},
done: expectDone("Test Value", true, testAdvanceCharCommit)
});
span.focus();
}
function testAdvanceCharCommit()
{
clearBody();
let span = createSpan();
_editableField({
element: span,
advanceChars: ":",
start: function() {
let input = span.inplaceEditor.input;
for each (let ch in "Test:") {
EventUtils.sendChar(ch, input);
}
},
done: expectDone("Test", true, testEscapeCancel)
});
span.focus();
}
function testEscapeCancel()
{
clearBody();
let span = createSpan();
_editableField({
element: span,
initial: "initial text",
start: function() {
span.inplaceEditor.input.value = "Test Value";
EventUtils.sendKey("escape", span.inplaceEditor.input);
},
done: expectDone("initial text", false, finishTest)
});
span.focus();
}
function finishTest()
{
doc = null;
gBrowser.removeCurrentTab();
finish();
}
function test()
{
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
doc = content.document;
waitForFocus(testReturnCommit, content);
}, true);
content.location = "data:text/html,inline editor tests";
}

70
browser/devtools/styleinspector/test/browser/browser_ruleview_manipulation.js Normal file
View File

@ -0,0 +1,70 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
Cu.import("resource:///modules/devtools/CssRuleView.jsm");
let doc;
function simpleOverride()
{
doc.body.innerHTML = '<div id="testid">Styled Node</div>';
let element = doc.getElementById("testid");
let elementStyle = new _ElementStyle(element);
let elementRule = elementStyle.rules[0];
let firstProp = elementRule.createProperty("background-color", "green", "");
let secondProp = elementRule.createProperty("background-color", "blue", "");
is(elementRule.textProps[0], firstProp, "Rules should be in addition order.");
is(elementRule.textProps[1], secondProp, "Rules should be in addition order.");
is(element.style.getPropertyValue("background-color"), "blue", "Second property should have been used.");
secondProp.remove();
is(element.style.getPropertyValue("background-color"), "green", "After deleting second property, first should be used.");
secondProp = elementRule.createProperty("background-color", "blue", "");
is(element.style.getPropertyValue("background-color"), "blue", "New property should be used.");
is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
secondProp.setEnabled(false);
is(element.style.getPropertyValue("background-color"), "green", "After disabling second property, first value should be used");
firstProp.setEnabled(false);
is(element.style.getPropertyValue("background-color"), "", "After disabling both properties, value should be empty.");
secondProp.setEnabled(true);
is(element.style.getPropertyValue("background-color"), "blue", "Value should be set correctly after re-enabling");
firstProp.setEnabled(true);
is(element.style.getPropertyValue("background-color"), "blue", "Re-enabling an earlier property shouldn't make it override a later property.");
is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
firstProp.setValue("purple", "");
is(element.style.getPropertyValue("background-color"), "blue", "Modifying an earlier property shouldn't override a later property.");
finishTest();
}
function finishTest()
{
doc = null;
gBrowser.removeCurrentTab();
finish();
}
function test()
{
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
doc = content.document;
waitForFocus(simpleOverride, content);
}, true);
content.location = "data:text/html,basic style inspector tests";
}

134
browser/devtools/styleinspector/test/browser/browser_ruleview_override.js Normal file
View File

@ -0,0 +1,134 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
Cu.import("resource:///modules/devtools/CssRuleView.jsm");
let doc;
function simpleOverride()
{
let style = '' +
'#testid {' +
' background-color: blue;' +
'} ' +
'.testclass {' +
' background-color: green;' +
'}';
let styleNode = addStyle(doc, style);
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let elementStyle = new _ElementStyle(doc.getElementById("testid"));
let idRule = elementStyle.rules[1];
let idProp = idRule.textProps[0];
is(idProp.name, "background-color", "First ID prop should be background-color");
ok(!idProp.overridden, "ID prop should not be overridden.");
let classRule = elementStyle.rules[2];
let classProp = classRule.textProps[0];
is(classProp.name, "background-color", "First class prop should be background-color");
ok(classProp.overridden, "Class property should be overridden.");
// Override background-color by changing the element style.
let elementRule = elementStyle.rules[0];
elementRule.createProperty("background-color", "purple", "");
let elementProp = elementRule.textProps[0];
is(classProp.name, "background-color", "First element prop should now be background-color");
ok(!elementProp.overridden, "Element style property should not be overridden");
ok(idProp.overridden, "ID property should be overridden");
ok(classProp.overridden, "Class property should be overridden");
styleNode.parentNode.removeChild(styleNode);
partialOverride();
}
function partialOverride()
{
let style = '' +
// Margin shorthand property...
'.testclass {' +
' margin: 2px;' +
'}' +
// ... will be partially overridden.
'#testid {' +
' margin-left: 1px;' +
'}';
let styleNode = addStyle(doc, style);
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let elementStyle = new _ElementStyle(doc.getElementById("testid"));
let classRule = elementStyle.rules[2];
let classProp = classRule.textProps[0];
ok(!classProp.overridden, "Class prop shouldn't be overridden, some props are still being used.");
for each (let computed in classProp.computed) {
if (computed.name.indexOf("margin-left") == 0) {
ok(computed.overridden, "margin-left props should be overridden.");
} else {
ok(!computed.overridden, "Non-margin-left props should not be overridden.");
}
}
styleNode.parentNode.removeChild(styleNode);
importantOverride();
}
function importantOverride()
{
let style = '' +
// Margin shorthand property...
'.testclass {' +
' background-color: green !important;' +
'}' +
// ... will be partially overridden.
'#testid {' +
' background-color: blue;' +
'}';
let styleNode = addStyle(doc, style);
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let elementStyle = new _ElementStyle(doc.getElementById("testid"));
let idRule = elementStyle.rules[1];
let idProp = idRule.textProps[0];
ok(idProp.overridden, "Not-important rule should be overridden.");
let classRule = elementStyle.rules[2];
let classProp = classRule.textProps[0];
ok(!classProp.overridden, "Important rule should not be overridden.");
styleNode.parentNode.removeChild(styleNode);
let elementRule = elementStyle.rules[0];
let elementProp = elementRule.createProperty("background-color", "purple", "important");
ok(classProp.overridden, "New important prop should override class property.");
ok(!elementProp.overridden, "New important prop should not be overriden.");
finishTest();
}
function finishTest()
{
doc = null;
gBrowser.removeCurrentTab();
finish();
}
function test()
{
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
doc = content.document;
waitForFocus(simpleOverride, content);
}, true);
content.location = "data:text/html,basic style inspector tests";
}

180
browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js Normal file
View File

@ -0,0 +1,180 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
Cu.import("resource:///modules/devtools/CssRuleView.jsm");
let doc;
let ruleDialog;
let ruleView;
function waitForEditorFocus(aParent, aCallback)
{
aParent.addEventListener("focus", function onFocus(evt) {
if (evt.target.inplaceEditor) {
aParent.removeEventListener("focus", onFocus, true);
let editor = evt.target.inplaceEditor;
executeSoon(function() {
aCallback(editor);
});
}
}, true);
}
function waitForEditorBlur(aEditor, aCallback)
{
let input = aEditor.input;
input.addEventListener("blur", function onBlur() {
input.removeEventListener("blur", onBlur, false);
executeSoon(function() {
aCallback();
});
}, false);
}
function startTest()
{
let style = '' +
'#testid {' +
' background-color: blue;' +
'} ' +
'.testclass {' +
' background-color: green;' +
'}';
let styleNode = addStyle(doc, style);
doc.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let testElement = doc.getElementById("testid");
ruleDialog = openDialog("chrome://browser/content/devtools/cssruleview.xhtml",
"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);
ruleView.highlight(testElement);
waitForFocus(testCancelNew, ruleDialog);
}, true);
}
function testCancelNew()
{
// Start at the beginning: start to add a rule to the element's style
// declaration, but leave it empty.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
waitForEditorFocus(elementRuleEditor.element, function onNewElement(aEditor) {
is(elementRuleEditor.newPropSpan.inplaceEditor, aEditor, "Next focused editor should be the new property editor.");
let input = aEditor.input;
waitForEditorBlur(aEditor, function () {
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
testCreateNew();
});
aEditor.input.blur();
});
EventUtils.synthesizeMouse(elementRuleEditor.closeBrace, 1, 1,
{ },
ruleDialog);
}
function testCreateNew()
{
// Create a new property.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
waitForEditorFocus(elementRuleEditor.element, function onNewElement(aEditor) {
is(elementRuleEditor.newPropSpan.inplaceEditor, aEditor, "Next focused editor should be the new property editor.");
let input = aEditor.input;
input.value = "background-color";
waitForEditorFocus(elementRuleEditor.element, function onNewValue(aEditor) {
is(elementRuleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
let textProp = elementRuleEditor.rule.textProps[0];
is(aEditor, textProp.editor.valueSpan.inplaceEditor, "Should be editing the value span now.");
aEditor.input.value = "purple";
waitForEditorBlur(aEditor, function() {
is(textProp.value, "purple", "Text prop should have been changed.");
testEditProperty();
});
aEditor.input.blur();
});
EventUtils.sendKey("return", input);
});
EventUtils.synthesizeMouse(elementRuleEditor.closeBrace, 1, 1,
{ },
ruleDialog);
}
function testEditProperty()
{
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
waitForEditorFocus(propEditor.element, function onNewElement(aEditor) {
is(propEditor.nameSpan.inplaceEditor, aEditor, "Next focused editor should be the name editor.");
let input = aEditor.input;
waitForEditorFocus(propEditor.element, function onNewName(aEditor) {
input = aEditor.input;
is(propEditor.valueSpan.inplaceEditor, aEditor, "Focus should have moved to the value.");
waitForEditorBlur(aEditor, function() {
is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",
"border-color should have been set.");
testDisableProperty();
});
for each (let ch in "red;") {
EventUtils.sendChar(ch, input);
}
});
for each (let ch in "border-color:") {
EventUtils.sendChar(ch, input);
}
});
EventUtils.synthesizeMouse(propEditor.nameSpan, 1, 1,
{ },
ruleDialog);
}
function testDisableProperty()
{
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
propEditor.enable.click();
is(idRuleEditor.rule.style.getPropertyValue("border-color"), "", "Border-color should have been unset.");
propEditor.enable.click();
is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",
"Border-color should have been reset.");
finishTest();
}
function finishTest()
{
ruleDialog.close();
ruleDialog = ruleView = null;
doc = null;
gBrowser.removeCurrentTab();
finish();
}
function test()
{
waitForExplicitFinish();
gBrowser.selectedTab = gBrowser.addTab();
gBrowser.selectedBrowser.addEventListener("load", function(evt) {
gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
doc = content.document;
waitForFocus(startTest, content);
}, true);
content.location = "data:text/html,basic style inspector tests";
}

9
browser/devtools/styleinspector/test/browser/head.js
View File

@ -150,6 +150,15 @@ function findLogEntry(aString)
testLogEntry(outputNode, aString, "found " + aString);
}
function addStyle(aDocument, aString)
{
let node = aDocument.createElement('style');
node.setAttribute("type", "text/css");
node.textContent = aString;
aDocument.getElementsByTagName("head")[0].appendChild(node);
return node;
}
function openConsole()
{
HUDService.activateHUDForContext(tab);

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

@ -85,6 +85,12 @@ XPCOMUtils.defineLazyGetter(this, "StyleInspector", function () {
return obj.StyleInspector;
});
XPCOMUtils.defineLazyGetter(this, "CssRuleView", function() {
let tmp = {};
Cu.import("resource:///modules/devtools/CssRuleView.jsm", tmp);
return tmp.CssRuleView;
});
XPCOMUtils.defineLazyGetter(this, "NetUtil", function () {
var obj = {};
Cu.import("resource://gre/modules/NetUtil.jsm", obj);
@ -4600,6 +4606,53 @@ function JSTermHelper(aJSTerm)
}
};
aJSTerm.sandbox.inspectrules = function JSTH_inspectrules(aNode)
{
aJSTerm.helperEvaluated = true;
let doc = aJSTerm.parentNode.ownerDocument;
let win = doc.defaultView;
let panel = createElement(doc, "panel", {
label: "CSS Rules",
titlebar: "normal",
noautofocus: "true",
noautohide: "true",
close: "true",
width: 350,
height: (win.screen.height / 2)
});
let iframe = createAndAppendElement(panel, "iframe", {
src: "chrome://browser/content/devtools/cssruleview.xhtml",
flex: "1",
});
panel.addEventListener("load", function onLoad() {
panel.removeEventListener("load", onLoad, true);
let doc = iframe.contentDocument;
let view = new CssRuleView(doc);
let body = doc.getElementById("ruleview-body");
body.appendChild(view.element);
view.highlight(aNode);
}, true);
let parent = doc.getElementById("mainPopupSet");
parent.appendChild(panel);
panel.addEventListener("popuphidden", function onHide() {
panel.removeEventListener("popuphidden", onHide);
parent.removeChild(panel);
});
let footer = createElement(doc, "hbox", { align: "end" });
createAndAppendElement(footer, "spacer", { flex: 1});
createAndAppendElement(footer, "resizer", { dir: "bottomend" });
panel.appendChild(footer);
let anchor = win.gBrowser.selectedBrowser;
panel.openPopup(anchor, "end_before", 0, 0, false, false);
}
/**
* Prints aObject to the output.
*

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

@ -187,4 +187,89 @@ a.link:visited {
.userStyles,
.userStylesLabel {
cursor: pointer;
}
}
/**
* CSS Rule View
*/
.ruleview {
background-color: #FFF;
}
.ruleview-rule-source {
background-color: -moz-dialog;
padding: 2px;
}
.ruleview-code {
padding: 2px;
}
.ruleview-propertylist {
list-style: none;
padding: 0;
margin: 0;
}
.ruleview-enableproperty {
height: 10px;
width: 10px;
-moz-margin-start: 2px;
-moz-margin-end: 0;
}
.ruleview-expander {
display: inline-block;
width: 8px;
height: 8px;
background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
cursor: pointer;
-moz-margin-start: 2px;
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
background-position: 16px 0;
}
.ruleview-expander.styleinspector-open {
background-position: 8px 0;
}
.ruleview-newproperty {
/* (enable checkbox width: 12px) + (expander width: 15px) */
-moz-margin-start: 27px;
}
.ruleview-propertyname {
display: inline-block;
padding: 1px 0;
cursor: text;
color: #0060C0;
text-decoration: inherit;
}
.ruleview-propertyvalue {
cursor: text;
text-decoration: inherit;
}
.ruleview-computedlist {
list-style: none;
padding: 0;
}
.ruleview-computed {
-moz-margin-start: 4em;
}
.ruleview-overridden {
text-decoration: line-through;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
padding: 0;
-moz-box-shadow: 2px 2px 2px #CCC;
}

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

@ -187,4 +187,89 @@ a.link:visited {
.userStyles,
.userStylesLabel {
cursor: pointer;
}
}
/**
* CSS Rule View
*/
.ruleview {
background-color: #FFF;
}
.ruleview-rule-source {
background-color: -moz-dialog;
padding: 2px;
}
.ruleview-code {
padding: 2px;
}
.ruleview-propertylist {
list-style: none;
padding: 0;
margin: 0;
}
.ruleview-enableproperty {
height: 10px;
width: 10px;
-moz-margin-start: 2px;
-moz-margin-end: 0;
}
.ruleview-expander {
display: inline-block;
width: 8px;
height: 8px;
background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
cursor: pointer;
-moz-margin-start: 2px;
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
background-position: 16px 0;
}
.ruleview-expander.styleinspector-open {
background-position: 8px 0;
}
.ruleview-newproperty {
/* (enable checkbox width: 12px) + (expander width: 15px) */
-moz-margin-start: 27px;
}
.ruleview-propertyname {
display: inline-block;
padding: 1px 0;
cursor: text;
color: #0060C0;
text-decoration: inherit;
}
.ruleview-propertyvalue {
cursor: text;
text-decoration: inherit;
}
.ruleview-computedlist {
list-style: none;
padding: 0;
}
.ruleview-computed {
-moz-margin-start: 4em;
}
.ruleview-overridden {
text-decoration: line-through;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
padding: 0;
-moz-box-shadow: 2px 2px 2px #CCC;
}

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

@ -187,4 +187,89 @@ a.link:visited {
.userStyles,
.userStylesLabel {
cursor: pointer;
}
}
/**
* CSS Rule View
*/
.ruleview {
background-color: #FFF;
}
.ruleview-rule-source {
background-color: -moz-dialog;
padding: 2px;
}
.ruleview-code {
padding: 2px;
}
.ruleview-propertylist {
list-style: none;
padding: 0;
margin: 0;
}
.ruleview-enableproperty {
height: 10px;
width: 10px;
-moz-margin-start: 2px;
-moz-margin-end: 0;
}
.ruleview-expander {
display: inline-block;
width: 8px;
height: 8px;
background: url("chrome://browser/skin/devtools/arrows.png") 24px 0;
cursor: pointer;
-moz-margin-start: 2px;
-moz-margin-end: 5px;
}
.ruleview-expander[dir="rtl"] {
background-position: 16px 0;
}
.ruleview-expander.styleinspector-open {
background-position: 8px 0;
}
.ruleview-newproperty {
/* (enable checkbox width: 12px) + (expander width: 15px) */
-moz-margin-start: 27px;
}
.ruleview-propertyname {
display: inline-block;
padding: 1px 0;
cursor: text;
color: #0060C0;
text-decoration: inherit;
}
.ruleview-propertyvalue {
cursor: text;
text-decoration: inherit;
}
.ruleview-computedlist {
list-style: none;
padding: 0;
}
.ruleview-computed {
-moz-margin-start: 4em;
}
.ruleview-overridden {
text-decoration: line-through;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
padding: 0;
-moz-box-shadow: 2px 2px 2px #CCC;
}