EdAdvancedEdit.xhtml

<?xml version="1.0"?>

<!-- This Source Code Form is subject to the terms of the Mozilla Public

   - License, v. 2.0. If a copy of the MPL was not distributed with this

   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!-- first checkin of the year 2000!      -->

<!-- Ben Goodger, 12:50AM, 01/00/00 NZST  -->

<?xml-stylesheet href="chrome://editor/skin/editor.css" type="text/css"?>

<?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>

<?xml-stylesheet href="chrome://messenger/skin/menulist.css" type="text/css"?>

<!DOCTYPE dialog SYSTEM "chrome://editor/locale/EdAdvancedEdit.dtd">

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"

    id="advancedEditDlg"

    style="width: 40em;"

    title="&WindowTitle.label;"

    onload="Startup()">

  <!-- Methods common to all editor dialogs -->

  <script src="chrome://editor/content/editorUtilities.js"/>

  <script src="chrome://editor/content/EdDialogCommon.js"/>

  <!-- element page functions -->

  <script src="chrome://editor/content/EdAEHTMLAttributes.js"/>

  <script src="chrome://editor/content/EdAECSSAttributes.js"/>

  <script src="chrome://editor/content/EdAEJSEAttributes.js"/>

  <script src="chrome://editor/content/EdAEAttributes.js"/>

  <!-- global dialog functions -->

  <script src="chrome://editor/content/EdAdvancedEdit.js"/>

  <script src="chrome://messenger/content/customElements.js"/>

  <hbox>

    <label value="&currentattributesfor.label;"/>

    <label class="header" id="tagLabel"/>

  </hbox>

  <separator class="thin"/>

  <tabbox flex="1">

    <tabs>

      <tab label="&tabHTML.label;"/>

      <tab label="&tabCSS.label;"/>

      <tab label="&tabJSE.label;" id="tabJSE"/>

    </tabs>

    <tabpanels flex="1">

      <!-- ============================================================== -->

      <!--                        HTML Attributes                         -->

      <!-- ============================================================== -->

      <vbox>

        <tree id="HTMLATree" class="AttributesTree" flex="1"

          hidecolumnpicker="true" seltype="single"

          onselect="onSelectHTMLTreeItem();"

          onclick="onSelectHTMLTreeItem();"

          ondblclick="editHTMLAttributeValue(event.target);">

          <treecols>

            <treecol id="HTMLAttrCol" flex="35" label="&tree.attributeHeader.label;"/>

            <splitter class="tree-splitter"/>

            <treecol id="HTMLValCol" flex="65" label="&tree.valueHeader.label;"/>

          </treecols>

          <treechildren id="HTMLAList" flex="1"/>

        </tree>

        <hbox align="center">

          <label value="&editAttribute.label;"/>

          <spacer flex="1"/>

          <button label="&removeAttribute.label;" oncommand="RemoveHTMLAttribute();"/>

        </hbox>

        <grid>

          <columns>

            <column flex="1"/><column flex="1"/>

          </columns>

          <rows>

            <row equalsize="always">

              <label control="AddHTMLAttributeNameInput" value="&AttName.label;"/>

              <label control="AddHTMLAttributeValueInput" value="&AttValue.label;"/>

            </row>

            <row align="top" equalsize="always">

              <!-- Lists are built at runtime -->

              <menulist is="menulist-editable" id="AddHTMLAttributeNameInput"

                        editable="true" flex="1"

                        oninput="onInputHTMLAttributeName();"

                        oncommand="onInputHTMLAttributeName();"/>

              <deck id="AddHTMLAttributeValueDeck" selectedIndex="0">

                <hbox align="top">

                  <textbox id="AddHTMLAttributeValueTextbox" flex="1"

                           oninput="onInputHTMLAttributeValue();"/>

                </hbox>

                <hbox align="top">

                  <menulist is="menulist-editable" id="AddHTMLAttributeValueMenulist"

                            editable="true" flex="1"

                            oninput="onInputHTMLAttributeValue();"

                            oncommand="onInputHTMLAttributeValue();"/>

                </hbox>

              </deck>

            </row>

          </rows>

        </grid>

      </vbox>

      <!-- ============================================================== -->

      <!--                         CSS Attributes                         -->

      <!-- ============================================================== -->

      <vbox>

        <tree id="CSSATree" class="AttributesTree" flex="1"

          hidecolumnpicker="true" seltype="single"

          onselect="onSelectCSSTreeItem();"

          onclick="onSelectCSSTreeItem();"

          ondblclick="editCSSAttributeValue(event.target);">

          <treecols>

            <treecol id="CSSPropCol" flex="35" label="&tree.propertyHeader.label;"/>

            <splitter class="tree-splitter"/>

            <treecol id="CSSValCol" flex="65" label="&tree.valueHeader.label;"/>

          </treecols>

          <treechildren id="CSSAList" flex="1"/>

        </tree>

        <hbox align="center">

          <label value="&editAttribute.label;"/>

          <spacer flex="1"/>

          <button label="&removeAttribute.label;" oncommand="RemoveCSSAttribute();"/>

        </hbox>

        <grid>

          <columns>

            <column flex="1"/><column flex="1"/>

          </columns>

          <rows>

            <row equalsize="always">

              <label value="&PropertyName.label;"/>

              <label value="&AttValue.label;"/>

            </row>

            <row align="top" equalsize="always">

              <textbox id="AddCSSAttributeNameInput" flex="1"

                oninput="onInputCSSAttributeName();"/>

          	  <textbox id="AddCSSAttributeValueInput" flex="1"

                oninput="onChangeCSSAttribute();"/>

            </row>

          </rows>

        </grid>

      </vbox>

      <!-- ============================================================== -->

      <!--                    JavaScript Event Handlers                   -->

      <!-- ============================================================== -->

      <vbox>

        <tree id="JSEATree" class="AttributesTree" flex="1"

          hidecolumnpicker="true" seltype="single"

          onselect="onSelectJSETreeItem();"

          onclick="onSelectJSETreeItem();"

          ondblclick="editJSEAttributeValue(event.target);">

          <treecols>

            <treecol id="AttrCol" flex="35" label="&tree.attributeHeader.label;"/>

            <splitter class="tree-splitter"/>

            <treecol id="HeaderCol" flex="65" label="&tree.valueHeader.label;"/>

          </treecols>

          <treechildren id="JSEAList" flex="1"/>

        </tree>

        <hbox align="center">

          <label value="&editAttribute.label;"/>

          <spacer flex="1"/>

          <button label="&removeAttribute.label;" oncommand="RemoveJSEAttribute()"/>

        </hbox>

        <grid>

          <columns>

            <column flex="1"/><column flex="1"/>

          </columns>

          <rows>

            <row equalsize="always">

              <label value="&AttName.label;"/>

              <label value="&AttValue.label;"/>

            </row>

            <row align="top" equalsize="always">

              <!-- List is built at runtime -->

              <menulist id="AddJSEAttributeNameList" flex="1"

                oncommand="onSelectJSEAttribute();"/>

          	  <textbox id="AddJSEAttributeValueInput" flex="1"

                oninput="onInputJSEAttributeValue();"/>

            </row>

          </rows>

        </grid>

      </vbox>

    </tabpanels>

  </tabbox>

</dialog>