mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-07-08 02:10:14 +02:00
1715 lines
64 KiB
JavaScript
1715 lines
64 KiB
JavaScript
/* ***** 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 CaScadeS, a stylesheet editor for Composer.
|
|
*
|
|
* The Initial Developer of the Original Code is
|
|
* Daniel Glazman.
|
|
* Portions created by the Initial Developer are Copyright (C) 2002
|
|
* the Initial Developer. All Rights Reserved.
|
|
*
|
|
* Contributor(s):
|
|
* Original author: Daniel Glazman <daniel@glazman.org>
|
|
*
|
|
* 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 ***** */
|
|
|
|
const SHEET = 1;
|
|
const STYLE_RULE = 2;
|
|
const IMPORT_RULE = 3;
|
|
const MEDIA_RULE = 4;
|
|
const CHARSET_RULE = 5;
|
|
const PAGE_RULE = 6;
|
|
const OWNER_NODE = 7;
|
|
|
|
// const COMPATIBILITY_TAB = 1;
|
|
const GENERAL_TAB = 2;
|
|
const TEXT_TAB = 3;
|
|
const BACKGROUND_TAB = 4;
|
|
const BORDER_TAB = 5;
|
|
const BOX_TAB = 6;
|
|
const AURAL_TAB = 7;
|
|
|
|
const GENERIC_SELECTOR = 0;
|
|
const TYPE_ELEMENT_SELECTOR = 1;
|
|
const CLASS_SELECTOR = 2;
|
|
|
|
const kAsyncTimeout = 1500; // 1.5 second
|
|
|
|
var objectsArray = null;
|
|
var gTimerID;
|
|
var gAsyncLoadingTimerID;
|
|
|
|
// needed for commonCssProps.js
|
|
var gHaveDocumentUrl = false;
|
|
|
|
var gInsertIndex = -1;
|
|
|
|
// * dialog initialization code
|
|
function Startup()
|
|
{
|
|
// are we in a pre-1.3 Mozilla ?
|
|
if (typeof window.InitEditorShell == "function") {
|
|
// yes, so let's get an editorshell
|
|
if (!InitEditorShell())
|
|
return;
|
|
}
|
|
else if (typeof window.GetCurrentEditor != "function" || !GetCurrentEditor()) {
|
|
window.close();
|
|
return;
|
|
}
|
|
|
|
// gDialog is declared in EdDialogCommon.js
|
|
|
|
gDialog.selectionBased = false;
|
|
|
|
// Set commonly-used widgets like this:
|
|
gDialog.selectedTab = TEXT_TAB;
|
|
gDialog.sheetsTreechildren = document.getElementById("stylesheetsTree");
|
|
gDialog.sheetsTree = document.getElementById("sheetsTree");
|
|
gDialog.sheetInfoTab = document.getElementById("sheetInfoTab");
|
|
gDialog.atimportButton = document.getElementById("atimportButton");
|
|
gDialog.atmediaButton = document.getElementById("atmediaButton");
|
|
gDialog.linkButton = document.getElementById("linkButton");
|
|
gDialog.styleButton = document.getElementById("styleButton");
|
|
gDialog.ruleButton = document.getElementById("ruleButton");
|
|
gDialog.removeButton = document.getElementById("removeButton");
|
|
gDialog.upButton = document.getElementById("upButton");
|
|
gDialog.downButton = document.getElementById("downButton");
|
|
|
|
gDialog.selectedTab = GENERAL_TAB;
|
|
gDialog.sheetInfoTabPanelTitle = document.getElementById("sheetInfoTabPanelTitle");
|
|
gDialog.textTab = document.getElementById("textTab");
|
|
gDialog.brownFoxLabel = document.getElementById("brownFoxLabel");
|
|
gDialog.backgroundImageInput = document.getElementById("backgroundImageInput");
|
|
gDialog.backgroundPreview = document.getElementById("backgroundPreview");
|
|
gDialog.sheetTabbox = document.getElementById("sheetTabbox");
|
|
gDialog.backgroundColorInput = document.getElementById("backgroundColorInput");
|
|
gDialog.textColorInput = document.getElementById("textColorInput");
|
|
gDialog.backgroundRepeatMenulist = document.getElementById("backgroundRepeatMenulist");
|
|
gDialog.backgroundAttachmentCheckbox = document.getElementById("backgroundAttachmentCheckbox");
|
|
gDialog.xBackgroundPositionRadiogroup = document.getElementById("xBackgroundPositionRadiogroup");
|
|
gDialog.yBackgroundPositionRadiogroup = document.getElementById("yBackgroundPositionRadiogroup");
|
|
gDialog.fontFamilyRadiogroup = document.getElementById("fontFamilyRadiogroup");
|
|
gDialog.customFontFamilyInput = document.getElementById("customFontFamilyInput");
|
|
gDialog.predefFontFamilyMenulist = document.getElementById("predefFontFamilyMenulist");
|
|
gDialog.fontSizeInput = document.getElementById("fontSizeInput");
|
|
gDialog.lineHeightInput = document.getElementById("lineHeightInput");
|
|
gDialog.textUnderlineCheckbox = document.getElementById("underlineTextDecorationCheckbox");
|
|
gDialog.textOverlineCheckbox = document.getElementById("overlineTextDecorationCheckbox");
|
|
gDialog.textLinethroughCheckbox = document.getElementById("linethroughTextDecorationCheckbox");
|
|
gDialog.textBlinkCheckbox = document.getElementById("blinkTextDecorationCheckbox");
|
|
gDialog.noDecorationCheckbox = document.getElementById("noneTextDecorationCheckbox");
|
|
|
|
gDialog.topBorderStyleMenulist = document.getElementById("topBorderStyleMenulist");
|
|
gDialog.topBorderWidthInput = document.getElementById("topBorderWidthInput");
|
|
gDialog.topBorderColorInput = document.getElementById("topBorderColorInput");
|
|
|
|
gDialog.leftBorderStyleMenulist = document.getElementById("leftBorderStyleMenulist");
|
|
gDialog.leftBorderWidthInput = document.getElementById("leftBorderWidthInput");
|
|
gDialog.leftBorderColorInput = document.getElementById("leftBorderColorInput");
|
|
|
|
gDialog.rightBorderStyleMenulist = document.getElementById("rightBorderStyleMenulist");
|
|
gDialog.rightBorderWidthInput = document.getElementById("rightBorderWidthInput");
|
|
gDialog.rightBorderColorInput = document.getElementById("rightBorderColorInput");
|
|
|
|
gDialog.bottomBorderStyleMenulist = document.getElementById("bottomBorderStyleMenulist");
|
|
gDialog.bottomBorderWidthInput = document.getElementById("bottomBorderWidthInput");
|
|
gDialog.bottomBorderColorInput = document.getElementById("bottomBorderColorInput");
|
|
|
|
gDialog.allFourBordersSame = document.getElementById("allFourBordersSame");
|
|
gDialog.borderPreview = document.getElementById("borderPreview");
|
|
|
|
gDialog.volumeScrollbar = document.getElementById("volumeScrollbar");
|
|
gDialog.volumeMenulist = document.getElementById("volumeMenulist");
|
|
gDialog.muteVolumeCheckbox = document.getElementById("muteVolumeCheckbox");
|
|
|
|
gDialog.opacityScrollbar = document.getElementById("opacityScrollbar");
|
|
gDialog.opacityLabel = document.getElementById("opacityLabel");
|
|
|
|
gDialog.sheetInfoTabGridRows = document.getElementById("sheetInfoTabGridRows");
|
|
gDialog.sheetInfoTabGrid = document.getElementById("sheetInfoTabGrid");
|
|
|
|
gDialog.expertMode = true;
|
|
gDialog.modified = false;
|
|
gDialog.selectedIndex = -1;
|
|
|
|
gHaveDocumentUrl = GetDocumentBaseUrl();
|
|
|
|
// Initialize all dialog widgets here,
|
|
// e.g., get attributes from an element for property dialog
|
|
InitSheetsTree(gDialog.sheetsTreechildren);
|
|
|
|
// Set window location relative to parent window (based on persisted attributes)
|
|
SetWindowLocation();
|
|
}
|
|
|
|
// * Toggles on/off expert mode. In expert mode, all buttons are enabled
|
|
// including buttons for stylesheet creation. When the mode is off, only
|
|
// the "create rule" button is enabled, a stylesheet being created to contain
|
|
// the new rule if necessary
|
|
function toggleExpertMode()
|
|
{
|
|
// toggle the boolean
|
|
gDialog.expertMode = !gDialog.expertMode;
|
|
|
|
if (gDialog.expertMode) {
|
|
if (gDialog.selectedIndex == -1) {
|
|
// if expert mode is on but no selection in the tree, only
|
|
// sheet creation buttons are enabled
|
|
UpdateButtons(false, false, true, true, false, false);
|
|
}
|
|
else {
|
|
// if expert mode is on and we have something selected in the tree,
|
|
// the state of the buttons depend on the type of the selection
|
|
var external = objectsArray[gDialog.selectedIndex].external;
|
|
var type = objectsArray[gDialog.selectedIndex].type;
|
|
UpdateButtons(!external, !external, true, true, !external, (!external || (type == SHEET)) );
|
|
}
|
|
}
|
|
else {
|
|
// if we're not in expert mode, allow only rule creation button
|
|
UpdateButtons(!gDialog.atimportButton.hasAttribute("disabled"),
|
|
!gDialog.atmediaButton.hasAttribute("disabled"),
|
|
!gDialog.linkButton.hasAttribute("disabled"),
|
|
!gDialog.styleButton.hasAttribute("disabled"),
|
|
!gDialog.ruleButton.hasAttribute("disabled"),
|
|
!gDialog.removeButton.hasAttribute("disabled"));
|
|
}
|
|
}
|
|
|
|
// * This function recreates the contents of the STYLE elements and
|
|
// of the stylesheets local to the filesystem
|
|
function FlushChanges()
|
|
{
|
|
if (gDialog.modified) {
|
|
// let's make sure the editor is going to require save on exit
|
|
getCurrentEditor().incrementModificationCount(1);
|
|
}
|
|
// Validate all user data and set attributes and possibly insert new element here
|
|
// If there's an error the user must correct, return false to keep dialog open.
|
|
var sheet;
|
|
for (var i = 0; i < objectsArray.length; i++) {
|
|
if (objectsArray[i].modified && !objectsArray[i].external &&
|
|
objectsArray[i].type == SHEET) {
|
|
/* let's serialize this stylesheet ! */
|
|
sheet = objectsArray[i].cssElt;
|
|
if (sheet.ownerNode.nodeName.toLowerCase() == "link")
|
|
SerializeExternalSheet(sheet, null);
|
|
else
|
|
SerializeEmbeddedSheet(sheet);
|
|
}
|
|
}
|
|
SaveWindowLocation();
|
|
return true; // do close the window
|
|
}
|
|
|
|
// * removes all the content in a tree
|
|
// param XULElement sheetsTree
|
|
function CleanSheetsTree(sheetsTreeChildren)
|
|
{
|
|
// we need to clear the selection in the tree otherwise the onselect
|
|
// action on the tree will be fired when we removed the selected entry
|
|
ClearTreeSelection(gDialog.sheetsTree);
|
|
|
|
var elt = sheetsTreeChildren.firstChild;
|
|
while (elt) {
|
|
var tmp = elt.nextSibling;
|
|
sheetsTreeChildren.removeChild(elt);
|
|
elt = tmp;
|
|
}
|
|
}
|
|
|
|
function AddSheetEntryToTree(sheetsTree, ownerNode)
|
|
{
|
|
if (ownerNode.nodeType == Node.ELEMENT_NODE) {
|
|
var ownerTag = ownerNode.nodeName.toLowerCase()
|
|
var relType = ownerNode.getAttribute("rel");
|
|
if (relType) relType = relType.toLowerCase();
|
|
if (ownerTag == "style" ||
|
|
(ownerTag == "link" && relType.indexOf("stylesheet") != -1)) {
|
|
|
|
var treeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
var treerow = document.createElementNS(XUL_NS, "treerow");
|
|
var treecell = document.createElementNS(XUL_NS, "treecell");
|
|
|
|
// what kind of owner node do we have here ?
|
|
// a style element indicates an embedded stylesheet,
|
|
// while a link element indicates an external stylesheet;
|
|
// the case of an XML Processing Instruction is not handled, we
|
|
// are supposed to be in HTML 4
|
|
var external = false;
|
|
if (ownerTag == "style") {
|
|
treecell.setAttribute("label", "internal stylesheet");
|
|
}
|
|
else if (ownerTag == "link") {
|
|
// external stylesheet, let's present its URL to user
|
|
treecell.setAttribute("label", ownerNode.href);
|
|
external = true;
|
|
if ( /(\w*):.*/.test(ownerNode.href) ) {
|
|
if (RegExp.$1 == "file") {
|
|
external = false;
|
|
}
|
|
}
|
|
else
|
|
external = false;
|
|
}
|
|
// add a new entry to the tree
|
|
var o = newObject( treeitem, external, SHEET, ownerNode.sheet, false, 0 );
|
|
PushInObjectsArray(o);
|
|
|
|
treerow.appendChild(treecell);
|
|
treeitem.appendChild(treerow);
|
|
treeitem.setAttribute("container", "true");
|
|
// add enties to the tree for the rules in the current stylesheet
|
|
var rules = null;
|
|
if (ownerNode.sheet)
|
|
rules = ownerNode.sheet.cssRules;
|
|
AddRulesToTreechildren(treeitem, rules, external, 1);
|
|
|
|
sheetsTree.appendChild(treeitem);
|
|
}
|
|
}
|
|
}
|
|
|
|
function PushInObjectsArray(o)
|
|
{
|
|
if (gInsertIndex == -1)
|
|
objectsArray.push(o);
|
|
else {
|
|
objectsArray.splice(gInsertIndex, 0, o);
|
|
gInsertIndex++;
|
|
}
|
|
}
|
|
|
|
// * populates the tree in the dialog with entries
|
|
// corresponding to all stylesheets and css rules attached to
|
|
// document
|
|
// param XULElement sheetsTree
|
|
function InitSheetsTree(sheetsTree)
|
|
{
|
|
// remove all entries in the tree
|
|
CleanSheetsTree(sheetsTree);
|
|
// Look for the stylesheets attached to the current document
|
|
// Get them from the STYLE and LINK elements because of async sheet loading :
|
|
// the LINK element is always here while the corresponding sheet might be
|
|
// delayed by network
|
|
var headNode = GetHeadElement();
|
|
if ( headNode && headNode.hasChildNodes() ) {
|
|
var ssn = headNode.childNodes.length;
|
|
objectsArray = new Array();
|
|
if (ssn) {
|
|
var i;
|
|
gInsertIndex = -1;
|
|
for (i=0; i<ssn; i++) {
|
|
var ownerNode = headNode.childNodes[i];
|
|
AddSheetEntryToTree(sheetsTree, ownerNode);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// * create a new "object" corresponding to an entry in the tree
|
|
// unfortunately, it's still impossible to attach a JS object to
|
|
// a treecell :-(
|
|
// param XULElement xulElt
|
|
// param boolean external
|
|
// param integer type
|
|
// param (DOMNode|DOMCSSStyleSheet|DOMCSSRule) cssElt
|
|
// param boolean modified
|
|
// param integer depth
|
|
function newObject( xulElt, external, type, cssElt, modified, depth)
|
|
{
|
|
return {xulElt:xulElt,
|
|
external:external,
|
|
type:type,
|
|
cssElt:cssElt,
|
|
modified:modified,
|
|
depth:depth};
|
|
}
|
|
|
|
function AddStyleRuleToTreeChildren(rule, external, depth)
|
|
{
|
|
var subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
var subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
var subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
// show the selector attached to the rule
|
|
subtreecell.setAttribute("label", rule.selectorText);
|
|
var o = newObject( subtreeitem, external, STYLE_RULE, rule, false, depth );
|
|
PushInObjectsArray(o);
|
|
if (external) {
|
|
subtreecell.setAttribute("properties", "external");
|
|
}
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
|
|
return subtreeitem;
|
|
}
|
|
|
|
function AddPageRuleToTreeChildren(rule, external, depth)
|
|
{
|
|
var subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
var subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
var subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
// show the selector attached to the rule
|
|
subtreecell.setAttribute("label", "@page " + rule.selectorText);
|
|
var o = newObject( subtreeitem, external, PAGE_RULE, rule, false, depth );
|
|
PushInObjectsArray(o);
|
|
if (external) {
|
|
subtreecell.setAttribute("properties", "external");
|
|
}
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
|
|
return subtreeitem;
|
|
}
|
|
|
|
function AddImportRuleToTreeChildren(rule, external, depth)
|
|
{
|
|
var subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
var subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
var subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
// show "@import" and the URL
|
|
subtreecell.setAttribute("label", "@import "+rule.href, external);
|
|
var o = newObject( subtreeitem, external, IMPORT_RULE, rule, false, depth );
|
|
PushInObjectsArray(o);
|
|
if (external) {
|
|
subtreecell.setAttribute("properties", "external");
|
|
}
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
subtreeitem.setAttribute("container", "true");
|
|
if (rule.styleSheet) {
|
|
// if we have a stylesheet really imported, let's browse it too
|
|
// increasing the depth and marking external
|
|
AddRulesToTreechildren(subtreeitem , rule.styleSheet.cssRules, true, depth+1);
|
|
}
|
|
return subtreeitem;
|
|
}
|
|
|
|
// * adds subtreeitems for the CSS rules found
|
|
// into rules; in case of an at-rule, the method calls itself with
|
|
// a subtreeitem, the rules in the at-rule, a boolean specifying if
|
|
// the rules are external to the document or not, and an increased
|
|
// depth.
|
|
// param XULElement treeItem
|
|
// param CSSRuleList rules
|
|
// param boolean external
|
|
// param integer depth
|
|
function AddRulesToTreechildren(treeItem, rules, external, depth)
|
|
{
|
|
// is there any rule in the stylesheet ; earlay way out if not
|
|
if (rules && rules.length) {
|
|
var subtreechildren = document.createElementNS(XUL_NS, "treechildren");
|
|
var j, o;
|
|
var subtreeitem, subtreerow, subtreecell;
|
|
// let's browse all the rules
|
|
for (j=0; j< rules.length; j++) {
|
|
switch (rules[j].type) {
|
|
case CSSRule.STYLE_RULE:
|
|
// this is a CSSStyleRule
|
|
subtreeitem = AddStyleRuleToTreeChildren(rules[j], external, depth);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
break;
|
|
case CSSRule.PAGE_RULE:
|
|
// this is a CSSStyleRule
|
|
subtreeitem = AddPageRuleToTreeChildren(rules[j], external, depth);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
break;
|
|
case CSSRule.IMPORT_RULE:
|
|
// this is CSSImportRule for @import
|
|
subtreeitem = AddImportRuleToTreeChildren(rules[j], external, depth);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
break;
|
|
case CSSRule.MEDIA_RULE:
|
|
// this is a CSSMediaRule @media
|
|
subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
// show "@media" and media list
|
|
subtreecell.setAttribute("label", "@media "+rules[j].media.mediaText, external);
|
|
o = newObject( subtreeitem, external, MEDIA_RULE, rules[j], false, depth );
|
|
PushInObjectsArray(o);
|
|
if (external) {
|
|
subtreecell.setAttribute("properties", "external");
|
|
}
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
subtreeitem.setAttribute("container", "true");
|
|
// let's browse the rules attached to this CSSMediaRule, keeping the
|
|
// current external and increasing depth
|
|
AddRulesToTreechildren(subtreeitem, rules[j].cssRules, external, depth+1);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
break;
|
|
case CSSRule.CHARSET_RULE:
|
|
// this is a CSSCharsetRule
|
|
subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
// show "@charset" and the encoding
|
|
subtreecell.setAttribute("label", "@charset "+rules[j].encoding, external);
|
|
o = newObject( subtreeitem, external, CHARSET_RULE, rules[j], false, depth );
|
|
PushInObjectsArray(o);
|
|
if (external) {
|
|
subtreecell.setAttribute("properties", "external");
|
|
}
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
break;
|
|
}
|
|
}
|
|
treeItem.appendChild(subtreechildren);
|
|
}
|
|
}
|
|
|
|
function GetSelectedItemData()
|
|
{
|
|
// get the selected tree item (if any)
|
|
var selectedItem = getSelectedItem(gDialog.sheetsTree);
|
|
gDialog.selectedIndex = -1;
|
|
gDialog.selectedObject = null;
|
|
|
|
if (!objectsArray)
|
|
return;
|
|
// look for the object in objectsArray corresponding to the
|
|
// selectedItem
|
|
var i, l = objectsArray.length;
|
|
if (selectedItem) {
|
|
for (i=0; i<l; i++) {
|
|
if (objectsArray[i].xulElt == selectedItem) {
|
|
gDialog.selectedIndex = i;
|
|
gDialog.treeItem = objectsArray[i].xulElt;
|
|
gDialog.externalObject = objectsArray[i].external;
|
|
gDialog.selectedType = objectsArray[i].type;
|
|
gDialog.selectedObject = objectsArray[i].cssElt;
|
|
gDialog.modifiedObject = objectsArray[i].modified;
|
|
gDialog.depthObject = objectsArray[i].depth;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// * selects either a tree item (sheet, rule) or a tab
|
|
// in the former case, the parameter is null ; in the latter,
|
|
// the parameter is a string containing the name of the selected tab
|
|
// param String tab
|
|
function onSelectCSSTreeItem(tab)
|
|
{
|
|
// convert the tab string into a tab id
|
|
if (tab == "general") tab = GENERAL_TAB;
|
|
else if (tab == "text") tab = TEXT_TAB;
|
|
else if (tab == "background") tab = BACKGROUND_TAB;
|
|
else if (tab == "border") tab = BORDER_TAB;
|
|
else if (tab == "box") tab = BOX_TAB;
|
|
else if (tab == "aural") tab = AURAL_TAB;
|
|
|
|
GetSelectedItemData();
|
|
|
|
if (gDialog.selectedIndex == -1) {
|
|
// there is no tree item selected, let's fallback to the Info tab
|
|
// but there is nothing we can display in that tab...
|
|
gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
|
|
return;
|
|
}
|
|
|
|
var external = objectsArray[gDialog.selectedIndex].external;
|
|
var type = objectsArray[gDialog.selectedIndex].type;
|
|
var cssObject = gDialog.selectedObject;
|
|
// Let's update the buttons depending on what kind of object is
|
|
// selected in the tree
|
|
UpdateButtons(!external, !external, true, true, !external, (!external || (type == SHEET)) );
|
|
|
|
if (gDialog.selectedType != STYLE_RULE) {
|
|
// user did not select a CSSStyleRule, let's fallback to Info tab
|
|
tab = GENERAL_TAB;
|
|
}
|
|
if (!tab) {
|
|
// this method gets called by a selection in the tree. Is there a
|
|
// tab already selected ? If yes, keep it; if no, fallback to the
|
|
// Info tab
|
|
tab = gDialog.selectedTab ? gDialog.selectedTab : GENERAL_TAB;
|
|
}
|
|
switch (tab) {
|
|
case TEXT_TAB:
|
|
// we have to update the text preview, let's remove its style attribute
|
|
gDialog.brownFoxLabel.removeAttribute("style");
|
|
InitTextTabPanel();
|
|
return;
|
|
break;
|
|
case BACKGROUND_TAB:
|
|
InitBackgroundTabPanel();
|
|
return;
|
|
break;
|
|
case BORDER_TAB:
|
|
InitBorderTabPanel();
|
|
return;
|
|
break;
|
|
case BOX_TAB:
|
|
InitBoxTabPanel();
|
|
return;
|
|
break;
|
|
case AURAL_TAB:
|
|
InitAuralTabPanel();
|
|
return;
|
|
break;
|
|
}
|
|
|
|
// if we are here, the Info tab is our choice
|
|
gDialog.selectedTab = GENERAL_TAB;
|
|
gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
|
|
|
|
var gridrows = gDialog.sheetInfoTabGridRows;
|
|
var grid = gDialog.sheetInfoTabGrid;
|
|
|
|
if (gridrows) {
|
|
// first, remove all information present in the Info tab
|
|
grid.removeChild(gridrows);
|
|
}
|
|
|
|
gridrows = document.createElementNS(XUL_NS, "rows");
|
|
gDialog.sheetInfoTabGridRows = gridrows;
|
|
gridrows.setAttribute("id", "sheetInfoTabGridRows");
|
|
grid.appendChild(gridrows);
|
|
grid.removeAttribute("style");
|
|
|
|
switch (type) {
|
|
case OWNER_NODE:
|
|
// this case is a workaround when we have a LINK element but the
|
|
// corresponding stylesheet is not loaded yet
|
|
if (gDialog.selectedObject.sheet) {
|
|
var index = gDialog.selectedIndex;
|
|
sheetLoadedTimeoutCallback(index);
|
|
onSelectCSSTreeItem(tab);
|
|
return;
|
|
}
|
|
break;
|
|
case SHEET:
|
|
if (cssObject) {
|
|
var alternate = "";
|
|
if (external &&
|
|
cssObject.ownerNode.getAttribute("rel").toLowerCase().indexOf("alternate") != -1) {
|
|
alternate = " (alternate)";
|
|
}
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Stylesheet"+alternate);
|
|
AddLabelToInfobox(gridrows, "Type:", cssObject.type, null, false);
|
|
AddCheckboxToInfobox(gridrows, "Disabled:", "check to disable stylesheet (cannot be saved)",
|
|
cssObject.disabled, "onStylesheetDisabledChange");
|
|
var href;
|
|
if (cssObject.ownerNode.nodeName.toLowerCase() == "link") {
|
|
href = cssObject.href;
|
|
}
|
|
else {
|
|
href = "none (embedded into the document)";
|
|
}
|
|
AddLabelToInfobox(gridrows, "URL:", href, null, false);
|
|
var mediaList = cssObject.media.mediaText;
|
|
if (!mediaList || mediaList == "") {
|
|
mediaList = "all";
|
|
}
|
|
AddEditableZoneToInfobox(gridrows, "Media list:", mediaList, "onStylesheetMediaChange", false);
|
|
if (cssObject.title) {
|
|
AddEditableZoneToInfobox(gridrows, "Title:", cssObject.title, "onStylesheetTitleChange", false);
|
|
}
|
|
|
|
if (cssObject.cssRules) {
|
|
AddLabelToInfobox(gridrows, "Number of rules:", cssObject.cssRules.length, null, false);
|
|
}
|
|
if (!external && cssObject.ownerNode.nodeName.toLowerCase() == "style")
|
|
// we can export only embedded stylesheets
|
|
AddSingleButtonToInfobox(gridrows, "Export stylesheet and switch to exported version", "onExportStylesheet")
|
|
}
|
|
else
|
|
AddLabelToInfobox(gridrows, "Unable to retrieve stylesheet", null, null, false);
|
|
break;
|
|
case STYLE_RULE:
|
|
case PAGE_RULE:
|
|
var h = document.defaultView.getComputedStyle(grid.parentNode, "").getPropertyValue("height");
|
|
// let's prepare the grid for the case the rule has a laaaaarge number
|
|
// of property declarations
|
|
grid.setAttribute("style", "overflow: auto; height: "+h);
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value",
|
|
(type == STYLE_RULE) ? "Style rule" : "Page rule" );
|
|
|
|
AddLabelToInfobox(gridrows, "Selector:", cssObject.selectorText, null, false);
|
|
if (cssObject.style.length) {
|
|
AddLabelToInfobox(gridrows, "Declarations:", " ", "Importance", false);
|
|
for (var i=0; i<cssObject.style.length; i++) {
|
|
AddDeclarationToInfobox(gridrows, cssObject, i, false);
|
|
}
|
|
}
|
|
// TO BE DONE : need a way of changing the importance of a given declaration
|
|
break;
|
|
case MEDIA_RULE:
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Media rule");
|
|
AddLabelToInfobox(gridrows, "Media list:", cssObject.media.mediaText, null, false);
|
|
AddLabelToInfobox(gridrows, "Number of rules:", cssObject.cssRules.length, null, false);
|
|
break;
|
|
case IMPORT_RULE:
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Import rule");
|
|
AddLabelToInfobox(gridrows, "URL:", cssObject.href, null, false);
|
|
AddLabelToInfobox(gridrows, "Media list:", cssObject.media.mediaText, null, false);
|
|
break;
|
|
// TO BE DONE : @charset and other exotic rules
|
|
}
|
|
}
|
|
|
|
// * updates the UI buttons with the given states
|
|
// param boolean importState
|
|
// param mediaState
|
|
// param boolean linkState
|
|
// param boolean styleState
|
|
// param boolean ruleState
|
|
// param boolean removeState
|
|
function UpdateButtons(importState, mediaState, linkState, styleState, ruleState, removeState)
|
|
{
|
|
if (!gDialog.expertMode) {
|
|
importState = false;
|
|
mediaState = false;
|
|
linkState = false;
|
|
styleState = false;
|
|
ruleState = true;
|
|
}
|
|
if (!gDialog.selectedObject) {
|
|
importState = false;
|
|
mediaState = false;
|
|
if (gDialog.selectedIndex != -1)
|
|
ruleState = false;
|
|
}
|
|
EnableUI(gDialog.atimportButton, importState);
|
|
EnableUI(gDialog.atmediaButton, mediaState);
|
|
EnableUI(gDialog.linkButton, linkState);
|
|
EnableUI(gDialog.styleButton, styleState);
|
|
EnableUI(gDialog.ruleButton, ruleState);
|
|
EnableUI(gDialog.removeButton, removeState);
|
|
EnableUI(gDialog.upButton, removeState);
|
|
EnableUI(gDialog.downButton, removeState);
|
|
}
|
|
|
|
// * adds a button to the given treerow
|
|
// param XULElement rows
|
|
// param String label
|
|
// param String callback
|
|
function AddSingleButtonToInfobox(rows, label, callback)
|
|
{
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
var spacer = document.createElementNS(XUL_NS, "spacer");
|
|
var hbox = document.createElementNS(XUL_NS, "hbox");
|
|
var button = document.createElementNS(XUL_NS, "button");
|
|
button.setAttribute("label", label);
|
|
button.setAttribute("class", "align-right");
|
|
button.setAttribute("oncommand", callback+"();");
|
|
row.appendChild(spacer);
|
|
hbox.appendChild(button);
|
|
row.appendChild(hbox);
|
|
rows.appendChild(row);
|
|
}
|
|
|
|
// * adds a textarea to the given treerow, allows to assign the
|
|
// initial value and specify that it should acquire the focus
|
|
// param XULElement rows
|
|
// param String label
|
|
// param String value
|
|
// param String callback
|
|
// param boolean focus
|
|
function AddEditableZoneToInfobox(rows, label, value, callback, focus)
|
|
{
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
labelLabel.setAttribute("value", label);
|
|
row.appendChild(labelLabel);
|
|
|
|
var textbox = document.createElementNS(XUL_NS, "textbox");
|
|
if (callback != "")
|
|
textbox.setAttribute("oninput", callback+"(this)");
|
|
textbox.setAttribute("value", value);
|
|
textbox.setAttribute("size", 20);
|
|
row.appendChild(textbox);
|
|
rows.appendChild(row);
|
|
if (focus)
|
|
SetTextboxFocus(textbox);
|
|
return textbox;
|
|
}
|
|
|
|
// * adds a radiogroup to the given treerow
|
|
// param XULElement rows
|
|
// param String label
|
|
function AddRadioGroupToInfoBox(rows, label)
|
|
{
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
labelLabel.setAttribute("value", label);
|
|
row.appendChild(labelLabel);
|
|
|
|
var radiogroup = document.createElementNS(XUL_NS, "radiogroup");
|
|
row.appendChild(radiogroup);
|
|
rows.appendChild(row);
|
|
return radiogroup;
|
|
}
|
|
|
|
// * adds a radio button to a previously created radiogroup
|
|
// param XULElement radiogroup
|
|
// param String label
|
|
// param String callback
|
|
// param integer selectorType
|
|
// param boolean selected
|
|
function AddRadioToRadioGroup(radiogroup, label, callback, selectorType, selected)
|
|
{
|
|
var radio = document.createElementNS(XUL_NS, "radio");
|
|
radio.setAttribute("label", label);
|
|
radio.setAttribute("oncommand", callback + "(" + selectorType + ");" );
|
|
if (selected)
|
|
radio.setAttribute("selected", "true");
|
|
radiogroup.appendChild(radio);
|
|
}
|
|
|
|
// * adds a label and a checkbox to a given treerows
|
|
// param XULElement rows
|
|
// param String label
|
|
// param String checkboxLabel
|
|
// param String value
|
|
// param String callback
|
|
function AddCheckboxToInfobox(rows, label, checkboxLabel, value, callback)
|
|
{
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
labelLabel.setAttribute("value", label);
|
|
row.appendChild(labelLabel);
|
|
|
|
var checkbox = document.createElementNS(XUL_NS, "checkbox");
|
|
checkbox.setAttribute("label", checkboxLabel);
|
|
checkbox.setAttribute("checked", value);
|
|
checkbox.setAttribute("oncommand", callback+"()");
|
|
row.appendChild(checkbox);
|
|
|
|
rows.appendChild(row);
|
|
}
|
|
|
|
// * adds a label to a given treerows; strong indicates a bold font
|
|
// param XULElement rows
|
|
// param String label
|
|
// param String value
|
|
// param boolean strong
|
|
function AddLabelToInfobox(rows, firstLabel, flexibleLabel, lastLabel, strong)
|
|
{
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
labelLabel.setAttribute("value", firstLabel);
|
|
if (strong) {
|
|
labelLabel.setAttribute("class", "titleLabel");
|
|
}
|
|
row.appendChild(labelLabel);
|
|
|
|
if (flexibleLabel) {
|
|
var valueLabel = document.createElementNS(XUL_NS, "label");
|
|
valueLabel.setAttribute("value", flexibleLabel);
|
|
if (strong) {
|
|
valueLabel.setAttribute("class", "titleLabel");
|
|
}
|
|
row.appendChild(valueLabel);
|
|
}
|
|
|
|
if (lastLabel) {
|
|
valueLabel = document.createElementNS(XUL_NS, "label");
|
|
valueLabel.setAttribute("value", lastLabel);
|
|
if (strong) {
|
|
valueLabel.setAttribute("class", "titleLabel");
|
|
}
|
|
row.appendChild(valueLabel);
|
|
}
|
|
|
|
rows.appendChild(row);
|
|
}
|
|
|
|
// * adds a declaration's importance to a given treerows
|
|
// param XULElement rows
|
|
// param String label
|
|
// param String value
|
|
// param String importance
|
|
function AddDeclarationToInfobox(rows, cssObject, i, importance)
|
|
{
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
labelLabel.setAttribute("value", "");
|
|
row.appendChild(labelLabel);
|
|
|
|
var valueLabel = document.createElementNS(XUL_NS, "label");
|
|
valueLabel.setAttribute("value", GetDeclarationText(cssObject, i));
|
|
row.appendChild(valueLabel);
|
|
|
|
var importanceLabel = document.createElementNS(XUL_NS, "checkbox");
|
|
if (GetDeclarationImportance(cssObject, i) == "important") {
|
|
importanceLabel.setAttribute("checked", true);
|
|
}
|
|
importanceLabel.setAttribute("oncommand", "TogglePropertyImportance(\"" + cssObject.style.item(i) + "\")" );
|
|
row.appendChild(importanceLabel);
|
|
|
|
rows.appendChild(row);
|
|
}
|
|
|
|
function TogglePropertyImportance(property)
|
|
{
|
|
var cssObject = gDialog.selectedObject;
|
|
dump("IMPORTANCE = " + cssObject.style.getPropertyPriority(property) + "\n");
|
|
var newImportance = (cssObject.style.getPropertyPriority(property) == "important") ? "" : "important" ;
|
|
dump("NEW IMPORTANCE = " + newImportance + "\n");
|
|
cssObject.style.setProperty(property, cssObject.style.getPropertyValue(property), newImportance);
|
|
}
|
|
|
|
// * retrieves the index-nth style declaration in a rule
|
|
// param DOMCSSRule styleRule
|
|
// param integer index
|
|
// return String
|
|
function GetDeclarationText(styleRule, index)
|
|
{
|
|
var pName = styleRule.style.item(index);
|
|
return pName + ": " + styleRule.style.getPropertyValue(pName);
|
|
}
|
|
|
|
// * retrieves the stylesheet containing the selected tree entry
|
|
// return integer
|
|
function GetSheetContainer()
|
|
{
|
|
var index = gDialog.selectedIndex;
|
|
while (index >= 0 && objectsArray[index].type != SHEET) {
|
|
index--;
|
|
}
|
|
return index;
|
|
}
|
|
|
|
// * declares that the stylesheet containing the selected tree entry
|
|
// has been modified
|
|
function SetModifiedFlagOnStylesheet()
|
|
{
|
|
var index = GetSheetContainer();
|
|
if (index != -1) {
|
|
objectsArray[index].modified = true;
|
|
gDialog.modified = true;
|
|
}
|
|
}
|
|
|
|
// * we are about to put some info about the selected entry into
|
|
// the Info tab
|
|
// return XULElement
|
|
function PrepareInfoGridForCreation()
|
|
{
|
|
gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
|
|
|
|
var gridrows = gDialog.sheetInfoTabGridRows;
|
|
var grid = gDialog.sheetInfoTabGrid;
|
|
|
|
if (gridrows) {
|
|
grid.removeChild(gridrows);
|
|
}
|
|
|
|
gridrows = document.createElementNS(XUL_NS, "rows");
|
|
gDialog.sheetInfoTabGridRows = gridrows;
|
|
gridrows.setAttribute("id", "sheetInfoTabGridRows");
|
|
grid.appendChild(gridrows);
|
|
grid.removeAttribute("style");
|
|
return gridrows;
|
|
}
|
|
|
|
// * user wants to create a @import rule
|
|
function CreateNewAtimportRule()
|
|
{
|
|
var gridrows = PrepareInfoGridForCreation();
|
|
|
|
gDialog.newType = IMPORT_RULE;
|
|
gDialog.newMediaList = "";
|
|
gDialog.newURL = "";
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Import At-rule");
|
|
AddEditableZoneToInfobox(gridrows, "URL:", gDialog.newURL, "onNewURLChange", true);
|
|
AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", false);
|
|
AddSingleButtonToInfobox(gridrows, "Create Import At-rule", "onConfirmCreateNewObject", false);
|
|
}
|
|
|
|
// * user wants to create a new style rule
|
|
function CreateNewStyleRule()
|
|
{
|
|
var gridrows = PrepareInfoGridForCreation();
|
|
|
|
gDialog.newExternal = false;
|
|
gDialog.newType = STYLE_RULE;
|
|
gDialog.newSelector = "";
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Style Rule");
|
|
gDialog.newSelectorType = CLASS_SELECTOR;
|
|
|
|
var radiogroup = AddRadioGroupToInfoBox(gridrows, "Create a new:");
|
|
// offer choice between class selector and type element selector
|
|
AddRadioToRadioGroup(radiogroup, "named style (enter class name below)",
|
|
"onCreationStyleRuleTypeChange", CLASS_SELECTOR, true);
|
|
AddRadioToRadioGroup(radiogroup, "style applied to all elements of type (enter type below)",
|
|
"onCreationStyleRuleTypeChange", TYPE_ELEMENT_SELECTOR, false);
|
|
// oh, and in expert mode, allow of course any selector
|
|
if (gDialog.expertMode) {
|
|
AddRadioToRadioGroup(radiogroup, "style applied to all elements matching the following selector",
|
|
"onCreationStyleRuleTypeChange", GENERIC_SELECTOR, false);
|
|
}
|
|
AddEditableZoneToInfobox(gridrows, " ", gDialog.newSelector, "onNewSelectorChange", true);
|
|
|
|
AddSingleButtonToInfobox(gridrows, "Create Style Rule", "onConfirmCreateNewObject");
|
|
}
|
|
|
|
// * user changed the type of style rule (s)he wants to create
|
|
// param integer type
|
|
function onCreationStyleRuleTypeChange(type)
|
|
{
|
|
gDialog.newSelectorType = type;
|
|
}
|
|
|
|
// * user wants to create a new embedded stylesheet
|
|
function CreateNewStyleElement()
|
|
{
|
|
var gridrows = PrepareInfoGridForCreation();
|
|
|
|
gDialog.newExternal = false;
|
|
gDialog.newType = SHEET;
|
|
gDialog.newMediaList = "";
|
|
gDialog.newTitle = "";
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Stylesheet");
|
|
AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
|
|
AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", true);
|
|
AddEditableZoneToInfobox(gridrows, "Title:", gDialog.newTitle, "onNewTitleChange", false);
|
|
|
|
AddSingleButtonToInfobox(gridrows, "Create Stylesheet", "onConfirmCreateNewObject")
|
|
}
|
|
|
|
// * user wants to attach an external stylesheet
|
|
function CreateNewLinkedSheet()
|
|
{
|
|
var gridrows = PrepareInfoGridForCreation();
|
|
|
|
gDialog.newExternal = true;
|
|
gDialog.newType = SHEET;
|
|
gDialog.newAlternate = false;
|
|
gDialog.newURL = "";
|
|
gDialog.newMediaList = "";
|
|
gDialog.newTitle = "";
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Linked Stylesheet");
|
|
AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
|
|
// alternate stylesheet ?
|
|
AddCheckboxToInfobox(gridrows, "Alternate:", "check to create alternate stylesheet", gDialog.newAlternate,
|
|
"onNewAlternateChange");
|
|
gDialog.URLtextbox = AddEditableZoneToInfobox(gridrows, "URL:", gDialog.newURL, "onNewURLChange", true);
|
|
AddSingleButtonToInfobox(gridrows, "Choose file", "onChooseLocalFile")
|
|
|
|
AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", false);
|
|
AddEditableZoneToInfobox(gridrows, "Title:", gDialog.newTitle, "onNewTitleChange", false);
|
|
|
|
AddSingleButtonToInfobox(gridrows, "Create Stylesheet", "onConfirmCreateNewObject")
|
|
|
|
// the two following labels are unfortunately useful...
|
|
AddLabelToInfobox(gridrows, "", "(Warning : save document *before* attaching local stylesheet)", null, false);
|
|
AddLabelToInfobox(gridrows, "", "(use Refresh button if stylesheet is not immediately downloaded)", null, false);
|
|
}
|
|
|
|
// * forget about everything, and let's redo it
|
|
function Restart()
|
|
{
|
|
// delete all objects we keep track of
|
|
var l = objectsArray.length;
|
|
for (var i=0; i<l; i++) {
|
|
delete objectsArray[i];
|
|
}
|
|
delete objectsArray;
|
|
|
|
// now, let's clear the tree
|
|
var gridrows = gDialog.sheetInfoTabGridRows;
|
|
if (gridrows) {
|
|
var elt = gridrows.lastChild;
|
|
while (elt) {
|
|
var tmp = elt.previousSibling;
|
|
gridrows.removeChild(elt);
|
|
elt = tmp;
|
|
}
|
|
}
|
|
|
|
// switch to default Info tab
|
|
gDialog.selectedTab = GENERAL_TAB;
|
|
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "");
|
|
|
|
// let's recreate the tree
|
|
InitSheetsTree(gDialog.sheetsTreechildren);
|
|
// and update the buttons
|
|
UpdateButtons(false, false, true, true, false, false);
|
|
}
|
|
|
|
// * does less than Restart(). We only regenerate the tree, keeping track
|
|
// of the selection
|
|
function Refresh()
|
|
{
|
|
var index = gDialog.selectedIndex;
|
|
Restart();
|
|
if (index != -1)
|
|
selectTreeItem(objectsArray[index].xulElt);
|
|
}
|
|
|
|
/* CALLBACKS */
|
|
|
|
// * user toggled the "Alternate Stylesheet" checkbox
|
|
function onNewAlternateChange()
|
|
{
|
|
gDialog.newAlternate = !gDialog.newAlternate;
|
|
}
|
|
|
|
// * user changed the URL of an external stylesheet; elt is the textarea
|
|
// param XULElement elt
|
|
function onNewURLChange(elt)
|
|
{
|
|
gDialog.newURL = elt.value;
|
|
}
|
|
|
|
// * user changed the selector for a rule; elt is the textarea
|
|
// param XULElement elt
|
|
function onNewSelectorChange(elt)
|
|
{
|
|
gDialog.newSelector = elt.value;
|
|
}
|
|
|
|
// * user changed the list of medias for a new rule; elt is the textarea
|
|
// param XULElement elt
|
|
function onNewMediaListChange(elt)
|
|
{
|
|
gDialog.newMediaList = elt.value;
|
|
}
|
|
|
|
// * user changed the title of a new stylesheet; elt is the textarea
|
|
// param XULElement elt
|
|
function onNewTitleChange(elt)
|
|
{
|
|
gDialog.newTitle = elt.value;
|
|
}
|
|
|
|
// * user disables/enabled the stylesheet
|
|
function onStylesheetDisabledChange()
|
|
{
|
|
gDialog.selectedObject.disabled = !gDialog.selectedObject.disabled;
|
|
}
|
|
|
|
// * user changed the title of an existing stylesheet; elt is the textarea
|
|
// param XULElement elt
|
|
function onStylesheetTitleChange(elt)
|
|
{
|
|
var titleText = elt.value;
|
|
gDialog.selectedObject.ownerNode.setAttribute("title", titleText);
|
|
SetModifiedFlagOnStylesheet();
|
|
}
|
|
|
|
// * user changed the list of medias of an existing stylesheet; elt is the textarea
|
|
// param XULElement elt
|
|
function onStylesheetMediaChange(elt)
|
|
{
|
|
var mediaText= elt.value;
|
|
gDialog.selectedObject.ownerNode.setAttribute("media", mediaText);
|
|
SetModifiedFlagOnStylesheet();
|
|
}
|
|
|
|
function GetSubtreeChildren(elt)
|
|
{
|
|
var subtreechildren = null;
|
|
if (!elt) return null;
|
|
if (elt.hasChildNodes()) {
|
|
subtreechildren = elt.lastChild;
|
|
while (subtreechildren && subtreechildren .nodeName.toLowerCase() != "treechildren") {
|
|
subtreechildren = subtreechildren .previousSibling;
|
|
}
|
|
}
|
|
if (!subtreechildren) {
|
|
subtreechildren = document.createElementNS(XUL_NS, "treechildren");
|
|
elt.appendChild(subtreechildren);
|
|
}
|
|
return subtreechildren;
|
|
}
|
|
|
|
// * here, we create a new sheet or rule
|
|
function onConfirmCreateNewObject()
|
|
{
|
|
// first, let's declare we modify the document
|
|
gDialog.modified = true;
|
|
var selector;
|
|
|
|
// if we are requested to create a style rule in expert mode,
|
|
// let's find the last embedded stylesheet
|
|
if (!gDialog.expertMode && gDialog.newType == STYLE_RULE) {
|
|
var indexLastEmbeddedStylesheet = -1;
|
|
for (var i = objectsArray.length-1; i >= 0 ; i--) {
|
|
if (objectsArray[i].type == SHEET && ! objectsArray[i].external) {
|
|
indexLastEmbeddedStylesheet = i;
|
|
break;
|
|
}
|
|
}
|
|
if (indexLastEmbeddedStylesheet != -1) {
|
|
gDialog.selectedIndex = indexLastEmbeddedStylesheet;
|
|
}
|
|
else {
|
|
// there is no stylesheet ! let's create one that will contain our rule
|
|
gDialog.newExternal = false;
|
|
gDialog.newMediaList = "";
|
|
gDialog.newTitle = "";
|
|
gDialog.newType = SHEET;
|
|
var selectorType = gDialog.newSelectorType;
|
|
selector = gDialog.newSelector;
|
|
onConfirmCreateNewObject();
|
|
|
|
// now, create the rule...
|
|
gDialog.newType = STYLE_RULE;
|
|
gDialog.newSelectorType = selectorType;
|
|
gDialog.newSelector = selector;
|
|
}
|
|
}
|
|
var containerIndex, sheetIndex;
|
|
var cssObject;
|
|
var l;
|
|
var ruleIndex;
|
|
var newSheetOwnerNode;
|
|
var headNode;
|
|
var newCssRule;
|
|
switch (gDialog.newType) {
|
|
case STYLE_RULE:
|
|
if (gDialog.newSelector != "") {
|
|
containerIndex = gDialog.selectedIndex;
|
|
while (objectsArray[containerIndex].type != SHEET &&
|
|
objectsArray[containerIndex].type != MEDIA_RULE)
|
|
containerIndex--;
|
|
|
|
switch (gDialog.newSelectorType) {
|
|
case TYPE_ELEMENT_SELECTOR:
|
|
case GENERIC_SELECTOR:
|
|
selector = gDialog.newSelector;
|
|
break;
|
|
case CLASS_SELECTOR:
|
|
selector = "." + gDialog.newSelector;
|
|
break;
|
|
}
|
|
cssObject = objectsArray[containerIndex].cssElt;
|
|
l = cssObject.cssRules.length;
|
|
cssObject.insertRule(selector + " { }", l);
|
|
|
|
if (cssObject.cssRules.length > l) {
|
|
// hmmm, there's always the bad case of a wrong rule, dropped by the
|
|
// parser ; that's why we need to check we really inserted something
|
|
|
|
/* find inserted rule's index in objectsArray */
|
|
var depth = objectsArray[containerIndex].depth;
|
|
var external = objectsArray[containerIndex].external;
|
|
|
|
ruleIndex = containerIndex + 1;
|
|
while (ruleIndex < objectsArray.length &&
|
|
objectsArray[ruleIndex].depth > depth) {
|
|
ruleIndex++;
|
|
}
|
|
var subtreechildren = GetSubtreeChildren(objectsArray[containerIndex].xulElt);
|
|
gInsertIndex = ruleIndex;
|
|
var subtreeitem = AddStyleRuleToTreeChildren(cssObject.cssRules[l], external, depth);
|
|
subtreechildren.appendChild(subtreeitem);
|
|
selectTreeItem(subtreeitem);
|
|
SetModifiedFlagOnStylesheet();
|
|
}
|
|
}
|
|
break;
|
|
case IMPORT_RULE:
|
|
if (gDialog.newURL != "") {
|
|
|
|
containerIndex = GetSheetContainer();
|
|
// **must** clear the selection before changing the tree
|
|
ClearTreeSelection(gDialog.sheetsTree);
|
|
|
|
var containerCssObject = objectsArray[containerIndex].cssElt;
|
|
var containerDepth = objectsArray[containerIndex].depth;
|
|
var containerExternal = objectsArray[containerIndex].external;
|
|
|
|
var cssRuleIndex = -1;
|
|
if (containerCssObject.cssRules)
|
|
for (i=0; i < containerCssObject.cssRules.length; i++)
|
|
if (containerCssObject.cssRules[i].type != CSSRule.IMPORT_RULE &&
|
|
containerCssObject.cssRules[i].type != CSSRule.CHARSET_RULE) {
|
|
cssRuleIndex = i;
|
|
break;
|
|
}
|
|
if (cssRuleIndex == -1) {
|
|
// no rule in the sheet for the moment or only charset and import rules
|
|
containerCssObject.insertRule('@import url("'+ gDialog.newURL + '") ' + gDialog.newMediaList + ";",
|
|
containerCssObject.cssRules.length);
|
|
newCssRule = containerCssObject.cssRules[containerCssObject.cssRules.length - 1];
|
|
|
|
subtreechildren = GetSubtreeChildren(objectsArray[containerIndex].xulElt);
|
|
|
|
gInsertIndex = ruleIndex;
|
|
subtreeitem = AddImportRuleToTreeChildren(newCssRule,
|
|
containerExternal,
|
|
containerDepth + 1);
|
|
|
|
subtreechildren.appendChild(subtreeitem);
|
|
ruleIndex = FindObjectIndexInObjectsArray(newCssRule);
|
|
}
|
|
else {
|
|
// cssRuleIndex is the index of the first not charset and not import rule in the sheet
|
|
ruleIndex = FindObjectIndexInObjectsArray(containerCssObject.cssRules[cssRuleIndex]);
|
|
// and ruleIndex represents the index of the corresponding object in objectsArray
|
|
var refObject = objectsArray[ruleIndex];
|
|
|
|
containerCssObject.insertRule('@import url("'+ gDialog.newURL + '") ' + gDialog.newMediaList + ";",
|
|
cssRuleIndex);
|
|
newCssRule = containerCssObject.cssRules[cssRuleIndex];
|
|
gInsertIndex = ruleIndex;
|
|
subtreeitem = AddImportRuleToTreeChildren(newCssRule, containerExternal, containerDepth + 1);
|
|
|
|
var refNode = refObject.xulElt;
|
|
refNode.parentNode.insertBefore(subtreeitem, refNode);
|
|
}
|
|
|
|
|
|
selectTreeItem(subtreeitem);
|
|
SetModifiedFlagOnStylesheet();
|
|
if (gAsyncLoadingTimerID)
|
|
clearTimeout(gAsyncLoadingTimerID);
|
|
if (!newCssRule.styleSheet)
|
|
gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + ruleIndex + ")", kAsyncTimeout);
|
|
}
|
|
break;
|
|
case SHEET:
|
|
gInsertIndex = -1;
|
|
|
|
ClearTreeSelection(gDialog.sheetsTree);
|
|
|
|
if (gDialog.newExternal && gDialog.newURL != "") {
|
|
subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
|
var subtreerow = document.createElementNS(XUL_NS, "treerow");
|
|
var subtreecell = document.createElementNS(XUL_NS, "treecell");
|
|
subtreeitem.setAttribute("container", "true");
|
|
subtreerow.appendChild(subtreecell);
|
|
subtreeitem.appendChild(subtreerow);
|
|
gDialog.sheetsTreechildren.appendChild(subtreeitem);
|
|
|
|
newSheetOwnerNode = getCurrentEditor().document.createElement("link");
|
|
newSheetOwnerNode.setAttribute("type", "text/css");
|
|
newSheetOwnerNode.setAttribute("href", gDialog.newURL);
|
|
if (gDialog.newAlternate) {
|
|
newSheetOwnerNode.setAttribute("rel", "alternate stylesheet");
|
|
}
|
|
else {
|
|
newSheetOwnerNode.setAttribute("rel", "stylesheet");
|
|
}
|
|
if (gDialog.newMediaList != "") {
|
|
newSheetOwnerNode.setAttribute("media", gDialog.newMediaList);
|
|
}
|
|
if (gDialog.newTitle != "") {
|
|
newSheetOwnerNode.setAttribute("title", gDialog.newTitle);
|
|
}
|
|
headNode = GetHeadElement();
|
|
headNode.appendChild(newSheetOwnerNode);
|
|
|
|
subtreecell.setAttribute("label", gDialog.newURL);
|
|
external = true;
|
|
if ( /(\w*):.*/.test(gDialog.newURL) ) {
|
|
if (RegExp.$1 == "file") {
|
|
external = false;
|
|
}
|
|
}
|
|
if (external)
|
|
subtreecell.setAttribute("properties", "external");
|
|
|
|
if (!newSheetOwnerNode.sheet) {
|
|
/* hack due to asynchronous load of external stylesheet */
|
|
var o = newObject( subtreeitem, external, OWNER_NODE, newSheetOwnerNode, false, 0 );
|
|
PushInObjectsArray(o)
|
|
if (gAsyncLoadingTimerID)
|
|
clearTimeout(gAsyncLoadingTimerID);
|
|
sheetIndex = objectsArray.length - 1;
|
|
|
|
gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + sheetIndex + ")", kAsyncTimeout);
|
|
}
|
|
else {
|
|
o = newObject( subtreeitem, external, SHEET, newSheetOwnerNode.sheet, false, 0 );
|
|
PushInObjectsArray(o)
|
|
AddRulesToTreechildren(subtreeitem, newSheetOwnerNode.sheet.cssRules, external, 1);
|
|
}
|
|
}
|
|
else if (!gDialog.newExternal) {
|
|
newSheetOwnerNode = getCurrentEditor().document.createElement("style");
|
|
newSheetOwnerNode.setAttribute("type", "text/css");
|
|
if (gDialog.newMediaList != "") {
|
|
newSheetOwnerNode.setAttribute("media", gDialog.newMediaList);
|
|
}
|
|
if (gDialog.newTitle != "") {
|
|
newSheetOwnerNode.setAttribute("title", gDialog.newTitle);
|
|
}
|
|
headNode = GetHeadElement();
|
|
headNode.appendChild(newSheetOwnerNode);
|
|
AddSheetEntryToTree(gDialog.sheetsTreechildren, newSheetOwnerNode);
|
|
|
|
selectTreeItem(objectsArray[objectsArray.length - 1].xulElt);
|
|
}
|
|
selectTreeItem(subtreeitem);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// * we need that to refresh the tree after async sheet load
|
|
// param integer index
|
|
function sheetLoadedTimeoutCallback(index)
|
|
{
|
|
var subtreeitem = objectsArray[index].xulElt;
|
|
gInsertIndex = index+1;
|
|
ClearTreeSelection(gDialog.sheetsTree);
|
|
if (objectsArray[index].type == OWNER_NODE && objectsArray[index].cssElt.sheet != null) {
|
|
var sheet = objectsArray[index].cssElt.sheet;
|
|
AddRulesToTreechildren(subtreeitem , sheet.cssRules, objectsArray[index].external,
|
|
objectsArray[index].depth+1);
|
|
objectsArray[index].type = SHEET;
|
|
objectsArray[index].cssElt = sheet;
|
|
}
|
|
else if (objectsArray[index].type == IMPORT_RULE && objectsArray[index].cssElt.styleSheet != null) {
|
|
AddRulesToTreechildren(subtreeitem , objectsArray[index].cssElt.styleSheet.cssRules, true,
|
|
objectsArray[index].depth+1)
|
|
}
|
|
else
|
|
return;
|
|
selectTreeItem(subtreeitem);
|
|
}
|
|
|
|
// * gets the object's index corresponding to an entry in the tree
|
|
// param XULElement object
|
|
// return integer
|
|
function FindObjectIndexInObjectsArray(object)
|
|
{
|
|
var i, l = objectsArray.length;
|
|
for (i=0; i<l; i++)
|
|
if (objectsArray[i].cssElt == object)
|
|
return i;
|
|
return -1;
|
|
}
|
|
|
|
// * removes the selected entry from the tree and deletes the corresponding
|
|
// object ; does some magic if we remove a container like a stylesheet or
|
|
// an @import rule to remove all the contained rules
|
|
function RemoveObject()
|
|
{
|
|
GetSelectedItemData();
|
|
var objectIndex = gDialog.selectedIndex;
|
|
if (objectIndex == -1) return;
|
|
var depth = gDialog.depthObject;
|
|
|
|
var ruleIndex, i, ruleIndexInTree, toSplice;
|
|
|
|
switch (gDialog.selectedType) {
|
|
case SHEET:
|
|
var ownerNode = gDialog.selectedObject.ownerNode;
|
|
ownerNode.parentNode.removeChild(ownerNode);
|
|
|
|
for (i=objectIndex+1; i<objectsArray.length && objectsArray[i].depth > depth; i++);
|
|
toSplice = i - objectIndex;
|
|
break;
|
|
|
|
case IMPORT_RULE:
|
|
case MEDIA_RULE:
|
|
for (ruleIndexInTree=objectIndex-1; objectsArray[ruleIndexInTree].depth >= depth; ruleIndexInTree--);
|
|
|
|
objectsArray[ruleIndexInTree].modified = true;
|
|
ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentStyleSheet.cssRules,
|
|
gDialog.selectedObject);
|
|
if (ruleIndex != -1) {
|
|
gDialog.selectedObject.parentStyleSheet.deleteRule(ruleIndex);
|
|
}
|
|
for (i=objectIndex+1; i<objectsArray.length && objectsArray[i].depth > depth; i++);
|
|
toSplice = i - objectIndex;
|
|
break;
|
|
|
|
case STYLE_RULE:
|
|
for (ruleIndexInTree=objectIndex-1; objectsArray[ruleIndexInTree].depth; ruleIndexInTree--);
|
|
objectsArray[ruleIndexInTree].modified = true;
|
|
if (gDialog.selectedObject.parentRule) {
|
|
/* this style rule is contained in an at-rule */
|
|
/* need to remove the rule only from the at-rule listing it */
|
|
ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentRule.cssRules,
|
|
gDialog.selectedObject);
|
|
if (ruleIndex != -1) {
|
|
gDialog.selectedObject.parentRule.deleteRule(ruleIndex);
|
|
}
|
|
}
|
|
else {
|
|
ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentStyleSheet.cssRules,
|
|
gDialog.selectedObject);
|
|
if (ruleIndex != -1) {
|
|
gDialog.selectedObject.parentStyleSheet.deleteRule(ruleIndex);
|
|
}
|
|
}
|
|
toSplice = 1;
|
|
break;
|
|
}
|
|
// let's remove the whole treeitem
|
|
gDialog.treeItem.parentNode.removeChild(gDialog.treeItem);
|
|
// and then remove the objects from our array
|
|
objectsArray.splice(objectIndex, toSplice);
|
|
// can we select an item ?
|
|
if (objectsArray.length)
|
|
selectTreeItem(objectsArray[Math.min(objectIndex, objectsArray.length - 1)].xulElt);
|
|
}
|
|
|
|
// * moves a sheet/rule up in the tree
|
|
function MoveObjectUp()
|
|
{
|
|
GetSelectedItemData();
|
|
var index = gDialog.selectedIndex;
|
|
if (index <= 0) return;
|
|
var sheetIndex = GetSheetContainer();
|
|
|
|
switch (gDialog.selectedType) {
|
|
case SHEET:
|
|
var ownerNode = gDialog.selectedObject.ownerNode;
|
|
ClearTreeSelection(gDialog.sheetsTree)
|
|
index--;
|
|
while (index && objectsArray[index].type != SHEET)
|
|
index--;
|
|
if (index == -1) return;
|
|
ownerNode.parentNode.insertBefore(ownerNode, objectsArray[index].cssElt.ownerNode);
|
|
Restart();
|
|
selectTreeItem(objectsArray[index].xulElt);
|
|
gDialog.modified = true;
|
|
break;
|
|
|
|
case OWNER_NODE:
|
|
ownerNode = gDialog.selectedObject;
|
|
ClearTreeSelection(gDialog.sheetsTree)
|
|
index--;
|
|
while (index && objectsArray[index].type != SHEET)
|
|
index--;
|
|
if (index == -1) return;
|
|
ownerNode.parentNode.insertBefore(ownerNode, objectsArray[index].cssElt.ownerNode);
|
|
Restart();
|
|
selectTreeItem(objectsArray[index].xulElt);
|
|
gDialog.modified = true;
|
|
break;
|
|
|
|
case STYLE_RULE:
|
|
case PAGE_RULE:
|
|
var rule = gDialog.selectedObject;
|
|
objectsArray[sheetIndex].modified = true;
|
|
|
|
ClearTreeSelection(gDialog.sheetsTree)
|
|
var ruleText = rule.cssText;
|
|
var subtreeitem;
|
|
var newRule;
|
|
if (rule.parentRule) {
|
|
var ruleIndex = getRuleIndexInRulesList(rule.parentRule.cssRules, rule);
|
|
var parentRule = rule.parentRule;
|
|
|
|
if (ruleIndex == -1) return;
|
|
|
|
if (!ruleIndex) {
|
|
// we have to move the rule just before its parent rule
|
|
parentRule.deleteRule(0);
|
|
var parentRuleIndex;
|
|
|
|
parentRuleIndex = getRuleIndexInRulesList(parentRule.parentStyleSheet.cssRules, parentRule);
|
|
parentRule.parentStyleSheet.insertRule(ruleText, parentRuleIndex);
|
|
newRule = parentRule.parentStyleSheet.cssRules[parentRuleIndex];
|
|
}
|
|
else {
|
|
// we just move the rule in its parentRule
|
|
parentRule.deleteRule(ruleIndex);
|
|
parentRule.insertRule(ruleText, ruleIndex - 1);
|
|
newRule = parentRule.cssRules.item(ruleIndex - 1);
|
|
}
|
|
// remove the tree entry
|
|
objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
|
|
// delete the object
|
|
objectsArray.splice(index, 1);
|
|
// position the insertion index
|
|
gInsertIndex = index - 1;
|
|
subtreeitem = AddStyleRuleToTreeChildren(newRule,
|
|
objectsArray[index-1].external,
|
|
objectsArray[index-1].depth);
|
|
// make the new tree entry
|
|
objectsArray[index].xulElt.parentNode.insertBefore(subtreeitem,
|
|
objectsArray[index].xulElt);
|
|
selectTreeItem(subtreeitem);
|
|
|
|
}
|
|
else {
|
|
// standard case, the parent of the rule is the stylesheet itself
|
|
ruleIndex = getRuleIndexInRulesList(rule.parentStyleSheet.cssRules, rule);
|
|
var refStyleSheet = rule.parentStyleSheet;
|
|
if (ruleIndex == -1) return;
|
|
if (ruleIndex) {
|
|
// we just move the rule in the sheet
|
|
refStyleSheet.deleteRule(ruleIndex);
|
|
var targetRule = refStyleSheet.cssRules.item(ruleIndex - 1);
|
|
|
|
if (targetRule.type == CSSRule.MEDIA_RULE) {
|
|
targetRule.insertRule(ruleText, targetRule.cssRules.length);
|
|
var targetRuleIndex = FindObjectIndexInObjectsArray(targetRule);
|
|
newRule = targetRule.cssRules.item(targetRule.cssRules.length - 1);
|
|
var subtreechildren = GetSubtreeChildren(objectsArray[targetRuleIndex].xulElt);
|
|
|
|
// in this case, the target treeitem is at same location but one level deeper
|
|
// remove the tree entry
|
|
objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
|
|
// delete the object
|
|
objectsArray.splice(index, 1);
|
|
// position the insertion index
|
|
gInsertIndex = index;
|
|
subtreeitem = AddStyleRuleToTreeChildren(newRule,
|
|
objectsArray[targetRuleIndex].external,
|
|
objectsArray[targetRuleIndex].depth + 1);
|
|
// make the new tree entry
|
|
subtreechildren.appendChild(subtreeitem);
|
|
selectTreeItem(subtreeitem);
|
|
return;
|
|
}
|
|
else if (targetRule.type != CSSRule.IMPORT_RULE &&
|
|
targetRule.type != CSSRule.CHARSET_RULE) {
|
|
// we can move the rule before its predecessor only if that one is
|
|
// not an @import rule nor an @charset rule
|
|
refStyleSheet.insertRule(ruleText, ruleIndex - 1);
|
|
newRule = refStyleSheet.cssRules[ruleIndex - 1];
|
|
// remove the tree entry
|
|
objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
|
|
// delete the object
|
|
objectsArray.splice(index, 1);
|
|
// position the insertion index
|
|
gInsertIndex = index - 1;
|
|
subtreeitem = AddStyleRuleToTreeChildren(newRule,
|
|
objectsArray[index-1].external,
|
|
objectsArray[index-1].depth);
|
|
// make the new tree entry
|
|
objectsArray[index].xulElt.parentNode.insertBefore(subtreeitem,
|
|
objectsArray[index].xulElt);
|
|
selectTreeItem(subtreeitem);
|
|
return;
|
|
}
|
|
}
|
|
// At this point, we need to move the rule from one sheet to another one, if it
|
|
// exists...
|
|
// First, let's if there is another candidate stylesheet before the current one
|
|
// for the style rule's ownership
|
|
var refSheetIndex = FindObjectIndexInObjectsArray(refStyleSheet);
|
|
sheetIndex = refSheetIndex;
|
|
|
|
if (!sheetIndex) return; // early way out
|
|
sheetIndex--;
|
|
while (sheetIndex && (objectsArray[sheetIndex].type != SHEET ||
|
|
objectsArray[sheetIndex])) {
|
|
sheetIndex--;
|
|
}
|
|
if (sheetIndex == -1) return; // no embedded or local stylesheet available
|
|
var newStyleSheet = objectsArray[sheetIndex].cssElt;
|
|
// we need to check the type of the last rule in the sheet, if it exists
|
|
if (newStyleSheet.cssRules.length &&
|
|
newStyleSheet.cssRules[newStyleSheet.cssRules.length - 1].type == CSSRule.MEDIA_RULE) {
|
|
// this media rule is our target
|
|
var refMediaRule = newStyleSheet.cssRules[newStyleSheet.cssRules.length - 1];
|
|
var refMediaRuleIndex = FindObjectIndexInObjectsArray(refMediaRule );
|
|
var refRuleIndex = refMediaRuleIndex++;
|
|
while (refRuleIndex < objectsArray.length && objectsArray[refRuleIndex].depth > 1)
|
|
refRuleIndex++;
|
|
// refRuleIndex represents where we should insert the new object
|
|
}
|
|
else {
|
|
// we just append the rule to the list of rules of the sheet
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// * moves a sheet/rule down in the tree
|
|
function MoveObjectDown()
|
|
{
|
|
/* NOT YET IMPLEMENTED */
|
|
var objectIndex = FindObjectIndexInObjectsArray(gDialog.selectedObject);
|
|
if (objectIndex == -1) return;
|
|
}
|
|
|
|
// * opens a file picker and returns the file:/// URL in gDialog.newURL
|
|
function onChooseLocalFile() {
|
|
// Get a local file, converted into URL format
|
|
var fileName = getLocalFileURL(true);
|
|
if (fileName)
|
|
{
|
|
gDialog.URLtextbox.setAttribute("value", fileName);
|
|
gDialog.newURL = fileName;
|
|
}
|
|
}
|
|
|
|
// * opens a file picker for a *.css filename, exports the selected stylesheet
|
|
// in that file, and replace the selected embedded sheet by its external, but
|
|
// local to the filesystem, new counterpart
|
|
function onExportStylesheet() {
|
|
var fileName = getLocalFileURL(false);
|
|
SerializeExternalSheet(gDialog.selectedObject, fileName);
|
|
var ownerNode = gDialog.selectedObject.ownerNode;
|
|
var newSheetOwnerNode = ownerNode.ownerDocument.createElement("link");
|
|
newSheetOwnerNode.setAttribute("type", "text/css");
|
|
newSheetOwnerNode.setAttribute("href", fileName);
|
|
newSheetOwnerNode.setAttribute("rel", "stylesheet");
|
|
var mediaList = ownerNode.getAttribute("media");
|
|
if (mediaList && mediaList != "")
|
|
newSheetOwnerNode.setAttribute("media", mediaList);
|
|
ownerNode.parentNode.insertBefore(newSheetOwnerNode, ownerNode);
|
|
ownerNode.parentNode.removeChild(ownerNode);
|
|
|
|
// we still have to wait for async sheet loading's completion
|
|
if (gAsyncLoadingTimerID)
|
|
clearTimeout(gAsyncLoadingTimerID);
|
|
gAsyncLoadingTimerID = setTimeout("Refresh()", 500);
|
|
}
|
|
|
|
function getCurrentEditor() {
|
|
if (typeof window.InitEditorShell == "function")
|
|
return editorShell.editor;
|
|
else
|
|
return GetCurrentEditor();
|
|
}
|
|
|
|
function AddCSSLevelChoice(rows)
|
|
{
|
|
var labelLabel = document.createElementNS(XUL_NS, "label");
|
|
var row = document.createElementNS(XUL_NS, "row");
|
|
row.setAttribute("align", "center");
|
|
labelLabel.setAttribute("value", "CSS Level");
|
|
|
|
row.appendChild(labelLabel);
|
|
|
|
var level;
|
|
for (level = 1; level < 4; level++) {
|
|
var levelCheckbox = document.createElementNS(XUL_NS, "checkbox");
|
|
levelCheckbox.setAttribute("label", level);
|
|
row.appendChild(levelCheckbox);
|
|
}
|
|
|
|
rows.appendChild(row);
|
|
}
|
|
|