Composer's struct toolbar caused regression in mail composition + UI polish ; b=175276, fix by neil@parkwaycc.co.uk, r=glazman, sr=kin, a=asa

editor/ui/composer/content/StructBarContextMenu.js

@@ -144,14 +144,13 @@ function StructChangeTag()
 {
   var textbox = document.createElementNS(XUL_NS, "textbox");
   textbox.setAttribute("value", gContextMenuNode.getAttribute("value"));
-  textbox.setAttribute("size",  5);
+  textbox.setAttribute("width", gContextMenuNode.boxObject.width);
+  textbox.className = "struct-textbox";
 
-  gContextMenuNode.parentNode.insertBefore(textbox, gContextMenuNode);
+  gContextMenuNode.parentNode.replaceChild(textbox, gContextMenuNode);
 
   textbox.addEventListener("keypress", OnKeyPress, false);
-
-  textbox.setAttribute("style", "font-size: smaller");
-  gContextMenuNode.parentNode.removeChild(gContextMenuNode);
+  textbox.addEventListener("blur", ResetStructToolbar, true);
 
   textbox.select();
 }
@@ -198,9 +197,7 @@ function OnKeyPress(event)
         editor.deleteNode(element);
         editor.selectElement(newElt);
 
-        window._content.focus();
-
-        ResetStructToolbar();
+        window.content.focus();
       }
     }
     catch (e) {}
@@ -210,6 +207,6 @@ function OnKeyPress(event)
   }
   else if (keyCode == 27) {
     // if the user hits Escape, we discard the changes
-    ResetStructToolbar();
+    window.content.focus();
   }
 }

editor/ui/composer/content/editor.js

@@ -3007,12 +3007,13 @@ function UpdateStructToolbar()
   gLastFocusNode = element;
   gLastFocusNodeWasSelected = mixed.oneElementSelected;
 
-  var toolbar = document.getElementById("statusText");
+  var toolbar = document.getElementById("structToolbar");
   if (!toolbar) return;
   var childNodes = toolbar.childNodes;
   var childNodesLength = childNodes.length;
-  var i;
-  for (i = childNodesLength-1; i >= 0; i--) {
+  // We need to leave the <label> to flex the buttons to the left
+  // so, don't remove the last child at position length - 1
+  for (var i = childNodesLength - 2; i >= 0; i--) {
     toolbar.removeChild(childNodes.item(i));
   }
 
@@ -3036,6 +3037,7 @@ function UpdateStructToolbar()
     button.setAttribute("label",   "<" + tag + ">");
     button.setAttribute("value",   tag);
     button.setAttribute("context", "structToolbarContext");
+    button.className = "struct-button";
 
     toolbar.insertBefore(button, toolbar.firstChild);
 
@@ -3044,7 +3046,7 @@ function UpdateStructToolbar()
     button.addEventListener("contextmenu", newContextmenuListener(button, element), false);
 
     if (isFocusNode && oneElementSelected) {
-      button.setAttribute("style", "font-weight: bold");
+      button.setAttribute("checked", "true");
       isFocusNode = false;
     }
 

editor/ui/composer/content/editor.xul

@@ -269,9 +269,8 @@
     <!-- Some of this is from globarOverlay.xul -->
     <statusbar class="chromeclass-status" id="status-bar">
       <statusbarpanel id="component-bar"/>
-      <statusbarpanel id="statusText" flex="1" align="left" style="min-height: 20px"
-                      observes="cmd_structToolBar">
-	    <label value=""/>
+      <statusbarpanel id="structToolbar" flex="1" pack="end">
+	    <label id="structSpacer" value="" flex="1"/>
       </statusbarpanel>
       <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
     </statusbar>

themes/classic/editor/editor.css

@@ -63,3 +63,29 @@
   border-right: 1px solid ThreeDLightShadow;
 }
 
+/* ::::: struct toolbar ::::: */
+
+#structToolbar {
+  min-width: 1px;
+  overflow: hidden;
+}
+
+#structSpacer {
+  margin: 2px 0px;
+}
+
+.struct-button {
+  padding: 2px;
+}
+
+.struct-button[checked="true"] {
+  font-weight: bold;
+}
+
+.struct-textbox {
+  -moz-appearance: none !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  border: none !important;
+}
+

themes/modern/editor/editor.css

@@ -63,3 +63,28 @@
   font-size: -moz-initial;
 }
 
+/* ::::: struct toolbar ::::: */
+
+#structToolbar {
+  min-width: 1px;
+  overflow: hidden;
+}
+
+#structSpacer {
+  margin: 1px 0px;
+}
+
+.struct-button {
+  padding: 0px;
+}
+
+.struct-button[checked="true"] {
+  font-weight: bold;
+}
+
+.struct-textbox {
+  padding: 0px !important;
+  border: 1px solid #000000 !important;
+  margin: 0px !important;
+}
+