Bug 583041 - Style Editor integration; part 3; r=rcampbell,dao,l10n

This commit is contained in:
Cedric Vivier 2011-10-26 17:02:08 +08:00
Родитель 858a03f3ce
Коммит 90d9020e51
31 изменённых файлов: 3726 добавлений и 4 удалений

Просмотреть файл

@ -1018,6 +1018,9 @@ pref("devtools.ruleview.enabled", true);
// Enable the Scratchpad tool.
pref("devtools.scratchpad.enabled", true);
// Enable the Style Editor.
pref("devtools.styleeditor.enabled", true);
// Enable tools for Chrome development.
pref("devtools.chrome.enabled", false);

Просмотреть файл

@ -192,6 +192,11 @@
label="&scratchpad.label;"
key="key_scratchpad"
command="Tools:Scratchpad"/>
<menuitem id="appmenu_styleeditor"
hidden="true"
label="&styleeditor.label;"
key="key_styleeditor"
command="Tools:StyleEditor"/>
<menuitem id="appmenu_pageSource"
label="&viewPageSourceCmd.label;"
command="View:PageSource"

Просмотреть файл

@ -550,6 +550,12 @@
accesskey="&scratchpad.accesskey;"
key="key_scratchpad"
command="Tools:Scratchpad"/>
<menuitem id="menu_styleeditor"
hidden="true"
label="&styleeditor.label;"
accesskey="&styleeditor.accesskey;"
key="key_styleeditor"
command="Tools:StyleEditor"/>
<menuitem id="menu_pageSource"
accesskey="&pageSourceCmd.accesskey;"
label="&pageSourceCmd.label;"

Просмотреть файл

@ -126,6 +126,7 @@
<command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
<command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();" disabled="true"/>
<command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
<command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
<command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
<command id="Tools:Sanitize"
oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
@ -244,6 +245,8 @@
<key id="key_inspect" key="&inspectMenu.commandkey;" command="Tools:Inspect" modifiers="accel,shift"/>
<key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
keytext="&scratchpad.keytext;" command="Tools:Scratchpad"/>
<key id="key_styleeditor" keycode="&styleeditor.keycode;" modifiers="shift"
keytext="&styleeditor.keytext;" command="Tools:StyleEditor"/>
<key id="openFileKb" key="&openFileCmd.commandkey;" command="Browser:OpenFile" modifiers="accel"/>
<key id="key_savePage" key="&savePageCmd.commandkey;" command="Browser:SavePage" modifiers="accel"/>
<key id="printKb" key="&printCmd.commandkey;" command="cmd_print" modifiers="accel"/>

Просмотреть файл

@ -1721,6 +1721,16 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
#endif
}
// Enable Style Editor?
let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
if (styleEditorEnabled) {
document.getElementById("menu_styleeditor").hidden = false;
document.getElementById("Tools:StyleEditor").removeAttribute("disabled");
#ifdef MENUBAR_CAN_AUTOHIDE
document.getElementById("appmenu_styleeditor").hidden = false;
#endif
}
#ifdef MENUBAR_CAN_AUTOHIDE
// If the user (or the locale) hasn't enabled the top-level "Character
// Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
@ -8970,6 +8980,34 @@ XPCOMUtils.defineLazyGetter(Scratchpad, "ScratchpadManager", function() {
return tmp.ScratchpadManager;
});
var StyleEditor = {
prefEnabledName: "devtools.styleeditor.enabled",
openChrome: function SE_openChrome()
{
const CHROME_URL = "chrome://browser/content/styleeditor.xul";
const CHROME_WINDOW_TYPE = "Tools:StyleEditor";
const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
// focus currently open Style Editor window for this document, if any
let contentWindow = gBrowser.selectedBrowser.contentWindow;
let contentWindowID = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
let enumerator = Services.wm.getEnumerator(CHROME_WINDOW_TYPE);
while (enumerator.hasMoreElements()) {
var win = enumerator.getNext();
if (win.styleEditorChrome.contentWindowID == contentWindowID) {
win.focus();
return win;
}
}
let chromeWindow = Services.ww.openWindow(null, CHROME_URL, "_blank",
CHROME_WINDOW_FLAGS,
contentWindow);
chromeWindow.focus();
return chromeWindow;
}
};
XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
#ifdef XP_WIN

Просмотреть файл

@ -50,6 +50,7 @@ DIRS = \
highlighter \
webconsole \
sourceeditor \
styleeditor \
styleinspector \
scratchpad \
shared \

Просмотреть файл

@ -3,9 +3,13 @@ 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/styleeditor.xul (styleeditor/styleeditor.xul)
content/browser/splitview.css (styleeditor/splitview.css)
content/browser/styleeditor.css (styleeditor/styleeditor.css)
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)
content/browser/orion-mozilla.css (sourceeditor/orion/mozilla.css)

Просмотреть файл

@ -0,0 +1,54 @@
# ***** 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 Style Editor code.
#
# The Initial Developer of the Original Code is Mozilla Foundation.
#
# Portions created by the Initial Developer are Copyright (C) 2010
# the Initial Developer. All Rights Reserved.
#
# Contributor(s):
# Cedric Vivier <cedricv@neonux.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 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 *****
DEPTH = ../../..
topsrcdir = @top_srcdir@
srcdir = @srcdir@
VPATH = @srcdir@
include $(DEPTH)/config/autoconf.mk
ifdef ENABLE_TESTS
ifneq (mobile,$(MOZ_BUILD_APP))
DIRS += test
endif
endif
include $(topsrcdir)/config/rules.mk
libs::
$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools

Просмотреть файл

@ -0,0 +1,488 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
"use strict";
const EXPORTED_SYMBOLS = ["SplitView"];
/* this must be kept in sync with CSS (ie. splitview.css) */
const LANDSCAPE_MEDIA_QUERY = "(min-aspect-ratio: 5/3)";
const BINDING_USERDATA = "splitview-binding";
/**
* SplitView constructor
*
* Initialize the split view UI on an existing DOM element.
*
* A split view contains items, each of those having one summary and one details
* elements.
* It is adaptive as it behaves similarly to a richlistbox when there the aspect
* ratio is narrow or as a pair listbox-box otherwise.
*
* @param DOMElement aRoot
* @see appendItem
*/
function SplitView(aRoot)
{
this._root = aRoot;
this._controller = aRoot.querySelector(".splitview-controller");
this._nav = aRoot.querySelector(".splitview-nav");
this._side = aRoot.querySelector(".splitview-side-details");
this._activeSummary = null
this._mql = aRoot.ownerDocument.defaultView.matchMedia(LANDSCAPE_MEDIA_QUERY);
this._filter = aRoot.querySelector(".splitview-filter");
if (this._filter) {
this._setupFilterBox();
}
// items list focus and search-on-type handling
this._nav.addEventListener("keydown", function onKeyCatchAll(aEvent) {
function getFocusedItemWithin(nav) {
let node = nav.ownerDocument.activeElement;
while (node && node.parentNode != nav) {
node = node.parentNode;
}
return node;
}
// do not steal focus from inside iframes or textboxes
if (aEvent.target.ownerDocument != this._nav.ownerDocument ||
aEvent.target.tagName == "input" ||
aEvent.target.tagName == "textbox" ||
aEvent.target.tagName == "textarea" ||
aEvent.target.classList.contains("textbox")) {
return false;
}
// handle keyboard navigation within the items list
let newFocusOrdinal;
if (aEvent.keyCode == aEvent.DOM_VK_PAGE_UP ||
aEvent.keyCode == aEvent.DOM_VK_HOME) {
newFocusOrdinal = 0;
} else if (aEvent.keyCode == aEvent.DOM_VK_PAGE_DOWN ||
aEvent.keyCode == aEvent.DOM_VK_END) {
newFocusOrdinal = this._nav.childNodes.length - 1;
} else if (aEvent.keyCode == aEvent.DOM_VK_UP) {
newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
newFocusOrdinal--;
} else if (aEvent.keyCode == aEvent.DOM_VK_DOWN) {
newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
newFocusOrdinal++;
}
if (newFocusOrdinal !== undefined) {
aEvent.stopPropagation();
let el = this.getSummaryElementByOrdinal(newFocusOrdinal);
if (el) {
el.focus();
}
return false;
}
// search-on-type when any non-whitespace character is pressed while list
// has the focus
if (this._filter &&
!/\s/.test(String.fromCharCode(aEvent.which))) {
this._filter.focus();
}
}.bind(this), false);
}
SplitView.prototype = {
/**
* Retrieve whether the UI currently has a landscape orientation.
*
* @return boolean
*/
get isLandscape() this._mql.matches,
/**
* Retrieve the root element.
*
* @return DOMElement
*/
get rootElement() this._root,
/**
* Retrieve the active item's summary element or null if there is none.
*
* @return DOMElement
*/
get activeSummary() this._activeSummary,
/**
* Set the active item's summary element.
*
* @param DOMElement aSummary
*/
set activeSummary(aSummary)
{
if (aSummary == this._activeSummary) {
return;
}
if (this._activeSummary) {
let binding = this._activeSummary.getUserData(BINDING_USERDATA);
this._activeSummary.classList.remove("splitview-active");
binding._details.classList.remove("splitview-active");
if (binding.onHide) {
binding.onHide(this._activeSummary, binding._details, binding.data);
}
}
if (!aSummary) {
return;
}
let binding = aSummary.getUserData(BINDING_USERDATA);
aSummary.classList.add("splitview-active");
binding._details.classList.add("splitview-active");
this._activeSummary = aSummary;
if (binding.onShow) {
binding.onShow(aSummary, binding._details, binding.data);
}
aSummary.scrollIntoView();
},
/**
* Retrieve the active item's details element or null if there is none.
* @return DOMElement
*/
get activeDetails()
{
let summary = this.activeSummary;
return summary ? summary.getUserData(BINDING_USERDATA)._details : null;
},
/**
* Retrieve the summary element for a given ordinal.
*
* @param number aOrdinal
* @return DOMElement
* Summary element with given ordinal or null if not found.
* @see appendItem
*/
getSummaryElementByOrdinal: function SEC_getSummaryElementByOrdinal(aOrdinal)
{
return this._nav.querySelector("* > li[data-ordinal='" + aOrdinal + "']");
},
/**
* Append an item to the split view.
*
* @param DOMElement aSummary
* The summary element for the item.
* @param DOMElement aDetails
* The details element for the item.
* @param object aOptions
* Optional object that defines custom behavior and data for the item.
* All properties are optional :
* - function(DOMElement summary, DOMElement details, object data) onCreate
* Called when the item has been added.
* - function(summary, details, data) onShow
* Called when the item is shown/active.
* - function(summary, details, data) onHide
* Called when the item is hidden/inactive.
* - function(summary, details, data) onDestroy
* Called when the item has been removed.
* - function(summary, details, data, query) onFilterBy
* Called when the user performs a filtering search.
* If the function returns false, the item does not match query
* string and will be hidden.
* - object data
* Object to pass to the callbacks above.
* - boolean disableAnimations
* If true there is no animation or scrolling when this item is
* appended. Set this when batch appending (eg. initial population).
* - number ordinal
* Items with a lower ordinal are displayed before those with a
* higher ordinal.
*/
appendItem: function ASV_appendItem(aSummary, aDetails, aOptions)
{
let binding = aOptions || {};
binding._summary = aSummary;
binding._details = aDetails;
aSummary.setUserData(BINDING_USERDATA, binding, null);
if (!binding.disableAnimations) {
aSummary.classList.add("splitview-slide");
aSummary.classList.add("splitview-flash");
}
this._nav.appendChild(aSummary);
aSummary.addEventListener("click", function onSummaryClick(aEvent) {
aEvent.stopPropagation();
this.activeSummary = aSummary;
}.bind(this), false);
this._side.appendChild(aDetails);
if (binding.onCreate) {
// queue onCreate handler
this._root.ownerDocument.defaultView.setTimeout(function () {
binding.onCreate(aSummary, aDetails, binding.data);
}, 0);
}
if (!binding.disableAnimations) {
scheduleAnimation(aSummary, "splitview-slide", "splitview-flash");
aSummary.scrollIntoView();
}
},
/**
* Append an item to the split view according to two template elements
* (one for the item's summary and the other for the item's details).
*
* @param string aName
* Name of the template elements to instantiate.
* Requires two (hidden) DOM elements with id "splitview-tpl-summary-"
* and "splitview-tpl-details-" suffixed with aName.
* @param object aOptions
* Optional object that defines custom behavior and data for the item.
* See appendItem for full description.
* @return object{summary:,details:}
* Object with the new DOM elements created for summary and details.
* @see appendItem
*/
appendTemplatedItem: function ASV_appendTemplatedItem(aName, aOptions)
{
aOptions = aOptions || {};
let summary = this._root.querySelector("#splitview-tpl-summary-" + aName);
let details = this._root.querySelector("#splitview-tpl-details-" + aName);
summary = summary.cloneNode(true);
summary.id = "";
if (aOptions.ordinal !== undefined) { // can be zero
summary.style.MozBoxOrdinalGroup = aOptions.ordinal;
summary.setAttribute("data-ordinal", aOptions.ordinal);
}
details = details.cloneNode(true);
details.id = "";
this.appendItem(summary, details, aOptions);
return {summary: summary, details: details};
},
/**
* Remove an item from the split view.
*
* @param DOMElement aSummary
* Summary element of the item to remove.
*/
removeItem: function ASV_removeItem(aSummary)
{
if (aSummary == this._activeSummary) {
this.activeSummary = null;
}
let binding = aSummary.getUserData(BINDING_USERDATA);
aSummary.parentNode.removeChild(aSummary);
binding._details.parentNode.removeChild(binding._details);
if (binding.onDestroy) {
binding.onDestroy(aSummary, binding._details, binding.data);
}
},
/**
* Remove all items from the split view.
*/
removeAll: function ASV_removeAll()
{
while (this._nav.hasChildNodes()) {
this.removeItem(this._nav.firstChild);
}
},
/**
* Filter items by given string.
* Matching is performed on every item by calling onFilterBy when defined
* and then by searching aQuery in the summary element's text item.
* Non-matching item is hidden.
*
* If no item matches, 'splitview-all-filtered' class is set on the filter
* input element and the splitview-nav element.
*
* @param string aQuery
* The query string. Use null to reset (no filter).
* @return number
* The number of filtered (non-matching) item.
*/
filterItemsBy: function ASV_filterItemsBy(aQuery)
{
if (!this._nav.hasChildNodes()) {
return 0;
}
if (aQuery) {
aQuery = aQuery.trim();
}
if (!aQuery) {
for (let i = 0; i < this._nav.childNodes.length; ++i) {
this._nav.childNodes[i].classList.remove("splitview-filtered");
}
this._filter.classList.remove("splitview-all-filtered");
this._nav.classList.remove("splitview-all-filtered");
return 0;
}
let count = 0;
let filteredCount = 0;
for (let i = 0; i < this._nav.childNodes.length; ++i) {
let summary = this._nav.childNodes[i];
let matches = false;
let binding = summary.getUserData(BINDING_USERDATA);
if (binding.onFilterBy) {
matches = binding.onFilterBy(summary, binding._details, binding.data, aQuery);
}
if (!matches) { // try text content
let content = summary.textContent.toUpperCase();
matches = (content.indexOf(aQuery.toUpperCase()) > -1);
}
count++;
if (!matches) {
summary.classList.add("splitview-filtered");
filteredCount++;
} else {
summary.classList.remove("splitview-filtered");
}
}
if (count > 0 && filteredCount == count) {
this._filter.classList.add("splitview-all-filtered");
this._nav.classList.add("splitview-all-filtered");
} else {
this._filter.classList.remove("splitview-all-filtered");
this._nav.classList.remove("splitview-all-filtered");
}
return filteredCount;
},
/**
* Set the item's CSS class name.
* This sets the class on both the summary and details elements, retaining
* any SplitView-specific classes.
*
* @param DOMElement aSummary
* Summary element of the item to set.
* @param string aClassName
* One or more space-separated CSS classes.
*/
setItemClassName: function ASV_setItemClassName(aSummary, aClassName)
{
let binding = aSummary.getUserData(BINDING_USERDATA);
let viewSpecific;
viewSpecific = aSummary.className.match(/(splitview\-[\w-]+)/g);
viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
aSummary.className = viewSpecific + " " + aClassName;
viewSpecific = binding._details.className.match(/(splitview\-[\w-]+)/g);
viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
binding._details.className = viewSpecific + " " + aClassName;
},
/**
* Set up filter search box.
*/
_setupFilterBox: function ASV__setupFilterBox()
{
let clearFilter = function clearFilter(aEvent) {
this._filter.value = "";
this.filterItemsBy("");
return false;
}.bind(this);
this._filter.addEventListener("command", function onFilterInput(aEvent) {
this.filterItemsBy(this._filter.value);
}.bind(this), false);
this._filter.addEventListener("keyup", function onFilterKeyUp(aEvent) {
if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) {
clearFilter();
}
if (aEvent.keyCode == aEvent.DOM_VK_ENTER ||
aEvent.keyCode == aEvent.DOM_VK_RETURN) {
// autofocus matching item if there is only one
let matches = this._nav.querySelectorAll("* > li:not(.splitview-filtered)");
if (matches.length == 1) {
this.activeSummary = matches[0];
}
}
}.bind(this), false);
let clearButtons = this._root.querySelectorAll(".splitview-filter-clearButton");
for (let i = 0; i < clearButtons.length; ++i) {
clearButtons[i].addEventListener("click", clearFilter, false);
}
}
};
//
// private helpers
/**
* Schedule one or multiple CSS animation(s) on an element.
*
* @param DOMElement aElement
* @param string ...
* One or multiple animation class name(s).
*/
function scheduleAnimation(aElement)
{
let classes = Array.prototype.slice.call(arguments, 1);
for each (let klass in classes) {
aElement.classList.add(klass);
}
let window = aElement.ownerDocument.defaultView;
window.mozRequestAnimationFrame(function triggerAnimation() {
for each (let klass in classes) {
aElement.classList.remove(klass);
}
});
}

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -0,0 +1,488 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
"use strict";
const EXPORTED_SYMBOLS = ["StyleEditorChrome"];
const Cc = Components.classes;
const Ci = Components.interfaces;
const Cu = Components.utils;
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/PluralForm.jsm");
Cu.import("resource:///modules/devtools/StyleEditor.jsm");
Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
Cu.import("resource:///modules/devtools/SplitView.jsm");
const STYLE_EDITOR_TEMPLATE = "stylesheet";
/**
* StyleEditorChrome constructor.
*
* The 'chrome' of the Style Editor is all the around the actual editor (textbox).
* Manages the sheet selector, history, and opened editor(s) for the attached
* content window.
*
* @param DOMElement aRoot
* Element that owns the chrome UI.
* @param DOMWindow aContentWindow
* Content DOMWindow to attach to this chrome.
*/
function StyleEditorChrome(aRoot, aContentWindow)
{
assert(aRoot, "Argument 'aRoot' is required to initialize StyleEditorChrome.");
this._root = aRoot;
this._document = this._root.ownerDocument;
this._window = this._document.defaultView;
this._editors = [];
this._listeners = []; // @see addChromeListener
this._contentWindow = null;
this._isContentAttached = false;
let initializeUI = function (aEvent) {
if (aEvent) {
this._window.removeEventListener("load", initializeUI, false);
}
let viewRoot = this._root.parentNode.querySelector(".splitview-root");
this._view = new SplitView(viewRoot);
this._setupChrome();
// attach to the content window
this.contentWindow = aContentWindow;
this._contentWindowID = null;
}.bind(this);
if (this._document.readyState == "complete") {
initializeUI();
} else {
this._window.addEventListener("load", initializeUI, false);
}
}
StyleEditorChrome.prototype = {
/**
* Retrieve the content window attached to this chrome.
*
* @return DOMWindow
* Content window or null if no content window is attached.
*/
get contentWindow() this._contentWindow,
/**
* Retrieve the ID of the content window attached to this chrome.
*
* @return number
* Window ID or -1 if no content window is attached.
*/
get contentWindowID()
{
try {
return this._contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
} catch (ex) {
return -1;
}
},
/**
* Set the content window attached to this chrome.
* Content attach or detach events/notifications are triggered after the
* operation is complete (possibly asynchronous if the content is not fully
* loaded yet).
*
* @param DOMWindow aContentWindow
* @see addChromeListener
*/
set contentWindow(aContentWindow)
{
if (this._contentWindow == aContentWindow) {
return; // no change
}
this._contentWindow = aContentWindow;
if (!aContentWindow) {
this._disableChrome();
return;
}
let onContentUnload = function () {
aContentWindow.removeEventListener("unload", onContentUnload, false);
if (this.contentWindow == aContentWindow) {
this.contentWindow = null; // detach
}
}.bind(this);
aContentWindow.addEventListener("unload", onContentUnload, false);
if (aContentWindow.document.readyState == "complete") {
this._populateChrome();
return;
} else {
let onContentReady = function () {
aContentWindow.removeEventListener("load", onContentReady, false);
this._populateChrome();
}.bind(this);
aContentWindow.addEventListener("load", onContentReady, false);
}
},
/**
* Retrieve the content document attached to this chrome.
*
* @return DOMDocument
*/
get contentDocument()
{
return this._contentWindow ? this._contentWindow.document : null;
},
/**
* Retrieve whether the content has been attached and StyleEditor instances
* exist for all of its stylesheets.
*
* @return boolean
* @see addChromeListener
*/
get isContentAttached() this._isContentAttached,
/**
* Retrieve an array with the StyleEditor instance for each live style sheet,
* ordered by style sheet index.
*
* @return Array<StyleEditor>
*/
get editors()
{
let editors = [];
this._editors.forEach(function (aEditor) {
if (aEditor.styleSheetIndex >= 0) {
editors[aEditor.styleSheetIndex] = aEditor;
}
});
return editors;
},
/**
* Add a listener for StyleEditorChrome events.
*
* The listener implements IStyleEditorChromeListener := {
* onContentAttach: Called when a content window has been attached.
* All editors are instantiated, though they might
* not be loaded yet.
* Arguments: (StyleEditorChrome aChrome)
* @see contentWindow
* @see StyleEditor.isLoaded
* @see StyleEditor.addActionListener
*
* onContentDetach: Called when the content window has been detached.
* Arguments: (StyleEditorChrome aChrome)
* @see contentWindow
*
* onEditorAdded: Called when a stylesheet (therefore a StyleEditor
* instance) has been added to the UI.
* Arguments (StyleEditorChrome aChrome,
* StyleEditor aEditor)
* }
*
* All listener methods are optional.
*
* @param IStyleEditorChromeListener aListener
* @see removeChromeListener
*/
addChromeListener: function SEC_addChromeListener(aListener)
{
this._listeners.push(aListener);
},
/**
* Remove a listener for Chrome events from the current list of listeners.
*
* @param IStyleEditorChromeListener aListener
* @see addChromeListener
*/
removeChromeListener: function SEC_removeChromeListener(aListener)
{
let index = this._listeners.indexOf(aListener);
if (index != -1) {
this._listeners.splice(index, 1);
}
},
/**
* Trigger named handlers in StyleEditorChrome listeners.
*
* @param string aName
* Name of the event to trigger.
* @param Array aArgs
* Optional array of arguments to pass to the listener(s).
* @see addActionListener
*/
_triggerChromeListeners: function SE__triggerChromeListeners(aName, aArgs)
{
// insert the origin Chrome instance as first argument
if (!aArgs) {
aArgs = [this];
} else {
aArgs.unshift(this);
}
// trigger all listeners that have this named handler
for (let i = 0; i < this._listeners.length; ++i) {
let listener = this._listeners[i];
let handler = listener["on" + aName];
if (handler) {
handler.apply(listener, aArgs);
}
}
},
/**
* Set up the chrome UI. Install event listeners and so on.
*/
_setupChrome: function SEC__setupChrome()
{
// wire up UI elements
wire(this._view.rootElement, ".style-editor-newButton", function onNewButton() {
let editor = new StyleEditor(this.contentDocument);
this._editors.push(editor);
editor.addActionListener(this);
editor.load();
}.bind(this));
wire(this._view.rootElement, ".style-editor-importButton", function onImportButton() {
let editor = new StyleEditor(this.contentDocument);
this._editors.push(editor);
editor.addActionListener(this);
editor.importFromFile(this._mockImportFile || null, this._window);
}.bind(this));
},
/**
* Reset the chrome UI to an empty state.
*/
_resetChrome: function SEC__resetChrome()
{
this._editors.forEach(function (aEditor) {
aEditor.removeActionListener(this);
}.bind(this));
this._editors = [];
this._view.removeAll();
},
/**
* Populate the chrome UI according to the content document.
*
* @see StyleEditor._setupShadowStyleSheet
*/
_populateChrome: function SEC__populateChrome()
{
this._resetChrome();
this._document.title = _("chromeWindowTitle",
this.contentDocument.title || this.contentDocument.location.href);
let document = this.contentDocument;
for (let i = 0; i < document.styleSheets.length; ++i) {
let styleSheet = document.styleSheets[i];
let editor = new StyleEditor(document, styleSheet);
editor.addActionListener(this);
this._editors.push(editor);
}
this._triggerChromeListeners("ContentAttach");
// Queue editors loading so that ContentAttach is consistently triggered
// right after all editor instances are available (this.editors) but are
// NOT loaded/ready yet. This also helps responsivity during loading when
// there are many heavy stylesheets.
this._editors.forEach(function (aEditor) {
this._window.setTimeout(aEditor.load.bind(aEditor), 0);
}, this);
},
/**
* Disable all UI, effectively making editors read-only.
* This is automatically called when no content window is attached.
*
* @see contentWindow
*/
_disableChrome: function SEC__disableChrome()
{
let matches = this._root.querySelectorAll("button,input,select");
for (let i = 0; i < matches.length; ++i) {
matches[i].setAttribute("disabled", "disabled");
}
this.editors.forEach(function onEnterReadOnlyMode(aEditor) {
aEditor.readOnly = true;
});
this._view.rootElement.setAttribute("disabled", "disabled");
this._triggerChromeListeners("ContentDetach");
},
/**
* Retrieve the summary element for a given editor.
*
* @param StyleEditor aEditor
* @return DOMElement
* Item's summary element or null if not found.
* @see SplitView
*/
getSummaryElementForEditor: function SEC_getSummaryElementForEditor(aEditor)
{
return this._view.getSummaryElementByOrdinal(aEditor.styleSheetIndex);
},
/**
* Update split view summary of given StyleEditor instance.
*
* @param StyleEditor aEditor
* @param DOMElement aSummary
* Optional item's summary element to update. If none, item corresponding
* to passed aEditor is used.
*/
_updateSummaryForEditor: function SEC__updateSummaryForEditor(aEditor, aSummary)
{
let summary = aSummary || this.getSummaryElementForEditor(aEditor);
let ruleCount = aEditor.styleSheet.cssRules.length;
this._view.setItemClassName(summary, aEditor.flags);
text(summary, ".stylesheet-name", aEditor.getFriendlyName());
text(summary, ".stylesheet-title", aEditor.styleSheet.title || "");
text(summary, ".stylesheet-rule-count",
PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount));
text(summary, ".stylesheet-error-message", aEditor.errorMessage);
},
/**
* IStyleEditorActionListener implementation
* @See StyleEditor.addActionListener.
*/
/**
* Called when source has been loaded and editor is ready for some action.
*
* @param StyleEditor aEditor
*/
onLoad: function SEAL_onLoad(aEditor)
{
let item = this._view.appendTemplatedItem(STYLE_EDITOR_TEMPLATE, {
data: {
editor: aEditor
},
disableAnimations: this._alwaysDisableAnimations,
ordinal: aEditor.styleSheetIndex,
onCreate: function ASV_onItemCreate(aSummary, aDetails, aData) {
let editor = aData.editor;
wire(aSummary, ".stylesheet-enabled", function onToggleEnabled(aEvent) {
aEvent.stopPropagation();
aEvent.target.blur();
editor.enableStyleSheet(editor.styleSheet.disabled);
});
wire(aSummary, ".stylesheet-saveButton", function onSaveButton(aEvent) {
aEvent.stopPropagation();
aEvent.target.blur();
editor.saveToFile(editor.savedFile);
});
this._updateSummaryForEditor(editor, aSummary);
aSummary.addEventListener("focus", function onSummaryFocus(aEvent) {
if (aEvent.target == aSummary) {
// autofocus the stylesheet name
aSummary.querySelector(".stylesheet-name").focus();
}
}, false);
// autofocus the first or new stylesheet
if (editor.styleSheetIndex == 0 ||
editor.hasFlag(StyleEditorFlags.NEW)) {
this._view.activeSummary = aSummary;
}
this._triggerChromeListeners("EditorAdded", [editor]);
}.bind(this),
onShow: function ASV_onItemShow(aSummary, aDetails, aData) {
let editor = aData.editor;
if (!editor.inputElement) {
// attach editor to input element the first time it is shown
editor.inputElement = aDetails.querySelector(".stylesheet-editor-input");
}
editor.inputElement.focus();
}
});
},
/**
* Called when an editor flag changed.
*
* @param StyleEditor aEditor
* @param string aFlagName
* @see StyleEditor.flags
*/
onFlagChange: function SEAL_onFlagChange(aEditor, aFlagName)
{
this._updateSummaryForEditor(aEditor);
},
/**
* Called when when changes have been committed/applied to the live DOM
* stylesheet.
*
* @param StyleEditor aEditor
*/
onCommit: function SEAL_onCommit(aEditor)
{
this._updateSummaryForEditor(aEditor);
},
};

Просмотреть файл

@ -0,0 +1,196 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
"use strict";
const EXPORTED_SYMBOLS = [
"_",
"assert",
"attr",
"getCurrentBrowserTabContentWindow",
"log",
"text",
"wire"
];
const Cc = Components.classes;
const Ci = Components.interfaces;
const Cu = Components.utils;
Cu.import("resource://gre/modules/Services.jsm");
const PROPERTIES_URL = "chrome://browser/locale/devtools/styleeditor.properties";
const console = Services.console;
const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
/**
* Returns a localized string with the given key name from the string bundle.
*
* @param aName
* @param ...rest
* Optional arguments to format in the string.
* @return string
*/
function _(aName)
{
if (arguments.length == 1) {
return gStringBundle.GetStringFromName(aName);
}
let rest = Array.prototype.slice.call(arguments, 1);
return gStringBundle.formatStringFromName(aName, rest, rest.length);
}
/**
* Assert an expression is true or throw if false.
*
* @param aExpression
* @param aMessage
* Optional message.
* @return aExpression
*/
function assert(aExpression, aMessage)
{
if (!!!(aExpression)) {
let msg = aMessage ? "ASSERTION FAILURE:" + aMessage : "ASSERTION FAILURE";
log(msg);
throw new Error(msg);
}
return aExpression;
}
/**
* Retrieve or set the text content of an element.
*
* @param DOMElement aRoot
* The element to use for querySelector.
* @param string aSelector
* Selector string for the element to get/set the text content.
* @param string aText
* Optional text to set.
* @return string
* Text content of matching element or null if there were no element
* matching aSelector.
*/
function text(aRoot, aSelector, aText)
{
let element = aRoot.querySelector(aSelector);
if (!element) {
return null;
}
if (aText === undefined) {
return element.textContent;
}
element.textContent = aText;
return aText;
}
/**
* Iterates _own_ properties of an object.
*
* @param aObject
* The object to iterate.
* @param function aCallback(aKey, aValue)
*/
function forEach(aObject, aCallback)
{
for (let key in aObject) {
if (aObject.hasOwnProperty(key)) {
aCallback(key, aObject[key]);
}
}
}
/**
* Log a message to the console.
*
* @param ...rest
* One or multiple arguments to log.
* If multiple arguments are given, they will be joined by " " in the log.
*/
function log()
{
console.logStringMessage(Array.prototype.slice.call(arguments).join(" "));
}
/**
* Wire up element(s) matching selector with attributes, event listeners, etc.
*
* @param DOMElement aRoot
* The element to use for querySelectorAll.
* Can be null if aSelector is a DOMElement.
* @param string|DOMElement aSelectorOrElement
* Selector string or DOMElement for the element(s) to wire up.
* @param object aDescriptor
* An object describing how to wire matching selector, supported properties
* are "events", "attributes" and "userData" taking objects themselves.
* Each key of properties above represents the name of the event, attribute
* or userData, with the value being a function used as an event handler,
* string to use as attribute value, or object to use as named userData
* respectively.
* If aDescriptor is a function, the argument is equivalent to :
* {events: {'click': aDescriptor}}
*/
function wire(aRoot, aSelectorOrElement, aDescriptor)
{
let matches;
if (typeof(aSelectorOrElement) == "string") { // selector
matches = aRoot.querySelectorAll(aSelectorOrElement);
if (!matches.length) {
return;
}
} else {
matches = [aSelectorOrElement]; // element
}
if (typeof(aDescriptor) == "function") {
aDescriptor = {events: {click: aDescriptor}};
}
for (let i = 0; i < matches.length; ++i) {
let element = matches[i];
forEach(aDescriptor.events, function (aName, aHandler) {
element.addEventListener(aName, aHandler, false);
});
forEach(aDescriptor.attributes, element.setAttribute);
forEach(aDescriptor.userData, element.setUserData);
}
}

Просмотреть файл

@ -0,0 +1,96 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
box,
.splitview-nav {
-moz-box-flex: 1;
-moz-box-orient: vertical;
}
.splitview-main {
-moz-box-flex: 0;
}
.splitview-controller {
min-height: 8em;
max-height: 14em;
}
.splitview-nav {
display: -moz-box;
}
/* only the active details pane is shown */
.splitview-side-details > * {
display: none;
}
.splitview-side-details > .splitview-active {
display: -moz-box;
}
/* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */
@media (min-aspect-ratio: 5/3) {
.splitview-root {
-moz-box-orient: horizontal;
}
.splitview-controller {
-moz-box-flex: 0;
max-height: none;
}
.splitview-details {
display: none;
}
.splitview-details.splitview-active {
display: -moz-box;
}
}
/* filtered items are hidden */
ol.splitview-nav > li.splitview-filtered {
display: none;
}
/* "empty list" and "all filtered" placeholders are hidden */
.splitview-nav:empty,
.splitview-nav.splitview-all-filtered,
.splitview-nav + .splitview-nav.placeholder {
display: none;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
display: -moz-box;
}

Просмотреть файл

@ -0,0 +1,43 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
.splitview-nav > li hgroup > .stylesheet-error-message {
display: none;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
display: block;
}

Просмотреть файл

@ -0,0 +1,130 @@
<?xml version="1.0"?>
<!-- ***** 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 Style Editor code.
-
- 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):
- Cedric Vivier <cedricv@neonux.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 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 ***** -->
<!DOCTYPE window [
<!ENTITY % styleEditorDTD SYSTEM "chrome://browser/locale/devtools/styleeditor.dtd" >
%styleEditorDTD;
]>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/splitview.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/splitview.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/styleeditor.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/styleeditor.css" type="text/css"?>
<xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns="http://www.w3.org/1999/xhtml"
id="style-editor-chrome-window"
title="&window.title;"
windowtype="Tools:StyleEditor"
width="800" height="280"
persist="screenX screenY width height sizemode">
<xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
<xul:box id="style-editor-chrome" class="splitview-root">
<xul:box class="splitview-side-details"></xul:box>
<xul:box class="splitview-controller">
<xul:box class="splitview-main">
<xul:box class="toolbar">
<xul:button class="style-editor-newButton"
accesskey="&newButton.accesskey;"
tooltiptext="&newButton.tooltip;"
label="&newButton.label;"></xul:button>
<xul:button class="style-editor-importButton"
accesskey="&importButton.accesskey;"
tooltiptext="&importButton.tooltip;"
label="&importButton.label;"></xul:button>
<xul:box class="spacer" flex="1"></xul:box>
<xul:textbox class="splitview-filter"
type="search"
tooltiptext="&searchInput.tooltip;"
placeholder="&searchInput.placeholder;"/>
</xul:box>
</xul:box>
<xul:box class="splitview-nav-container">
<ol class="splitview-nav" tabindex="0"></ol>
<div class="splitview-nav placeholder empty">
<p><strong>&noStyleSheet.label;</strong></p>
<p>&noStyleSheet-tip-start.label;
<a href="#"
class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
&noStyleSheet-tip-end.label;</p>
</div>
<div class="splitview-nav placeholder all-filtered">
<p><strong>&searchNoResults.label;</strong></p>
<p>
<a href="#"
class="splitview-filter-clearButton">&searchClearButton.label;</a>
</p>
</div>
</xul:box> <!-- .splitview-nav-container -->
</xul:box> <!-- .splitview-controller -->
<div id="splitview-templates" hidden="true">
<li id="splitview-tpl-summary-stylesheet" tabindex="0">
<a class="stylesheet-enabled" tabindex="0" href="#"
title="&visibilityToggle.tooltip;"
accesskey="&saveButton.accesskey;"></a>
<hgroup class="stylesheet-info">
<h1><a class="stylesheet-name" href="#"></a></h1>
<h2 class="stylesheet-title"></h2>
<h3 class="stylesheet-error-message"></h3>
</hgroup>
<div class="stylesheet-more">
<hgroup class="stylesheet-stats">
<h3 class="stylesheet-rule-count"></h3>
</hgroup>
<hgroup class="stylesheet-actions">
<h1><a class="stylesheet-saveButton" href="#"
title="&saveButton.tooltip;"
accesskey="&saveButton.accesskey;">&saveButton.label;</a></h1>
</hgroup>
</div>
</li>
<xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
<div class="stylesheet-editor-input textbox" tabindex="0"
data-placeholder="&editorTextbox.placeholder;"></div>
</xul:box>
</div> <!-- #splitview-templates -->
</xul:box> <!-- .splitview-root -->
<xul:script type="application/javascript"><![CDATA[
Components.utils.import("resource:///modules/devtools/StyleEditorChrome.jsm");
let chromeRoot = document.getElementById("style-editor-chrome");
let contentWindow = window.arguments[0];
let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
window.styleEditorChrome = chrome;
]]></xul:script>
</xul:window>

Просмотреть файл

@ -220,6 +220,13 @@ can reach it easily. -->
<!ENTITY inspectStyleButton.label "Style">
<!ENTITY inspectStyleButton.accesskey "S">
<!-- LOCALIZATION NOTE (styleeditor.label): This menu item label appears
- in the Tools menu. -->
<!ENTITY styleeditor.label "Style Editor">
<!ENTITY styleeditor.accesskey "y">
<!ENTITY styleeditor.keycode "VK_F7">
<!ENTITY styleeditor.keytext "F7">
<!ENTITY getMoreDevtoolsCmd.label "Get More Tools">
<!ENTITY getMoreDevtoolsCmd.accesskey "M">

Просмотреть файл

@ -0,0 +1,62 @@
<!-- LOCALIZATION NOTE : FILE This file contains the Style Editor window strings -->
<!-- LOCALIZATION NOTE : FILE Do not translate commandkeys -->
<!-- LOCALIZATION NOTE : The correct localization of this file might be to keep
it in English, or another language commonly spoken among web developers.
You want to make that choice consistent across the developer tools.
A good criteria is the language in which you'd find the best documentation
on web development on the web. -->
<!-- LOCALIZATION NOTE (window.title): This is the default title for Style Editor
main window. NB: the property chromeWindowTitle in styleeditor.properties
is used to dynamically update the Style Editor window title with the title
of the web page it is editing. -->
<!ENTITY window.title "Style Editor">
<!ENTITY newButton.label "New">
<!ENTITY newButton.tooltip "Create and append a new style sheet to the document">
<!ENTITY newButton.accesskey "N">
<!ENTITY newButton.commandkey "n">
<!ENTITY importButton.label "Import…">
<!ENTITY importButton.tooltip "Import and append an existing style sheet to the document">
<!ENTITY importButton.accesskey "I">
<!ENTITY importButton.commandkey "i">
<!ENTITY searchInput.tooltip "Filter style sheets by name">
<!ENTITY searchInput.placeholder "Find style sheet">
<!-- LOCALIZATION NOTE (searchNoResults): This is shown when searching a term
that is not found in any stylesheet or stylesheet name. -->
<!ENTITY searchNoResults.label "No matching style sheet has been found.">
<!-- LOCALIZATION NOTE (searchClearButton): This button clears the search input
box and is visible only when a search term has been typed. -->
<!ENTITY searchClearButton.label "Clear">
<!ENTITY visibilityToggle.tooltip "Toggle style sheet visibility">
<!ENTITY visibilityToggle.accesskey "V">
<!ENTITY saveButton.label "Save">
<!ENTITY saveButton.tooltip "Save this style sheet to a file">
<!ENTITY saveButton.accesskey "S">
<!ENTITY saveButton.commandkey "s">
<!-- LOCALICATION NOTE (scoped.label): This is shown in a stylesheets list item
when the stylesheet uses the scoped attribute on the <style> element. -->
<!ENTITY scoped.label "Scoped.">
<!ENTITY editorTextbox.placeholder "Type CSS here.">
<!-- LOCALICATION NOTE (noStyleSheet.label): This is shown when a page has no
stylesheet. -->
<!ENTITY noStyleSheet.label "This page has no style sheet.">
<!-- LOCALICATION NOTE (noStyleSheet-tip-start.label): This is the start of a
tip sentence shown when there is no stylesheet. It suggests to create a new
stylesheet and provides an action link to do so. -->
<!ENTITY noStyleSheet-tip-start.label "Perhaps you'd like to ">
<!-- LOCALICATION NOTE (noStyleSheet-tip-action.label): This is text for the
link that triggers creation of a new stylesheet. -->
<!ENTITY noStyleSheet-tip-action.label "append a new style sheet">
<!-- LOCALICATION NOTE (noStyleSheet-tip-end.label): End of the tip sentence -->
<!ENTITY noStyleSheet-tip-end.label "?">

Просмотреть файл

@ -0,0 +1,53 @@
# LOCALIZATION NOTE These strings are used inside the Style Editor.
# LOCALIZATION NOTE The correct localization of this file might be to keep it
# in English, or another language commonly spoken among web developers.
# You want to make that choice consistent across the developer tools.
# A good criteria is the language in which you'd find the best documentation
# on web development on the web.
# LOCALIZATION NOTE (chromeWindowTitle): This is the title of the Style Editor
# 'chrome' window. That is, the main window with the stylesheets list.
# The argument is either the content document's title or its href if no title
# is available.
chromeWindowTitle=Style Editor [%S]
# LOCALIZATION NOTE (inlineStyleSheet): This is the name used for an style sheet
# that is declared inline in the <style> element. Shown in the stylesheets list.
# the argument is the index (order) of the containing <style> element in the
# document.
inlineStyleSheet=<inline style sheet #%S>
# LOCALIZATION NOTE (newStyleSheet): This is the default name for a new
# user-created style sheet.
newStyleSheet=New style sheet #%S
# LOCALIZATION NOTE (ruleCount.label): Semi-colon list of plural forms.
# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
# This is shown in the style sheets list.
# #1 rule.
# example: 111 rules.
ruleCount.label=#1 rule.;#1 rules.
# LOCALIZATION NOTE (error-load.label): This is shown when loading fails.
error-load=Style sheet could not be loaded.
# LOCALIZATION NOTE (error-save.label): This is shown when saving fails.
error-save=Style sheet could not be saved.
# LOCALIZATION NOTE (importStyleSheet.title): This is the file picker title,
# when you import a style sheet into the Style Editor.
importStyleSheet.title=Import style sheet
# LOCALIZATION NOTE (importStyleSheet.title): This is the *.css filter title
importStyleSheet.filter=CSS files
# LOCALIZATION NOTE (saveStyleSheet.title): This is the file picker title,
# when you save a style sheet from the Style Editor.
saveStyleSheet.title=Save style sheet
# LOCALIZATION NOTE (saveStyleSheet.title): This is the *.css filter title
saveStyleSheet.filter=CSS files
# LOCALIZATION NOTE (saveStyleSheet.commandkey): This the key to use in
# conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
saveStyleSheet.commandkey=S

Просмотреть файл

@ -21,6 +21,8 @@
locale/browser/devtools/inspector.properties (%chrome/browser/devtools/inspector.properties)
locale/browser/devtools/scratchpad.properties (%chrome/browser/devtools/scratchpad.properties)
locale/browser/devtools/scratchpad.dtd (%chrome/browser/devtools/scratchpad.dtd)
locale/browser/devtools/styleeditor.properties (%chrome/browser/devtools/styleeditor.properties)
locale/browser/devtools/styleeditor.dtd (%chrome/browser/devtools/styleeditor.dtd)
locale/browser/devtools/styleinspector.properties (%chrome/browser/devtools/styleinspector.properties)
locale/browser/devtools/styleinspector.dtd (%chrome/browser/devtools/styleinspector.dtd)
locale/browser/devtools/webConsole.dtd (%chrome/browser/devtools/webConsole.dtd)

Двоичные данные
browser/themes/gnomestripe/devtools/eye-toggle.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 784 B

Просмотреть файл

@ -0,0 +1,137 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
}
button {
margin: 0;
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@media (max-width: 250px) {
.splitview-filter {
max-width: none;
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;
}
}

Просмотреть файл

@ -0,0 +1,177 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
ol.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
background-repeat: no-repeat;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: normal;
margin: 0;
padding: 0;
}

Просмотреть файл

@ -111,7 +111,9 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png (devtools/breadcrumbs/rtl-start-selected-pressed.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start.png (devtools/breadcrumbs/rtl-start.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-16-throbber.png
skin/classic/browser/sync-16.png

Двоичные данные
browser/themes/pinstripe/devtools/eye-toggle.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 784 B

Просмотреть файл

@ -0,0 +1,137 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
}
button {
margin: 0;
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@media (max-width: 250px) {
.splitview-filter {
max-width: none;
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;
}
}

Просмотреть файл

@ -0,0 +1,177 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
ol.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
background-repeat: no-repeat;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: normal;
margin: 0;
padding: 0;
}

Просмотреть файл

@ -151,7 +151,9 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png (devtools/breadcrumbs/rtl-start-selected-pressed.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start.png (devtools/breadcrumbs/rtl-start.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png

Двоичные данные
browser/themes/winstripe/devtools/eye-toggle.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 784 B

Просмотреть файл

@ -0,0 +1,137 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
}
button {
margin: 0;
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@media (max-width: 250px) {
.splitview-filter {
max-width: none;
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;
}
}

Просмотреть файл

@ -0,0 +1,177 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** 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 Style Editor code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.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 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 ***** */
ol.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
background-repeat: no-repeat;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: normal;
margin: 0;
padding: 0;
}

Просмотреть файл

@ -135,7 +135,9 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png (devtools/breadcrumbs/rtl-start-selected-pressed.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start.png (devtools/breadcrumbs/rtl-start.png)
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png
@ -287,7 +289,9 @@ browser.jar:
skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png (devtools/breadcrumbs/rtl-start-selected-pressed.png)
skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png (devtools/breadcrumbs/rtl-start.png)
skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/aero/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/aero/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/aero/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/aero/browser/sync-throbber.png
skin/classic/aero/browser/sync-16.png