home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 December / 2004-12 CHIP.iso / Internet / NVU 0.50 for Windows / nvu-0.50-win32-installer-full.exe / {app} / chrome / cascades.jar / content / cascades / EdCssProps.js < prev    next >
Encoding:
Text File  |  2004-03-09  |  63.5 KB  |  1,715 lines
  1. /* ***** BEGIN LICENSE BLOCK *****
  2.  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  3.  *
  4.  * The contents of this file are subject to the Mozilla Public License Version
  5.  * 1.1 (the "License"); you may not use this file except in compliance with
  6.  * the License. You may obtain a copy of the License at
  7.  * http://www.mozilla.org/MPL/
  8.  *
  9.  * Software distributed under the License is distributed on an "AS IS" basis,
  10.  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11.  * for the specific language governing rights and limitations under the
  12.  * License.
  13.  *
  14.  * The Original Code is CaScadeS, a stylesheet editor for Composer.
  15.  *
  16.  * The Initial Developer of the Original Code is
  17.  * Daniel Glazman.
  18.  * Portions created by the Initial Developer are Copyright (C) 2002
  19.  * the Initial Developer. All Rights Reserved.
  20.  *
  21.  * Contributor(s):
  22.  *   Original author: Daniel Glazman <daniel@glazman.org>
  23.  *
  24.  * Alternatively, the contents of this file may be used under the terms of
  25.  * either the GNU General Public License Version 2 or later (the "GPL"), or
  26.  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  27.  * in which case the provisions of the GPL or the LGPL are applicable instead
  28.  * of those above. If you wish to allow use of your version of this file only
  29.  * under the terms of either the GPL or the LGPL, and not to allow others to
  30.  * use your version of this file under the terms of the MPL, indicate your
  31.  * decision by deleting the provisions above and replace them with the notice
  32.  * and other provisions required by the GPL or the LGPL. If you do not delete
  33.  * the provisions above, a recipient may use your version of this file under
  34.  * the terms of any one of the MPL, the GPL or the LGPL.
  35.  *
  36.  * ***** END LICENSE BLOCK ***** */
  37.  
  38. const SHEET        = 1;
  39. const STYLE_RULE   = 2;
  40. const IMPORT_RULE  = 3;
  41. const MEDIA_RULE   = 4;
  42. const CHARSET_RULE = 5;
  43. const PAGE_RULE    = 6;
  44. const OWNER_NODE   = 7;
  45.  
  46. // const COMPATIBILITY_TAB = 1;
  47. const GENERAL_TAB       = 2;
  48. const TEXT_TAB          = 3;
  49. const BACKGROUND_TAB    = 4;
  50. const BORDER_TAB        = 5;
  51. const BOX_TAB           = 6;
  52. const AURAL_TAB         = 7;
  53.  
  54. const GENERIC_SELECTOR      = 0;
  55. const TYPE_ELEMENT_SELECTOR = 1;
  56. const CLASS_SELECTOR        = 2;
  57.  
  58. const kAsyncTimeout = 1500; // 1.5 second
  59.  
  60. var objectsArray = null;
  61. var gTimerID;
  62. var gAsyncLoadingTimerID;
  63.  
  64. // needed for commonCssProps.js
  65. var gHaveDocumentUrl = false;
  66.  
  67. var gInsertIndex = -1;
  68.  
  69. // * dialog initialization code
  70. function Startup()
  71. {
  72.   // are we in a pre-1.3 Mozilla ?
  73.   if (typeof window.InitEditorShell == "function") {
  74.     // yes, so let's get an editorshell
  75.     if (!InitEditorShell())
  76.       return;
  77.   }
  78.   else if (typeof window.GetCurrentEditor != "function" || !GetCurrentEditor()) {
  79.     window.close();
  80.     return;
  81.   }
  82.  
  83.   // gDialog is declared in EdDialogCommon.js
  84.  
  85.   gDialog.selectionBased = false;
  86.  
  87.   // Set commonly-used widgets like this:
  88.   gDialog.selectedTab = TEXT_TAB;
  89.   gDialog.sheetsTreechildren            = document.getElementById("stylesheetsTree");
  90.   gDialog.sheetsTree                    = document.getElementById("sheetsTree");
  91.   gDialog.sheetInfoTab                  = document.getElementById("sheetInfoTab");
  92.   gDialog.atimportButton                = document.getElementById("atimportButton");
  93.   gDialog.atmediaButton                 = document.getElementById("atmediaButton");
  94.   gDialog.linkButton                    = document.getElementById("linkButton");
  95.   gDialog.styleButton                   = document.getElementById("styleButton");
  96.   gDialog.ruleButton                    = document.getElementById("ruleButton");
  97.   gDialog.removeButton                  = document.getElementById("removeButton");
  98.   gDialog.upButton                      = document.getElementById("upButton");
  99.   gDialog.downButton                    = document.getElementById("downButton");
  100.  
  101.   gDialog.selectedTab = GENERAL_TAB;
  102.   gDialog.sheetInfoTabPanelTitle        = document.getElementById("sheetInfoTabPanelTitle");
  103.   gDialog.textTab                       = document.getElementById("textTab");
  104.   gDialog.brownFoxLabel                 = document.getElementById("brownFoxLabel");
  105.   gDialog.backgroundImageInput          = document.getElementById("backgroundImageInput");
  106.   gDialog.backgroundPreview             = document.getElementById("backgroundPreview");
  107.   gDialog.sheetTabbox                   = document.getElementById("sheetTabbox");
  108.   gDialog.backgroundColorInput          = document.getElementById("backgroundColorInput");
  109.   gDialog.textColorInput                = document.getElementById("textColorInput");
  110.   gDialog.backgroundRepeatMenulist      = document.getElementById("backgroundRepeatMenulist");
  111.   gDialog.backgroundAttachmentCheckbox  = document.getElementById("backgroundAttachmentCheckbox");
  112.   gDialog.xBackgroundPositionRadiogroup = document.getElementById("xBackgroundPositionRadiogroup");
  113.   gDialog.yBackgroundPositionRadiogroup = document.getElementById("yBackgroundPositionRadiogroup");
  114.   gDialog.fontFamilyRadiogroup          = document.getElementById("fontFamilyRadiogroup");
  115.   gDialog.customFontFamilyInput         = document.getElementById("customFontFamilyInput");
  116.   gDialog.predefFontFamilyMenulist      = document.getElementById("predefFontFamilyMenulist");
  117.   gDialog.fontSizeInput                 = document.getElementById("fontSizeInput");
  118.   gDialog.lineHeightInput               = document.getElementById("lineHeightInput");
  119.   gDialog.textUnderlineCheckbox         = document.getElementById("underlineTextDecorationCheckbox");
  120.   gDialog.textOverlineCheckbox          = document.getElementById("overlineTextDecorationCheckbox");
  121.   gDialog.textLinethroughCheckbox       = document.getElementById("linethroughTextDecorationCheckbox");
  122.   gDialog.textBlinkCheckbox             = document.getElementById("blinkTextDecorationCheckbox");
  123.   gDialog.noDecorationCheckbox          = document.getElementById("noneTextDecorationCheckbox");
  124.  
  125.   gDialog.topBorderStyleMenulist        = document.getElementById("topBorderStyleMenulist");
  126.   gDialog.topBorderWidthInput           = document.getElementById("topBorderWidthInput");
  127.   gDialog.topBorderColorInput           = document.getElementById("topBorderColorInput");
  128.  
  129.   gDialog.leftBorderStyleMenulist       = document.getElementById("leftBorderStyleMenulist");
  130.   gDialog.leftBorderWidthInput          = document.getElementById("leftBorderWidthInput");
  131.   gDialog.leftBorderColorInput          = document.getElementById("leftBorderColorInput");
  132.  
  133.   gDialog.rightBorderStyleMenulist      = document.getElementById("rightBorderStyleMenulist");
  134.   gDialog.rightBorderWidthInput         = document.getElementById("rightBorderWidthInput");
  135.   gDialog.rightBorderColorInput         = document.getElementById("rightBorderColorInput");
  136.  
  137.   gDialog.bottomBorderStyleMenulist     = document.getElementById("bottomBorderStyleMenulist");
  138.   gDialog.bottomBorderWidthInput        = document.getElementById("bottomBorderWidthInput");
  139.   gDialog.bottomBorderColorInput        = document.getElementById("bottomBorderColorInput");
  140.  
  141.   gDialog.allFourBordersSame            = document.getElementById("allFourBordersSame");
  142.   gDialog.borderPreview                 = document.getElementById("borderPreview");
  143.  
  144.   gDialog.volumeScrollbar               = document.getElementById("volumeScrollbar");
  145.   gDialog.volumeMenulist                = document.getElementById("volumeMenulist");
  146.   gDialog.muteVolumeCheckbox            = document.getElementById("muteVolumeCheckbox");
  147.  
  148.   gDialog.opacityScrollbar              = document.getElementById("opacityScrollbar");
  149.   gDialog.opacityLabel                  = document.getElementById("opacityLabel");
  150.  
  151.   gDialog.sheetInfoTabGridRows          = document.getElementById("sheetInfoTabGridRows");
  152.   gDialog.sheetInfoTabGrid              = document.getElementById("sheetInfoTabGrid");
  153.  
  154.   gDialog.expertMode = true;
  155.   gDialog.modified = false;
  156.   gDialog.selectedIndex = -1;
  157.  
  158.   gHaveDocumentUrl = GetDocumentBaseUrl();
  159.  
  160.   // Initialize all dialog widgets here,
  161.   // e.g., get attributes from an element for property dialog
  162.   InitSheetsTree(gDialog.sheetsTreechildren);
  163.   
  164.   // Set window location relative to parent window (based on persisted attributes)
  165.   SetWindowLocation();
  166. }
  167.  
  168. // * Toggles on/off expert mode. In expert mode, all buttons are enabled
  169. //   including buttons for stylesheet creation. When the mode is off, only
  170. //   the "create rule" button is enabled, a stylesheet being created to contain
  171. //   the new rule if necessary
  172. function toggleExpertMode()
  173. {
  174.   // toggle the boolean
  175.   gDialog.expertMode = !gDialog.expertMode;
  176.  
  177.   if (gDialog.expertMode) {
  178.     if (gDialog.selectedIndex == -1) {
  179.       // if expert mode is on but no selection in the tree, only
  180.       // sheet creation buttons are enabled
  181.       UpdateButtons(false, false, true, true, false, false);
  182.     }
  183.     else {
  184.       // if expert mode is on and we have something selected in the tree,
  185.       // the state of the buttons depend on the type of the selection
  186.       var external  = objectsArray[gDialog.selectedIndex].external;
  187.       var type      = objectsArray[gDialog.selectedIndex].type;
  188.       UpdateButtons(!external, !external, true, true, !external, (!external || (type == SHEET)) );
  189.     }
  190.   }
  191.   else {
  192.     // if we're not in expert mode, allow only rule creation button
  193.     UpdateButtons(!gDialog.atimportButton.hasAttribute("disabled"),
  194.                   !gDialog.atmediaButton.hasAttribute("disabled"),
  195.                   !gDialog.linkButton.hasAttribute("disabled"),
  196.                   !gDialog.styleButton.hasAttribute("disabled"),
  197.                   !gDialog.ruleButton.hasAttribute("disabled"),
  198.                   !gDialog.removeButton.hasAttribute("disabled"));
  199.   }
  200. }
  201.  
  202. // * This function recreates the contents of the STYLE elements and
  203. //   of the stylesheets local to the filesystem
  204. function FlushChanges()
  205. {
  206.   if (gDialog.modified) {
  207.     // let's make sure the editor is going to require save on exit
  208.     getCurrentEditor().incrementModificationCount(1);
  209.   }
  210.   // Validate all user data and set attributes and possibly insert new element here
  211.   // If there's an error the user must correct, return false to keep dialog open.
  212.   var sheet;
  213.   for (var i = 0; i < objectsArray.length; i++) {
  214.     if (objectsArray[i].modified && !objectsArray[i].external &&
  215.         objectsArray[i].type == SHEET) {
  216.       /* let's serialize this stylesheet ! */
  217.       sheet = objectsArray[i].cssElt;
  218.       if (sheet.ownerNode.nodeName.toLowerCase() == "link")
  219.         SerializeExternalSheet(sheet, null);
  220.       else
  221.         SerializeEmbeddedSheet(sheet);
  222.     }
  223.   }
  224.   SaveWindowLocation();
  225.   return true; // do close the window
  226. }
  227.  
  228. // * removes all the content in a tree
  229. //   param XULElement sheetsTree
  230. function CleanSheetsTree(sheetsTreeChildren)
  231. {
  232.   // we need to clear the selection in the tree otherwise the onselect
  233.   // action on the tree will be fired when we removed the selected entry
  234.   ClearTreeSelection(gDialog.sheetsTree);
  235.  
  236.   var elt = sheetsTreeChildren.firstChild;
  237.   while (elt) {
  238.     var tmp = elt.nextSibling;
  239.     sheetsTreeChildren.removeChild(elt);
  240.     elt = tmp;
  241.   }
  242. }
  243.  
  244. function AddSheetEntryToTree(sheetsTree, ownerNode)
  245. {
  246.   if (ownerNode.nodeType == Node.ELEMENT_NODE) {
  247.     var ownerTag  = ownerNode.nodeName.toLowerCase()
  248.     var relType   = ownerNode.getAttribute("rel");
  249.     if (relType) relType = relType.toLowerCase();
  250.     if (ownerTag == "style" ||
  251.         (ownerTag == "link" && relType.indexOf("stylesheet") != -1)) {
  252.  
  253.       var treeitem  = document.createElementNS(XUL_NS, "treeitem");
  254.       var treerow   = document.createElementNS(XUL_NS, "treerow");
  255.       var treecell  = document.createElementNS(XUL_NS, "treecell");
  256.  
  257.       // what kind of owner node do we have here ?
  258.       // a style element indicates an embedded stylesheet,
  259.       // while a link element indicates an external stylesheet;
  260.       // the case of an XML Processing Instruction is not handled, we
  261.       // are supposed to be in HTML 4
  262.       var external = false;
  263.       if (ownerTag == "style") {
  264.         treecell.setAttribute("label", "internal stylesheet");
  265.       }
  266.       else if (ownerTag == "link") {
  267.         // external stylesheet, let's present its URL to user
  268.         treecell.setAttribute("label", ownerNode.href);
  269.         external = true;
  270.         if ( /(\w*):.*/.test(ownerNode.href) ) {
  271.           if (RegExp.$1 == "file") {
  272.             external = false;
  273.           }
  274.         }
  275.         else
  276.           external = false;
  277.       }
  278.       // add a new entry to the tree
  279.       var o = newObject( treeitem, external, SHEET, ownerNode.sheet, false, 0 );
  280.       PushInObjectsArray(o);
  281.       
  282.       treerow.appendChild(treecell);
  283.       treeitem.appendChild(treerow);
  284.       treeitem.setAttribute("container", "true");
  285.       // add enties to the tree for the rules in the current stylesheet
  286.       var rules = null;
  287.       if (ownerNode.sheet)
  288.         rules = ownerNode.sheet.cssRules;
  289.       AddRulesToTreechildren(treeitem, rules, external, 1);
  290.  
  291.       sheetsTree.appendChild(treeitem);
  292.     }
  293.   }
  294. }
  295.  
  296. function PushInObjectsArray(o)
  297. {
  298.   if (gInsertIndex == -1)
  299.     objectsArray.push(o);
  300.   else {
  301.     objectsArray.splice(gInsertIndex, 0, o);
  302.     gInsertIndex++;
  303.   }
  304. }
  305.  
  306. // * populates the tree in the dialog with entries
  307. //   corresponding to all stylesheets and css rules attached to
  308. //   document
  309. //   param XULElement sheetsTree
  310. function InitSheetsTree(sheetsTree)
  311. {
  312.   // remove all entries in the tree
  313.   CleanSheetsTree(sheetsTree);
  314.   // Look for the stylesheets attached to the current document
  315.   // Get them from the STYLE and LINK elements because of async sheet loading :
  316.   // the LINK element is always here while the corresponding sheet might be
  317.   // delayed by network
  318.   var headNode = GetHeadElement();
  319.   if ( headNode && headNode.hasChildNodes() ) {
  320.     var ssn = headNode.childNodes.length;
  321.     objectsArray = new Array();
  322.     if (ssn) {
  323.       var i;
  324.       gInsertIndex = -1;
  325.       for (i=0; i<ssn; i++) {
  326.         var ownerNode = headNode.childNodes[i];
  327.         AddSheetEntryToTree(sheetsTree, ownerNode); 
  328.       }
  329.     }
  330.   }
  331. }
  332.  
  333. // * create a new "object" corresponding to an entry in the tree
  334. //   unfortunately, it's still impossible to attach a JS object to
  335. //   a treecell :-(
  336. //   param XULElement xulElt
  337. //   param boolean external
  338. //   param integer type
  339. //   param (DOMNode|DOMCSSStyleSheet|DOMCSSRule) cssElt
  340. //   param boolean modified
  341. //   param integer depth
  342. function newObject( xulElt, external, type, cssElt, modified, depth)
  343. {
  344.   return {xulElt:xulElt,
  345.           external:external,
  346.           type:type,
  347.           cssElt:cssElt,
  348.           modified:modified,
  349.           depth:depth};
  350. }
  351.  
  352. function AddStyleRuleToTreeChildren(rule, external, depth)
  353. {
  354.   var subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  355.   var subtreerow   = document.createElementNS(XUL_NS, "treerow");
  356.   var subtreecell  = document.createElementNS(XUL_NS, "treecell");
  357.   // show the selector attached to the rule
  358.   subtreecell.setAttribute("label", rule.selectorText);
  359.   var o = newObject( subtreeitem, external, STYLE_RULE, rule, false, depth );
  360.   PushInObjectsArray(o);
  361.   if (external) {
  362.     subtreecell.setAttribute("properties", "external");
  363.   }
  364.   subtreerow.appendChild(subtreecell);
  365.   subtreeitem.appendChild(subtreerow);
  366.  
  367.   return subtreeitem;
  368. }
  369.  
  370. function AddPageRuleToTreeChildren(rule, external, depth)
  371. {
  372.   var subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  373.   var subtreerow   = document.createElementNS(XUL_NS, "treerow");
  374.   var subtreecell  = document.createElementNS(XUL_NS, "treecell");
  375.   // show the selector attached to the rule
  376.   subtreecell.setAttribute("label", "@page " + rule.selectorText);
  377.   var o = newObject( subtreeitem, external, PAGE_RULE, rule, false, depth );
  378.   PushInObjectsArray(o);
  379.   if (external) {
  380.     subtreecell.setAttribute("properties", "external");
  381.   }
  382.   subtreerow.appendChild(subtreecell);
  383.   subtreeitem.appendChild(subtreerow);
  384.  
  385.   return subtreeitem;
  386. }
  387.  
  388. function AddImportRuleToTreeChildren(rule, external, depth)
  389. {
  390.   var subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  391.   var subtreerow   = document.createElementNS(XUL_NS, "treerow");
  392.   var subtreecell  = document.createElementNS(XUL_NS, "treecell");
  393.   // show "@import" and the URL
  394.   subtreecell.setAttribute("label", "@import "+rule.href, external);
  395.   var o = newObject( subtreeitem, external, IMPORT_RULE, rule, false, depth );
  396.   PushInObjectsArray(o);
  397.   if (external) {
  398.     subtreecell.setAttribute("properties", "external");
  399.   }
  400.   subtreerow.appendChild(subtreecell);
  401.   subtreeitem.appendChild(subtreerow);
  402.   subtreeitem.setAttribute("container", "true");
  403.   if (rule.styleSheet) {
  404.     // if we have a stylesheet really imported, let's browse it too
  405.     // increasing the depth and marking external
  406.     AddRulesToTreechildren(subtreeitem , rule.styleSheet.cssRules, true, depth+1);
  407.   }
  408.   return subtreeitem;
  409. }
  410.  
  411. // * adds subtreeitems for the CSS rules found
  412. //   into rules; in case of an at-rule, the method calls itself with
  413. //   a subtreeitem, the rules in the at-rule, a boolean specifying if
  414. //   the rules are external to the document or not, and an increased
  415. //   depth.
  416. //   param XULElement  treeItem
  417. //   param CSSRuleList rules
  418. //   param boolean     external
  419. //   param integer     depth
  420. function AddRulesToTreechildren(treeItem, rules, external, depth)
  421. {
  422.   // is there any rule in the stylesheet ; earlay way out if not
  423.   if (rules && rules.length) {
  424.     var subtreechildren = document.createElementNS(XUL_NS, "treechildren");
  425.     var j, o;
  426.     var subtreeitem, subtreerow, subtreecell;
  427.     // let's browse all the rules
  428.     for (j=0; j< rules.length; j++) {
  429.       switch (rules[j].type) {
  430.         case CSSRule.STYLE_RULE:
  431.           // this is a CSSStyleRule
  432.           subtreeitem  = AddStyleRuleToTreeChildren(rules[j], external, depth);
  433.           subtreechildren.appendChild(subtreeitem);
  434.           break;
  435.         case CSSRule.PAGE_RULE:
  436.           // this is a CSSStyleRule
  437.           subtreeitem  = AddPageRuleToTreeChildren(rules[j], external, depth);
  438.           subtreechildren.appendChild(subtreeitem);
  439.           break;
  440.         case CSSRule.IMPORT_RULE:
  441.           // this is CSSImportRule for @import
  442.           subtreeitem  = AddImportRuleToTreeChildren(rules[j], external, depth);
  443.           subtreechildren.appendChild(subtreeitem);
  444.           break;
  445.         case CSSRule.MEDIA_RULE:
  446.           // this is a CSSMediaRule @media
  447.           subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  448.           subtreerow   = document.createElementNS(XUL_NS, "treerow");
  449.           subtreecell  = document.createElementNS(XUL_NS, "treecell");
  450.           // show "@media" and media list
  451.           subtreecell.setAttribute("label", "@media "+rules[j].media.mediaText, external);
  452.           o = newObject( subtreeitem, external, MEDIA_RULE, rules[j], false, depth );
  453.           PushInObjectsArray(o);
  454.           if (external) {
  455.             subtreecell.setAttribute("properties", "external");
  456.           }
  457.           subtreerow.appendChild(subtreecell);
  458.           subtreeitem.appendChild(subtreerow);
  459.           subtreeitem.setAttribute("container", "true");
  460.           // let's browse the rules attached to this CSSMediaRule, keeping the
  461.           // current external and increasing depth
  462.           AddRulesToTreechildren(subtreeitem, rules[j].cssRules, external, depth+1);
  463.           subtreechildren.appendChild(subtreeitem);
  464.           break;
  465.         case CSSRule.CHARSET_RULE:
  466.           // this is a CSSCharsetRule
  467.           subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  468.           subtreerow   = document.createElementNS(XUL_NS, "treerow");
  469.           subtreecell  = document.createElementNS(XUL_NS, "treecell");
  470.           // show "@charset" and the encoding
  471.           subtreecell.setAttribute("label", "@charset "+rules[j].encoding, external);
  472.           o = newObject( subtreeitem, external, CHARSET_RULE, rules[j], false, depth );
  473.           PushInObjectsArray(o);
  474.           if (external) {
  475.             subtreecell.setAttribute("properties", "external");
  476.           }
  477.           subtreerow.appendChild(subtreecell);
  478.           subtreeitem.appendChild(subtreerow);
  479.           subtreechildren.appendChild(subtreeitem);
  480.           break;          
  481.       }
  482.     }
  483.     treeItem.appendChild(subtreechildren);
  484.   }
  485. }
  486.  
  487. function GetSelectedItemData()
  488. {
  489.   // get the selected tree item (if any)
  490.   var selectedItem =  getSelectedItem(gDialog.sheetsTree);
  491.   gDialog.selectedIndex  = -1;
  492.   gDialog.selectedObject = null;
  493.  
  494.   if (!objectsArray)
  495.     return;
  496.   // look for the object in objectsArray corresponding to the
  497.   // selectedItem
  498.   var i, l = objectsArray.length;
  499.   if (selectedItem) {
  500.     for (i=0; i<l; i++) {
  501.       if (objectsArray[i].xulElt == selectedItem) {
  502.         gDialog.selectedIndex  = i;
  503.         gDialog.treeItem       = objectsArray[i].xulElt;
  504.         gDialog.externalObject = objectsArray[i].external;
  505.         gDialog.selectedType   = objectsArray[i].type;
  506.         gDialog.selectedObject = objectsArray[i].cssElt;
  507.         gDialog.modifiedObject = objectsArray[i].modified;
  508.         gDialog.depthObject    = objectsArray[i].depth;
  509.         break;
  510.       }
  511.     }
  512.   }
  513. }
  514.  
  515. // * selects either a tree item (sheet, rule) or a tab
  516. //   in the former case, the parameter is null ; in the latter,
  517. //   the parameter is a string containing the name of the selected tab
  518. //   param String tab
  519. function onSelectCSSTreeItem(tab)
  520. {
  521.   // convert the tab string into a tab id
  522.   if      (tab == "general")       tab = GENERAL_TAB;
  523.   else if (tab == "text")          tab = TEXT_TAB;
  524.   else if (tab == "background")    tab = BACKGROUND_TAB;
  525.   else if (tab == "border")        tab = BORDER_TAB;
  526.   else if (tab == "box")           tab = BOX_TAB;
  527.   else if (tab == "aural")         tab = AURAL_TAB;
  528.  
  529.   GetSelectedItemData();
  530.  
  531.   if (gDialog.selectedIndex == -1) {
  532.     // there is no tree item selected, let's fallback to the Info tab
  533.     // but there is nothing we can display in that tab...
  534.     gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
  535.     return;
  536.   }
  537.  
  538.   var external  = objectsArray[gDialog.selectedIndex].external;
  539.   var type      = objectsArray[gDialog.selectedIndex].type;
  540.   var cssObject = gDialog.selectedObject;
  541.   // Let's update the buttons depending on what kind of object is
  542.   // selected in the tree
  543.   UpdateButtons(!external, !external, true, true, !external, (!external || (type == SHEET)) );
  544.  
  545.   if (gDialog.selectedType != STYLE_RULE) {
  546.     // user did not select a CSSStyleRule, let's fallback to Info tab
  547.     tab = GENERAL_TAB;
  548.   }
  549.   if (!tab) {
  550.     // this method gets called by a selection in the tree. Is there a
  551.     // tab already selected ? If yes, keep it; if no, fallback to the
  552.     // Info tab
  553.     tab = gDialog.selectedTab ? gDialog.selectedTab : GENERAL_TAB;
  554.   }
  555.   switch (tab) {
  556.     case TEXT_TAB:
  557.       // we have to update the text preview, let's remove its style attribute
  558.       gDialog.brownFoxLabel.removeAttribute("style");      
  559.       InitTextTabPanel();
  560.       return;
  561.       break;
  562.     case BACKGROUND_TAB:
  563.       InitBackgroundTabPanel();
  564.       return;
  565.       break;
  566.     case BORDER_TAB:
  567.       InitBorderTabPanel();
  568.       return;
  569.       break;
  570.     case BOX_TAB:
  571.       InitBoxTabPanel();
  572.       return;
  573.       break;
  574.     case AURAL_TAB:
  575.       InitAuralTabPanel();
  576.       return;
  577.       break;
  578.   }
  579.  
  580.   // if we are here, the Info tab is our choice
  581.   gDialog.selectedTab = GENERAL_TAB;
  582.   gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
  583.   
  584.   var gridrows = gDialog.sheetInfoTabGridRows;
  585.   var grid     = gDialog.sheetInfoTabGrid;
  586.  
  587.   if (gridrows) {
  588.     // first, remove all information present in the Info tab
  589.     grid.removeChild(gridrows);
  590.   }
  591.  
  592.   gridrows = document.createElementNS(XUL_NS, "rows");
  593.   gDialog.sheetInfoTabGridRows = gridrows;
  594.   gridrows.setAttribute("id", "sheetInfoTabGridRows");
  595.   grid.appendChild(gridrows);
  596.   grid.removeAttribute("style");
  597.  
  598.   switch (type) {
  599.     case OWNER_NODE:
  600.       // this case is a workaround when we have a LINK element but the
  601.       // corresponding stylesheet is not loaded yet
  602.       if (gDialog.selectedObject.sheet) {
  603.         var index = gDialog.selectedIndex;
  604.         sheetLoadedTimeoutCallback(index);
  605.         onSelectCSSTreeItem(tab);
  606.         return;
  607.       }
  608.       break;
  609.     case SHEET:
  610.       if (cssObject) {
  611.         var alternate = "";
  612.         if (external &&
  613.             cssObject.ownerNode.getAttribute("rel").toLowerCase().indexOf("alternate") != -1) {
  614.           alternate = " (alternate)";
  615.         }
  616.         gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Stylesheet"+alternate);
  617.         AddLabelToInfobox(gridrows, "Type:", cssObject.type, null, false);
  618.         AddCheckboxToInfobox(gridrows, "Disabled:", "check to disable stylesheet (cannot be saved)",
  619.                              cssObject.disabled, "onStylesheetDisabledChange");
  620.         var href;
  621.         if (cssObject.ownerNode.nodeName.toLowerCase() == "link") {
  622.           href = cssObject.href;
  623.         }
  624.         else {
  625.           href = "none (embedded into the document)";
  626.         }
  627.         AddLabelToInfobox(gridrows, "URL:", href, null, false);
  628.         var mediaList = cssObject.media.mediaText;
  629.         if (!mediaList || mediaList == "") {
  630.           mediaList = "all";
  631.         }
  632.         AddEditableZoneToInfobox(gridrows, "Media list:", mediaList, "onStylesheetMediaChange", false);
  633.         if (cssObject.title) {
  634.           AddEditableZoneToInfobox(gridrows, "Title:", cssObject.title, "onStylesheetTitleChange", false);
  635.         }
  636.  
  637.         if (cssObject.cssRules) {
  638.           AddLabelToInfobox(gridrows, "Number of rules:", cssObject.cssRules.length, null, false);
  639.         }
  640.         if (!external && cssObject.ownerNode.nodeName.toLowerCase() == "style")
  641.           // we can export only embedded stylesheets
  642.           AddSingleButtonToInfobox(gridrows, "Export stylesheet and switch to exported version", "onExportStylesheet")
  643.       }
  644.       else
  645.         AddLabelToInfobox(gridrows, "Unable to retrieve stylesheet", null, null, false);
  646.       break;
  647.     case STYLE_RULE:
  648.     case PAGE_RULE:
  649.       var h = document.defaultView.getComputedStyle(grid.parentNode, "").getPropertyValue("height");
  650.       // let's prepare the grid for the case the rule has a laaaaarge number
  651.       // of property declarations
  652.       grid.setAttribute("style", "overflow: auto; height: "+h);
  653.       gDialog.sheetInfoTabPanelTitle.setAttribute("value",
  654.                   (type == STYLE_RULE) ? "Style rule" : "Page rule" );
  655.  
  656.       AddLabelToInfobox(gridrows, "Selector:", cssObject.selectorText, null, false);
  657.       if (cssObject.style.length) {
  658.         AddLabelToInfobox(gridrows, "Declarations:", " ", "Importance", false);
  659.         for (var i=0; i<cssObject.style.length; i++) {
  660.           AddDeclarationToInfobox(gridrows, cssObject, i, false);
  661.         }
  662.       }
  663.       // TO BE DONE : need a way of changing the importance of a given declaration
  664.       break;
  665.     case MEDIA_RULE:
  666.       gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Media rule");
  667.       AddLabelToInfobox(gridrows, "Media list:", cssObject.media.mediaText, null, false);
  668.       AddLabelToInfobox(gridrows, "Number of rules:", cssObject.cssRules.length, null, false);
  669.       break;
  670.     case IMPORT_RULE:
  671.       gDialog.sheetInfoTabPanelTitle.setAttribute("value", "Import rule");
  672.       AddLabelToInfobox(gridrows, "URL:", cssObject.href, null, false);
  673.       AddLabelToInfobox(gridrows, "Media list:", cssObject.media.mediaText, null, false);
  674.       break;
  675.     // TO BE DONE : @charset and other exotic rules
  676.   }
  677. }
  678.  
  679. // * updates the UI buttons with the given states
  680. //   param boolean importState
  681. //   param mediaState
  682. //   param boolean linkState
  683. //   param boolean styleState
  684. //   param boolean ruleState
  685. //   param boolean removeState
  686. function UpdateButtons(importState, mediaState, linkState, styleState, ruleState, removeState)
  687. {
  688.   if (!gDialog.expertMode) {
  689.     importState = false;
  690.     mediaState = false;
  691.     linkState = false;
  692.     styleState = false;
  693.     ruleState = true;
  694.   }
  695.   if (!gDialog.selectedObject) {
  696.     importState = false;
  697.     mediaState = false;
  698.     if (gDialog.selectedIndex != -1)
  699.       ruleState = false;
  700.   }
  701.   EnableUI(gDialog.atimportButton, importState);
  702.   EnableUI(gDialog.atmediaButton, mediaState);
  703.   EnableUI(gDialog.linkButton, linkState);
  704.   EnableUI(gDialog.styleButton, styleState);
  705.   EnableUI(gDialog.ruleButton, ruleState);
  706.   EnableUI(gDialog.removeButton, removeState);
  707.   EnableUI(gDialog.upButton, removeState);
  708.   EnableUI(gDialog.downButton, removeState);
  709. }
  710.  
  711. // * adds a button to the given treerow
  712. //   param XULElement rows
  713. //   param String label
  714. //   param String callback
  715. function AddSingleButtonToInfobox(rows, label, callback)
  716. {
  717.   var row = document.createElementNS(XUL_NS, "row");
  718.   row.setAttribute("align", "center");
  719.   var spacer = document.createElementNS(XUL_NS, "spacer");
  720.   var hbox = document.createElementNS(XUL_NS, "hbox");
  721.   var button = document.createElementNS(XUL_NS, "button");
  722.   button.setAttribute("label", label);
  723.   button.setAttribute("class", "align-right");
  724.   button.setAttribute("oncommand", callback+"();");
  725.   row.appendChild(spacer);
  726.   hbox.appendChild(button);
  727.   row.appendChild(hbox);
  728.   rows.appendChild(row);
  729. }
  730.  
  731. // * adds a textarea to the given treerow, allows to assign the
  732. //   initial value and specify that it should acquire the focus
  733. //   param XULElement rows
  734. //   param String label
  735. //   param String value
  736. //   param String callback
  737. //   param boolean focus
  738. function AddEditableZoneToInfobox(rows, label, value, callback, focus)
  739. {
  740.   var labelLabel = document.createElementNS(XUL_NS, "label");
  741.   var row = document.createElementNS(XUL_NS, "row");
  742.   row.setAttribute("align", "center");
  743.   labelLabel.setAttribute("value", label);
  744.   row.appendChild(labelLabel);
  745.  
  746.   var textbox = document.createElementNS(XUL_NS, "textbox");
  747.   if (callback != "") 
  748.     textbox.setAttribute("oninput", callback+"(this)");
  749.   textbox.setAttribute("value", value);
  750.   textbox.setAttribute("size", 20);
  751.   row.appendChild(textbox);
  752.   rows.appendChild(row);
  753.   if (focus)
  754.     SetTextboxFocus(textbox);
  755.   return textbox;
  756. }
  757.  
  758. // * adds a radiogroup to the given treerow
  759. //   param XULElement rows
  760. //   param String label
  761. function AddRadioGroupToInfoBox(rows, label)
  762. {
  763.   var row = document.createElementNS(XUL_NS, "row");
  764.   row.setAttribute("align", "center");
  765.  
  766.   var labelLabel = document.createElementNS(XUL_NS, "label");
  767.   labelLabel.setAttribute("value", label);
  768.   row.appendChild(labelLabel);
  769.  
  770.   var radiogroup = document.createElementNS(XUL_NS, "radiogroup");
  771.   row.appendChild(radiogroup);
  772.   rows.appendChild(row);
  773.   return radiogroup;
  774. }
  775.  
  776. // * adds a radio button to a previously created radiogroup
  777. //   param XULElement radiogroup
  778. //   param String label
  779. //   param String callback
  780. //   param integer selectorType
  781. //   param boolean selected
  782. function AddRadioToRadioGroup(radiogroup, label, callback, selectorType, selected)
  783. {
  784.   var radio = document.createElementNS(XUL_NS, "radio");
  785.   radio.setAttribute("label",     label);
  786.   radio.setAttribute("oncommand", callback + "(" + selectorType + ");" );
  787.   if (selected)
  788.     radio.setAttribute("selected", "true");
  789.   radiogroup.appendChild(radio);
  790. }
  791.  
  792. // * adds a label and a checkbox to a given treerows
  793. //   param XULElement rows
  794. //   param String label
  795. //   param String checkboxLabel
  796. //   param String value
  797. //   param String callback
  798. function AddCheckboxToInfobox(rows, label, checkboxLabel, value, callback)
  799. {
  800.   var row = document.createElementNS(XUL_NS, "row");
  801.   row.setAttribute("align", "center");
  802.  
  803.   var labelLabel = document.createElementNS(XUL_NS, "label");
  804.   labelLabel.setAttribute("value", label);
  805.   row.appendChild(labelLabel);
  806.  
  807.   var checkbox = document.createElementNS(XUL_NS, "checkbox");
  808.   checkbox.setAttribute("label", checkboxLabel);
  809.   checkbox.setAttribute("checked", value);
  810.   checkbox.setAttribute("oncommand", callback+"()");
  811.   row.appendChild(checkbox);
  812.  
  813.   rows.appendChild(row);
  814. }
  815.  
  816. // * adds a label to a given treerows; strong indicates a bold font
  817. //   param XULElement rows
  818. //   param String label
  819. //   param String value
  820. //   param boolean strong
  821. function AddLabelToInfobox(rows, firstLabel, flexibleLabel, lastLabel, strong)
  822. {
  823.   var labelLabel = document.createElementNS(XUL_NS, "label");
  824.   var row = document.createElementNS(XUL_NS, "row");
  825.   row.setAttribute("align", "center");
  826.   labelLabel.setAttribute("value", firstLabel);
  827.   if (strong) {
  828.     labelLabel.setAttribute("class", "titleLabel");
  829.   }
  830.   row.appendChild(labelLabel);
  831.  
  832.   if (flexibleLabel) {
  833.     var valueLabel = document.createElementNS(XUL_NS, "label");
  834.     valueLabel.setAttribute("value", flexibleLabel);
  835.     if (strong) {
  836.       valueLabel.setAttribute("class", "titleLabel");
  837.     }
  838.     row.appendChild(valueLabel);
  839.   }
  840.  
  841.   if (lastLabel) {
  842.     valueLabel = document.createElementNS(XUL_NS, "label");
  843.     valueLabel.setAttribute("value", lastLabel);
  844.     if (strong) {
  845.       valueLabel.setAttribute("class", "titleLabel");
  846.     }
  847.     row.appendChild(valueLabel);
  848.   }
  849.  
  850.   rows.appendChild(row);
  851. }
  852.  
  853. // * adds a declaration's importance to a given treerows
  854. //   param XULElement rows
  855. //   param String label
  856. //   param String value
  857. //   param String importance
  858. function AddDeclarationToInfobox(rows, cssObject, i, importance)
  859. {
  860.   var labelLabel = document.createElementNS(XUL_NS, "label");
  861.   var row = document.createElementNS(XUL_NS, "row");
  862.   row.setAttribute("align", "center");
  863.   labelLabel.setAttribute("value", "");
  864.   row.appendChild(labelLabel);
  865.  
  866.   var valueLabel = document.createElementNS(XUL_NS, "label");
  867.   valueLabel.setAttribute("value", GetDeclarationText(cssObject, i));
  868.   row.appendChild(valueLabel);
  869.  
  870.   var importanceLabel = document.createElementNS(XUL_NS, "checkbox");
  871.   if (GetDeclarationImportance(cssObject, i) == "important") {
  872.     importanceLabel.setAttribute("checked", true);
  873.   }
  874.   importanceLabel.setAttribute("oncommand", "TogglePropertyImportance(\"" + cssObject.style.item(i) + "\")" );
  875.   row.appendChild(importanceLabel);
  876.  
  877.   rows.appendChild(row);
  878. }
  879.  
  880. function TogglePropertyImportance(property)
  881. {
  882.   var cssObject = gDialog.selectedObject;
  883.   dump("IMPORTANCE = " + cssObject.style.getPropertyPriority(property) + "\n");
  884.   var newImportance =  (cssObject.style.getPropertyPriority(property) == "important") ? "" : "important" ;
  885.   dump("NEW IMPORTANCE = " + newImportance + "\n");
  886.   cssObject.style.setProperty(property, cssObject.style.getPropertyValue(property), newImportance);
  887. }
  888.  
  889. // * retrieves the index-nth style declaration in a rule
  890. //   param DOMCSSRule styleRule
  891. //   param integer index
  892. //   return String
  893. function GetDeclarationText(styleRule, index)
  894. {
  895.   var pName = styleRule.style.item(index);
  896.   return pName + ": " + styleRule.style.getPropertyValue(pName);
  897. }
  898.  
  899. // * retrieves the stylesheet containing the selected tree entry
  900. //   return integer
  901. function GetSheetContainer()
  902. {
  903.   var index = gDialog.selectedIndex;
  904.   while (index >= 0 && objectsArray[index].type != SHEET) {
  905.     index--;
  906.   }
  907.   return index;
  908. }
  909.  
  910. // * declares that the stylesheet containing the selected tree entry
  911. //   has been modified
  912. function SetModifiedFlagOnStylesheet()
  913. {
  914.   var index = GetSheetContainer();
  915.   if (index != -1) {
  916.     objectsArray[index].modified = true;
  917.     gDialog.modified = true;
  918.   }
  919. }
  920.  
  921. // * we are about to put some info about the selected entry into
  922. //   the Info tab
  923. //   return XULElement
  924. function PrepareInfoGridForCreation()
  925. {
  926.   gDialog.sheetTabbox.selectedTab = gDialog.sheetInfoTab;
  927.   
  928.   var gridrows = gDialog.sheetInfoTabGridRows;
  929.   var grid     = gDialog.sheetInfoTabGrid;
  930.  
  931.   if (gridrows) {
  932.     grid.removeChild(gridrows);
  933.   }
  934.  
  935.   gridrows = document.createElementNS(XUL_NS, "rows");
  936.   gDialog.sheetInfoTabGridRows = gridrows;
  937.   gridrows.setAttribute("id", "sheetInfoTabGridRows");
  938.   grid.appendChild(gridrows);
  939.   grid.removeAttribute("style");
  940.   return gridrows;
  941. }
  942.  
  943. // * user wants to create a @import rule
  944. function CreateNewAtimportRule()
  945. {
  946.   var gridrows = PrepareInfoGridForCreation();
  947.  
  948.   gDialog.newType      = IMPORT_RULE;
  949.   gDialog.newMediaList = "";
  950.   gDialog.newURL       = "";
  951.   gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Import At-rule");
  952.   AddEditableZoneToInfobox(gridrows, "URL:",        gDialog.newURL,    "onNewURLChange", true);
  953.   AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", false);
  954.   AddSingleButtonToInfobox(gridrows, "Create Import At-rule", "onConfirmCreateNewObject", false);
  955. }
  956.  
  957. // * user wants to create a new style rule
  958. function CreateNewStyleRule()
  959. {
  960.   var gridrows = PrepareInfoGridForCreation();
  961.  
  962.   gDialog.newExternal  = false;
  963.   gDialog.newType      = STYLE_RULE;
  964.   gDialog.newSelector  = "";
  965.   gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Style Rule");
  966.   gDialog.newSelectorType = CLASS_SELECTOR;
  967.  
  968.   var radiogroup = AddRadioGroupToInfoBox(gridrows, "Create a new:");
  969.   // offer choice between class selector and type element selector
  970.   AddRadioToRadioGroup(radiogroup, "named style (enter class name below)",
  971.                        "onCreationStyleRuleTypeChange", CLASS_SELECTOR, true);
  972.   AddRadioToRadioGroup(radiogroup, "style applied to all elements of type (enter type below)",
  973.                        "onCreationStyleRuleTypeChange", TYPE_ELEMENT_SELECTOR, false);
  974.   // oh, and in expert mode, allow of course any selector
  975.   if (gDialog.expertMode) {
  976.     AddRadioToRadioGroup(radiogroup, "style applied to all elements matching the following selector",
  977.                          "onCreationStyleRuleTypeChange", GENERIC_SELECTOR, false);
  978.   }
  979.   AddEditableZoneToInfobox(gridrows, " ", gDialog.newSelector,  "onNewSelectorChange", true);
  980.  
  981.   AddSingleButtonToInfobox(gridrows, "Create Style Rule", "onConfirmCreateNewObject");
  982. }
  983.  
  984. // * user changed the type of style rule (s)he wants to create
  985. //   param integer type
  986. function onCreationStyleRuleTypeChange(type)
  987. {
  988.   gDialog.newSelectorType = type;
  989. }
  990.  
  991. // * user wants to create a new embedded stylesheet
  992. function CreateNewStyleElement()
  993. {
  994.   var gridrows = PrepareInfoGridForCreation();
  995.  
  996.   gDialog.newExternal  = false;
  997.   gDialog.newType      = SHEET;
  998.   gDialog.newMediaList = "";
  999.   gDialog.newTitle     = "";
  1000.   gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Stylesheet");
  1001.   AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
  1002.   AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", true);
  1003.   AddEditableZoneToInfobox(gridrows, "Title:",      gDialog.newTitle,  "onNewTitleChange", false);
  1004.  
  1005.   AddSingleButtonToInfobox(gridrows, "Create Stylesheet", "onConfirmCreateNewObject")
  1006. }
  1007.  
  1008. // * user wants to attach an external stylesheet
  1009. function CreateNewLinkedSheet()
  1010. {
  1011.   var gridrows = PrepareInfoGridForCreation();
  1012.  
  1013.   gDialog.newExternal  = true;
  1014.   gDialog.newType      = SHEET;
  1015.   gDialog.newAlternate = false;
  1016.   gDialog.newURL       = "";
  1017.   gDialog.newMediaList = "";
  1018.   gDialog.newTitle     = "";
  1019.   gDialog.sheetInfoTabPanelTitle.setAttribute("value", "New Linked Stylesheet");
  1020.   AddLabelToInfobox(gridrows, "Type:", "text/css", null, false);
  1021.   // alternate stylesheet ?
  1022.   AddCheckboxToInfobox(gridrows, "Alternate:", "check to create alternate stylesheet", gDialog.newAlternate,
  1023.                        "onNewAlternateChange");
  1024.   gDialog.URLtextbox = AddEditableZoneToInfobox(gridrows, "URL:",        gDialog.newURL,    "onNewURLChange", true);
  1025.   AddSingleButtonToInfobox(gridrows, "Choose file", "onChooseLocalFile")
  1026.  
  1027.   AddEditableZoneToInfobox(gridrows, "Media list:", gDialog.newMediaList, "onNewMediaListChange", false);
  1028.   AddEditableZoneToInfobox(gridrows, "Title:",      gDialog.newTitle,  "onNewTitleChange", false);
  1029.  
  1030.   AddSingleButtonToInfobox(gridrows, "Create Stylesheet", "onConfirmCreateNewObject")
  1031.  
  1032.   // the two following labels are unfortunately useful...
  1033.   AddLabelToInfobox(gridrows, "", "(Warning : save document *before* attaching local stylesheet)", null, false);
  1034.   AddLabelToInfobox(gridrows, "", "(use Refresh button if stylesheet is not immediately downloaded)", null, false);
  1035. }
  1036.  
  1037. // * forget about everything, and let's redo it
  1038. function Restart()
  1039. {
  1040.   // delete all objects we keep track of
  1041.   var l = objectsArray.length;
  1042.   for (var i=0; i<l; i++) {
  1043.     delete objectsArray[i];
  1044.   }
  1045.   delete objectsArray;
  1046.  
  1047.   // now, let's clear the tree
  1048.   var gridrows = gDialog.sheetInfoTabGridRows;
  1049.   if (gridrows) {
  1050.     var elt = gridrows.lastChild;
  1051.     while (elt) {
  1052.       var tmp = elt.previousSibling;
  1053.       gridrows.removeChild(elt);
  1054.       elt = tmp;
  1055.     }
  1056.   }
  1057.  
  1058.   // switch to default Info tab
  1059.   gDialog.selectedTab = GENERAL_TAB;
  1060.   gDialog.sheetInfoTabPanelTitle.setAttribute("value", "");
  1061.  
  1062.   // let's recreate the tree
  1063.   InitSheetsTree(gDialog.sheetsTreechildren);
  1064.   // and update the buttons
  1065.   UpdateButtons(false, false, true, true, false, false);
  1066. }
  1067.  
  1068. // * does less than Restart(). We only regenerate the tree, keeping track
  1069. //   of the selection
  1070. function Refresh()
  1071. {
  1072.   var index = gDialog.selectedIndex;
  1073.   Restart();
  1074.   if (index != -1)
  1075.     selectTreeItem(objectsArray[index].xulElt);
  1076. }
  1077.  
  1078. /* CALLBACKS */
  1079.  
  1080. // * user toggled the "Alternate Stylesheet" checkbox
  1081. function onNewAlternateChange()
  1082. {
  1083.   gDialog.newAlternate = !gDialog.newAlternate;
  1084. }
  1085.  
  1086. // * user changed the URL of an external stylesheet; elt is the textarea
  1087. //   param XULElement elt
  1088. function onNewURLChange(elt)
  1089. {
  1090.   gDialog.newURL = elt.value;
  1091. }
  1092.  
  1093. // * user changed the selector for a rule; elt is the textarea
  1094. //   param XULElement elt
  1095. function onNewSelectorChange(elt)
  1096. {
  1097.   gDialog.newSelector = elt.value;
  1098. }
  1099.  
  1100. // * user changed the list of medias for a new rule; elt is the textarea
  1101. //   param XULElement elt
  1102. function onNewMediaListChange(elt)
  1103. {
  1104.   gDialog.newMediaList = elt.value;
  1105. }
  1106.  
  1107. // * user changed the title of a new stylesheet; elt is the textarea
  1108. //   param XULElement elt
  1109. function onNewTitleChange(elt)
  1110. {
  1111.   gDialog.newTitle = elt.value;
  1112. }
  1113.  
  1114. // * user disables/enabled the stylesheet
  1115. function onStylesheetDisabledChange()
  1116. {
  1117.   gDialog.selectedObject.disabled = !gDialog.selectedObject.disabled;
  1118. }
  1119.  
  1120. // * user changed the title of an existing stylesheet; elt is the textarea
  1121. //   param XULElement elt
  1122. function onStylesheetTitleChange(elt)
  1123. {
  1124.   var titleText = elt.value;
  1125.   gDialog.selectedObject.ownerNode.setAttribute("title", titleText);
  1126.   SetModifiedFlagOnStylesheet();
  1127. }
  1128.  
  1129. // * user changed the list of medias of an existing stylesheet; elt is the textarea
  1130. //   param XULElement elt
  1131. function onStylesheetMediaChange(elt)
  1132. {
  1133.   var mediaText= elt.value;
  1134.   gDialog.selectedObject.ownerNode.setAttribute("media", mediaText);
  1135.   SetModifiedFlagOnStylesheet();
  1136. }
  1137.  
  1138. function GetSubtreeChildren(elt)
  1139. {
  1140.   var subtreechildren = null;
  1141.   if (!elt) return null;
  1142.   if (elt.hasChildNodes()) {
  1143.     subtreechildren = elt.lastChild;
  1144.     while (subtreechildren && subtreechildren .nodeName.toLowerCase() != "treechildren") {
  1145.       subtreechildren = subtreechildren .previousSibling;
  1146.     }
  1147.   }
  1148.   if (!subtreechildren) {
  1149.     subtreechildren = document.createElementNS(XUL_NS, "treechildren");
  1150.     elt.appendChild(subtreechildren);
  1151.   }
  1152.   return subtreechildren;
  1153. }
  1154.  
  1155. // * here, we create a new sheet or rule
  1156. function onConfirmCreateNewObject()
  1157. {
  1158.   // first, let's declare we modify the document
  1159.   gDialog.modified = true;
  1160.   var selector;
  1161.  
  1162.   // if we are requested to create a style rule in expert mode,
  1163.   // let's find the last embedded stylesheet
  1164.   if (!gDialog.expertMode && gDialog.newType == STYLE_RULE) {
  1165.     var indexLastEmbeddedStylesheet = -1;
  1166.     for (var i = objectsArray.length-1; i >= 0 ; i--) {
  1167.       if (objectsArray[i].type == SHEET && ! objectsArray[i].external) {
  1168.         indexLastEmbeddedStylesheet = i;
  1169.         break;
  1170.       }
  1171.     }
  1172.     if (indexLastEmbeddedStylesheet != -1) {
  1173.       gDialog.selectedIndex = indexLastEmbeddedStylesheet;
  1174.     }
  1175.     else {
  1176.       // there is no stylesheet ! let's create one that will contain our rule
  1177.       gDialog.newExternal  = false;
  1178.       gDialog.newMediaList = "";
  1179.       gDialog.newTitle     = "";
  1180.       gDialog.newType      = SHEET;
  1181.       var selectorType     = gDialog.newSelectorType;
  1182.       selector             = gDialog.newSelector;
  1183.       onConfirmCreateNewObject();
  1184.  
  1185.       // now, create the rule...
  1186.       gDialog.newType         = STYLE_RULE;
  1187.       gDialog.newSelectorType = selectorType;
  1188.       gDialog.newSelector     = selector;
  1189.     }
  1190.   }
  1191.   var containerIndex, sheetIndex;
  1192.   var cssObject;
  1193.   var l;
  1194.   var ruleIndex;
  1195.   var newSheetOwnerNode;
  1196.   var headNode;
  1197.   var newCssRule;
  1198.   switch (gDialog.newType) {
  1199.     case STYLE_RULE:
  1200.       if (gDialog.newSelector != "") {
  1201.         containerIndex = gDialog.selectedIndex;
  1202.         while (objectsArray[containerIndex].type != SHEET &&
  1203.                objectsArray[containerIndex].type != MEDIA_RULE)
  1204.           containerIndex--;
  1205.  
  1206.         switch (gDialog.newSelectorType) {
  1207.           case TYPE_ELEMENT_SELECTOR:
  1208.           case GENERIC_SELECTOR:
  1209.             selector = gDialog.newSelector;
  1210.             break;
  1211.           case CLASS_SELECTOR:
  1212.             selector = "." + gDialog.newSelector;
  1213.             break;
  1214.         }
  1215.         cssObject = objectsArray[containerIndex].cssElt;
  1216.         l = cssObject.cssRules.length;
  1217.         cssObject.insertRule(selector + " { }", l);
  1218.  
  1219.         if (cssObject.cssRules.length > l) {
  1220.           // hmmm, there's always the bad case of a wrong rule, dropped by the
  1221.           // parser ; that's why we need to check we really inserted something
  1222.  
  1223.           /* find inserted rule's index in objectsArray */
  1224.           var depth    = objectsArray[containerIndex].depth;
  1225.           var external = objectsArray[containerIndex].external;
  1226.  
  1227.           ruleIndex = containerIndex + 1;
  1228.           while (ruleIndex < objectsArray.length &&
  1229.                  objectsArray[ruleIndex].depth > depth) {
  1230.             ruleIndex++;
  1231.           }
  1232.           var subtreechildren = GetSubtreeChildren(objectsArray[containerIndex].xulElt);
  1233.           gInsertIndex = ruleIndex;
  1234.           var subtreeitem = AddStyleRuleToTreeChildren(cssObject.cssRules[l], external, depth);
  1235.           subtreechildren.appendChild(subtreeitem);
  1236.           selectTreeItem(subtreeitem);
  1237.           SetModifiedFlagOnStylesheet();
  1238.         }
  1239.       }
  1240.       break;
  1241.     case IMPORT_RULE:
  1242.       if (gDialog.newURL != "") {
  1243.  
  1244.         containerIndex     = GetSheetContainer();
  1245.         // **must** clear the selection before changing the tree
  1246.         ClearTreeSelection(gDialog.sheetsTree);
  1247.  
  1248.         var containerCssObject = objectsArray[containerIndex].cssElt;
  1249.         var containerDepth     = objectsArray[containerIndex].depth;
  1250.         var containerExternal  = objectsArray[containerIndex].external;
  1251.  
  1252.         var cssRuleIndex = -1;
  1253.         if (containerCssObject.cssRules)
  1254.           for (i=0; i < containerCssObject.cssRules.length; i++)
  1255.             if (containerCssObject.cssRules[i].type != CSSRule.IMPORT_RULE &&
  1256.                 containerCssObject.cssRules[i].type != CSSRule.CHARSET_RULE) {
  1257.               cssRuleIndex = i;
  1258.               break;
  1259.             }
  1260.         if (cssRuleIndex == -1) {
  1261.           // no rule in the sheet for the moment or only charset and import rules
  1262.           containerCssObject.insertRule('@import url("'+ gDialog.newURL + '") ' + gDialog.newMediaList + ";",
  1263.                                         containerCssObject.cssRules.length);
  1264.           newCssRule = containerCssObject.cssRules[containerCssObject.cssRules.length - 1];
  1265.  
  1266.           subtreechildren = GetSubtreeChildren(objectsArray[containerIndex].xulElt);
  1267.  
  1268.           gInsertIndex = ruleIndex;
  1269.           subtreeitem = AddImportRuleToTreeChildren(newCssRule,
  1270.                                                     containerExternal,
  1271.                                                     containerDepth + 1);
  1272.           
  1273.           subtreechildren.appendChild(subtreeitem);
  1274.           ruleIndex = FindObjectIndexInObjectsArray(newCssRule);
  1275.         }
  1276.         else {
  1277.           // cssRuleIndex is the index of the first not charset and not import rule in the sheet
  1278.           ruleIndex = FindObjectIndexInObjectsArray(containerCssObject.cssRules[cssRuleIndex]);
  1279.           // and ruleIndex represents the index of the corresponding object in objectsArray
  1280.           var refObject  = objectsArray[ruleIndex];
  1281.  
  1282.           containerCssObject.insertRule('@import url("'+ gDialog.newURL + '") ' + gDialog.newMediaList + ";",
  1283.                                         cssRuleIndex);
  1284.           newCssRule = containerCssObject.cssRules[cssRuleIndex];
  1285.           gInsertIndex = ruleIndex;
  1286.           subtreeitem = AddImportRuleToTreeChildren(newCssRule, containerExternal, containerDepth + 1);
  1287.  
  1288.           var refNode = refObject.xulElt;
  1289.           refNode.parentNode.insertBefore(subtreeitem, refNode);
  1290.         }
  1291.  
  1292.           
  1293.         selectTreeItem(subtreeitem);
  1294.         SetModifiedFlagOnStylesheet();
  1295.         if (gAsyncLoadingTimerID)
  1296.           clearTimeout(gAsyncLoadingTimerID);
  1297.         if (!newCssRule.styleSheet)
  1298.           gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + ruleIndex + ")", kAsyncTimeout);
  1299.       }
  1300.       break;
  1301.     case SHEET:
  1302.       gInsertIndex = -1;
  1303.  
  1304.       ClearTreeSelection(gDialog.sheetsTree);
  1305.  
  1306.       if (gDialog.newExternal && gDialog.newURL != "") {
  1307.         subtreeitem  = document.createElementNS(XUL_NS, "treeitem");
  1308.         var subtreerow   = document.createElementNS(XUL_NS, "treerow");
  1309.         var subtreecell  = document.createElementNS(XUL_NS, "treecell");
  1310.         subtreeitem.setAttribute("container", "true");
  1311.         subtreerow.appendChild(subtreecell);
  1312.         subtreeitem.appendChild(subtreerow);
  1313.         gDialog.sheetsTreechildren.appendChild(subtreeitem);
  1314.  
  1315.         newSheetOwnerNode = getCurrentEditor().document.createElement("link");
  1316.         newSheetOwnerNode.setAttribute("type", "text/css");
  1317.         newSheetOwnerNode.setAttribute("href", gDialog.newURL);
  1318.         if (gDialog.newAlternate) {
  1319.           newSheetOwnerNode.setAttribute("rel", "alternate stylesheet");
  1320.         }
  1321.         else {
  1322.           newSheetOwnerNode.setAttribute("rel", "stylesheet");
  1323.         }
  1324.         if (gDialog.newMediaList != "") {
  1325.           newSheetOwnerNode.setAttribute("media", gDialog.newMediaList);
  1326.         }
  1327.         if (gDialog.newTitle != "") {
  1328.           newSheetOwnerNode.setAttribute("title", gDialog.newTitle);
  1329.         }
  1330.         headNode = GetHeadElement();
  1331.         headNode.appendChild(newSheetOwnerNode);
  1332.  
  1333.         subtreecell.setAttribute("label", gDialog.newURL);
  1334.         external = true;
  1335.         if ( /(\w*):.*/.test(gDialog.newURL) ) {
  1336.           if (RegExp.$1 == "file") {
  1337.             external = false;
  1338.           }
  1339.         }
  1340.         if (external)
  1341.           subtreecell.setAttribute("properties", "external");
  1342.  
  1343.         if (!newSheetOwnerNode.sheet) {
  1344.           /* hack due to asynchronous load of external stylesheet */        
  1345.           var o = newObject( subtreeitem, external, OWNER_NODE, newSheetOwnerNode, false, 0 );
  1346.           PushInObjectsArray(o)
  1347.           if (gAsyncLoadingTimerID)
  1348.             clearTimeout(gAsyncLoadingTimerID);
  1349.           sheetIndex = objectsArray.length - 1;
  1350.           
  1351.           gAsyncLoadingTimerID = setTimeout("sheetLoadedTimeoutCallback(" + sheetIndex + ")", kAsyncTimeout);
  1352.         }
  1353.         else {
  1354.           o = newObject( subtreeitem, external, SHEET, newSheetOwnerNode.sheet, false, 0 );
  1355.           PushInObjectsArray(o)
  1356.           AddRulesToTreechildren(subtreeitem, newSheetOwnerNode.sheet.cssRules, external, 1);
  1357.         }
  1358.       }
  1359.       else if (!gDialog.newExternal) {
  1360.         newSheetOwnerNode = getCurrentEditor().document.createElement("style");
  1361.         newSheetOwnerNode.setAttribute("type", "text/css");
  1362.         if (gDialog.newMediaList != "") {
  1363.           newSheetOwnerNode.setAttribute("media", gDialog.newMediaList);
  1364.         }
  1365.         if (gDialog.newTitle != "") {
  1366.           newSheetOwnerNode.setAttribute("title", gDialog.newTitle);
  1367.         }
  1368.         headNode = GetHeadElement();
  1369.         headNode.appendChild(newSheetOwnerNode);
  1370.         AddSheetEntryToTree(gDialog.sheetsTreechildren, newSheetOwnerNode);
  1371.  
  1372.         selectTreeItem(objectsArray[objectsArray.length - 1].xulElt);
  1373.       }
  1374.       selectTreeItem(subtreeitem);
  1375.       break;
  1376.   }
  1377. }
  1378.  
  1379. // * we need that to refresh the tree after async sheet load
  1380. //   param integer index
  1381. function sheetLoadedTimeoutCallback(index)
  1382. {
  1383.   var subtreeitem = objectsArray[index].xulElt;
  1384.   gInsertIndex = index+1;
  1385.   ClearTreeSelection(gDialog.sheetsTree);
  1386.   if (objectsArray[index].type == OWNER_NODE && objectsArray[index].cssElt.sheet != null) {
  1387.     var sheet = objectsArray[index].cssElt.sheet;
  1388.     AddRulesToTreechildren(subtreeitem , sheet.cssRules, objectsArray[index].external,
  1389.                            objectsArray[index].depth+1);
  1390.     objectsArray[index].type = SHEET;
  1391.     objectsArray[index].cssElt = sheet;
  1392.   }
  1393.   else if (objectsArray[index].type == IMPORT_RULE && objectsArray[index].cssElt.styleSheet != null) {
  1394.     AddRulesToTreechildren(subtreeitem , objectsArray[index].cssElt.styleSheet.cssRules, true,
  1395.                            objectsArray[index].depth+1)
  1396.   }
  1397.   else
  1398.     return;
  1399.   selectTreeItem(subtreeitem);
  1400. }
  1401.  
  1402. // * gets the object's index corresponding to an entry in the tree
  1403. //   param XULElement object
  1404. //   return integer
  1405. function FindObjectIndexInObjectsArray(object)
  1406. {
  1407.   var i, l = objectsArray.length;
  1408.   for (i=0; i<l; i++)
  1409.     if (objectsArray[i].cssElt == object)
  1410.       return i;
  1411.   return -1;
  1412. }
  1413.  
  1414. // * removes the selected entry from the tree and deletes the corresponding
  1415. //   object ; does some magic if we remove a container like a stylesheet or
  1416. //   an @import rule to remove all the contained rules
  1417. function RemoveObject()
  1418. {
  1419.   GetSelectedItemData();
  1420.   var objectIndex = gDialog.selectedIndex;
  1421.   if (objectIndex == -1) return;
  1422.   var depth = gDialog.depthObject;
  1423.  
  1424.   var ruleIndex, i, ruleIndexInTree, toSplice;
  1425.  
  1426.   switch (gDialog.selectedType) {
  1427.     case SHEET:
  1428.       var ownerNode = gDialog.selectedObject.ownerNode;
  1429.       ownerNode.parentNode.removeChild(ownerNode);
  1430.  
  1431.       for (i=objectIndex+1; i<objectsArray.length && objectsArray[i].depth > depth; i++);
  1432.       toSplice = i - objectIndex;
  1433.       break;
  1434.  
  1435.     case IMPORT_RULE:
  1436.     case MEDIA_RULE:
  1437.       for (ruleIndexInTree=objectIndex-1; objectsArray[ruleIndexInTree].depth >= depth; ruleIndexInTree--);
  1438.  
  1439.       objectsArray[ruleIndexInTree].modified = true;
  1440.       ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentStyleSheet.cssRules,
  1441.                                           gDialog.selectedObject);
  1442.       if (ruleIndex != -1) {
  1443.         gDialog.selectedObject.parentStyleSheet.deleteRule(ruleIndex);
  1444.       }
  1445.       for (i=objectIndex+1; i<objectsArray.length && objectsArray[i].depth > depth; i++);
  1446.       toSplice = i - objectIndex;
  1447.       break;
  1448.  
  1449.     case STYLE_RULE:
  1450.       for (ruleIndexInTree=objectIndex-1; objectsArray[ruleIndexInTree].depth; ruleIndexInTree--);
  1451.       objectsArray[ruleIndexInTree].modified = true;
  1452.       if (gDialog.selectedObject.parentRule) {
  1453.         /* this style rule is contained in an at-rule */
  1454.         /* need to remove the rule only from the at-rule listing it */
  1455.         ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentRule.cssRules,
  1456.                                             gDialog.selectedObject);
  1457.         if (ruleIndex != -1) {
  1458.           gDialog.selectedObject.parentRule.deleteRule(ruleIndex);
  1459.         }
  1460.       }
  1461.       else {
  1462.         ruleIndex = getRuleIndexInRulesList(gDialog.selectedObject.parentStyleSheet.cssRules,
  1463.                                             gDialog.selectedObject);
  1464.         if (ruleIndex != -1) {
  1465.           gDialog.selectedObject.parentStyleSheet.deleteRule(ruleIndex);
  1466.         }
  1467.       }
  1468.       toSplice = 1;
  1469.       break;
  1470.   }
  1471.   // let's remove the whole treeitem
  1472.   gDialog.treeItem.parentNode.removeChild(gDialog.treeItem);
  1473.   // and then remove the objects from our array
  1474.   objectsArray.splice(objectIndex, toSplice);
  1475.   // can we select an item ?
  1476.   if (objectsArray.length)
  1477.     selectTreeItem(objectsArray[Math.min(objectIndex, objectsArray.length - 1)].xulElt);
  1478. }
  1479.  
  1480. // * moves a sheet/rule up in the tree
  1481. function MoveObjectUp()
  1482. {
  1483.   GetSelectedItemData();
  1484.   var index = gDialog.selectedIndex;
  1485.   if (index <= 0) return;
  1486.   var sheetIndex = GetSheetContainer();
  1487.   
  1488.   switch (gDialog.selectedType) {
  1489.   case SHEET:
  1490.     var ownerNode = gDialog.selectedObject.ownerNode;
  1491.     ClearTreeSelection(gDialog.sheetsTree)
  1492.     index--;
  1493.     while (index && objectsArray[index].type != SHEET)
  1494.       index--;
  1495.     if (index == -1) return;
  1496.     ownerNode.parentNode.insertBefore(ownerNode, objectsArray[index].cssElt.ownerNode);
  1497.     Restart();
  1498.     selectTreeItem(objectsArray[index].xulElt);
  1499.     gDialog.modified = true;
  1500.     break;
  1501.  
  1502.   case OWNER_NODE:
  1503.     ownerNode = gDialog.selectedObject;
  1504.     ClearTreeSelection(gDialog.sheetsTree)
  1505.     index--;
  1506.     while (index && objectsArray[index].type != SHEET)
  1507.       index--;
  1508.     if (index == -1) return;
  1509.     ownerNode.parentNode.insertBefore(ownerNode, objectsArray[index].cssElt.ownerNode);
  1510.     Restart();
  1511.     selectTreeItem(objectsArray[index].xulElt);
  1512.     gDialog.modified = true;
  1513.     break;
  1514.  
  1515.   case STYLE_RULE:
  1516.   case PAGE_RULE:
  1517.     var rule = gDialog.selectedObject;
  1518.     objectsArray[sheetIndex].modified = true;
  1519.  
  1520.     ClearTreeSelection(gDialog.sheetsTree)
  1521.     var ruleText = rule.cssText;
  1522.     var subtreeitem;
  1523.     var newRule;
  1524.     if (rule.parentRule) {
  1525.       var ruleIndex = getRuleIndexInRulesList(rule.parentRule.cssRules, rule);
  1526.       var parentRule = rule.parentRule;
  1527.       
  1528.       if (ruleIndex == -1) return;
  1529.  
  1530.       if (!ruleIndex) {
  1531.         // we have to move the rule just before its parent rule
  1532.         parentRule.deleteRule(0);
  1533.         var parentRuleIndex;
  1534.  
  1535.         parentRuleIndex = getRuleIndexInRulesList(parentRule.parentStyleSheet.cssRules, parentRule);
  1536.         parentRule.parentStyleSheet.insertRule(ruleText, parentRuleIndex);
  1537.         newRule = parentRule.parentStyleSheet.cssRules[parentRuleIndex];
  1538.       }
  1539.       else {
  1540.         // we just move the rule in its parentRule
  1541.         parentRule.deleteRule(ruleIndex);
  1542.         parentRule.insertRule(ruleText, ruleIndex - 1);
  1543.         newRule = parentRule.cssRules.item(ruleIndex - 1);
  1544.       }
  1545.       // remove the tree entry
  1546.       objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
  1547.       // delete the object
  1548.       objectsArray.splice(index, 1);
  1549.       // position the insertion index
  1550.       gInsertIndex = index - 1;
  1551.       subtreeitem =  AddStyleRuleToTreeChildren(newRule,
  1552.                                                 objectsArray[index-1].external,
  1553.                                                 objectsArray[index-1].depth);
  1554.       // make the new tree entry
  1555.       objectsArray[index].xulElt.parentNode.insertBefore(subtreeitem,
  1556.                                                            objectsArray[index].xulElt);
  1557.       selectTreeItem(subtreeitem);
  1558.         
  1559.     }
  1560.     else {
  1561.       // standard case, the parent of the rule is the stylesheet itself
  1562.       ruleIndex = getRuleIndexInRulesList(rule.parentStyleSheet.cssRules, rule);
  1563.       var refStyleSheet = rule.parentStyleSheet;
  1564.       if (ruleIndex == -1) return;
  1565.       if (ruleIndex) {
  1566.         // we just move the rule in the sheet
  1567.         refStyleSheet.deleteRule(ruleIndex);
  1568.         var targetRule = refStyleSheet.cssRules.item(ruleIndex - 1);
  1569.  
  1570.         if (targetRule.type == CSSRule.MEDIA_RULE) {
  1571.           targetRule.insertRule(ruleText, targetRule.cssRules.length);
  1572.           var targetRuleIndex = FindObjectIndexInObjectsArray(targetRule);
  1573.           newRule = targetRule.cssRules.item(targetRule.cssRules.length - 1);
  1574.           var subtreechildren = GetSubtreeChildren(objectsArray[targetRuleIndex].xulElt);
  1575.  
  1576.           // in this case, the target treeitem is at same location but one level deeper
  1577.           // remove the tree entry
  1578.           objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
  1579.           // delete the object
  1580.           objectsArray.splice(index, 1);
  1581.           // position the insertion index
  1582.           gInsertIndex = index;
  1583.           subtreeitem = AddStyleRuleToTreeChildren(newRule,
  1584.                                                    objectsArray[targetRuleIndex].external,
  1585.                                                    objectsArray[targetRuleIndex].depth + 1);
  1586.           // make the new tree entry
  1587.           subtreechildren.appendChild(subtreeitem);
  1588.           selectTreeItem(subtreeitem);
  1589.           return;
  1590.         }
  1591.         else if (targetRule.type != CSSRule.IMPORT_RULE &&
  1592.                  targetRule.type != CSSRule.CHARSET_RULE) {
  1593.           // we can move the rule before its predecessor only if that one is
  1594.           // not an @import rule nor an @charset rule
  1595.           refStyleSheet.insertRule(ruleText, ruleIndex - 1);
  1596.           newRule = refStyleSheet.cssRules[ruleIndex - 1];
  1597.           // remove the tree entry
  1598.           objectsArray[index].xulElt.parentNode.removeChild(objectsArray[index].xulElt);
  1599.           // delete the object
  1600.           objectsArray.splice(index, 1);
  1601.           // position the insertion index
  1602.           gInsertIndex = index - 1;
  1603.           subtreeitem =  AddStyleRuleToTreeChildren(newRule,
  1604.                                                     objectsArray[index-1].external,
  1605.                                                     objectsArray[index-1].depth);
  1606.           // make the new tree entry
  1607.           objectsArray[index].xulElt.parentNode.insertBefore(subtreeitem,
  1608.                                                              objectsArray[index].xulElt);
  1609.           selectTreeItem(subtreeitem);
  1610.           return;
  1611.         }
  1612.       }
  1613.       // At this point, we need to move the rule from one sheet to another one, if it
  1614.       // exists...
  1615.       // First, let's if there is another candidate stylesheet before the current one
  1616.       // for the style rule's ownership
  1617.       var refSheetIndex = FindObjectIndexInObjectsArray(refStyleSheet);
  1618.       sheetIndex = refSheetIndex;
  1619.  
  1620.       if (!sheetIndex) return; // early way out
  1621.       sheetIndex--;
  1622.       while (sheetIndex && (objectsArray[sheetIndex].type != SHEET ||
  1623.                             objectsArray[sheetIndex])) {
  1624.         sheetIndex--;
  1625.       }
  1626.       if (sheetIndex == -1) return; // no embedded or local stylesheet available
  1627.       var newStyleSheet = objectsArray[sheetIndex].cssElt;
  1628.       // we need to check the type of the last rule in the sheet, if it exists
  1629.       if (newStyleSheet.cssRules.length &&
  1630.           newStyleSheet.cssRules[newStyleSheet.cssRules.length - 1].type == CSSRule.MEDIA_RULE) {
  1631.         // this media rule is our target
  1632.         var refMediaRule      = newStyleSheet.cssRules[newStyleSheet.cssRules.length - 1];
  1633.         var refMediaRuleIndex = FindObjectIndexInObjectsArray(refMediaRule );
  1634.         var refRuleIndex      = refMediaRuleIndex++;
  1635.         while (refRuleIndex < objectsArray.length && objectsArray[refRuleIndex].depth > 1)
  1636.           refRuleIndex++;
  1637.         // refRuleIndex represents where we should insert the new object
  1638.       }
  1639.       else {
  1640.         // we just append the rule to the list of rules of the sheet
  1641.       }
  1642.     }
  1643.     break;
  1644.   }
  1645. }
  1646.  
  1647. // * moves a sheet/rule down in the tree
  1648. function MoveObjectDown()
  1649. {
  1650.   /* NOT YET IMPLEMENTED */
  1651.   var objectIndex = FindObjectIndexInObjectsArray(gDialog.selectedObject);
  1652.   if (objectIndex == -1) return;
  1653. }
  1654.  
  1655. // * opens a file picker and returns the file:/// URL in gDialog.newURL
  1656. function onChooseLocalFile() {
  1657.   // Get a local file, converted into URL format
  1658.   var fileName = getLocalFileURL(true);
  1659.   if (fileName)
  1660.   {
  1661.     gDialog.URLtextbox.setAttribute("value", fileName);
  1662.     gDialog.newURL = fileName;
  1663.   }
  1664. }
  1665.  
  1666. // * opens a file picker for a *.css filename, exports the selected stylesheet
  1667. //   in that file, and replace the selected embedded sheet by its external, but
  1668. //   local to the filesystem, new counterpart
  1669. function onExportStylesheet() {
  1670.   var fileName = getLocalFileURL(false);
  1671.   SerializeExternalSheet(gDialog.selectedObject, fileName);
  1672.   var ownerNode = gDialog.selectedObject.ownerNode;
  1673.   var newSheetOwnerNode = ownerNode.ownerDocument.createElement("link");
  1674.   newSheetOwnerNode.setAttribute("type", "text/css");
  1675.   newSheetOwnerNode.setAttribute("href", fileName);
  1676.   newSheetOwnerNode.setAttribute("rel", "stylesheet");
  1677.   var mediaList = ownerNode.getAttribute("media");
  1678.   if (mediaList && mediaList != "")
  1679.     newSheetOwnerNode.setAttribute("media", mediaList);
  1680.   ownerNode.parentNode.insertBefore(newSheetOwnerNode, ownerNode);
  1681.   ownerNode.parentNode.removeChild(ownerNode);
  1682.  
  1683.   // we still have to wait for async sheet loading's completion
  1684.   if (gAsyncLoadingTimerID)
  1685.     clearTimeout(gAsyncLoadingTimerID);
  1686.   gAsyncLoadingTimerID = setTimeout("Refresh()", 500);
  1687. }
  1688.  
  1689. function getCurrentEditor() {
  1690.   if (typeof window.InitEditorShell == "function")
  1691.     return editorShell.editor;
  1692.   else
  1693.     return GetCurrentEditor();
  1694. }
  1695.  
  1696. function AddCSSLevelChoice(rows)
  1697. {
  1698.   var labelLabel = document.createElementNS(XUL_NS, "label");
  1699.   var row = document.createElementNS(XUL_NS, "row");
  1700.   row.setAttribute("align", "center");
  1701.   labelLabel.setAttribute("value", "CSS Level");
  1702.   
  1703.   row.appendChild(labelLabel);
  1704.  
  1705.   var level;
  1706.   for (level = 1; level < 4; level++) {
  1707.     var levelCheckbox = document.createElementNS(XUL_NS, "checkbox");
  1708.     levelCheckbox.setAttribute("label", level);
  1709.     row.appendChild(levelCheckbox);
  1710.   }
  1711.  
  1712.   rows.appendChild(row);
  1713. }
  1714.  
  1715.