From f30d3ed334b276b661545ac9df74bc483ba398fa Mon Sep 17 00:00:00 2001 From: "glazman%netscape.com" Date: Thu, 7 Nov 2002 09:24:36 +0000 Subject: [PATCH] -- 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 --- .../resources/content/EdCssProps-utils.js | 10 +- .../cascades/resources/content/EdCssProps.js | 407 ++++++++++++++---- .../cascades/resources/content/EdCssProps.xul | 224 +++++----- .../resources/content/commonCssProps.js | 115 +++-- .../resources/content/tabsOverlay.xul | 18 +- .../resources/locale/en-US/EdCssProps.dtd | 2 + 6 files changed, 520 insertions(+), 256 deletions(-) diff --git a/extensions/editor/cascades/resources/content/EdCssProps-utils.js b/extensions/editor/cascades/resources/content/EdCssProps-utils.js index 8a9455bbfa7..148cba632b9 100644 --- a/extensions/editor/cascades/resources/content/EdCssProps-utils.js +++ b/extensions/editor/cascades/resources/content/EdCssProps-utils.js @@ -125,11 +125,7 @@ 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; + return fp.file ? getURLSpecFromFile(fp.file) : null; } // blatantly stolen from Venkman @@ -164,3 +160,7 @@ function doDump(text, value) { dump("===> " + text + " : " + value + "\n"); } +function ClearTreeSelection(tree) { + if (tree) + tree.treeBoxObject.selection.clearSelection(); +} diff --git a/extensions/editor/cascades/resources/content/EdCssProps.js b/extensions/editor/cascades/resources/content/EdCssProps.js index 12cd5cfb984..86bf02a90c9 100644 --- a/extensions/editor/cascades/resources/content/EdCssProps.js +++ b/extensions/editor/cascades/resources/content/EdCssProps.js @@ -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"); } @@ -490,19 +514,21 @@ function GetSelectedItemData() 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; + 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; + 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; + 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,65 +607,70 @@ function onSelectCSSTreeItem(tab) } break; case SHEET: - var alternate = ""; - if (external && - cssObject.ownerNode.getAttribute("rel").toLowerCase() == "alternate stylesheet") { - alternate = " (alternate)"; + 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") } - gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Stylesheet"+alternate); - AddLabelToInfobox(gridrows, "Type:", cssObject.type, 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, 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, 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 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); +} diff --git a/extensions/editor/cascades/resources/content/EdCssProps.xul b/extensions/editor/cascades/resources/content/EdCssProps.xul index f17cff649fc..07a12ea15c0 100644 --- a/extensions/editor/cascades/resources/content/EdCssProps.xul +++ b/extensions/editor/cascades/resources/content/EdCssProps.xul @@ -68,119 +68,117 @@