EM, STRONG and paragraph style toolbar items; b=357274, r=brade

composer/base/content/composer/commands.js

@@ -111,9 +111,15 @@ var ComposerCommands = {
         case "cmd_bold":
         case "cmd_italic":
         case "cmd_underline":
+        case "cmd_strong":
+        case "cmd_em":
           this.pokeStyleUI(command, params.getBooleanValue("state_all"));
           break;
 
+        case "cmd_paragraphState":
+          this.pokeMultiStateUI(command, params);
+          break;
+
         default: dump("no update for command: " +command+"\n");
       }
     }
@@ -149,6 +155,29 @@ var ComposerCommands = {
     return null;
   },
 
+  pokeMultiStateUI: function pokeMultiStateUI(uiID, cmdParams)
+  {
+    try
+    {
+      var commandNode = document.getElementById(uiID);
+      if (!commandNode)
+        return;
+
+      var isMixed = cmdParams.getBooleanValue("state_mixed");
+      var desiredAttrib;
+      if (isMixed)
+        desiredAttrib = "mixed";
+      else
+        desiredAttrib = cmdParams.getCStringValue("state_attribute");
+
+      var uiState = commandNode.getAttribute("state");
+      if (desiredAttrib != uiState)
+      {
+        commandNode.setAttribute("state", desiredAttrib);
+      }
+    } catch(e) {}
+  },
+
   doStyleUICommand: function doStyleUICommand(cmdStr)
   {
     try
@@ -158,6 +187,25 @@ var ComposerCommands = {
     } catch(e) {}
   },
 
+  doStatefulCommand: function doStatefulCommand(commandID, newState)
+  {
+    var commandNode = document.getElementById(commandID);
+    if (commandNode)
+        commandNode.setAttribute("state", newState);
+
+    try
+    {
+      var cmdParams = this.newCommandParams();
+      if (!cmdParams) return;
+
+      cmdParams.setCStringValue("state_attribute", newState);
+      this.goDoCommandParams(commandID, cmdParams);
+
+      this.pokeMultiStateUI(commandID, cmdParams);
+
+    } catch(e) { dump("error thrown in doStatefulCommand: "+e+"\n"); }
+  },
+
   goDoCommandParams: function goDoCommandParams(command, params)
   {
     try
@@ -196,6 +244,7 @@ var ComposerCommands = {
     commandTable.registerCommand("cmd_open",        cmdOpen);
     commandTable.registerCommand("cmd_fullScreen",  cmdFullScreen);
     commandTable.registerCommand("cmd_new",         cmdNew);
+    commandTable.registerCommand("cmd_renderedHTMLEnabler", cmdDummyHTML);
   },
 
   setupFormatCommands: function setupFormatCommands()

composer/base/content/composer/composer.js

@@ -130,13 +130,13 @@ function OpenExtensionsManager()
 
 function StopLoadingPage()
 {
-  document.getElementById("tabeditor").stopWebNavigation();
+  gDialog.tabeditor.stopWebNavigation();
 }
 
 //--------------------------------------------------------------------
 function onButtonUpdate(button, commmandID)
 {
-  var commandNode = document.getElementById(commmandID);
+  var commandNode = gDialog[commmandID];
   var state = commandNode.getAttribute("state");
   button.checked = state == "true";
 }
@@ -168,3 +168,37 @@ function UpdateWindowTitle()
                                                        2);
   } catch (e) { dump(e); }
 }
+
+function onParagraphFormatChange(paraMenuList, commandID)
+{
+  if (!paraMenuList)
+    return;
+
+  var commandNode = gDialog[commandID];
+  var state = commandNode.getAttribute("state");
+
+  // force match with "normal"
+  if (state == "body")
+    state = "";
+
+  if (state == "mixed")
+  {
+    //Selection is the "mixed" ( > 1 style) state
+    paraMenuList.selectedItem = null;
+    paraMenuList.setAttribute("label",GetString('Mixed'));
+  }
+  else
+  {
+    var menuPopup = gDialog.ParagraphPopup;
+    var menuItems = menuPopup.childNodes;
+    for (var i=0; i < menuItems.length; i++)
+    {
+      var menuItem = menuItems.item(i);
+      if ("value" in menuItem && menuItem.value == state)
+      {
+        paraMenuList.selectedItem = menuItem;
+        break;
+      }
+    }
+  }
+}

composer/base/content/composer/composer.xul

@@ -83,7 +83,7 @@
              mode="full"
              context="format-toolbar-context-menu"
              customizable="true"
-             defaultset="spacer,boldButton,italicButton,underlineButton"/>
+             defaultset="spacer,ParagraphSelectBox,emButton,strongButton,underlineButton"/>
     <toolbarset id="customFormatToolbars" context="format-toolbar-context-menu"/>
   </toolbox>
 

composer/base/content/composer/formatbarpalette.inc

@@ -1,18 +1,51 @@
   <toolbarpalette id="FormatToolbarPalette">
 
-      <toolbarbutton id="boldButton" type="checkbox" autoCheck="false" observes="cmd_bold"
+      <toolbarbutton id="boldButton" type="checkbox" autoCheck="false" observes="cmd_bold" label="&boldToolbarCmd.label;"
                      tooltiptext="&boldToolbarCmd.tooltip;">
         <observes element="cmd_bold" type="checkbox" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_bold')"/>
       </toolbarbutton>
 
-      <toolbarbutton id="italicButton" type="checkbox" autoCheck="false" observes="cmd_italic" label="italic"
+      <toolbarbutton id="italicButton" type="checkbox" autoCheck="false" observes="cmd_italic" label="&italicToolbarCmd.label;"
                      tooltiptext="&italicToolbarCmd.tooltip;">
         <observes element="cmd_italic" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_italic')"/>
       </toolbarbutton>
 
-      <toolbarbutton id="underlineButton" type="checkbox" autoCheck="false" observes="cmd_underline"
+      <toolbarbutton id="underlineButton" type="checkbox" autoCheck="false" observes="cmd_underline" label="&underlineToolbarCmd.label;"
                      tooltiptext="&underlineToolbarCmd.tooltip;">
         <observes element="cmd_underline" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_underline')"/>
       </toolbarbutton>
     
+      <toolbarbutton id="strongButton" type="checkbox" autoCheck="false" observes="cmd_strong" label="&strongToolbarCmd.label;"
+                     tooltiptext="&strongToolbarCmd.tooltip;">
+        <observes element="cmd_strong" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_strong')"/>
+      </toolbarbutton>
+    
+      <toolbarbutton id="emButton" type="checkbox" autoCheck="false" observes="cmd_em" label="&emToolbarCmd.label;"
+                     tooltiptext="&emToolbarCmd.tooltip;">
+        <observes element="cmd_em" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_em')"/>
+      </toolbarbutton>
+
+      <toolbaritem id="ParagraphSelectBox">
+        <menulist class="toolbar-focustarget" id="ParagraphSelect" observes="cmd_renderedHTMLEnabler"
+          tooltiptext="&ParagraphSelect.tooltip;" crop="right">
+          <observes element="cmd_paragraphState" attribute="state" onbroadcast="onParagraphFormatChange(this.parentNode, 'cmd_paragraphState')"/>
+          <menupopup id="ParagraphPopup" oncommand="ComposerCommands.doStatefulCommand('cmd_paragraphState', event.target.value)">
+            <!-- TODO : add an onpopupshowing handler to hide the body text
+                        choice in strict mode -->
+            <menuitem label="&bodyTextCmd.label;"            value=""/>
+            <menuitem label="&paragraphParagraphCmd.label;"  value="p"/>
+            <menuitem label="&heading1Cmd.label;"            value="h1"/>
+            <menuitem label="&heading2Cmd.label;"            value="h2"/>
+            <menuitem label="&heading3Cmd.label;"            value="h3"/>
+            <menuitem label="&heading4Cmd.label;"            value="h4"/>
+            <menuitem label="&heading5Cmd.label;"            value="h5"/>
+            <menuitem label="&heading6Cmd.label;"            value="h6"/>
+            <menuitem label="&paragraphAddressCmd.label;"    value="address"/>
+            <menuitem label="&paragraphPreformatCmd.label;"  value="pre"/>
+            <menuseparator />
+            <menuitem label="&genericContainerCmd.label;"    value="div"/>
+          </menupopup>
+        </menulist>
+      </toolbaritem>
+
     </toolbarpalette>

composer/base/content/composer/sets.inc

@@ -28,6 +28,10 @@
   <command id="cmd_bold"         state="false"     oncommand="ComposerCommands.doStyleUICommand('cmd_bold')"/>
   <command id="cmd_italic"       state="false"     oncommand="ComposerCommands.doStyleUICommand('cmd_italic')"/>
   <command id="cmd_underline"    state="false"     oncommand="ComposerCommands.doStyleUICommand('cmd_underline')"/>
+  <command id="cmd_strong"       state="false"     oncommand="ComposerCommands.doStyleUICommand('cmd_strong')"/>
+  <command id="cmd_em"           state="false"     oncommand="ComposerCommands.doStyleUICommand('cmd_em')"/>
+  <command id="cmd_paragraphState" state=""        oncommand="ComposerCommands.doStatefulCommand('cmd_paragraphState', event.target.value)"/>
+  <command id="cmd_renderedHTMLEnabler"/>
 </commandset>
 
 <commandset id="selectionBasedCommands"

composer/base/jar.mn

@@ -47,7 +47,7 @@ composer.jar:
 	skin/classic/composer/icons/new.png				(skin/classic/composer/icons/new.png)
 	skin/classic/composer/icons/open.png			(skin/classic/composer/icons/open.png)
 	skin/classic/composer/icons/stop.png			(skin/classic/composer/icons/stop.png)
-	skin/classic/composer/icons/btn2.png			(skin/classic/composer/icons/btn2.png)
+	skin/classic/composer/icons/btn3.png			(skin/classic/composer/icons/btn3.png)
 	skin/classic/composer/logo-hover.png			(skin/classic/composer/logo-hover.png)
 	skin/classic/composer/logo.png					(skin/classic/composer/logo.png)
 	skin/classic/composer/structurebar.css			(skin/classic/composer/structurebar.css)

composer/base/locale/en-US/composer/composer.dtd

@@ -89,5 +89,26 @@
 <!ENTITY stopButton.tooltip               "Stop loading the page">
 
 <!ENTITY boldToolbarCmd.tooltip           "Bold">
+<!ENTITY boldToolbarCmd.label             "Bold">
 <!ENTITY italicToolbarCmd.tooltip         "Italic">
+<!ENTITY italicToolbarCmd.label           "Italic">
 <!ENTITY underlineToolbarCmd.tooltip      "Underline">
+<!ENTITY underlineToolbarCmd.label        "Underline">
+<!ENTITY strongToolbarCmd.tooltip         "Strong emphasis">
+<!ENTITY strongToolbarCmd.label           "Strong emphasis">
+<!ENTITY emToolbarCmd.tooltip             "Emphasis">
+<!ENTITY emToolbarCmd.label               "Emphasis">
+
+<!ENTITY ParagraphSelect.tooltip "Choose a paragraph format">
+<!-- Shared in Paragraph, and Toolbar menulist -->
+<!ENTITY bodyTextCmd.label "Body Text">
+<!ENTITY paragraphParagraphCmd.label "Paragraph">  
+<!ENTITY heading1Cmd.label "Heading 1">
+<!ENTITY heading2Cmd.label "Heading 2">
+<!ENTITY heading3Cmd.label "Heading 3">
+<!ENTITY heading4Cmd.label "Heading 4">
+<!ENTITY heading5Cmd.label "Heading 5">
+<!ENTITY heading6Cmd.label "Heading 6">
+<!ENTITY paragraphAddressCmd.label "Address">
+<!ENTITY paragraphPreformatCmd.label "Preformat">
+<!ENTITY genericContainerCmd.label "Generic container (div)">

composer/base/skin/classic/composer/formatToolbar.css

@@ -35,53 +35,96 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-#boldButton {
-  list-style-image: url("chrome://composer/skin/icons/btn2.png");
+#FormatToolbox .toolbarbutton-text {
+  display: none;
+}
+
+#CustomizeToolbarWindow toolbarbutton,
+#CustomizeToolbarWindow toolbarpalette {
+  -moz-box-orient: vertical;
+}
+
+#boldButton, #italicButton, #underlineButton,
+#strongButton, #emButton {
+  list-style-image: url("chrome://composer/skin/icons/btn3.png");
+}
+
+#emButton {
+  -moz-image-region: rect(0px 16px 16px 0);
+}
+#emButton:hover {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+#emButton:hover:active {
+  -moz-image-region: rect(0px 48px 16px 32px);
+}
+#emButton[checked="true"] {
+  -moz-image-region: rect(0px 16px 16px 0);
+}
+#emButton[disabled="true"] {
+  -moz-image-region: rect(0px 64px 16px 48px);
+}
+
+#strongButton {
   -moz-image-region: rect(16px 16px 32px 0);
 }
-#boldButton:hover {
+#strongButton:hover {
   -moz-image-region: rect(16px 32px 32px 16px);
 }
-#boldButton:hover:active {
+#strongButton:hover:active {
   -moz-image-region: rect(16px 48px 32px 32px);
 }
-#boldButton[checked="true"] {
+#strongButton[checked="true"] {
   -moz-image-region: rect(16px 16px 32px 0);
 }
-#boldButton[disabled="true"] {
+#strongButton[disabled="true"] {
   -moz-image-region: rect(16px 64px 32px 48px);
 }
 
+#boldButton{
+  -moz-image-region: rect(32px 16px 48px 0);
+}
+#boldButton:hover {
+  -moz-image-region: rect(32px 32px 48px 16px);
+}
+#boldButton:hover:active {
+  -moz-image-region: rect(32px 48px 48px 32px);
+}
+#boldButton[checked="true"] {
+  -moz-image-region: rect(32px 16px 48px 0);
+}
+#boldButton[disabled="true"] {
+  -moz-image-region: rect(32px 64px 48px 48px);
+}
+
 #italicButton{
-  list-style-image: url("chrome://composer/skin/icons/btn2.png");
-  -moz-image-region: rect(98px 16px 114px 0);
+  -moz-image-region: rect(48px 16px 64px 0);
 }
 #italicButton:hover {
-  -moz-image-region: rect(98px 32px 114px 16px);
+  -moz-image-region: rect(48px 32px 64px 16px);
 }
 #italicButton:hover:active {
-  -moz-image-region: rect(98px 48px 114px 32px);
+  -moz-image-region: rect(48px 48px 64px 32px);
 }
 #italicButton[checked="true"] {
-  -moz-image-region: rect(98px 16px 114px 0);
+  -moz-image-region: rect(48px 16px 64px 0);
 }
 #italicButton[disabled="true"] {
-  -moz-image-region: rect(98px 64px 114px 48px);
+  -moz-image-region: rect(48px 64px 64px 48px);
 }
 
 #underlineButton{
-  list-style-image: url("chrome://composer/skin/icons/btn2.png");
-  -moz-image-region: rect(114px 16px 130px 0);
+  -moz-image-region: rect(64px 16px 80px 0);
 }
 #underlineButton:hover {
-  -moz-image-region: rect(114px 32px 130px 16px);
+  -moz-image-region: rect(64px 32px 80px 16px);
 }
 #underlineButton:hover:active {
-  -moz-image-region: rect(114px 48px 130px 32px);
+  -moz-image-region: rect(64px 48px 80px 32px);
 }
 #underlineButton[checked="true"] {
-  -moz-image-region: rect(114px 16px 130px 0);
+  -moz-image-region: rect(64px 16px 80px 0);
 }
 #underlineButton[disabled="true"] {
-  -moz-image-region: rect(114px 64px 130px 48px);
+  -moz-image-region: rect(64px 64px 80px 48px);
 }