pjs/editor/ui/dialogs/content/EdImageProps.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>
<!DOCTYPE window
[

<!-- These entity declarations will go into a separate, locale file at some point -->
<!-- Window title -->
<!ENTITY windowTitle.label "Image Properties">

<!ENTITY locationFieldset.label "Image Location">
<!ENTITY locationEditField.label "Image URL">
<!ENTITY altTextEditField.label "Alternative Text">
<!ENTITY chooseButton.label "Choose File...">

<!ENTITY pixelsPopup.value "pixels">
<!ENTITY percentPopup.value "percent">

<!ENTITY dimensionsFieldset.label "Dimensions">
<!ENTITY originalSizeRadio.label "Original Size">
<!ENTITY customSizeRadio.label "Custom Size">
<!ENTITY heightEditField.label "Height">
<!ENTITY widthEditField.label "Width">
<!ENTITY constrainCheckbox.label "Constrain">

<!ENTITY alignment.label "Align Text to Image">
<!ENTITY bottomPopup.value "at the bottom">
<!ENTITY topPopup.value "at the top">
<!ENTITY centerPopup.value "in the center">
<!ENTITY wrapRightPopup.value "wrap around right side">
<!ENTITY wrapLeftPopup.value "wrap around left side">

<!ENTITY spacingFieldset.label "Spacing">
<!ENTITY leftrightEditField.label "Left and Right">
<!ENTITY topBottomEditField.label "Top and Bottom">
<!ENTITY borderEditField.label "Solid Border">

<!ENTITY OKButton.label "OK">
<!ENTITY CancelButton.label "Cancel">
<!ENTITY MoreOrLessButton.label "More">

]>


<!-- dialog containing a control requiring initial setup -->
<xul:window class="dialog" title="&windowTitle.label;"
    xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns="http://www.w3.org/TR/REC-html40"
    onload = "Startup()"
    align="vertical">

  <!-- Methods common to all editor dialogs -->
  <script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js">
  </script>
  <script language="JavaScript" src="chrome://editor/content/EdImageProps.js">
  </script>

  <xul:broadcaster id="args" value=""/>

  <table>
    <tr>
      <td colspan="2">
        <fieldset id="imageInfo.fieldset" ><legend align="left"> &locationFieldset.label; </legend>
          <table>
            <tr>
              <td align="right" valign="middle">
                <label class="enabled" for="image.srcInput"> &locationEditField.label; </label>
              </td>
              <td valign="middle">
                <input type="text" size="30" length="30" id="image.srcInput" onkeypress="OnChangeSrc()" onchange="OnChangeSrc()"/>
                <button class="ChooseFile" id="ChooseFile" onclick="chooseFile()"> &chooseButton.label; </button>
              </td>
            </tr>
            
            <tr>
              <td align="right" valign="middle">
                <label class="enabled" for="image.altTextInput" id="image.altTextLabel"> &altTextEditField.label; </label>
              </td>
              <td>
                <input type="text" size="30" id="image.altTextInput" onchange="doValueChanged()"/>
              </td>
            </tr>
          </table>
        </fieldset>
      </td>
      <td/>
    </tr>
    <tr>
      <td>
        <button class="spaced" id="MoreOrLessButton" onclick="onMoreOrLess()" width="50"> &MoreOrLessButton.label; </button>  
      </td>
      <td/>
    </tr>
    <tr id="MoreOrLessRow">
      <td>
        <fieldset id="imagedimensionsFieldset" ><legend align="left"> &dimensionsFieldset.label; </legend>
          <table cellspacing="0" cellpadding="0">
            <tr>
              <td>
                    <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
                <input type="radio" name="image.dimensionType" id="originalsizeRadio" onclick="doValueChanged()" checked="true" />
              </td>
              <td colspan="3">
                <label class="disabled" for="originalsizeRadio" id="originalsizeLabel" > &originalSizeRadio.label; </label>
              </td>
            </tr>
            <tr>
              <td>
                    <!-- THIS NEEDS TO BE onchange RATHER THAN onclick -->
                <input type="radio" name="image.dimensionType" id="customsizeRadio" onclick="doValueChanged()" />
              </td>
              <td colspan="3">
                <label class="disabled" for="customsizeRadio" id="customsizeLabel" > &customSizeRadio.label; </label>
              </td>
            </tr>
          
							<!-- IMAGE WIDTH -->
						<tr valign="middle">
						  <td/>
						  <td>
	              <label class="disabled" for="imagewidthInput" id="imagewidthLabel"> &widthEditField.label; </label>
	            </td>
	            <td>
			          <input type="text" size="4" length="4" id="imagewidthInput" onfocus="oldSourceInt = this.value;"
			          		onkeypress="constrainProportions(this.id, 'imageheightInput')" onchange="doValueChanged()" />
			        </td>
			        <td>
                <xul:titledbutton class="popup" id="widthunitSelect" value="&pixelsPopup.value;" 
                     align="right" popup="PixelOrPercentMenu1" popupanchor="bottomleft" onchange="doValueChanged()" />
	            </td>
	          </tr>
                    
							<!-- IMAGE HEIGHT -->
						<tr valign="middle">
						  <td/>
						  <td>
	              <label class="disabled" for="imageheightInput" id="imageheightLabel"> &heightEditField.label; </label>
	            </td>
	            <td>
	              <input type="text" size="4" length="4" id="imageheightInput" onfocus="oldSourceInt = this.value;"
	              		onkeypress="constrainProportions(this.id, 'imagewidthInput')" onchange="doValueChanged()" />
			        </td>
			        <td>
                <xul:titledbutton class="popup" id="heightunitSelect" value="&pixelsPopup.value;" 
                     align="right" popup="PixelOrPercentMenu2" popupanchor="bottomleft" onchange="doValueChanged()" />
	            </td>
	          </tr>

							<!-- CONSTRAIN DIMENSIONS -->
						<tr valign="middle">
						  <td/>
						  <td/>
						  <td colspan="2">
			          <input type="checkbox" id="constrainCheckbox" />
			          <label class="disabled" id="constrainLabel" for="constrainCheckbox"> &constrainCheckbox.label; </label>
	            </td>
	          </tr>
	        </table>

        </fieldset>
     </td>
      <td>
							<!-- IMAGE ALIGNMENT -->
        <label class="disabled" for="image.alignType" id="imagealignmentLabel"> &alignment.label; </label>
        <xul:titledbutton class="popup" id="image.alignType" value="&bottomPopup.value;" align="right" 
             popup="ImageTextAlignment" onchange="doValueChanged()"/>

        <br/>
        <p/>
        <fieldset id="spacing.fieldset"><legend align="left"> &spacingFieldset.label; </legend>
          <table cellspacing="0" cellpadding="0">
            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imageleftrightInput" id="leftrightLabel"> &leftrightEditField.label; </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imageleftrightInput" 
                		onkeypress="forceInteger(this.id)" onchange="doValueChanged()"/>
              </td>
              <td valign="middle">
                <label class="disabled" for="imageleftrightInput" id="leftrighttypeLabel"> &pixelsPopup.value; </label>
              </td>
            </tr>

            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imagetopbottomInput" id="topbottomLabel"> &topBottomEditField.label; </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imagetopbottomInput" 
                		onkeypress="forceInteger(this.id)" onchange="doValueChanged()"/>
              </td>
              <td valign="middle">
                <label class="disabled" for="imagetopbottomInput" id="topbottomtypeLabel"> &pixelsPopup.value; </label>
              </td>
            </tr>

            <tr valign="middle">
              <td align="right">
                <label class="disabled" for="imageborderInput" id="borderLabel"> &borderEditField.label; </label>
              </td>
              <td>
                <input type="text" size="4" length="4" maxlength="4" id="imageborderInput" 
                		onkeypress="forceInteger(this.id)" onchange="doValueChanged()" />
              </td>
              <td valign="middle">
                <label class="disabled" for="imageborderInput" id="bordertypeLabel"> &pixelsPopup.value; </label>
              </td>
            </tr>
          </table>
        </fieldset>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="right">
        <button class="spaced" id="OK" onclick="onOK()" width="50"> &OKButton.label; </button>  
        <button class="spaced" id="Cancel" onclick="onCancel()" width="50"> &CancelButton.label; </button>
      </td>
      <td/>
    </tr>
  </table>

<xul:popup id="PixelOrPercentMenu1">
  <xul:menu>
    <xul:menuitem value="&pixelsPopup.value;" onclick="SetPixelOrPercentByID('widthunitSelect', '')"/>
    <xul:menuitem value="&percentPopup.value;" onclick="SetPixelOrPercentByID('widthunitSelect', '%')"/>
  </xul:menu>
</xul:popup>

<xul:popup id="PixelOrPercentMenu2">
  <xul:menu>
    <xul:menuitem value="&pixelsPopup.value;" onclick="SetPixelOrPercentByID('heightunitSelect', '')"/>
    <xul:menuitem value="&percentPopup.value;" onclick="SetPixelOrPercentByID('heightunitSelect', '%')"/>
  </xul:menu>
</xul:popup>

<xul:popup id="ImageTextAlignment">
  <xul:menu>
    <xul:menuitem value="&topPopup.value;" onclick="SetImageAlignment('^')"/>
    <xul:menuitem value="&centerPopup.value;" onclick="SetImageAlignment('.')"/>
    <xul:menuitem value="&bottomPopup.value;" onclick="SetImageAlignment('v')"/>
    <xul:menuitem value="&wrapRightPopup.value;" onclick="SetImageAlignment(']')"/>
    <xul:menuitem value="&wrapLeftPopup.value;" onclick="SetImageAlignment('[')"/>
  </xul:menu>
</xul:popup>

</xul:window>

<!-- The old stuff:
  <table>
    <tr>
      <td>
        <fieldset><legend align="left">Image Location and Name </legend>
          <input type="file" value=" Choose File... " size="50" length="50" maxlength="255" name="image.url" />
          <br/>
            <xul:checkbox value="1"/>
            Leave Image at Original Location

            <xul:checkbox value="1"/>
            Page Background

            <input type="button" value=" Edit Image "/>
          <br/>
            Alternative Text
            <input type="text" size="30" length="30" maxlength="255" name="image.alttext" />
        </fieldset>

        <table cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td>
              <input type="button" value=" Remove Image Map " disabled />
            </td>
            <td align="right">
              <input type="button"value=" Extra HTML... " disabled />
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
-->