зеркало из https://github.com/mozilla/gecko-dev.git
merge the last green changeset on m-c to fx-team
This commit is contained in:
Tim Taubert
Коммит
2845712a54
|
|
@ -3429,6 +3429,7 @@ const BrowserSearch = {
|
|||
openLinkIn(submission.uri.spec,
|
||||
useNewTab ? "tab" : "current",
|
||||
{ postData: submission.postData,
|
||||
inBackground: false,
|
||||
relatedToCurrent: true });
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -976,7 +976,6 @@
|
|||
<toolbarbutton id="inspector-inspect-toolbutton"
|
||||
label="&inspectButton.label;"
|
||||
accesskey="&inspectButton.accesskey;"
|
||||
class="toolbarbutton-text"
|
||||
command="Inspector:Inspect"/>
|
||||
<toolbarseparator />
|
||||
<hbox id="inspector-tools">
|
||||
|
|
|
|||
|
|
@ -89,6 +89,8 @@ var gCookiesWindow = {
|
|||
this.filter();
|
||||
}
|
||||
|
||||
document.getElementById("removeAllCookies").disabled = this._view._rowCount == 0;
|
||||
|
||||
this._saveState();
|
||||
},
|
||||
|
||||
|
|
@ -117,6 +119,7 @@ var gCookiesWindow = {
|
|||
this._view._rowCount = 0;
|
||||
this._tree.treeBoxObject.rowCountChanged(0, -oldRowCount);
|
||||
this._view.selection.clearSelection();
|
||||
document.getElementById("removeAllCookies").disabled = true;
|
||||
}
|
||||
else if (aData == "reload") {
|
||||
// first, clear any existing entries
|
||||
|
|
@ -207,7 +210,10 @@ var gCookiesWindow = {
|
|||
this._view._rowCount += rowCountImpact;
|
||||
this._tree.treeBoxObject.rowCountChanged(oldRowCount - 1, rowCountImpact);
|
||||
|
||||
document.getElementById("removeAllCookies").disabled = this._view._filtered;
|
||||
if (this._view._rowCount > 0 && !this._view._filtered)
|
||||
document.getElementById("removeAllCookies").disabled = false;
|
||||
else
|
||||
document.getElementById("removeAllCookies").disabled = true;
|
||||
},
|
||||
|
||||
_view: {
|
||||
|
|
|
|||
|
|
@ -345,72 +345,72 @@ Highlighter.prototype = {
|
|||
*/
|
||||
highlight: function Highlighter_highlight(aScroll)
|
||||
{
|
||||
// node is not set or node is not highlightable, bail
|
||||
if (!this.node || !this.isNodeHighlightable(this.node)) {
|
||||
return;
|
||||
}
|
||||
let rect = null;
|
||||
|
||||
if (aScroll) {
|
||||
this.node.scrollIntoView();
|
||||
}
|
||||
if (this.node && this.isNodeHighlightable(this.node)) {
|
||||
|
||||
let clientRect = this.node.getBoundingClientRect();
|
||||
|
||||
// Go up in the tree of frames to determine the correct rectangle.
|
||||
// clientRect is read-only, we need to be able to change properties.
|
||||
let rect = {top: clientRect.top,
|
||||
left: clientRect.left,
|
||||
width: clientRect.width,
|
||||
height: clientRect.height};
|
||||
|
||||
let frameWin = this.node.ownerDocument.defaultView;
|
||||
|
||||
// We iterate through all the parent windows.
|
||||
while (true) {
|
||||
|
||||
// Does the selection overflow on the right of its window?
|
||||
let diffx = frameWin.innerWidth - (rect.left + rect.width);
|
||||
if (diffx < 0) {
|
||||
rect.width += diffx;
|
||||
if (aScroll) {
|
||||
this.node.scrollIntoView();
|
||||
}
|
||||
|
||||
// Does the selection overflow on the bottom of its window?
|
||||
let diffy = frameWin.innerHeight - (rect.top + rect.height);
|
||||
if (diffy < 0) {
|
||||
rect.height += diffy;
|
||||
let clientRect = this.node.getBoundingClientRect();
|
||||
|
||||
// Go up in the tree of frames to determine the correct rectangle.
|
||||
// clientRect is read-only, we need to be able to change properties.
|
||||
rect = {top: clientRect.top,
|
||||
left: clientRect.left,
|
||||
width: clientRect.width,
|
||||
height: clientRect.height};
|
||||
|
||||
let frameWin = this.node.ownerDocument.defaultView;
|
||||
|
||||
// We iterate through all the parent windows.
|
||||
while (true) {
|
||||
|
||||
// Does the selection overflow on the right of its window?
|
||||
let diffx = frameWin.innerWidth - (rect.left + rect.width);
|
||||
if (diffx < 0) {
|
||||
rect.width += diffx;
|
||||
}
|
||||
|
||||
// Does the selection overflow on the bottom of its window?
|
||||
let diffy = frameWin.innerHeight - (rect.top + rect.height);
|
||||
if (diffy < 0) {
|
||||
rect.height += diffy;
|
||||
}
|
||||
|
||||
// Does the selection overflow on the left of its window?
|
||||
if (rect.left < 0) {
|
||||
rect.width += rect.left;
|
||||
rect.left = 0;
|
||||
}
|
||||
|
||||
// Does the selection overflow on the top of its window?
|
||||
if (rect.top < 0) {
|
||||
rect.height += rect.top;
|
||||
rect.top = 0;
|
||||
}
|
||||
|
||||
// Selection has been clipped to fit in its own window.
|
||||
|
||||
// Are we in the top-level window?
|
||||
if (frameWin.parent === frameWin || !frameWin.frameElement) {
|
||||
break;
|
||||
}
|
||||
|
||||
// We are in an iframe.
|
||||
// We take into account the parent iframe position and its
|
||||
// offset (borders and padding).
|
||||
let frameRect = frameWin.frameElement.getBoundingClientRect();
|
||||
|
||||
let [offsetTop, offsetLeft] =
|
||||
this.IUI.getIframeContentOffset(frameWin.frameElement);
|
||||
|
||||
rect.top += frameRect.top + offsetTop;
|
||||
rect.left += frameRect.left + offsetLeft;
|
||||
|
||||
frameWin = frameWin.parent;
|
||||
}
|
||||
|
||||
// Does the selection overflow on the left of its window?
|
||||
if (rect.left < 0) {
|
||||
rect.width += rect.left;
|
||||
rect.left = 0;
|
||||
}
|
||||
|
||||
// Does the selection overflow on the top of its window?
|
||||
if (rect.top < 0) {
|
||||
rect.height += rect.top;
|
||||
rect.top = 0;
|
||||
}
|
||||
|
||||
// Selection has been clipped to fit in its own window.
|
||||
|
||||
// Are we in the top-level window?
|
||||
if (frameWin.parent === frameWin || !frameWin.frameElement) {
|
||||
break;
|
||||
}
|
||||
|
||||
// We are in an iframe.
|
||||
// We take into account the parent iframe position and its
|
||||
// offset (borders and padding).
|
||||
let frameRect = frameWin.frameElement.getBoundingClientRect();
|
||||
|
||||
let [offsetTop, offsetLeft] =
|
||||
this.IUI.getIframeContentOffset(frameWin.frameElement);
|
||||
|
||||
rect.top += frameRect.top + offsetTop;
|
||||
rect.left += frameRect.left + offsetLeft;
|
||||
|
||||
frameWin = frameWin.parent;
|
||||
}
|
||||
|
||||
this.highlightRectangle(rect);
|
||||
|
|
@ -448,6 +448,11 @@ Highlighter.prototype = {
|
|||
*/
|
||||
highlightRectangle: function Highlighter_highlightRectangle(aRect)
|
||||
{
|
||||
if (!aRect) {
|
||||
this.unhighlight();
|
||||
return;
|
||||
}
|
||||
|
||||
let oldRect = this._contentRect;
|
||||
|
||||
if (oldRect && aRect.top == oldRect.top && aRect.left == oldRect.left &&
|
||||
|
|
@ -469,6 +474,9 @@ Highlighter.prototype = {
|
|||
|
||||
if (aRectScaled.left >= 0 && aRectScaled.top >= 0 &&
|
||||
aRectScaled.width > 0 && aRectScaled.height > 0) {
|
||||
|
||||
this.veilTransparentBox.style.visibility = "visible";
|
||||
|
||||
// The bottom div and the right div are flexibles (flex=1).
|
||||
// We don't need to resize them.
|
||||
this.veilTopBox.style.height = aRectScaled.top + "px";
|
||||
|
|
@ -495,6 +503,7 @@ Highlighter.prototype = {
|
|||
this._highlighting = false;
|
||||
this.veilMiddleBox.style.height = 0;
|
||||
this.veilTransparentBox.style.width = 0;
|
||||
this.veilTransparentBox.style.visibility = "hidden";
|
||||
Services.obs.notifyObservers(null,
|
||||
INSPECTOR_NOTIFICATIONS.UNHIGHLIGHTING, null);
|
||||
},
|
||||
|
|
@ -837,7 +846,7 @@ InspectorUI.prototype = {
|
|||
}
|
||||
|
||||
// Observer used to inspect the specified element from content after the
|
||||
// inspector UI has been opened.
|
||||
// inspector UI has been opened (via the content context menu).
|
||||
function inspectObserver(aElement) {
|
||||
Services.obs.removeObserver(boundInspectObserver,
|
||||
INSPECTOR_NOTIFICATIONS.OPENED,
|
||||
|
|
@ -870,6 +879,11 @@ InspectorUI.prototype = {
|
|||
this.treePanel = new this.TreePanel(this.chromeWin, this);
|
||||
}
|
||||
|
||||
if (Services.prefs.getBoolPref("devtools.styleinspector.enabled") &&
|
||||
!this.toolRegistered("styleinspector")) {
|
||||
this.stylePanel = new StyleInspector(this.chromeWin, this);
|
||||
}
|
||||
|
||||
this.toolbar.hidden = false;
|
||||
this.inspectMenuitem.setAttribute("checked", true);
|
||||
|
||||
|
|
@ -886,26 +900,7 @@ InspectorUI.prototype = {
|
|||
*/
|
||||
initTools: function IUI_initTools()
|
||||
{
|
||||
// Style inspector
|
||||
if (Services.prefs.getBoolPref("devtools.styleinspector.enabled") &&
|
||||
!this.toolRegistered("styleinspector")) {
|
||||
let stylePanel = StyleInspector.createPanel(true);
|
||||
this.registerTool({
|
||||
id: "styleinspector",
|
||||
label: StyleInspector.l10n("style.highlighter.button.label"),
|
||||
tooltiptext: StyleInspector.l10n("style.highlighter.button.tooltip"),
|
||||
accesskey: StyleInspector.l10n("style.highlighter.accesskey"),
|
||||
context: stylePanel,
|
||||
get isOpen() stylePanel.isOpen(),
|
||||
onSelect: stylePanel.selectNode,
|
||||
show: stylePanel.showTool,
|
||||
hide: stylePanel.hideTool,
|
||||
dim: stylePanel.dimTool,
|
||||
panel: stylePanel,
|
||||
unregister: stylePanel.destroy,
|
||||
});
|
||||
this.stylePanel = stylePanel;
|
||||
}
|
||||
// Extras go here.
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ function treePanelTests()
|
|||
ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
|
||||
|
||||
executeSoon(function() {
|
||||
InspectorUI.stylePanel.showTool(doc.body);
|
||||
InspectorUI.stylePanel.open(doc.body);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,18 +56,18 @@ var EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
|
|||
* There should be one instance of CssHtmlTree per style display (of which there
|
||||
* will generally only be one).
|
||||
*
|
||||
* @params {Document} aStyleWin The main XUL browser document
|
||||
* @params {CssLogic} aCssLogic How we dig into the CSS. See CssLogic.jsm
|
||||
* @params {StyleInspector} aStyleInspector The owner of this CssHtmlTree
|
||||
* @constructor
|
||||
*/
|
||||
function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
|
||||
function CssHtmlTree(aStyleInspector)
|
||||
{
|
||||
this.styleWin = aStyleWin;
|
||||
this.cssLogic = aCssLogic;
|
||||
this.doc = aPanel.ownerDocument;
|
||||
this.win = this.doc.defaultView;
|
||||
this.getRTLAttr = CssHtmlTree.getRTLAttr;
|
||||
this.propertyViews = {};
|
||||
this.styleWin = aStyleInspector.iframe;
|
||||
this.styleInspector = aStyleInspector;
|
||||
this.cssLogic = aStyleInspector.cssLogic;
|
||||
this.doc = aStyleInspector.document;
|
||||
this.win = aStyleInspector.window;
|
||||
this.getRTLAttr = this.win.getComputedStyle(this.win.gBrowser).direction;
|
||||
this.propertyViews = [];
|
||||
|
||||
// The document in which we display the results (csshtmltree.xhtml).
|
||||
this.styleDocument = this.styleWin.contentWindow.document;
|
||||
|
|
@ -79,7 +79,7 @@ function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
|
|||
this.templatePath = this.styleDocument.getElementById("templatePath");
|
||||
this.propertyContainer = this.styleDocument.getElementById("propertyContainer");
|
||||
this.templateProperty = this.styleDocument.getElementById("templateProperty");
|
||||
this.panel = aPanel;
|
||||
this.panel = aStyleInspector.panel;
|
||||
|
||||
// The element that we're inspecting, and the document that it comes from.
|
||||
this.viewedElement = null;
|
||||
|
|
@ -87,7 +87,7 @@ function CssHtmlTree(aStyleWin, aCssLogic, aPanel)
|
|||
}
|
||||
|
||||
/**
|
||||
* Memonized lookup of a l10n string from a string bundle.
|
||||
* Memoized lookup of a l10n string from a string bundle.
|
||||
* @param {string} aName The key to lookup.
|
||||
* @returns A localized version of the given key.
|
||||
*/
|
||||
|
|
@ -129,24 +129,6 @@ CssHtmlTree.processTemplate = function CssHtmlTree_processTemplate(aTemplate,
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks whether the UI is RTL
|
||||
* @return {Boolean} true or false
|
||||
*/
|
||||
CssHtmlTree.isRTL = function CssHtmlTree_isRTL()
|
||||
{
|
||||
return CssHtmlTree.getRTLAttr == "rtl";
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks whether the UI is RTL
|
||||
* @return {String} "ltr" or "rtl"
|
||||
*/
|
||||
XPCOMUtils.defineLazyGetter(CssHtmlTree, "getRTLAttr", function() {
|
||||
let mainWindow = Services.wm.getMostRecentWindow("navigator:browser");
|
||||
return mainWindow.getComputedStyle(mainWindow.gBrowser).direction;
|
||||
});
|
||||
|
||||
XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
|
||||
.createBundle("chrome://browser/locale/styleinspector.properties"));
|
||||
|
||||
|
|
@ -162,6 +144,9 @@ CssHtmlTree.prototype = {
|
|||
// Reference to the "Only user Styles" checkbox.
|
||||
onlyUserStylesCheckbox: null,
|
||||
|
||||
// Holds the ID of the panelRefresh timeout.
|
||||
_panelRefreshTimeout: null,
|
||||
|
||||
get showOnlyUserStyles()
|
||||
{
|
||||
return this.onlyUserStylesCheckbox.checked;
|
||||
|
|
@ -193,7 +178,7 @@ CssHtmlTree.prototype = {
|
|||
let batchSize = 15;
|
||||
let max = CssHtmlTree.propertyNames.length - 1;
|
||||
function displayProperties() {
|
||||
if (this.viewedElement == aElement && this.panel.isOpen()) {
|
||||
if (this.viewedElement == aElement && this.styleInspector.isOpen()) {
|
||||
// Display the next 15 properties
|
||||
for (let step = i + batchSize; i < step && i <= max; i++) {
|
||||
let name = CssHtmlTree.propertyNames[i];
|
||||
|
|
@ -202,7 +187,7 @@ CssHtmlTree.prototype = {
|
|||
this.propertyContainer, propView, true);
|
||||
propView.refreshMatchedSelectors();
|
||||
propView.refreshUnmatchedSelectors();
|
||||
this.propertyViews[name] = propView;
|
||||
this.propertyViews.push(propView);
|
||||
}
|
||||
if (i < max) {
|
||||
// There are still some properties to display. We loop here to display
|
||||
|
|
@ -223,10 +208,27 @@ CssHtmlTree.prototype = {
|
|||
*/
|
||||
refreshPanel: function CssHtmlTree_refreshPanel()
|
||||
{
|
||||
for each(let propView in this.propertyViews) {
|
||||
propView.refresh();
|
||||
this.win.clearTimeout(this._panelRefreshTimeout);
|
||||
|
||||
// We use a setTimeout loop to display the properties in batches of 15 at a
|
||||
// time. This results in a perceptibly more responsive UI.
|
||||
let i = 0;
|
||||
let batchSize = 15;
|
||||
let max = this.propertyViews.length - 1;
|
||||
function refreshView() {
|
||||
// Refresh the next 15 property views
|
||||
for (let step = i + batchSize; i < step && i <= max; i++) {
|
||||
this.propertyViews[i].refresh();
|
||||
}
|
||||
if (i < max) {
|
||||
// There are still some property views to refresh. We loop here to
|
||||
// display the next batch of 15.
|
||||
this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 0);
|
||||
} else {
|
||||
Services.obs.notifyObservers(null, "StyleInspector-populated", null);
|
||||
}
|
||||
}
|
||||
Services.obs.notifyObservers(null, "StyleInspector-populated", null);
|
||||
this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -239,15 +241,7 @@ CssHtmlTree.prototype = {
|
|||
{
|
||||
aEvent.preventDefault();
|
||||
if (aEvent.target && this.viewedElement != aEvent.target.pathElement) {
|
||||
if (this.win.InspectorUI.selection) {
|
||||
if (aEvent.target.pathElement != this.win.InspectorUI.selection) {
|
||||
let elt = aEvent.target.pathElement;
|
||||
this.win.InspectorUI.inspectNode(elt);
|
||||
this.panel.selectNode(elt);
|
||||
}
|
||||
} else {
|
||||
this.panel.selectNode(aEvent.target.pathElement);
|
||||
}
|
||||
this.styleInspector.selectFromPath(aEvent.target.pathElement);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -349,11 +343,11 @@ CssHtmlTree.prototype = {
|
|||
|
||||
// The element that we're inspecting, and the document that it comes from.
|
||||
delete this.propertyViews;
|
||||
delete this.getRTLAttr;
|
||||
delete this.styleWin;
|
||||
delete this.cssLogic;
|
||||
delete this.doc;
|
||||
delete this.win;
|
||||
delete this.styleInspector;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -369,7 +363,7 @@ function PropertyView(aTree, aName)
|
|||
{
|
||||
this.tree = aTree;
|
||||
this.name = aName;
|
||||
this.getRTLAttr = CssHtmlTree.getRTLAttr;
|
||||
this.getRTLAttr = aTree.getRTLAttr;
|
||||
|
||||
this.link = "https://developer.mozilla.org/en/CSS/" + aName;
|
||||
|
||||
|
|
@ -560,7 +554,7 @@ PropertyView.prototype = {
|
|||
this._matchedSelectorViews = [];
|
||||
this.propertyInfo.matchedSelectors.forEach(
|
||||
function matchedSelectorViews_convert(aSelectorInfo) {
|
||||
this._matchedSelectorViews.push(new SelectorView(aSelectorInfo));
|
||||
this._matchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
|
||||
}, this);
|
||||
}
|
||||
|
||||
|
|
@ -577,7 +571,7 @@ PropertyView.prototype = {
|
|||
this._unmatchedSelectorViews = [];
|
||||
this.propertyInfo.unmatchedSelectors.forEach(
|
||||
function unmatchedSelectorViews_convert(aSelectorInfo) {
|
||||
this._unmatchedSelectorViews.push(new SelectorView(aSelectorInfo));
|
||||
this._unmatchedSelectorViews.push(new SelectorView(this.tree, aSelectorInfo));
|
||||
}, this);
|
||||
}
|
||||
|
||||
|
|
@ -607,9 +601,12 @@ PropertyView.prototype = {
|
|||
|
||||
/**
|
||||
* A container to view us easy access to display data from a CssRule
|
||||
* @param CssHtmlTree aTree, the owning CssHtmlTree
|
||||
* @param aSelectorInfo
|
||||
*/
|
||||
function SelectorView(aSelectorInfo)
|
||||
function SelectorView(aTree, aSelectorInfo)
|
||||
{
|
||||
this.tree = aTree;
|
||||
this.selectorInfo = aSelectorInfo;
|
||||
this._cacheStatusNames();
|
||||
}
|
||||
|
|
@ -674,7 +671,7 @@ SelectorView.prototype = {
|
|||
*/
|
||||
humanReadableText: function SelectorView_humanReadableText(aElement)
|
||||
{
|
||||
if (CssHtmlTree.isRTL()) {
|
||||
if (this.tree.getRTLAttr == "rtl") {
|
||||
return this.selectorInfo.value + " \u2190 " + this.text(aElement);
|
||||
} else {
|
||||
return this.text(aElement) + " \u2192 " + this.selectorInfo.value;
|
||||
|
|
@ -684,19 +681,22 @@ SelectorView.prototype = {
|
|||
text: function SelectorView_text(aElement) {
|
||||
let result = this.selectorInfo.selector.text;
|
||||
if (this.selectorInfo.elementStyle) {
|
||||
if (this.selectorInfo.sourceElement == this.win.InspectorUI.selection) {
|
||||
result = "this";
|
||||
} else {
|
||||
result = CssLogic.getShortName(this.selectorInfo.sourceElement);
|
||||
aElement.parentNode.querySelector(".rule-link > a").
|
||||
addEventListener("click", function(aEvent) {
|
||||
this.win.InspectorUI.inspectNode(this.selectorInfo.sourceElement);
|
||||
aEvent.preventDefault();
|
||||
}, false);
|
||||
if (this.tree.styleInspector.IUI) {
|
||||
if (this.selectorInfo.sourceElement == this.tree.styleInspector.IUI.selection)
|
||||
{
|
||||
result = "this";
|
||||
} else {
|
||||
result = CssLogic.getShortName(this.selectorInfo.sourceElement);
|
||||
}
|
||||
}
|
||||
|
||||
aElement.parentNode.querySelector(".rule-link > a").
|
||||
addEventListener("click", function(aEvent) {
|
||||
this.tree.styleInspector.selectFromPath(this.selectorInfo.sourceElement);
|
||||
aEvent.preventDefault();
|
||||
}.bind(this), false);
|
||||
result += ".style";
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -46,14 +46,58 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
|||
|
||||
var EXPORTED_SYMBOLS = ["StyleInspector"];
|
||||
|
||||
var StyleInspector = {
|
||||
/**
|
||||
* StyleInspector Constructor Function.
|
||||
* @param {window} aContext, the chrome window context we're calling from.
|
||||
* @param {InspectorUI} aIUI (optional) An InspectorUI instance if called from the
|
||||
* Highlighter.
|
||||
*/
|
||||
function StyleInspector(aContext, aIUI)
|
||||
{
|
||||
this._init(aContext, aIUI);
|
||||
};
|
||||
|
||||
StyleInspector.prototype = {
|
||||
|
||||
/**
|
||||
* Is the Style Inspector enabled?
|
||||
* @returns {Boolean} true or false
|
||||
* Initialization method called from constructor.
|
||||
* @param {window} aContext, the chrome window context we're calling from.
|
||||
* @param {InspectorUI} aIUI (optional) An InspectorUI instance if called from
|
||||
* the Highlighter.
|
||||
*/
|
||||
get isEnabled()
|
||||
_init: function SI__init(aContext, aIUI)
|
||||
{
|
||||
return Services.prefs.getBoolPref("devtools.styleinspector.enabled");
|
||||
this.window = aContext;
|
||||
this.IUI = aIUI;
|
||||
this.document = this.window.document;
|
||||
this.cssLogic = new CssLogic();
|
||||
this.panelReady = false;
|
||||
this.iframeReady = false;
|
||||
|
||||
// Were we invoked from the Highlighter?
|
||||
if (this.IUI) {
|
||||
this.createPanel(true);
|
||||
|
||||
let isOpen = this.isOpen.bind(this);
|
||||
|
||||
this.registrationObject = {
|
||||
id: "styleinspector",
|
||||
label: this.l10n("style.highlighter.button.label"),
|
||||
tooltiptext: this.l10n("style.highlighter.button.tooltip"),
|
||||
accesskey: this.l10n("style.highlighter.accesskey"),
|
||||
context: this,
|
||||
get isOpen() isOpen(),
|
||||
onSelect: this.selectNode,
|
||||
show: this.open,
|
||||
hide: this.close,
|
||||
dim: this.dimTool,
|
||||
panel: this.panel,
|
||||
unregister: this.destroy
|
||||
};
|
||||
|
||||
// Register the registrationObject with the Highlighter
|
||||
this.IUI.registerTool(this.registrationObject);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -61,12 +105,13 @@ var StyleInspector = {
|
|||
* @param {Boolean} aPreserveOnHide Prevents destroy from being called
|
||||
* onpopuphide. USE WITH CAUTION: When this value is set to true then you are
|
||||
* responsible to manually call destroy from outside the style inspector.
|
||||
* @param {function} aCallback (optional) callback to fire when ready.
|
||||
*/
|
||||
createPanel: function SI_createPanel(aPreserveOnHide)
|
||||
createPanel: function SI_createPanel(aPreserveOnHide, aCallback)
|
||||
{
|
||||
let win = Services.wm.getMostRecentWindow("navigator:browser");
|
||||
let popupSet = win.document.getElementById("mainPopupSet");
|
||||
let panel = win.document.createElement("panel");
|
||||
let popupSet = this.document.getElementById("mainPopupSet");
|
||||
let panel = this.document.createElement("panel");
|
||||
this.preserveOnHide = !!aPreserveOnHide;
|
||||
|
||||
panel.setAttribute("class", "styleInspector");
|
||||
panel.setAttribute("orient", "vertical");
|
||||
|
|
@ -75,167 +120,183 @@ var StyleInspector = {
|
|||
panel.setAttribute("noautohide", "true");
|
||||
panel.setAttribute("titlebar", "normal");
|
||||
panel.setAttribute("close", "true");
|
||||
panel.setAttribute("label", StyleInspector.l10n("panelTitle"));
|
||||
panel.setAttribute("label", this.l10n("panelTitle"));
|
||||
panel.setAttribute("width", 350);
|
||||
panel.setAttribute("height", win.screen.height / 2);
|
||||
panel.setAttribute("height", this.window.screen.height / 2);
|
||||
|
||||
let vbox = win.document.createElement("vbox");
|
||||
let vbox = this.document.createElement("vbox");
|
||||
vbox.setAttribute("flex", "1");
|
||||
panel.appendChild(vbox);
|
||||
|
||||
let iframe = win.document.createElement("iframe");
|
||||
let iframe = this.document.createElement("iframe");
|
||||
let boundIframeOnLoad = function loadedInitializeIframe()
|
||||
{
|
||||
this.iframe.removeEventListener("load", boundIframeOnLoad, true);
|
||||
this.iframeReady = true;
|
||||
if (aCallback)
|
||||
aCallback(this);
|
||||
}.bind(this);
|
||||
|
||||
iframe.setAttribute("flex", "1");
|
||||
iframe.setAttribute("tooltip", "aHTMLTooltip");
|
||||
iframe.addEventListener("load", boundIframeOnLoad, true);
|
||||
iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
|
||||
iframe.addEventListener("load", SI_iframeOnload, true);
|
||||
|
||||
vbox.appendChild(iframe);
|
||||
|
||||
let hbox = win.document.createElement("hbox");
|
||||
let hbox = this.document.createElement("hbox");
|
||||
hbox.setAttribute("class", "resizerbox");
|
||||
vbox.appendChild(hbox);
|
||||
|
||||
let spacer = win.document.createElement("spacer");
|
||||
let spacer = this.document.createElement("spacer");
|
||||
spacer.setAttribute("flex", "1");
|
||||
hbox.appendChild(spacer);
|
||||
|
||||
let resizer = win.document.createElement("resizer");
|
||||
let resizer = this.document.createElement("resizer");
|
||||
resizer.setAttribute("dir", "bottomend");
|
||||
hbox.appendChild(resizer);
|
||||
popupSet.appendChild(panel);
|
||||
|
||||
/**
|
||||
* Iframe's onload event
|
||||
*/
|
||||
let iframeReady = false;
|
||||
function SI_iframeOnload() {
|
||||
iframe.removeEventListener("load", SI_iframeOnload, true);
|
||||
iframeReady = true;
|
||||
if (panelReady) {
|
||||
SI_popupShown.call(panel);
|
||||
}
|
||||
}
|
||||
this._boundPopupShown = this.popupShown.bind(this);
|
||||
this._boundPopupHidden = this.popupHidden.bind(this);
|
||||
panel.addEventListener("popupshown", this._boundPopupShown, false);
|
||||
panel.addEventListener("popuphidden", this._boundPopupHidden, false);
|
||||
|
||||
/**
|
||||
* Initialize the popup when it is first shown
|
||||
*/
|
||||
let panelReady = false;
|
||||
function SI_popupShown() {
|
||||
panelReady = true;
|
||||
if (iframeReady) {
|
||||
if (!this.cssLogic) {
|
||||
this.cssLogic = new CssLogic();
|
||||
this.cssHtmlTree = new CssHtmlTree(iframe, this.cssLogic, this);
|
||||
}
|
||||
let selectedNode = this.selectedNode || null;
|
||||
this.cssLogic.highlight(selectedNode);
|
||||
this.cssHtmlTree.highlight(selectedNode);
|
||||
Services.obs.notifyObservers(null, "StyleInspector-opened", null);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the popup and conditionally destroy it
|
||||
*/
|
||||
function SI_popupHidden() {
|
||||
if (panel.preserveOnHide) {
|
||||
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
|
||||
} else {
|
||||
panel.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
panel.addEventListener("popupshown", SI_popupShown, false);
|
||||
panel.addEventListener("popuphidden", SI_popupHidden, false);
|
||||
panel.preserveOnHide = !!aPreserveOnHide;
|
||||
|
||||
/**
|
||||
* Check if the style inspector is open
|
||||
*/
|
||||
panel.isOpen = function SI_isOpen()
|
||||
{
|
||||
return this.state && this.state == "open";
|
||||
};
|
||||
|
||||
/**
|
||||
* Select a node to inspect in the Style Inspector panel
|
||||
*
|
||||
* @param aNode The node to inspect
|
||||
*/
|
||||
panel.selectNode = function SI_selectNode(aNode)
|
||||
{
|
||||
this.selectedNode = aNode;
|
||||
if (this.isOpen() && !this.hasAttribute("dimmed")) {
|
||||
this.cssLogic.highlight(aNode);
|
||||
this.cssHtmlTree.highlight(aNode);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy the style panel, remove listeners etc.
|
||||
*/
|
||||
panel.destroy = function SI_destroy()
|
||||
{
|
||||
if (this.isOpen())
|
||||
this.hideTool();
|
||||
if (panel.cssHtmlTree)
|
||||
panel.cssHtmlTree.destroy();
|
||||
if (iframe) {
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
iframe = null;
|
||||
}
|
||||
|
||||
delete panel.cssLogic;
|
||||
delete panel.cssHtmlTree;
|
||||
panel.removeEventListener("popupshown", SI_popupShown, false);
|
||||
panel.removeEventListener("popuphidden", SI_popupHidden, false);
|
||||
panel.parentNode.removeChild(panel);
|
||||
panel = null;
|
||||
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
|
||||
};
|
||||
|
||||
/**
|
||||
* Dim or undim a panel by setting or removing a dimmed attribute.
|
||||
*
|
||||
* @param aState
|
||||
* true = dim, false = undim
|
||||
*/
|
||||
panel.dimTool = function SI_dimTool(aState)
|
||||
{
|
||||
if (!this.isOpen())
|
||||
return;
|
||||
|
||||
if (aState) {
|
||||
this.setAttribute("dimmed", "true");
|
||||
} else if (this.hasAttribute("dimmed")) {
|
||||
this.removeAttribute("dimmed");
|
||||
}
|
||||
};
|
||||
|
||||
panel.showTool = function SI_showTool(aSelection)
|
||||
{
|
||||
this.selectNode(aSelection);
|
||||
let win = Services.wm.getMostRecentWindow("navigator:browser");
|
||||
this.openPopup(win.gBrowser.selectedBrowser, "end_before", 0, 0,
|
||||
false, false);
|
||||
};
|
||||
|
||||
panel.hideTool = function SI_hideTool()
|
||||
{
|
||||
this.hidePopup();
|
||||
};
|
||||
|
||||
/**
|
||||
* Is the Style Inspector initialized?
|
||||
* @returns {Boolean} true or false
|
||||
*/
|
||||
function isInitialized()
|
||||
{
|
||||
return panel.cssLogic && panel.cssHtmlTree;
|
||||
}
|
||||
this.panel = panel;
|
||||
this.iframe = iframe;
|
||||
|
||||
return panel;
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for the popupshown event.
|
||||
*/
|
||||
popupShown: function SI_popupShown()
|
||||
{
|
||||
this.panelReady = true;
|
||||
if (this.iframeReady) {
|
||||
this.cssHtmlTree = new CssHtmlTree(this);
|
||||
let selectedNode = this.selectedNode || null;
|
||||
this.cssLogic.highlight(selectedNode);
|
||||
this.cssHtmlTree.highlight(selectedNode);
|
||||
Services.obs.notifyObservers(null, "StyleInspector-opened", null);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for the popuphidden event.
|
||||
* Hide the popup and conditionally destroy it
|
||||
*/
|
||||
popupHidden: function SI_popupHidden()
|
||||
{
|
||||
if (this.preserveOnHide) {
|
||||
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
|
||||
} else {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if the style inspector is open.
|
||||
* @returns boolean
|
||||
*/
|
||||
isOpen: function SI_isOpen()
|
||||
{
|
||||
return this.panel && this.panel.state && this.panel.state == "open";
|
||||
},
|
||||
|
||||
/**
|
||||
* Select from Path (via CssHtmlTree_pathClick)
|
||||
* @param aNode The node to inspect.
|
||||
*/
|
||||
selectFromPath: function SI_selectFromPath(aNode)
|
||||
{
|
||||
if (this.IUI && this.IUI.selection) {
|
||||
if (aNode != this.IUI.selection) {
|
||||
this.IUI.inspectNode(aNode);
|
||||
}
|
||||
} else {
|
||||
this.selectNode(aNode);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select a node to inspect in the Style Inspector panel
|
||||
* @param aNode The node to inspect.
|
||||
*/
|
||||
selectNode: function SI_selectNode(aNode)
|
||||
{
|
||||
this.selectedNode = aNode;
|
||||
if (this.isOpen() && !this.panel.hasAttribute("dimmed")) {
|
||||
this.cssLogic.highlight(aNode);
|
||||
this.cssHtmlTree.highlight(aNode);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Destroy the style panel, remove listeners etc.
|
||||
*/
|
||||
destroy: function SI_destroy()
|
||||
{
|
||||
if (this.isOpen())
|
||||
this.close();
|
||||
if (this.cssHtmlTree)
|
||||
this.cssHtmlTree.destroy();
|
||||
if (this.iframe) {
|
||||
this.iframe.parentNode.removeChild(this.iframe);
|
||||
delete this.iframe;
|
||||
}
|
||||
|
||||
delete this.cssLogic;
|
||||
delete this.cssHtmlTree;
|
||||
this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
|
||||
this.panel.removeEventListener("popuphidden", this._boundPopupHidden, false);
|
||||
delete this._boundPopupShown;
|
||||
delete this._boundPopupHidden;
|
||||
this.panel.parentNode.removeChild(this.panel);
|
||||
delete this.panel;
|
||||
delete this.doc;
|
||||
delete this.win;
|
||||
delete CssHtmlTree.win;
|
||||
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
|
||||
},
|
||||
|
||||
/**
|
||||
* Dim or undim a panel by setting or removing a dimmed attribute.
|
||||
* @param aState
|
||||
* true = dim, false = undim
|
||||
*/
|
||||
dimTool: function SI_dimTool(aState)
|
||||
{
|
||||
if (!this.isOpen())
|
||||
return;
|
||||
|
||||
if (aState) {
|
||||
this.panel.setAttribute("dimmed", "true");
|
||||
} else if (this.panel.hasAttribute("dimmed")) {
|
||||
this.panel.removeAttribute("dimmed");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the panel.
|
||||
* @param {DOMNode} aSelection the (optional) DOM node to select.
|
||||
*/
|
||||
open: function SI_open(aSelection)
|
||||
{
|
||||
this.selectNode(aSelection);
|
||||
this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
|
||||
false, false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the panel.
|
||||
*/
|
||||
close: function SI_close()
|
||||
{
|
||||
this.panel.hidePopup();
|
||||
},
|
||||
|
||||
/**
|
||||
* Memonized lookup of a l10n string from a string bundle.
|
||||
* @param {string} aName The key to lookup.
|
||||
|
|
|
|||
|
|
@ -21,11 +21,14 @@ function test()
|
|||
function tabLoaded()
|
||||
{
|
||||
browser.removeEventListener("load", tabLoaded, true);
|
||||
doc = content.document;
|
||||
ok(window.StyleInspector, "StyleInspector exists");
|
||||
ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = StyleInspector.createPanel();
|
||||
// ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = new StyleInspector(window);
|
||||
Services.obs.addObserver(runTests, "StyleInspector-opened", false);
|
||||
stylePanel.openPopup();
|
||||
stylePanel.createPanel(false, function() {
|
||||
stylePanel.open(doc.body);
|
||||
});
|
||||
}
|
||||
|
||||
function runTests()
|
||||
|
|
@ -39,7 +42,7 @@ function runTests()
|
|||
|
||||
info("finishing up");
|
||||
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
|
||||
stylePanel.hidePopup();
|
||||
stylePanel.close();
|
||||
}
|
||||
|
||||
function testMatchedSelectors()
|
||||
|
|
|
|||
|
|
@ -27,10 +27,11 @@ function createDocument()
|
|||
'</div>';
|
||||
doc.title = "Style Inspector Test";
|
||||
ok(window.StyleInspector, "StyleInspector exists");
|
||||
ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = StyleInspector.createPanel();
|
||||
stylePanel = new StyleInspector(window);
|
||||
Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
|
||||
stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
|
||||
stylePanel.createPanel(false, function() {
|
||||
stylePanel.open(doc.body);
|
||||
});
|
||||
}
|
||||
|
||||
function runStyleInspectorTests()
|
||||
|
|
@ -55,7 +56,7 @@ function runStyleInspectorTests()
|
|||
|
||||
SI_CheckProperty();
|
||||
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
|
||||
stylePanel.hidePopup();
|
||||
stylePanel.close();
|
||||
}
|
||||
|
||||
function SI_CheckProperty()
|
||||
|
|
|
|||
|
|
@ -15,10 +15,12 @@ function createDocument()
|
|||
'</div>';
|
||||
doc.title = "Style Inspector Search Filter Test";
|
||||
ok(window.StyleInspector, "StyleInspector exists");
|
||||
ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = StyleInspector.createPanel();
|
||||
// ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = new StyleInspector(window);
|
||||
Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
|
||||
stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
|
||||
stylePanel.createPanel(false, function() {
|
||||
stylePanel.open(doc.body);
|
||||
});
|
||||
}
|
||||
|
||||
function runStyleInspectorTests()
|
||||
|
|
@ -50,7 +52,7 @@ function SI_toggleDefaultStyles()
|
|||
Services.obs.removeObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
|
||||
|
||||
info("clearing \"only user styles\" checkbox");
|
||||
let iframe = stylePanel.querySelector("iframe");
|
||||
let iframe = stylePanel.iframe;
|
||||
let checkbox = iframe.contentDocument.querySelector(".userStyles");
|
||||
Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
|
||||
EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
|
||||
|
|
@ -60,7 +62,7 @@ function SI_AddFilterText()
|
|||
{
|
||||
Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
|
||||
|
||||
let iframe = stylePanel.querySelector("iframe");
|
||||
let iframe = stylePanel.iframe;
|
||||
let searchbar = iframe.contentDocument.querySelector(".searchfield");
|
||||
|
||||
Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
|
||||
|
|
@ -79,14 +81,14 @@ function SI_checkFilter()
|
|||
let propertyViews = stylePanel.cssHtmlTree.propertyViews;
|
||||
|
||||
info("check that the correct properties are visible");
|
||||
for each(let propView in propertyViews) {
|
||||
propertyViews.forEach(function(propView) {
|
||||
let name = propView.name;
|
||||
is(propView.visible, name.indexOf("color") > -1,
|
||||
"span " + name + " property visibility check");
|
||||
}
|
||||
});
|
||||
|
||||
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
|
||||
stylePanel.hidePopup();
|
||||
stylePanel.close();
|
||||
}
|
||||
|
||||
function finishUp()
|
||||
|
|
|
|||
|
|
@ -15,10 +15,12 @@ function createDocument()
|
|||
'</div>';
|
||||
doc.title = "Style Inspector Default Styles Test";
|
||||
ok(window.StyleInspector, "StyleInspector exists");
|
||||
ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = StyleInspector.createPanel();
|
||||
// ok(StyleInspector.isEnabled, "style inspector preference is enabled");
|
||||
stylePanel = new StyleInspector(window);
|
||||
Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
|
||||
stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
|
||||
stylePanel.createPanel(false, function() {
|
||||
stylePanel.open(doc.body);
|
||||
});
|
||||
}
|
||||
|
||||
function runStyleInspectorTests()
|
||||
|
|
@ -59,7 +61,7 @@ function SI_check()
|
|||
function SI_toggleDefaultStyles()
|
||||
{
|
||||
// Click on the checkbox.
|
||||
let iframe = stylePanel.querySelector("iframe");
|
||||
let iframe = stylePanel.iframe;
|
||||
let checkbox = iframe.contentDocument.querySelector(".userStyles");
|
||||
Services.obs.addObserver(SI_checkDefaultStyles, "StyleInspector-populated", false);
|
||||
EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
|
||||
|
|
@ -75,13 +77,18 @@ function SI_checkDefaultStyles()
|
|||
"span background-color property is visible");
|
||||
|
||||
Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
|
||||
stylePanel.hidePopup();
|
||||
stylePanel.close();
|
||||
}
|
||||
|
||||
function propertyVisible(aName)
|
||||
{
|
||||
info("Checking property visibility for " + aName);
|
||||
let propertyViews = stylePanel.cssHtmlTree.propertyViews;
|
||||
return propertyViews[aName].className == "property-view";
|
||||
for each (let propView in propertyViews) {
|
||||
if (propView.name == aName) {
|
||||
return propView.className == "property-view";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function finishUp()
|
||||
|
|
|
|||
|
|
@ -115,8 +115,10 @@ function teststylePanels() {
|
|||
for (let i = 0, max = stylePanels.length; i < max; i++) {
|
||||
ok(stylePanels[i], "style inspector instance " + i +
|
||||
" correctly initialized");
|
||||
ok(stylePanels[i].isOpen(), "style inspector " + i + " is open");
|
||||
is(stylePanels[i].state, "open", "style inspector " + i + " is open");
|
||||
|
||||
/* // the following should be tested elsewhere
|
||||
// TODO bug 696166
|
||||
let htmlTree = stylePanels[i].cssHtmlTree;
|
||||
let cssLogic = htmlTree.cssLogic;
|
||||
let elt = eltArray[i];
|
||||
|
|
@ -149,6 +151,7 @@ function teststylePanels() {
|
|||
is(selector, "#container", "correct best match for #container");
|
||||
is(value, "fantasy", "correct css property value for #" + eltId);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
info("hiding stylePanels[1]");
|
||||
|
|
@ -160,9 +163,9 @@ function teststylePanels() {
|
|||
function styleInspectorClosedByHide()
|
||||
{
|
||||
Services.obs.removeObserver(styleInspectorClosedByHide, "StyleInspector-closed", false);
|
||||
ok(stylePanels[0].isOpen(), "instance stylePanels[0] is still open");
|
||||
ok(!stylePanels[1].isOpen(), "instance stylePanels[1] is hidden");
|
||||
ok(stylePanels[2].isOpen(), "instance stylePanels[2] is still open");
|
||||
is(stylePanels[0].state, "open", "instance stylePanels[0] is still open");
|
||||
is(stylePanels[1].state, undefined, "instance stylePanels[1] is hidden");
|
||||
is(stylePanels[2].state, "open", "instance stylePanels[2] is still open");
|
||||
|
||||
info("closing web console");
|
||||
Services.obs.addObserver(styleInspectorClosedFromConsole1,
|
||||
|
|
|
|||
|
|
@ -4578,9 +4578,12 @@ function JSTermHelper(aJSTerm)
|
|||
}
|
||||
|
||||
if (!errstr) {
|
||||
let stylePanel = StyleInspector.createPanel();
|
||||
stylePanel.setAttribute("hudToolId", aJSTerm.hudId);
|
||||
stylePanel.showTool(aNode);
|
||||
let chromeWin = HUDService.getHudReferenceById(aJSTerm.hudId).chromeWindow;
|
||||
let styleInspector = new StyleInspector(chromeWin);
|
||||
styleInspector.createPanel(false, function() {
|
||||
styleInspector.panel.setAttribute("hudToolId", aJSTerm.hudId);
|
||||
styleInspector.open(aNode);
|
||||
});
|
||||
} else {
|
||||
aJSTerm.writeOutput(errstr + "\n", CATEGORY_OUTPUT, SEVERITY_ERROR);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1954,6 +1954,54 @@ panel[dimmed="true"] {
|
|||
outline-color: white;
|
||||
}
|
||||
|
||||
/* Highlighter toolbar */
|
||||
|
||||
#inspector-toolbar {
|
||||
-moz-appearance: none;
|
||||
padding: 4px 3px;
|
||||
border-top: 1px solid hsla(210, 8%, 5%, .65);
|
||||
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
|
||||
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton,
|
||||
#inspector-tools > toolbarbutton {
|
||||
-moz-appearance: none;
|
||||
min-width: 78px;
|
||||
min-height: 22px;
|
||||
color: hsl(210,30%,85%);
|
||||
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
|
||||
border: 1px solid hsla(210,8%,5%,.45);
|
||||
border-radius: 3px;
|
||||
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
|
||||
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton:not([checked]):hover:active,
|
||||
#inspector-tools > toolbarbutton:not([checked]):hover:active {
|
||||
border-color: hsla(210,8%,5%,.6);
|
||||
background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
|
||||
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton[checked],
|
||||
#inspector-tools > toolbarbutton[checked] {
|
||||
color: hsl(208,100%,60%) !important;
|
||||
border-color: hsla(210,8%,5%,.6) !important;
|
||||
background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
|
||||
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton[checked]:hover,
|
||||
#inspector-tools > toolbarbutton[checked]:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton[checked]:hover:active,
|
||||
#inspector-tools > toolbarbutton[checked]:hover:active {
|
||||
background-color: hsla(210,8%,5%,.2) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* need a "bumpy" background image for this!
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -2563,8 +2563,7 @@ panel[dimmed="true"] {
|
|||
|
||||
#inspector-toolbar {
|
||||
-moz-appearance: none;
|
||||
height: 32px;
|
||||
padding: 0 3px;
|
||||
padding: 4px 3px;
|
||||
border-top: 1px solid hsla(210, 8%, 5%, .65);
|
||||
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
|
||||
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
|
||||
|
|
@ -2573,17 +2572,21 @@ panel[dimmed="true"] {
|
|||
#inspector-inspect-toolbutton,
|
||||
#inspector-tools > toolbarbutton {
|
||||
-moz-appearance: none;
|
||||
width: 78px;
|
||||
margin: 3px 5px;
|
||||
min-width: 78px;
|
||||
min-height: 22px;
|
||||
color: hsl(210,30%,85%);
|
||||
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
|
||||
border: 1px solid hsla(210,8%,5%,.45);
|
||||
border-radius: @toolbarbuttonCornerRadius@;
|
||||
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1));
|
||||
background-clip: padding-box;
|
||||
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
|
||||
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton > .toolbarbutton-text ,
|
||||
#inspector-tools > toolbarbutton > .toolbarbutton-text {
|
||||
margin: 1px 6px;
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton:not([checked]):hover:active,
|
||||
#inspector-tools > toolbarbutton:not([checked]):hover:active {
|
||||
border-color: hsla(210,8%,5%,.6);
|
||||
|
|
|
|||
|
|
@ -2665,6 +2665,54 @@ panel[dimmed="true"] {
|
|||
outline-color: white;
|
||||
}
|
||||
|
||||
/* Highlighter toolbar */
|
||||
|
||||
#inspector-toolbar {
|
||||
-moz-appearance: none;
|
||||
padding: 4px 3px;
|
||||
border-top: 1px solid hsla(211,68%,6%,.65) !important;
|
||||
box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
|
||||
background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton,
|
||||
#inspector-tools > toolbarbutton {
|
||||
-moz-appearance: none;
|
||||
min-width: 78px;
|
||||
min-height: 22px;
|
||||
color: hsl(210,30%,85%);
|
||||
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
|
||||
border: 1px solid hsla(211,68%,6%,.5);
|
||||
border-radius: 3px;
|
||||
background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
|
||||
box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton > .toolbarbutton-icon,
|
||||
#inspector-tools > toolbarbutton > .toolbarbutton-icon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton:not([checked]):hover:active,
|
||||
#inspector-tools > toolbarbutton:not([checked]):hover:active {
|
||||
background-color: hsla(210,18%,9%,.1);
|
||||
background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
|
||||
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton[checked],
|
||||
#inspector-tools > toolbarbutton[checked] {
|
||||
border-color: hsla(211,68%,6%,.6);
|
||||
background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
|
||||
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
|
||||
color: hsl(200,100%,60%) !important;
|
||||
}
|
||||
|
||||
#inspector-inspect-toolbutton[checked]:hover:active,
|
||||
#inspector-tools > toolbarbutton[checked]:hover:active {
|
||||
background-color: hsla(211,68%,6%,.2);
|
||||
}
|
||||
|
||||
/*
|
||||
* need a "bumpy" background image for this!
|
||||
*/
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче