-- NOT PART OF THE BUILD --
CaScadeS only 1. adds support for -moz-opacity 2. fixes support for line-height; b=169362 3. SerializeExternalSheet was using unefficient code; b=168755 4. prepares @page support, related to implem did by rods and myself in bug 115199 5. fixed border support 6. added support for !important declarations (but please see bug 178668) 7. fixed volume support; b=169363 8. prepares support for CSS level and browsers compatiblity (be able to say e.g. I want styles CSS 2 accepted by both NS4 and Opera5) 9. adds support for moving rules inside and between stylesheets, and support for stylesheet reordering 10. removed JS warnings 11. faster and more efficient code in stylesheets tree refresh
This commit is contained in:
Родитель
d10d4ceb2f
Коммит
f30d3ed334
|
@ -125,10 +125,6 @@ function getLocalFileURL(openOnly)
|
|||
}
|
||||
// SaveFilePickerDirectory(fp, fileType);
|
||||
|
||||
var ioService = GetIOService();
|
||||
if (ioService && ioService.getURLSpecFromFile)
|
||||
return fp.file ? ioService.getURLSpecFromFile(fp.file) : null;
|
||||
else
|
||||
return fp.file ? getURLSpecFromFile(fp.file) : null;
|
||||
}
|
||||
|
||||
|
@ -164,3 +160,7 @@ function doDump(text, value) {
|
|||
dump("===> " + text + " : " + value + "\n");
|
||||
}
|
||||
|
||||
function ClearTreeSelection(tree) {
|
||||
if (tree)
|
||||
tree.treeBoxObject.selection.clearSelection();
|
||||
}
|
||||
|
|
|
@ -43,12 +43,13 @@ const CHARSET_RULE = 5;
|
|||
const PAGE_RULE = 6;
|
||||
const OWNER_NODE = 7;
|
||||
|
||||
const GENERAL_TAB = 1;
|
||||
const TEXT_TAB = 2;
|
||||
const BACKGROUND_TAB = 3;
|
||||
const BORDER_TAB = 4;
|
||||
const BOX_TAB = 5;
|
||||
const AURAL_TAB = 6;
|
||||
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;
|
||||
|
@ -94,7 +95,7 @@ function Startup()
|
|||
gDialog.upButton = document.getElementById("upButton");
|
||||
gDialog.downButton = document.getElementById("downButton");
|
||||
|
||||
gDialog.selectedTab = GENERAL_TAB;
|
||||
gDialog.selectedTab = COMPATIBILITY_TAB;
|
||||
gDialog.sheetInfoTabPanelTitle = document.getElementById("sheetInfoTabPanelTitle");
|
||||
gDialog.textTab = document.getElementById("textTab");
|
||||
gDialog.brownFoxLabel = document.getElementById("brownFoxLabel");
|
||||
|
@ -142,6 +143,7 @@ function Startup()
|
|||
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");
|
||||
|
@ -226,7 +228,7 @@ 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
|
||||
gDialog.sheetsTree.treeBoxObject.selection.clearSelection();
|
||||
ClearTreeSelection(gDialog.sheetsTree);
|
||||
|
||||
var elt = sheetsTreeChildren.firstChild;
|
||||
while (elt) {
|
||||
|
@ -241,9 +243,9 @@ 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 == "stylesheet" || relType == "alternate stylesheet"))) {
|
||||
(ownerTag == "link" && relType.indexOf("stylesheet") != -1)) {
|
||||
|
||||
var treeitem = document.createElementNS(XUL_NS, "treeitem");
|
||||
var treerow = document.createElementNS(XUL_NS, "treerow");
|
||||
|
@ -362,6 +364,24 @@ function AddStyleRuleToTreeChildren(rule, external, depth)
|
|||
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");
|
||||
|
@ -409,6 +429,11 @@ function AddRulesToTreechildren(treeItem, rules, external, depth)
|
|||
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);
|
||||
|
@ -422,7 +447,7 @@ function AddRulesToTreechildren(treeItem, rules, external, depth)
|
|||
// 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, insertIndex);
|
||||
PushInObjectsArray(o);
|
||||
if (external) {
|
||||
subtreecell.setAttribute("properties", "external");
|
||||
}
|
||||
|
@ -431,8 +456,7 @@ function AddRulesToTreechildren(treeItem, rules, external, depth)
|
|||
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,
|
||||
(insertIndex == -1) ? insertIndex : insertIndex+1 );
|
||||
AddRulesToTreechildren(subtreeitem, rules[j].cssRules, external, depth+1);
|
||||
subtreechildren.appendChild(subtreeitem);
|
||||
break;
|
||||
case CSSRule.CHARSET_RULE:
|
||||
|
@ -443,7 +467,7 @@ function AddRulesToTreechildren(treeItem, rules, external, depth)
|
|||
// 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, insertIndex);
|
||||
PushInObjectsArray(o);
|
||||
if (external) {
|
||||
subtreecell.setAttribute("properties", "external");
|
||||
}
|
||||
|
@ -491,6 +515,7 @@ function onSelectCSSTreeItem(tab)
|
|||
{
|
||||
// convert the tab string into a tab id
|
||||
if (tab == "general") tab = GENERAL_TAB;
|
||||
else if (tab == "compatibility") tab = COMPATIBILITY_TAB;
|
||||
else if (tab == "text") tab = TEXT_TAB;
|
||||
else if (tab == "background") tab = BACKGROUND_TAB;
|
||||
else if (tab == "border") tab = BORDER_TAB;
|
||||
|
@ -502,6 +527,7 @@ function onSelectCSSTreeItem(tab)
|
|||
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...
|
||||
if (tab != COMPATIBILITY_TAB)
|
||||
gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
|
||||
return;
|
||||
}
|
||||
|
@ -524,6 +550,9 @@ function onSelectCSSTreeItem(tab)
|
|||
tab = gDialog.selectedTab ? gDialog.selectedTab : GENERAL_TAB;
|
||||
}
|
||||
switch (tab) {
|
||||
case COMPATIBILITY_TAB:
|
||||
return;
|
||||
break;
|
||||
case TEXT_TAB:
|
||||
// we have to update the text preview, let's remove its style attribute
|
||||
gDialog.brownFoxLabel.removeAttribute("style");
|
||||
|
@ -578,13 +607,14 @@ function onSelectCSSTreeItem(tab)
|
|||
}
|
||||
break;
|
||||
case SHEET:
|
||||
if (cssObject) {
|
||||
var alternate = "";
|
||||
if (external &&
|
||||
cssObject.ownerNode.getAttribute("rel").toLowerCase() == "alternate stylesheet") {
|
||||
cssObject.ownerNode.getAttribute("rel").toLowerCase().indexOf("alternate") != -1) {
|
||||
alternate = " (alternate)";
|
||||
}
|
||||
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Stylesheet"+alternate);
|
||||
AddLabelToInfobox(gridrows, "Type:", cssObject.type, false);
|
||||
AddLabelToInfobox(gridrows, "Type:", cssObject.type, null, false);
|
||||
AddCheckboxToInfobox(gridrows, "Disabled:", "check to disable stylesheet (cannot be saved)",
|
||||
cssObject.disabled, "onStylesheetDisabledChange");
|
||||
var href;
|
||||
|
@ -594,7 +624,7 @@ function onSelectCSSTreeItem(tab)
|
|||
else {
|
||||
href = "none (embedded into the document)";
|
||||
}
|
||||
AddLabelToInfobox(gridrows, "URL:", href, false);
|
||||
AddLabelToInfobox(gridrows, "URL:", href, null, false);
|
||||
var mediaList = cssObject.media.mediaText;
|
||||
if (!mediaList || mediaList == "") {
|
||||
mediaList = "all";
|
||||
|
@ -603,40 +633,44 @@ function onSelectCSSTreeItem(tab)
|
|||
if (cssObject.title) {
|
||||
AddEditableZoneToInfobox(gridrows, "Title:", cssObject.title, "onStylesheetTitleChange", false);
|
||||
}
|
||||
|
||||
if (cssObject.cssRules) {
|
||||
AddLabelToInfobox(gridrows, "Number of rules:", cssObject.cssRules.length, false);
|
||||
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", "Style rule");
|
||||
gDialog.sheetInfoTabPanelTitle.setAttribute("value",
|
||||
(type == STYLE_RULE) ? "Style rule" : "Page rule" );
|
||||
|
||||
AddLabelToInfobox(gridrows, "Selector:", cssObject.selectorText, false);
|
||||
AddLabelToInfobox(gridrows, "Selector:", cssObject.selectorText, null, false);
|
||||
if (cssObject.style.length) {
|
||||
AddDeclarationToInfobox(gridrows, "Declarations:", GetDeclarationText(cssObject, 0),
|
||||
GetDeclarationImportance(cssObject, 0), false);
|
||||
for (var i=1; i<cssObject.style.length; i++) {
|
||||
AddDeclarationToInfobox(gridrows, "", GetDeclarationText(cssObject, i),
|
||||
GetDeclarationImportance(cssObject, i), false);
|
||||
AddLabelToInfobox(gridrows, "Declarations:", " ", "Importance", false);
|
||||
for (var i=0; i<cssObject.style.length; i++) {
|
||||
AddDeclarationToInfobox(gridrows, cssObject, i, false);
|
||||
}
|
||||
}
|
||||
// TO BE DONE : we need a way of changing the importance of a given declaration
|
||||
// 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, false);
|
||||
AddLabelToInfobox(gridrows, "Number of declarations:", cssObject.cssRules.length, false);
|
||||
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, false);
|
||||
AddLabelToInfobox(gridrows, "Media list:", cssObject.media.mediaText, false);
|
||||
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
|
||||
}
|
||||
|
@ -658,6 +692,12 @@ function UpdateButtons(importState, mediaState, linkState, styleState, ruleState
|
|||
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);
|
||||
|
@ -778,25 +818,35 @@ function AddCheckboxToInfobox(rows, label, checkboxLabel, value, callback)
|
|||
// param String label
|
||||
// param String value
|
||||
// param boolean strong
|
||||
function AddLabelToInfobox(rows, label, value, 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", label);
|
||||
labelLabel.setAttribute("value", firstLabel);
|
||||
if (strong) {
|
||||
labelLabel.setAttribute("class", "titleLabel");
|
||||
}
|
||||
row.appendChild(labelLabel);
|
||||
|
||||
if (value) {
|
||||
if (flexibleLabel) {
|
||||
var valueLabel = document.createElementNS(XUL_NS, "label");
|
||||
valueLabel.setAttribute("value", value);
|
||||
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);
|
||||
}
|
||||
|
||||
|
@ -805,28 +855,37 @@ function AddLabelToInfobox(rows, label, value, strong)
|
|||
// param String label
|
||||
// param String value
|
||||
// param String importance
|
||||
function AddDeclarationToInfobox(rows, label, value, 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", label);
|
||||
labelLabel.setAttribute("value", "");
|
||||
row.appendChild(labelLabel);
|
||||
|
||||
var valueLabel = document.createElementNS(XUL_NS, "label");
|
||||
valueLabel.setAttribute("value", value);
|
||||
valueLabel.setAttribute("value", GetDeclarationText(cssObject, i));
|
||||
row.appendChild(valueLabel);
|
||||
|
||||
var importanceLabel = document.createElementNS(XUL_NS, "label");
|
||||
importanceLabel.setAttribute("value", importance);
|
||||
if (importance == "!important") {
|
||||
importanceLabel.setAttribute("class", "bangImportant");
|
||||
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
|
||||
|
@ -939,7 +998,7 @@ function CreateNewStyleElement()
|
|||
gDialog.newMediaList = "";
|
||||
gDialog.newTitle = "";
|
||||
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Stylesheet");
|
||||
AddLabelToInfobox(gridrows, "Type:", "text/css", false);
|
||||
AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
|
||||
AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", true);
|
||||
AddEditableZoneToInfobox(gridrows, "Title:", gDialog.newTitle, "onNewTitleChange", false);
|
||||
|
||||
|
@ -958,7 +1017,7 @@ function CreateNewLinkedSheet()
|
|||
gDialog.newMediaList = "";
|
||||
gDialog.newTitle = "";
|
||||
gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Linked Stylesheet");
|
||||
AddLabelToInfobox(gridrows, "Type:", "text/css", false);
|
||||
AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
|
||||
// alternate stylesheet ?
|
||||
AddCheckboxToInfobox(gridrows, "Alternate:", "check to create alternate stylesheet", gDialog.newAlternate,
|
||||
"onNewAlternateChange");
|
||||
|
@ -971,8 +1030,8 @@ function CreateNewLinkedSheet()
|
|||
AddSingleButtonToInfobox(gridrows, "Create Stylesheet", "onConfirmCreateNewObject")
|
||||
|
||||
// the two following labels are unfortunately useful...
|
||||
AddLabelToInfobox(gridrows, "", "(Warning : save document *before* attaching local stylesheet)", false);
|
||||
AddLabelToInfobox(gridrows, "", "(use Refresh button if stylesheet is not immediately downloaded)", false);
|
||||
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
|
||||
|
@ -1184,7 +1243,7 @@ function onConfirmCreateNewObject()
|
|||
|
||||
containerIndex = GetSheetContainer();
|
||||
// **must** clear the selection before changing the tree
|
||||
gDialog.sheetsTree.treeBoxObject.selection.clearSelection();
|
||||
ClearTreeSelection(gDialog.sheetsTree);
|
||||
|
||||
var containerCssObject = objectsArray[containerIndex].cssElt;
|
||||
var containerDepth = objectsArray[containerIndex].depth;
|
||||
|
@ -1242,7 +1301,7 @@ function onConfirmCreateNewObject()
|
|||
case SHEET:
|
||||
gInsertIndex = -1;
|
||||
|
||||
gDialog.sheetsTree.treeBoxObject.selection.clearSelection();
|
||||
ClearTreeSelection(gDialog.sheetsTree);
|
||||
|
||||
if (gDialog.newExternal && gDialog.newURL != "") {
|
||||
subtreeitem = document.createElementNS(XUL_NS, "treeitem");
|
||||
|
@ -1289,7 +1348,7 @@ function onConfirmCreateNewObject()
|
|||
clearTimeout(gAsyncLoadingTimerID);
|
||||
sheetIndex = objectsArray.length - 1;
|
||||
|
||||
//gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + sheetIndex + ")", kAsyncTimeout);
|
||||
gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + sheetIndex + ")", kAsyncTimeout);
|
||||
}
|
||||
else {
|
||||
o = newObject( subtreeitem, external, SHEET, newSheetOwnerNode.sheet, false, 0 );
|
||||
|
@ -1323,7 +1382,7 @@ function sheetLoadedTimeoutCallback(index)
|
|||
{
|
||||
var subtreeitem = objectsArray[index].xulElt;
|
||||
gInsertIndex = index+1;
|
||||
gDialog.sheetsTree.treeBoxObject.selection.clearSelection();
|
||||
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,
|
||||
|
@ -1421,9 +1480,168 @@ function RemoveObject()
|
|||
// * moves a sheet/rule up in the tree
|
||||
function MoveObjectUp()
|
||||
{
|
||||
/* NOT YET IMPLEMENTED */
|
||||
var objectIndex = FindObjectIndexInObjectsArray(gDialog.selectedObject);
|
||||
if (objectIndex == -1) return;
|
||||
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
|
||||
|
@ -1474,3 +1692,22 @@ function getCurrentEditor() {
|
|||
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);
|
||||
}
|
||||
|
|
|
@ -136,10 +136,10 @@
|
|||
</column>
|
||||
</columns>
|
||||
</grid>
|
||||
<vbox>
|
||||
<tabbox id="sheetTabbox">
|
||||
<tabs>
|
||||
<tab id="sheetInfoTab"
|
||||
selected="true"
|
||||
label="&sheetInfoTab.label;"
|
||||
oncommand="onSelectCSSTreeItem('general');"/>
|
||||
<tab id="textTab"
|
||||
|
@ -174,13 +174,11 @@
|
|||
<!-- other tabs defined in tabsOverlay.xul -->
|
||||
</tabpanels>
|
||||
</tabbox>
|
||||
</hbox>
|
||||
<hbox>
|
||||
<hbox align="center">
|
||||
<spacer flex="1"/>
|
||||
<hbox>
|
||||
<button class="align-right"
|
||||
label="&closeButton.label;"
|
||||
<button label="&closeButton.label;"
|
||||
oncommand="FlushChanges(); window.close();"/>
|
||||
</hbox>
|
||||
</vbox>
|
||||
</hbox>
|
||||
</window>
|
||||
|
|
|
@ -560,21 +560,23 @@ function InitAuralTabPanel()
|
|||
|
||||
// observe the scrollbar and call onScrollbarAttrModified when an attribute is modified
|
||||
gDialog.volumeScrollbar.removeEventListener("DOMAttrModified", onVolumeScrollbarAttrModified, false);
|
||||
gDialog.volumeScrollbar.addEventListener("DOMAttrModified", onVolumeScrollbarAttrModified, false);
|
||||
var volume = getSpecifiedStyle("volume");
|
||||
if (volume == "silent") {
|
||||
gDialog.muteVolumeCheckbox.checked = true;
|
||||
gDialog.volumeScrollbar.setAttribute("disable", "true");
|
||||
gDialog.volumeScrollbar.setAttribute("disabled", "true");
|
||||
}
|
||||
else {
|
||||
gDialog.muteVolumeCheckbox.checked = false;
|
||||
gDialog.volumeScrollbar.removeAttribute("disable");
|
||||
gDialog.volumeScrollbar.removeAttribute("disabled");
|
||||
}
|
||||
// if no volume specified, display medium value
|
||||
if (!volume || volume == "") volume = "50";
|
||||
if (!volume)
|
||||
volume = "50";
|
||||
gDialog.volumeMenulist.value = volume;
|
||||
UpdateScrollbar(gDialog.volumeMenulist, 'volumeScrollbar');
|
||||
|
||||
gDialog.volumeScrollbar.addEventListener("DOMAttrModified", onVolumeScrollbarAttrModified, false);
|
||||
|
||||
SelectsOneChoice("speak", "speakMenulist", "SpeakMenu", null);
|
||||
SelectsOneChoice("speech-rate", "speechRateMenulist", "SpeechRateMenu", null);
|
||||
}
|
||||
|
@ -597,7 +599,10 @@ function onOpacityScrollbarAttrModified(aEvent)
|
|||
{
|
||||
if (aEvent.attrName == "curpos") {
|
||||
var v = aEvent.newValue / 1000;
|
||||
doDump("opacity", v);
|
||||
if (v == 1)
|
||||
gDialog.opacityLabel.setAttribute("value", "transparent");
|
||||
else
|
||||
gDialog.opacityLabel.setAttribute("value", v);
|
||||
AddStyleToElement(gDialog.selectedObject, "-moz-opacity", v);
|
||||
SetModifiedFlagOnStylesheet();
|
||||
}
|
||||
|
@ -699,17 +704,17 @@ function InitBorderTabPanel()
|
|||
var style = [ getSpecifiedStyle("border-top-style"),
|
||||
getSpecifiedStyle("border-left-style"),
|
||||
getSpecifiedStyle("border-right-style"),
|
||||
getSpecifiedStyle("border-top-style")
|
||||
getSpecifiedStyle("border-bottom-style")
|
||||
];
|
||||
var width = [ getSpecifiedStyle("border-top-width"),
|
||||
getSpecifiedStyle("border-left-width"),
|
||||
getSpecifiedStyle("border-left-width"),
|
||||
getSpecifiedStyle("border-top-width")
|
||||
getSpecifiedStyle("border-right-width"),
|
||||
getSpecifiedStyle("border-bottom-width")
|
||||
];
|
||||
var color = [ ConvertRGBColorIntoHEXColor(getSpecifiedStyle("border-top-color")),
|
||||
ConvertRGBColorIntoHEXColor(getSpecifiedStyle("border-left-color")),
|
||||
ConvertRGBColorIntoHEXColor(getSpecifiedStyle("border-right-color")),
|
||||
ConvertRGBColorIntoHEXColor(getSpecifiedStyle("border-top-color"))
|
||||
ConvertRGBColorIntoHEXColor(getSpecifiedStyle("border-bottom-color"))
|
||||
];
|
||||
|
||||
var sameFourSides = false;
|
||||
|
@ -726,29 +731,45 @@ function InitBorderTabPanel()
|
|||
var sideArray = [ "top", "left", "right", "bottom" ];
|
||||
|
||||
for (var i=0; i<sideArray.length; i++) {
|
||||
|
||||
var menuItemPrefix = style[i];
|
||||
if (!menuItemPrefix || menuItemPrefix == "")
|
||||
menuItemPrefix = "unspecified";
|
||||
var styleMenuitem = document.getElementById( menuItemPrefix+sideArray[i]+"BorderStyle" );
|
||||
var styleMenulist = document.getElementById( sideArray[i]+"BorderStyleMenulist" );
|
||||
styleMenulist.selectedItem = styleMenuitem;
|
||||
|
||||
var styleMenu = document.getElementById( sideArray[i]+"BorderStyleMenulist" );
|
||||
var colorInput = document.getElementById( sideArray[i]+"BorderColorInput" );
|
||||
var widthInput = document.getElementById( sideArray[i]+"BorderWidthInput" );
|
||||
if (!i || !sameFourSides) {
|
||||
EnableUI(styleMenu, true);
|
||||
EnableUI(colorInput, true);
|
||||
EnableUI(widthInput, true);
|
||||
|
||||
SelectsOneChoice("border-"+sideArray[i]+"-style",
|
||||
sideArray[i]+"BorderStyleMenulist",
|
||||
sideArray[i]+"BorderStyle", gDialog.borderPreview)
|
||||
|
||||
colorInput.value = color[i];
|
||||
setColorWell("border"+sideArray[i]+"CW", color[i]);
|
||||
|
||||
var widthInput = document.getElementById( sideArray[i]+"BorderWidthInput" );
|
||||
widthInput.value = width[i];
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-color", color[i]);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-style", style[i]);
|
||||
|
||||
widthInput.value = width[i];
|
||||
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-width", width[i]);
|
||||
}
|
||||
else {
|
||||
EnableUI(styleMenu, false);
|
||||
EnableUI(colorInput, false);
|
||||
EnableUI(widthInput, false);
|
||||
colorInput.value = "";
|
||||
setColorWell("border"+sideArray[i]+"CW", "");
|
||||
widthInput.value = "";
|
||||
styleMenu.selectedItem = document.getElementById("unspecified" + sideArray[i] + "BorderStyle");
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-color", color[0]);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-style", style[0]);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-width", width[0]);
|
||||
|
||||
}
|
||||
}
|
||||
if (sameFourSides)
|
||||
gDialog.allFourBordersSame.setAttribute("checked", "true");
|
||||
else
|
||||
gDialog.allFourBordersSame.removeAttribute("checked");
|
||||
ToggleFourBorderSidesSameStyle(gDialog.allFourBordersSame);
|
||||
}
|
||||
|
||||
// * Inits the values shown in the Background tab panel
|
||||
|
@ -948,14 +969,20 @@ function SerializeEmbeddedSheet(sheet)
|
|||
// param String href
|
||||
function SerializeExternalSheet(sheet, href)
|
||||
{
|
||||
var nsuri = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURI);
|
||||
const classes = Components.classes;
|
||||
const interfaces = Components.interfaces;
|
||||
const nsILocalFile = interfaces.nsILocalFile;
|
||||
const nsIFileOutputStream = interfaces.nsIFileOutputStream;
|
||||
const FILEOUT_CTRID = '@mozilla.org/network/file-output-stream;1';
|
||||
|
||||
var fileHandler = GetFileProtocolHandler();
|
||||
var localFile;
|
||||
if (href)
|
||||
nsuri.spec = href;
|
||||
localFile = fileHandler.getFileFromURLSpec(href).QueryInterface(nsILocalFile);
|
||||
else
|
||||
nsuri.spec = sheet.href;
|
||||
var fileURL = nsuri.QueryInterface(Components.interfaces.nsIFileURL);
|
||||
var localFile = fileURL.file;
|
||||
var fileOuputStream = Components.classes['@mozilla.org/network/file-output-stream;1'].createInstance(Components.interfaces.nsIFileOutputStream);
|
||||
localFile = fileHandler.getFileFromURLSpec(sheet.href).QueryInterface(nsILocalFile);
|
||||
|
||||
var fileOuputStream = classes[FILEOUT_CTRID].createInstance(nsIFileOutputStream);
|
||||
try {
|
||||
fileOuputStream.init(localFile, -1, -1, 0);
|
||||
|
||||
|
@ -1025,8 +1052,8 @@ function ToggleFourBorderSidesSameStyle(elt)
|
|||
var sideArray = [ "left", "right", "bottom" ];
|
||||
|
||||
var style = getSpecifiedStyle("border-top-style");
|
||||
/*if (!style || style == "")
|
||||
style = "unspecified";*/
|
||||
if (!sameStyle && !style)
|
||||
style = "unspecified";
|
||||
var color = gDialog.topBorderColorInput.value;
|
||||
var width = getSpecifiedStyle("border-top-width");
|
||||
|
||||
|
@ -1036,17 +1063,21 @@ function ToggleFourBorderSidesSameStyle(elt)
|
|||
var colorInput = document.getElementById( sideArray[i] + "BorderColorInput" );
|
||||
var colorButton = document.getElementById( sideArray[i] + "BorderColorButton" );
|
||||
if (sameStyle) {
|
||||
styleMenulist.setAttribute("disabled", "true");
|
||||
widthInput.setAttribute("disabled", "true");
|
||||
styleMenulist.selectedItem = document.getElementById("unspecified" + sideArray[i] + "BorderStyle");
|
||||
|
||||
widthInput.value = "";
|
||||
|
||||
colorInput.value = "";
|
||||
colorInput.setAttribute("disabled", "true");
|
||||
setColorWell("border"+sideArray[i]+"CW", "");
|
||||
|
||||
widthInput.setAttribute("disabled", "true");
|
||||
styleMenulist.setAttribute("disabled", "true");
|
||||
colorButton.setAttribute("disabled", "true");
|
||||
|
||||
IfFourSidesSameStyle("border", "style", style,
|
||||
'allFourBordersSame', 'borderPreview', null);
|
||||
IfFourSidesSameStyle("border", "color", color,
|
||||
'allFourBordersSame', 'borderPreview', null);
|
||||
IfFourSidesSameStyle("border", "width", width,
|
||||
'allFourBordersSame', 'borderPreview', null);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-color", color);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-style", style);
|
||||
AddStyleToElement(gDialog.borderPreview, "border-"+sideArray[i]+"-width", width);
|
||||
}
|
||||
else {
|
||||
styleMenulist.removeAttribute("disabled");
|
||||
|
@ -1057,8 +1088,6 @@ function ToggleFourBorderSidesSameStyle(elt)
|
|||
colorInput.value = color;
|
||||
setColorWell("border"+sideArray[i]+"CW", color);
|
||||
widthInput.value = width;
|
||||
if (!style || style == "")
|
||||
style = "none";
|
||||
var styleMenuitem = document.getElementById( style+sideArray[i]+"BorderStyle" );
|
||||
styleMenulist.selectedItem = styleMenuitem;
|
||||
}
|
||||
|
|
|
@ -323,7 +323,6 @@
|
|||
</row>
|
||||
<row align="center">
|
||||
<label value="&opacity.label;"/>
|
||||
<hbox align="center">
|
||||
<scrollbar flex="1"
|
||||
id="opacityScrollbar"
|
||||
align="horizontal"
|
||||
|
@ -332,7 +331,6 @@
|
|||
increment="10"
|
||||
pageincrement="100"/>
|
||||
<label id="opacityLabel" value="transparent"/>
|
||||
</hbox>
|
||||
</row>
|
||||
<row align="center">
|
||||
<label value="&backgroundImage.label;"/>
|
||||
|
|
|
@ -234,3 +234,5 @@
|
|||
<!ENTITY xfastSpeechRate.label "x-fast">
|
||||
|
||||
<!ENTITY opacity.label "Opacity:">
|
||||
|
||||
<!ENTITY compatibilityTab.label "Compatibility">
|
||||
|
|
Загрузка…
Ссылка в новой задаче