Editor UI work. Integrated Brendan's JS improvements. Trying to get popups to work in dialogs. Add Ben Goodger's table properties dialog work.

editor/ui/dialogs/content/EdDialogCommon.js

@@ -123,8 +123,7 @@ function ValidateNumberString(value, minValue, maxValue)
 {
   // Get the number version (strip out non-numbers)
 
-  var pat           = /\D/g;
-  value           = value.replace(pat, "");
+  value           = value.replace(/\D+/g, "");
   number           = value - 0;
   if ((value+"") != "") {
     if (number && number >= minValue && number <= maxValue ){
@@ -154,45 +153,30 @@ function GetString(name)
 
 function TrimStringLeft(string)
 {
-  if(!StringExists(string))
-    return "";
-  if( IsWhitespace(string.charAt(0)))
-    string           = string.replace(/\s+/, "");
-  return string;
+  if(!string) return "";
+  return string.replace(/^\s+/, "");
 }
 
 function TrimStringRight(string)
 {
-  if(!StringExists(string))
-    return "";
-  var lastCharIndex         = string.length-1;
-  var result;
-  var done           = false;
-  while (!done && lastCharIndex >= 0) {
-
-    // Find the last non-whitespace char
-
-    if (!IsWhitespace(string.charAt(lastCharIndex))) break;
-    lastCharIndex--;
-  }
-  if (lastCharIndex < 0) {
-    string           = "";
-  } else {
-    string           = string.slice(0, lastCharIndex+1);
-  }
-  return string;
+  if (!string) return "";
+  return string.replace(/\s+$/, '');
 }
 
 // Remove whitespace from both ends of a string
-
 function TrimString(string)
 {
-  return TrimStringRight(TrimStringLeft(string));
+  if (!string) return "";
+  return string.replace(/(^\s+)|(\s+$)/g, '')
+}
+
+String.prototype.trimString = function() {
+  return this.replace(/(^\s+)|(\s+$)/g, '')
 }
 
 function IsWhitespace(character)
 {
-  var result           = character.match(/\s/);
+  var result = character.match(/\s/);
   if (result == null)
     return false;
   return true;
@@ -200,77 +184,30 @@ function IsWhitespace(character)
 
 function TruncateStringAtWordEnd(string, maxLength, addEllipses)
 {
-  // We assume they probably don't want whitespace at the beginning
+    // Return empty if string is null, undefined, or the empty string
+    if (!string)
+      return "";
 
-  var string           = TrimStringLeft(string);
+    // We assume they probably don't want whitespace at the beginning
+    string = string.replace(/^\s+/, '');
+    if (string.length <= maxLength)
+      return string;
 
-  var len           = string.length;
-  if (len > maxLength) {
+    // We need to truncate the string to maxLength or fewer chars
+    if (addEllipses) 
+      maxLength -= 3; 
+    string = string.replace(RegExp("(.{0," + maxLength + "})\\s.*"), "$1")
 
-    // We need to truncate the string
-
-    var max;
-    if (addEllipses) {
-      // Make room for ellipses
-      max           = maxLength - 3;
-    } else {
-      max           = maxLength;
-    }
-    var lastCharIndex = 0;
-    
-    // Start search just past max if there's enough characters
-
-    if (len >= (max+1)) {
-      lastCharIndex         = max;
-    } else {
-      lastCharIndex         = len-1;
-    }
-    dump("Len="+len+" lastCharIndex="+lastCharIndex+" max="+max+"\n");
-
-    // Find the last whitespace char from the end
-
-    dump("Skip to first whitspace from end: ");
-
-    while (lastCharIndex > 0) {
-      var lastChar         = string.charAt(lastCharIndex);
-      dump(lastChar);
-      if (IsWhitespace(lastChar)) break;
-      lastCharIndex         = lastCharIndex -1;
-    }
-    dump("[space found]\nlastCharIndex="+lastCharIndex+"\nSkip over whitespace:");
-
-    while (lastCharIndex > 0) {
-
-      // Find the last non-whitespace char
-
-      lastChar           = string.charAt(lastCharIndex);
-      dump(lastChar);
-      if (!IsWhitespace(lastChar)) break;
-      lastCharIndex         = lastCharIndex -1;
-    }
-    dump("[non-space found]\nlastCharIndex="+lastCharIndex+"\n");
-    
-    string           = string.slice(0, lastCharIndex+1);
-    if (addEllipses) {
-      string = string+"...";
-      dump(string+"\n");
-    }
-  }
-  return string;
+    if (addEllipses)
+      string += "...";
+    return string;
 }
 
 // Replace all whitespace characters with supplied character
 // E.g.: Use charReplace = " ", to "unwrap" the string by removing line-end chars
 //       Use charReplace = "_" when you don't want spaces (like in a URL)
 function ReplaceWhitespace(string, charReplace) {
-  if (string.length > 0 )
-  {
-    string           = TrimString(string);
-    // This replaces a run of whitespace with just one character
-    string           = string.replace(/\s+/g, charReplace);
-  }
-  dump(string+"\n");
-  return string;
+  return string.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,charReplace)
 }
 
 // this function takes an elementID and a flag
@@ -383,20 +320,18 @@ sysBeep               = sysBeep.QueryInterface(Components.interfaces.nsISound);
 
 function forceInteger(elementID)
 {
-  editfield           = document.getElementById( elementID );
-  if ( !editfield )
+  var editField = document.getElementById( elementID );
+  if ( !editField )
     return;
-  
-  var stringIn           = editfield.value;
-  var pat = /\D/g;
-  
-  result           = stringIn.match(pat, "");
-  if (result) {
-    editfield.value         = stringIn.replace(pat,"");
 
-    // hopefully we can remove the following line for blur() once xp widgets land
+  var stringIn = editField.value;
+  var pat = /\D+/g;
+  if (pat.test(stringIn)) {
+    editField.value = stringIn.replace(pat,"");
 
-    editfield.blur();
+    // we hope to remove the following line for blur() once xp widgets land
+    // cmanske (9/15) testing this now that GFX ender widget is active
+    //editField.blur();
     sysBeep.Beep();
   }
 }

editor/ui/dialogs/content/EdDialogOverlay.xul

@@ -28,11 +28,11 @@
 		 xmlns:html="http://www.w3.org/TR/REC-html40"
 		 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
-  <box id="advancedEditButton" align="vertical">
-    <box align="horizontal" id="advancedEditButtonNoHR" style="margin-top: 0.2em">
-      <titledbutton class="hspaced" id="AdvancedEdit" onclick="onAdvancedEdit()" value="&AdvancedEditButton.label;"/>
-    </box>
-    <html:div><html:hr width="100%"/></html:div>
+<box id="advancedEditButton" align="vertical">
+  <box align="horizontal" id="advancedEditButtonNoHR" style="margin-top: 0.2em">
+    <titledbutton class="hspaced" id="AdvancedEdit" onclick="onAdvancedEdit()" value="&AdvancedEditButton.label;"/>
   </box>
+  <html:div><html:hr width="100%"/></html:div>
+</box>
 
 </overlay>		

editor/ui/dialogs/content/EdHLineProps.xul

@@ -68,8 +68,15 @@
                     onkeypress="forceInteger('width')" />
               </td>
               <td>
-                <xul:titledbutton class="popup" id="pixelOrPercentButton" value="&percentPopup.value;" 
-                     align="right" popup="PixelOrPercentMenu" popupanchor="bottomleft"/>
+<!-- EXPOSE THIS TO SHOW POPUP MENU IN A DIALOG
+                <xul:menu>
+                  <xul:titledbutton class="popup" id="pixelOrPercentButton" align="right" value="&percentPopup.value;"/>
+                    <xul:menupopup id="PixelOrPercentMenu">
+                      <xul:menuitem value="&pixelsPopup.value;" oncommand="SetPixelOrPercentByID('pixelOrPercentButton', '')"/>
+                      <xul:menuitem value="&percentPopup.value;" oncommand="SetPixelOrPercentByID('pixelOrPercentButton', '%')"/>
+                    </xul:menupopup>
+                </xul:menu>
+-->
               </td>
             </tr>
           </table>
@@ -98,13 +105,4 @@
   <xul:box id="advancedEditButton"/>
   <!-- from global dialogOverlay -->
 	<xul:box id="okCancelButtons"/> 
-
-<xul:popup id="PixelOrPercentMenu">
-  <xul:menu>
-    <xul:menuitem value="&pixelsPopup.value;" onclick="SetPixelOrPercentByID('pixelOrPercentButton', '')"/>
-    <xul:menuitem value="&percentPopup.value;" onclick="SetPixelOrPercentByID('pixelOrPercentButton', '%')"/>
-  </xul:menu>
-</xul:popup>
-
 </xul:window>
-

editor/ui/dialogs/content/EdImageProps.xul

@@ -609,17 +609,13 @@
         <xul:box align="vertical" flex="100%" style="border: 1px outset white;">
                 
         <xul:titledbutton 
-                class           = "dropdown" 
                 src             = "&topIcon.url;" 
-                align           = "left"
                 value           = "&topPopup.value;"  
                 onclick         = "opener.SetImageAlignment('top'); 
                                 opener.popupSelectedImage('&topIcon.url;', 'image.alignType', 'src'); 
                                 window.close();" />
 
         <titledbutton 
-                class           = "dropdown" 
-                align           = "left"
                 src             = "&centerIcon.url;"
                 value           ="&centerPopup.value;"
                 onclick         = "opener.SetImageAlignment('middle'); 
@@ -627,27 +623,21 @@
                                 window.close();" />
 
         <titledbutton 
-                class           = "dropdown" 
                 src             = "&bottomIcon.url;"
-                align           = "left"
                 value           = "&bottomPopup.value;"
                 onclick         = "opener.SetImageAlignment('bottom', 'image.alignType'); 
                                 opener.popupSelectedImage('&bottomIcon.url;', 'image.alignType', 'src'); 
                                 window.close();" />
 
         <titledbutton 
-                class           = "dropdown"
                 src             = "&wrapRightIcon.url;"
-                align           = "left"
                 value           = "&wrapRightPopup.value;"
                 onclick         = "opener.SetImageAlignment('left', 'image.alignType'); 
                                 opener.popupSelectedImage('&wrapRightIcon.url;', 'image.alignType', 'src'); 
                                 window.close();" />
 
         <titledbutton 
-                class           = "dropdown"
                 src             = "&wrapLeftIcon.url;"
-                align           = "left"
                 value           = "&wrapLeftPopup.value;"
                 onclick         = "opener.SetImageAlignment('right'); 
                                 opener.popupSelectedImage('&wrapLeftIcon.url;', 'image.alignType', 'src'); 

editor/ui/dialogs/content/EdInsertTable.js

@@ -100,14 +100,14 @@ function ValidateData()
 
   // Set attributes: these may be empty strings
   borderText = TrimString(dialog.borderInput.value);
-  if (StringExists(borderText)) {
+  if (borderText) {
     // Set the other attributes on the table
     if (ValidateNumberString(borderText, 0, maxPixels))
       globalElement.setAttribute("border", borderText);
   }
 
   widthText = TrimString(dialog.widthInput.value);
-  if (StringExists(widthText)) {
+  if (widthText) {
     var maxLimit;
     if (percentChar == "%") {
       maxLimit = 100;

editor/ui/dialogs/content/EdInsertTable.xul

@@ -83,8 +83,7 @@
       <td>
         <!-- THIS IS DUMB Can't figure out how to put "pixels" after the 
              input box and make them center vertically. Used another TD instead -->
-        <input type="text" id="border" size="4" />
-            <!-- onkeypress="forceInteger('border')" /> -->
+        <input type="text" id="border" size="4" onkeypress="forceInteger('border')"/>
       </td>
       <td>
         <label for="border"> &pixelsPopup.value; </label>

editor/ui/dialogs/content/EdLinkProps.js

@@ -179,7 +179,7 @@ function ChooseFile()
 {
   // Get a local file, converted into URL format
   fileName = editorShell.GetLocalFileURL(window, "html");
-  if (StringExists(fileName)) {
+  if (fileName) {
     hrefInput.value = fileName;
   }
   // Put focus into the input field
@@ -196,11 +196,12 @@ function RemoveLink()
 // Set attributes on globalElement so they can be accessed by AdvancedEdit()
 function ValidateData()
 {
-  href = TrimString(hrefInput.value);
+  href = hrefInput.value.trimString();
   if (href.length > 0) {
     // Set the HREF directly on the editor document's anchor node
     //  or on the newly-created node if insertNew is true
     globalElement.setAttribute("href",href);
+    dump("HREF:"+href+"|\n");
   } else if (insertNew) {
     // We must have a URL to insert a new link
     //NOTE: WE ACCEPT AN EMPTY HREF TO ALLOW REMOVING AN EXISTING LINK,
@@ -217,6 +218,7 @@ function ValidateData()
       return false;
     }
   }
+  window.sizeToContent();
   return true;
 }
 

editor/ui/dialogs/content/EdMessage.js

@@ -33,9 +33,11 @@ function Startup()
   // Message is wrapped in a <div>
   // We will add child text node(s)
   var messageParent = (document.getElementById("message"));
-  var messageText = String(window.arguments[1]);
+  var messageText = "";
+  if(window.arguments[1])
+    messageText = String(window.arguments[1]);
 
-  if (StringExists(messageText)) {
+  if (messageText != "") {
     var messageFragment;
 
     // Let the caller use "\n" to cause breaks
@@ -75,7 +77,7 @@ function Startup()
   }
 
   titleText = String(window.arguments[2]);
-  if (StringExists(titleText)) {
+  if (titleText) {
     dump(titleText+" is the message dialog title\n");
     window.title = titleText;
   }
@@ -93,14 +95,14 @@ function Startup()
 function InitButton(argIndex, buttonID, useOK)
 {
   var button = document.getElementById(buttonID);
-  var text = String(window.arguments[argIndex]);
-  var exists = StringExists(text);
-  if (!exists && useOK) {
+  var text = "";
+  if(window.arguments[argIndex])
+    text = String(window.arguments[argIndex]);
+  if (text == "" && useOK) {
     text = "OK";
-    exists = true;
   }
 
-  if (exists)
+  if (text != "")
   {
     dump(text+"\n");
     button.setAttribute("value", text);

editor/ui/dialogs/content/EdTableProps.xul

@@ -33,44 +33,357 @@
 <window class="dialog" title="&tableWindow.title;"
     xmlns:html="http://www.w3.org/TR/REC-html40"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-    onload = "Startup()"
+    onload="Startup()"
+    width="450" height="430"
     align="vertical">
 
   <!-- Methods common to all editor dialogs -->
-  <html:script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js">
-  </html:script>
-  <html:script language="JavaScript" src="chrome://editor/content/EdTableProps.js">
-  </html:script>
+  <html:script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js"/>
+  <html:script language="JavaScript" src="chrome://editor/content/EdTableProps.js"/>
   <html:script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />
 
   <broadcaster id="args" value=""/>
-<tabcontrol align="vertical" >
-	<tabbox align="horizontal" >
-		<tab>&tableTab.label;</tab>
-		<tab>&cellTab.label;</tab>
-	</tabbox>
-   
-	<tabpanel flex="100%" >
-<!-- table tab -->
-		<box align="vertical">
-      <titledbutton value="TABLE PANEL"/> 
-      <html:div> WORK IN PROGRESS:  This is the TABLE Tab </html:div>
-      <!-- from EdDialogOverlay -->
-      <xul:box id="advancedEditButton"/>
-    </box>
-<!-- end of table tab -->
 
-<!-- cell tab -->
-		<box align="vertical">
-      <titledbutton value="CELL PANEL"/> 
-      <html:div> WORK IN PROGRESS:  This is the CELL Tab </html:div>
-      <!-- from EdDialogOverlay -->
-      <xul:box id="advancedEditButton"/>
-    </box>
-<!-- end of cell tab -->
-	 </tabpanel> 
-</tabcontrol>
-    <!-- from EdDialogOverlay -->
-    <xul:box id="advancedEditButton"/>
-	<box id="okCancelButtons"/> 
+      <tabcontrol align="vertical">
+	      <tabbox align="horizontal" flex="100%">
+		      <tab>&tableTab.label;</tab>
+		      <tab>&cellTab.label;</tab>
+	      </tabbox>
+   
+    	  <tabpanel flex="100%">
+          <!-- table tab -->
+    		  <box align="vertical" class="panel">
+            <html:fieldset class="holder">
+              <html:legend>&tableSize.label;</html:legend>
+              <html:table width="350">
+                <html:tr>
+                  <html:td>
+                    <html:label for="tableRows.text">&tableRows.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="tableRows.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:input type="checkbox" id="tableHeight.check"/>
+                  </html:td>
+                  <html:td>
+                    <html:label for="tableHeight.check">&tableHeight.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="tableHeight.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:select id="heightUnits">
+                      <html:option value="px">&tablePixels.label;</html:option>
+                      <html:option value="pc">&tablePercent.label;</html:option>
+                    </html:select>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td>
+                    <html:label for="tableColumns.text">&tableColumns.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="tableColumns.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:input type="checkbox" id="tableWidth.check"/>
+                  </html:td>
+                  <html:td>
+                    <html:label for="tableWidth.check">&tableWidth.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="tableWidth.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:select id="widthUnits">
+                      <html:option value="px">&tablePixels.label;</html:option>
+                      <html:option value="pc">&tablePercent.label;</html:option>
+                    </html:select>
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </html:fieldset>
+            <box align="horizontal">
+              <html:fieldset flex="100%">
+                <html:legend>&tableBorderSpacing.label;</html:legend>
+                <html:table>
+                  <html:tr>
+                    <html:td>
+                      <html:input type="checkbox" id="border.check"/> 
+                    </html:td>
+                    <html:td>
+                      <html:label for="border.check">&tableBorderWidth.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:input type="text" id="borderWidth.text" size="3"/>
+                    </html:td>
+                    <html:td>
+                      <html:div>&tablePixels.label;</html:div>
+                    </html:td>
+                  </html:tr>
+                </html:table>
+                <html:table>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="spacing.text">&tableSpacing.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:input type="text" id="spacing.text" size="3"/>
+                    </html:td>
+                    <html:td>
+                      <html:div>&tablePxBetwCells.label;</html:div>
+                    </html:td>
+                  </html:tr>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="padding.text">&tablePadding.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:input type="text" id="padding.text" size="3"/>
+                    </html:td>
+                    <html:td>
+                      <html:div>&tablePxBetwBrdrCellContent.label;</html:div>
+                    </html:td>
+                  </html:tr>
+                </html:table>
+              </html:fieldset>
+              <box align="vertical" flex="100%">
+                <spring flex="100%"/>
+                <html:table>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="alignment.select">&tableAlignment.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:select id="alignment.select">
+                        <html:option value="left">&tableAlignLeft.label;</html:option>
+                        <html:option value="center">&tableAlignCenter.label;</html:option>
+                        <html:option value="right">&tableAlignRight.label;</html:option>
+                      </html:select>
+                    </html:td>
+                  </html:tr>
+                  <spring flex="100%"/>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="caption.select">&tableCaption.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:select id="caption.select">
+                        <html:option value="none">&tableCaptionNone.label;</html:option>
+                        <html:option value="above">&tableCaptionAbove.label;</html:option>
+                        <html:option value="below">&tableCaptionBelow.label;</html:option>
+                      </html:select>
+                    </html:td>
+                  </html:tr>
+                </html:table>
+                <spring flex="100%"/>
+              </box>
+            </box>
+            <html:fieldset>
+              <html:legend>&tableBackground.label;</html:legend>
+              <html:table width="100%">
+                <html:tr>
+                  <html:td>
+                    <html:label for="bgcolor.select">&tableColor.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:select id="bgcolor.select">
+                      <html:option> </html:option>
+                    </html:select>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td>
+                    <html:label for="bgimage.text">&tableImage.label;</html:label>
+                  </html:td>
+                  <html:td>
+                      <html:input type="text" id="bgimage.text" style="width: 70%;"/>
+                      <titledbutton value="&tableChooseImage.label;" id="bgimage.button"/>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td/>
+                  <html:td>
+                    <html:input type="checkbox" id="leaveLoc.check"/>
+                    <html:label for="leaveLoc.check">&tableLeaveImageAtLocation.label;</html:label>
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </html:fieldset>
+          </box>
+    
+          <!-- cell tab -->
+    		  <box align="vertical" class="panel">
+            <html:fieldset class="holder">
+              <html:legend>&cellSelection.label;</html:legend>
+              <html:table width="350">
+                <html:tr>
+                  <html:td>
+                    <html:select id="selection.select">
+                      <html:option value="cell">&cellSelectionCell.label;</html:option>
+                      <html:option value="row">&cellSelectionRow.label;</html:option>
+                      <html:option value="column">&cellSelectionColumn.label;</html:option>
+                    </html:select>
+                  </html:td>
+                  <html:td>
+                    <titledbutton value="&cellSelectionPrevious.label;" id="previous.button"/>
+                  </html:td>
+                  <html:td>
+                    <titledbutton value="&cellSelectionNext.label;" id="next.button"/>
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </html:fieldset>
+            <!-- cell size fieldset -->
+            <html:fieldset>
+              <html:legend>&tableSize.label;</html:legend>
+              <html:table>
+                <html:tr>
+                  <html:td>
+                    <html:input type="checkbox" id="cellHeight.check"/>
+                  </html:td>
+                  <html:td>
+                    <html:label for="tableHeight.check">&tableHeight.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="cellHeight.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:select id="cellHeightUnits">
+                      <html:option value="px">&tablePixels.label;</html:option>
+                      <html:option value="pc">&tablePercent.label;</html:option>
+                    </html:select>
+                  </html:td>
+                  <html:td>
+                    <html:label for="rows.text">&cellSpans.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="rows.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:div>&cellSpanRows.label;</html:div>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td>
+                    <html:input type="checkbox" id="tableWidth.check"/>
+                  </html:td>
+                  <html:td>
+                    <html:label for="tableWidth.check">&tableWidth.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:input type="text" id="tableWidth.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:select id="cellWidthUnits">
+                      <html:option value="px">&tablePixels.label;</html:option>
+                      <html:option value="pc">&tablePercent.label;</html:option>
+                    </html:select>
+                  </html:td>
+                  <html:td> </html:td>
+                  <html:td>
+                    <html:input type="text" id="cols.text" size="3"/>
+                  </html:td>
+                  <html:td>
+                    <html:div>&cellSpanCells.label;</html:div>
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </html:fieldset>
+            <box align="horizontal">
+              <html:fieldset flex="100%">
+                <html:legend>&cellContentAlignment.label;</html:legend>
+                <html:table>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="horzAlignment.select">&cellHorizontal.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:select id="horzAlignment.select">
+                        <html:option value="left">&tableAlignLeft.label;</html:option>
+                        <html:option value="center">&tableAlignCenter.label;</html:option>
+                        <html:option value="right">&tableAlignRight.label;</html:option>
+                      </html:select>
+                    </html:td>
+                  </html:tr>
+                  <html:tr>
+                    <html:td>
+                      <html:label for="vertAlignment.select">&cellVertical.label;</html:label>
+                    </html:td>
+                    <html:td>
+                      <html:select id="vertAlignment.select">
+                        <html:option value="top">&cellAlignTop.label;</html:option>
+                        <html:option value="center">&cellAlignCenter.label;</html:option>
+                        <html:option value="bottom">&cellAlignBottom.label;</html:option>
+                      </html:select>
+                    </html:td>
+                  </html:tr>
+                </html:table>
+              </html:fieldset>
+              <box align="vertical">
+                <html:fieldset>
+                  <html:legend>&cellTextStyle.label;</html:legend>
+                  <html:table>
+                    <html:tr>
+                      <html:td>
+                        <html:input type="checkbox" id="header.check"/>
+                      </html:td>
+                      <html:td>
+                        <html:label for="header.check">&cellHeader.label;</html:label>
+                      </html:td>
+                      <html:td>
+                        <html:input type="checkbox" id="nonbreaking.check"/>
+                      </html:td>
+                      <html:td>
+                        <html:label for="nonbreaking.check">&cellNonbreaking.label;</html:label>
+                      </html:td>
+                    </html:tr>
+                  </html:table>
+                </html:fieldset>
+                <spring flex="100%"/>
+              </box>
+            </box>
+
+            <html:fieldset>
+              <html:legend>&tableBackground.label;</html:legend>
+              <html:table width="100%">
+                <html:tr>
+                  <html:td>
+                    <html:label for="cellbgcolor.select">&tableColor.label;</html:label>
+                  </html:td>
+                  <html:td>
+                    <html:select id="cellbgcolor.select">
+                      <html:option> </html:option>
+                    </html:select>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td>
+                    <html:label for="cellbgimage.text">&tableImage.label;</html:label>
+                  </html:td>
+                  <html:td>
+                      <html:input type="text" id="cellbgimage.text" style="width: 70%;"/>
+                      <titledbutton value="&tableChooseImage.label;" id="cellbgimage.button"/>
+                  </html:td>
+                </html:tr>
+                <html:tr>
+                  <html:td/>
+                  <html:td>
+                    <html:input type="checkbox" id="cellleaveLoc.check"/>
+                    <html:label for="cellleaveLoc.check">&tableLeaveImageAtLocation.label;</html:label>
+                  </html:td>
+                </html:tr>
+              </html:table>
+            </html:fieldset>
+          </box>
+    	  </tabpanel> 
+      </tabcontrol>
+      <box align="horizontal">
+        <!-- from EdDialogOverlay -->
+        <box id="advancedEditButton"/>
+        <spring flex="100%"/>
+	      <box id="okCancelButtons"/> 
+      </box>
+
 </window>

editor/ui/dialogs/locale/en-US/EdDialogOverlay.dtd

@@ -21,3 +21,5 @@
   -->
 
 <!ENTITY AdvancedEditButton.label "Advanced Edit...">
+<!ENTITY pixelsPopup.value "pixels">
+<!ENTITY percentPopup.value "percent">

editor/ui/dialogs/locale/en-US/EditorHLineProperties.dtd

@@ -29,7 +29,6 @@
 <!ENTITY widthEditField.label "Width">
 <!ENTITY pixelsPopup.value "pixels">
 <!ENTITY percentPopup.value "percent">
-
 <!ENTITY alignmentFieldset.label "Alignment">
 <!ENTITY leftPopup.value "Left">
 <!ENTITY centerPopup.value "Center">

editor/ui/dialogs/locale/en-US/EditorTableProperties.dtd

@@ -20,6 +20,51 @@
    - Contributor(s): 
   -->
 
-<!ENTITY tableWindow.title "Table Properties">
-<!ENTITY tableTab.label "Table">
-<!ENTITY cellTab.label "Cells">
+<!ENTITY tableWindow.title                "Table Properties">
+<!ENTITY tableTab.label                   "Table">
+<!ENTITY cellTab.label                    "Cells">
+<!ENTITY tableSize.label                  "Size">
+<!ENTITY tableRows.label                  "Row">
+<!ENTITY tableColumns.label               "Columns">
+<!ENTITY tableHeight.label                "Height:">
+<!ENTITY tableWidth.label                 "Width:">
+<!ENTITY tablePixels.label                "pixels">
+<!ENTITY tablePercent.label               "percent of window">
+<!ENTITY tableBorderSpacing.label         "Borders and Spacing">
+<!ENTITY tableBorderWidth.label           "Border width:">
+<!ENTITY tableSpacing.label               "Spacing:">
+<!ENTITY tablePadding.label               "Padding:">
+<!ENTITY tablePxBetwCells.label           "pixels between cells">
+<!ENTITY tablePxBetwBrdrCellContent.label "pixels between border <html:br/> and cell content">
+<!ENTITY tableBackground.label            "Background">
+<!ENTITY tableColor.label                 "Color:">
+<!ENTITY tableImage.label                 "Image:">
+<!ENTITY tableLeaveImageAtLocation.label  "Leave image at original location">
+<!ENTITY tableChooseImage.label           "Choose Image...">
+<!ENTITY tableAlignment.label             "Table<html:br/>Alignment:">
+<!ENTITY tableCaption.label               "Caption:">
+<!ENTITY tableAlignLeft.label             "Left">
+<!ENTITY tableAlignCenter.label           "Center">
+<!ENTITY tableAlignRight.label            "Right">
+<!ENTITY tableCaptionAbove.label          "Above Table">
+<!ENTITY tableCaptionBelow.label          "Below Table">
+<!ENTITY tableCaptionNone.label           "None">
+
+<!ENTITY cellSelection.label              "Selection">
+<!ENTITY cellSelectionCell.label          "Cell">
+<!ENTITY cellSelectionRow.label           "Row">
+<!ENTITY cellSelectionColumn.label        "Column">
+<!ENTITY cellSelectionNext.label          "Next">
+<!ENTITY cellSelectionPrevious.label      "Previous">
+<!ENTITY cellSpans.label                  "Spans:">
+<!ENTITY cellContentAlignment.label       "Content Alignment:">
+<!ENTITY cellHorizontal.label             "Horizontal:">
+<!ENTITY cellVertical.label               "Vertical:">
+<!ENTITY cellTextStyle.label              "Text Style">
+<!ENTITY cellHeader.label                 "Header">
+<!ENTITY cellNonbreaking.label            "Nonbreaking">
+<!ENTITY cellAlignTop.label               "Top">
+<!ENTITY cellAlignCenter.label            "Center">
+<!ENTITY cellAlignBottom.label            "Bottom">
+<!ENTITY cellSpanRows.label               "rows">
+<!ENTITY cellSpanCells.label              "cells">

editor/ui/dialogs/skin/EditorDialog.css

@@ -36,126 +36,7 @@ window{
 
 }
 
-titledbutton.popup {
-
-    list-style-image:           url(resource:/res/toolbar/TB_popup.gif);
-    width:                      auto;
-    display:                    inline;
-    text-decoration:            none; 
-    color:                      black;
-    padding:                    0px;
-    margin:                     0px;
-    border:                     1px outset white;
-    font:                       inherit;
-}
-
-titledbutton.popup:hover {
-    background-color:           inherit;
-    background-image:           inherit;
-    border:                     1px outset white;
-    padding:                    0px;
-    margin:                     0px;
-    color:                      black;
-    text-decoration:            none;
-}
-
-
-titledbutton.popup:active {
-   
-    text-decoration:            none;
-    border:                     1px outset white;
-    color:                      none;
-    color:                      black;  /* why is color set twice? */
-    padding:                    0px;
-    margin:                     0px;
-
-}  
-
-
-titledbutton.popup[disabled="true"] {
-
-    background-color:           inherit;
-    background-image:           inherit;
-    border :                    1px solid #999999;
-    padding:                    0px;
-    margin:                     0px;
-    color:                      #999999;
-    text-decoration:            none;
-    image-opacity:              25%;
-}
-
-titledbutton.popup[disabled="true"]:hover {
-
-    background-color:           inherit;
-    background-image:           inherit;
-    border :                    1px solid #999999;
-    padding:                    0px;
-    margin:                     0px;
-    color:                      #999999;
-    text-decoration:            none;
-}
-
-titledbutton.popup[disabled="true"]:active {
-
-    background-color:           inherit;
-    background-image:           inherit;
-    padding:                    0px;
-    margin:                     0px;
-    border :                    1px solid #999999;
-    color:                      #999999;
-    text-decoration:            none;
-}
-
-titledbutton.dropdown {
-
-    width:                      100%;
-    display:                    inline;
-    text-decoration:            none; 
-    color:                      black;
-    padding:                    0px;
-    margin:                     0px;
-    border:                     none;
-    font:                       inherit;
-    background-repeat:          no-repeat;
-    background-color:           inherit;
-    color:                      black;
-
-
-}
-
-titledbutton.dropdown:hover {
-
-    width:                      100%;
-    display:                    inline;
-    text-decoration:            none; 
-    color:                      black;
-    padding:                    0px;
-    margin:                     0px;
-    border:                     none;
-    font:                       inherit;
-    background-repeat:          no-repeat;
-    background-color:           #666699;
-    color:                      white;
-
-
-}
-
-titledbutton.dropdown:active {
-
-    width:                      100%;
-    display:                    inline;
-    text-decoration:            none; 
-    color:                      white;
-    padding:                    0px;
-    margin:                     0px;
-    border:                     none;
-    font:                       inherit;
-    background-repeat:          no-repeat;
-    background-color:           #666699;
-
-
-}
-
+/* THIS SHOULD BE KILLED. NO SPECIAL TITLED BUTTONS SHOULD BE USED! */
 titledbutton.select {
 
     width:                      100%;
@@ -206,7 +87,7 @@ titledbutton.select:active {
 
 }
 
-
+/* Subtle changes, like a little more space, is OK */
 /* Don't mess with top and bottom margin! */
 
 titledbutton[class=~spaced] { 
@@ -214,8 +95,6 @@ titledbutton[class=~spaced] {
     margin-right:               5px;
 }
 
-/* This assumes 1px is shifted to the border
-
 
 
 
@@ -327,7 +206,7 @@ select.combobox {
 select.SpellCheckList, select.SpellCheckLanguage, input.SpellCheckWord {
 
     width:                      20em;
-    border-style:               inset;
+    /* border-style:               inset; */
     background-color:           #CCCCCC; /* not working on Macintosh */ 
 }
 
@@ -623,6 +502,7 @@ spring.bigspacer {
       height:                   10px;
 }
 
+/* From Ben Goodger (originally EdAdvancedEdit.css) */
 div.spacer [align~=horizontal] {
     border                    : 1px inset white;
     height                    : 2px;
@@ -716,3 +596,33 @@ input.AttributesCell:active {
 input.AttributesCell:hover {
     border:                     1px white inset;
 }
+
+/* From Ben Goodger (originally EdTableProps.css) */
+box.header {
+/*  background-color: #7777A4;*/
+  padding: 2px;
+}
+
+box.header > div {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 5px;
+}
+
+box.panel {
+  border: 1px outset white;
+  width: 350px;
+}
+
+fieldset.holder {
+  width: 350px;
+
+/* Always use the arrow cursor, except in input widget */
+*,p,div,legend,box {cursor: pointer;}
+button { cursor: crosshair; }
+
+input[type=text], input[type=textarea] {
+  cursor: text;
+}
+