browser/extensions/formautofill/content/editAddress.xhtml
author Matthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 18 Apr 2018 16:12:15 -0700
changeset 467926 b180b277a1ef479b4135bd4194a39635c048dfe0
parent 462097 101a4cf38f89696111c911993268d7dd961a46c7
child 479665 4b668c00c226a1efca95061a816ab62fad812b3c
permissions -rw-r--r--
Bug 1455151 - Support subdialog sizing of HTML documents from a stylesheet and use it for autofill edit dialogs. r=jaws MozReview-Commit-ID: GeHPhFTnCIz

<?xml version="1.0" encoding="UTF-8"?>
<!-- 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/. -->
<!DOCTYPE html [
  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  %globalDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title data-localization="addNewAddressTitle"/>
  <link rel="stylesheet" href="chrome://formautofill-shared/skin/editDialog.css"/>
  <link rel="stylesheet" href="chrome://formautofill-shared/skin/editAddress.css"/>
  <link rel="stylesheet" href="chrome://formautofill/skin/editDialog.css"/>
  <script src="chrome://formautofill/content/l10n.js"></script>
  <script src="chrome://formautofill/content/editDialog.js"></script>
  <script src="chrome://formautofill/content/autofillEditForms.js"></script>
</head>
<body dir="&locale.dir;">
  <form id="form" autocomplete="off">
    <div>
      <div id="name-container">
        <label id="given-name-container">
          <span data-localization="givenName"/>
          <input id="given-name" type="text"/>
        </label>
        <label id="additional-name-container">
          <span data-localization="additionalName"/>
          <input id="additional-name" type="text"/>
        </label>
        <label id="family-name-container">
          <span data-localization="familyName"/>
          <input id="family-name" type="text"/>
        </label>
      </div>
      <label id="organization-container">
        <span data-localization="organization2"/>
        <input id="organization" type="text"/>
      </label>
      <label id="street-address-container">
        <span data-localization="streetAddress"/>
        <textarea id="street-address" rows="3"/>
      </label>
      <label id="address-level2-container">
        <span data-localization="city"/>
        <input id="address-level2" type="text"/>
      </label>
      <label id="address-level1-container">
        <span/>
        <input id="address-level1" type="text"/>
      </label>
      <label id="postal-code-container">
        <span/>
        <input id="postal-code" type="text"/>
      </label>
    </div>
    <label id="country-container">
      <span data-localization="country"/>
      <select id="country">
        <option/>
      </select>
    </label>
    <p id="country-warning-message" data-localization="countryWarningMessage2"/>
    <label id="email-container">
      <span data-localization="email"/>
      <input id="email" type="email"/>
    </label>
    <label id="tel-container">
      <span data-localization="tel"/>
      <input id="tel" type="tel"/>
    </label>
  </form>
  <div id="controls-container">
    <button id="cancel" data-localization="cancelBtnLabel"/>
    <button id="save" disabled="disabled" data-localization="saveBtnLabel"/>
  </div>
  <script type="application/javascript"><![CDATA[
    "use strict";

    let {
      DEFAULT_REGION,
      getFormFormat,
      supportedCountries,
    } = FormAutofillUtils;
    let record = window.arguments && window.arguments[0];

    /* import-globals-from autofillEditForms.js */
    let fieldContainer = new EditAddress({
      form: document.getElementById("form"),
    }, record, {
      DEFAULT_REGION,
      getFormFormat: getFormFormat.bind(FormAutofillUtils),
      supportedCountries,
    });

    /* import-globals-from editDialog.js */
    new EditAddressDialog({
      title: document.querySelector("title"),
      fieldContainer,
      controlsContainer: document.getElementById("controls-container"),
      cancel: document.getElementById("cancel"),
      save: document.getElementById("save"),
    }, record);
  ]]></script>
</body>
</html>