From 97fa4e77297887c457d7f932e1d7605cc340ed73 Mon Sep 17 00:00:00 2001
From: "cmanske%netscape.com"
 <cmanske%netscape.com@18797224-902f-48f8-a5cc-f745e15eee43>
Date: Fri, 28 Apr 2000 14:06:34 +0000
Subject: [PATCH] More editor CSS and XUL cleanup. Use grid to control button
 widths in dialogs. [Grids rock!]. New text for Edit Mode buttons

git-svn-id: svn://10.0.0.236/trunk@67534 18797224-902f-48f8-a5cc-f745e15eee43
---
 .../ui/composer/content/EditorCommands.js     |  2 +-
 .../ui/composer/content/EditorContent.css     |  2 +-
 mozilla/editor/ui/composer/content/editor.xul |  2 +-
 .../ui/composer/content/editorOverlay.xul     | 22 ++++++------
 .../composer/locale/en-US/editorOverlay.dtd   |  4 +--
 .../ui/composer/skin/EditorToolbars.css       | 35 +------------------
 .../editor/ui/dialogs/content/EdLinkProps.xul | 28 ++++++++-------
 7 files changed, 32 insertions(+), 63 deletions(-)

diff --git a/mozilla/editor/ui/composer/content/EditorCommands.js b/mozilla/editor/ui/composer/content/EditorCommands.js
index e59b6406dd8..1efd4e04704 100644
--- a/mozilla/editor/ui/composer/content/EditorCommands.js
+++ b/mozilla/editor/ui/composer/content/EditorCommands.js
@@ -1037,7 +1037,7 @@ function EditorSetDisplayMode(mode)
   editorShell.SetDisplayMode(mode);
 
   // Set the UI states
-  document.getElementById("WYSIWYGModeButton").setAttribute("selected",Number(mode == 0));
+  document.getElementById("PreviewModeButton").setAttribute("selected",Number(mode == 0));
   document.getElementById("NormalModeButton").setAttribute("selected",Number(mode == 1));
   document.getElementById("TagModeButton").setAttribute("selected",Number(mode == 2));
   contentWindow.focus();
diff --git a/mozilla/editor/ui/composer/content/EditorContent.css b/mozilla/editor/ui/composer/content/EditorContent.css
index ce9434a565d..2d7e7e6cbbc 100644
--- a/mozilla/editor/ui/composer/content/EditorContent.css
+++ b/mozilla/editor/ui/composer/content/EditorContent.css
@@ -22,7 +22,7 @@
 
 /* Styles to alter look of things in the Editor content window 
  *  for the "Normal Edit Mode" These settings will be removed
- *  when we display in completely WYSIWYG "Browser Preview" mode
+ *  when we display in completely WYSIWYG "Edit Preview" mode
  *  Anything that should never change, like cursors, should be 
  *  place in EditorOverride.css, instead of here.
 */
diff --git a/mozilla/editor/ui/composer/content/editor.xul b/mozilla/editor/ui/composer/content/editor.xul
index ee421c8311c..c338634186c 100644
--- a/mozilla/editor/ui/composer/content/editor.xul
+++ b/mozilla/editor/ui/composer/content/editor.xul
@@ -195,10 +195,10 @@
     <toolbar id="EditModeToolbar" chromeclass="extrachrome" persist="collapsed">
       <text class="margin-left-right" value="&editMode.label;"/>
       <!-- From editorOverlay.xul -->
-      <text id="WYSIWYGModeButton"/>
       <text id="NormalModeButton"/>
       <text id="TagModeButton"/>
 <!--      <text id="HTMLModeButton"/> -->
+      <text id="PreviewModeButton"/>
       <spring flex="1"/>
     </toolbar>
 
diff --git a/mozilla/editor/ui/composer/content/editorOverlay.xul b/mozilla/editor/ui/composer/content/editorOverlay.xul
index 63d49fa25ff..e0af2d0dd44 100644
--- a/mozilla/editor/ui/composer/content/editorOverlay.xul
+++ b/mozilla/editor/ui/composer/content/editorOverlay.xul
@@ -684,28 +684,28 @@
   </menulist>          
 
   <stack id="ColorButtons" autostretch="never">
-    <text class="borderless" id="BackColorPopupButton" popup="BackColorPopup"/>
-    <text class="borderless" id="TextColorPopupButton" popup="TextColorPopup"/>
+    <text id="BackColorPopupButton" popup="BackColorPopup"/>
+    <text id="TextColorPopupButton" popup="TextColorPopup"/>
   </stack>
   
   <button class="button-toolbar" id="DecreaseFontSizeButton" oncommand="EditorDecreaseFontSize()"/>
   <button class="button-toolbar" id="IncreaseFontSizeButton" oncommand="EditorIncreaseFontSize()"/>
 
-  <button class="button-toolbar FormatButton" id="boldButton" align="center" oncommand="EditorToggleStyle('bold')">
+  <button class="button-toolbar" id="boldButton" align="center" oncommand="EditorToggleStyle('bold')">
     <observes element="Editor:Bold" attribute="bold" onbroadcast="onStyleChange('bold')"/>
   </button>
-  <button class="button-toolbar FormatButton" id="italicButton" align="center" oncommand="EditorToggleStyle('italic')">
+  <button class="button-toolbar" id="italicButton" align="center" oncommand="EditorToggleStyle('italic')">
     <observes element="Editor:Italic" attribute="italic" onbroadcast="onStyleChange('italic')"/>
   </button>
-  <button class="button-toolbar FormatButton" id="underlineButton" align="center" oncommand="EditorToggleStyle('underline')">
+  <button class="button-toolbar" id="underlineButton" align="center" oncommand="EditorToggleStyle('underline')">
     <observes element="Editor:Underline" attribute="underline" onbroadcast="onStyleChange('underline')"/>
   </button>
 
-  <button class="button-toolbar FormatButton" id="ulButton" oncommand="EditorMakeOrChangeList('ul')">
+  <button class="button-toolbar" id="ulButton" oncommand="EditorMakeOrChangeList('ul')">
       <observes element="Editor:Paragraph:ListType" attribute="format" onbroadcast="onListFormatChange('ul')"/>
   </button>
 
-  <button class="button-toolbar FormatButton" id="olButton" oncommand="EditorMakeOrChangeList('ol')">
+  <button class="button-toolbar" id="olButton" oncommand="EditorMakeOrChangeList('ol')">
       <observes element="Editor:Paragraph:ListType" attribute="format" onbroadcast="onListFormatChange('ol')"/>
   </button>
 
@@ -714,10 +714,10 @@
   <button class="button-toolbar format popup" id="AlignPopupButton"/>
   
   <!-- Edit Mode toolbar -->
-  <text id="WYSIWYGModeButton" class="EditModeButton" selected="0" value="&hideExtraMarkup.label;" onclick="EditorSetDisplayMode(0)"/>
-  <text id="NormalModeButton"  class="EditModeButton" selected="1" value="&showExtraMarkup.label;" onclick="EditorSetDisplayMode(1)"/>
-  <text id="TagModeButton"     class="EditModeButton" selected="0" value="&showAllTags.label;"     onclick="EditorSetDisplayMode(2)"/>
-  <text id="HTMLModeButton"    class="EditModeButton" selected="0" value="&HTMLSourceCmd.label;"   onclick="EditorSetDisplayMode(3)"/>
+  <text id="NormalModeButton"  class="EditModeButton" selected="1" value="&normalMode.label;"    onclick="EditorSetDisplayMode(1)"/>
+  <text id="TagModeButton"     class="EditModeButton" selected="0" value="&showAllTags.label;"   onclick="EditorSetDisplayMode(2)"/>
+  <text id="HTMLModeButton"    class="EditModeButton" selected="0" value="&HTMLSourceCmd.label;" onclick="EditorSetDisplayMode(3)"/>
+  <text id="PreviewModeButton" class="EditModeButton" selected="0" value="&previewMode.label;"   onclick="EditorSetDisplayMode(0)"/>
   
   <!-- InsertPopupButton is used by messengercompose.xul -->
   <button class="button-toolbar format popup" id="InsertPopupButton"/>
diff --git a/mozilla/editor/ui/composer/locale/en-US/editorOverlay.dtd b/mozilla/editor/ui/composer/locale/en-US/editorOverlay.dtd
index 478fbbbb9b5..bf18639f6e2 100644
--- a/mozilla/editor/ui/composer/locale/en-US/editorOverlay.dtd
+++ b/mozilla/editor/ui/composer/locale/en-US/editorOverlay.dtd
@@ -543,7 +543,7 @@ Menu item text for "[Page|Table|Cell] Background color" is filled from
 <!ENTITY colorPicker.default.accesskey "r">
 
 <!-- Display Mode Toolbar -->
-<!ENTITY showExtraMarkup.label "Normal">
-<!ENTITY hideExtraMarkup.label "WYSIWYG">
+<!ENTITY normalMode.label "Normal">
+<!ENTITY previewMode.label "Edit Preview">
 <!ENTITY showAllTags.label "Show All Tags">
 <!ENTITY treeModeButton.label "Tag Tree">
diff --git a/mozilla/editor/ui/composer/skin/EditorToolbars.css b/mozilla/editor/ui/composer/skin/EditorToolbars.css
index 5eb4f331c1b..f9b601e0820 100644
--- a/mozilla/editor/ui/composer/skin/EditorToolbars.css
+++ b/mozilla/editor/ui/composer/skin/EditorToolbars.css
@@ -30,27 +30,6 @@
   border-bottom: 1px solid #003366;
 }
 
-.FormatButton {
-  border: 1px solid transparent;
-  margin: 1px 1px 1px 1px;
-	padding: 2px;
-	text-decoration: none;
-	color: inherit;
-}
-
-.FormatButton[toggled="1"] {
-  border: 1px white inset;
-}
-
-.FormatButton:hover {
-  border: 1px solid white;
-	text-decoration: none;
-}
-
-.FormatButton:active {
-  margin: 2px 0px 0px 2px;
-}
-
 .separator_small { 
   width: 1em; 
 }
@@ -70,15 +49,6 @@
 
 /* end of SHOULD GO IN GLOBAL */
 
-/* THIS WILL GO SOON. With conversion to menulist */
-select.toolbar {
-  /* This is ignored! */
-	/*font-size: smaller;*/
-  max-width: 20em;
-  margin: 2px 3px 0px 3px;
-}
-
-
 #EditModeToolbar {
   padding:       0px;
   /* Same as "standard" toolbar background */
@@ -126,7 +96,6 @@ select.toolbar {
 }
 
 
-
 /* Image URLs for all Editor toolbar buttons */
 
 #boldButton {
@@ -268,9 +237,8 @@ select.toolbar {
 #ColorButtons {
   margin: 2px;
 }
-
+/* TODO: How to make inset color skinable? */
 #TextColorPopupButton {
-	/*list-style-image:url("chrome://editor/skin/images/color.gif");*/
   border: 1px inset #CCCCCC;
   padding: 0px;
   margin-right:  7px;
@@ -282,7 +250,6 @@ select.toolbar {
 }
 
 #BackColorPopupButton {
-	/*list-style-image:url("chrome://editor/skin/images/color.gif");*/
   border: 1px inset #CCCCCC;
   padding: 0px;
   margin-top:  7px;
diff --git a/mozilla/editor/ui/dialogs/content/EdLinkProps.xul b/mozilla/editor/ui/dialogs/content/EdLinkProps.xul
index 07711ca97a3..ffdf40290be 100644
--- a/mozilla/editor/ui/dialogs/content/EdLinkProps.xul
+++ b/mozilla/editor/ui/dialogs/content/EdLinkProps.xul
@@ -52,19 +52,21 @@
 
     <titledbox orient="vertical"><title><text class="label" value="&LinkURLBox.label;"/></title>
       <text class="label" value="&LinkURLEditField.label;"/>
-      <box autostretch="never"  valign="middle">
-        <textfield id="hrefInput" flex="1"/>
-        <spring class="spacer"/>
-        <!-- from EdDialogOverlay.xul -->
-        <!-- The style: width setting is need to cover a bug in button width resizing when text changes -->
-        <button class="dialog" id="ChooseFile" style="width: 7em"/>
-      </box>
-      <spring class="spacer"/>
-      <box>
-        <button class="dialog" id="MoreFewerButton" align="left" oncommand="onMoreFewer()" persist="more"/>
-        <spring flex="1"/>
-        <button class="dialog" id="RemoveLink" oncommand="RemoveLink()" value="&RemoveLinkButton.label;" style="width: 7em"/>
-      </box>
+      <grid>
+        <columns><column/><column/></columns>
+        <rows>
+          <row autostretch="never" vertical-align="middle">
+            <textfield id="hrefInput" flex="1"/>
+            <button class="dialog" id="ChooseFile" flex="1"/>
+          </row>
+          <row>
+            <box autostretch="never">
+              <button class="dialog" id="MoreFewerButton" align="left" oncommand="onMoreFewer()" persist="more"/>
+            </box>
+            <button class="dialog" id="RemoveLink" oncommand="RemoveLink()" value="&RemoveLinkButton.label;" flex="1"/>
+          </row>
+        </rows>
+      </grid>
       <box id="MoreSection" orient="vertical">
         <spring class="bigspacer"/>
         <text class="label" align="left" value="&NamedAnchorMsg.label;"/>