Bug 1374960 - [Form Autofill] Make small refinements for Manage Profiles and Edit Profile dialogs. r=lchang
authorScott Wu <scottcwwu@gmail.com>
Mon, 10 Jul 2017 14:45:53 +0800
changeset 369179 356bbf472e754bd735265ea24bfa355a777e5197
parent 369178 f4aacb756baca571a95f64462fb03be8371386eb
child 369180 6393471737b6813231d310bfd79f8890439aa4df
push id32192
push userkwierso@gmail.com
push dateTue, 18 Jul 2017 00:01:01 +0000
treeherdermozilla-central@efc0b1525edb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslchang
bugs1374960
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1374960 - [Form Autofill] Make small refinements for Manage Profiles and Edit Profile dialogs. r=lchang Small refinements for manage profiles and edit profile dialogs: - Make street address textarea 3 lines high - Disable user select highlight for labels and profile lists - Double clicking a profile should open the edit profile dialog MozReview-Commit-ID: 5uxYrdnfodn
browser/extensions/formautofill/content/editProfile.xhtml
browser/extensions/formautofill/content/manageProfiles.css
browser/extensions/formautofill/content/manageProfiles.js
browser/extensions/formautofill/skin/shared/editProfile.css
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/extensions/formautofill/content/editProfile.xhtml
+++ b/browser/extensions/formautofill/content/editProfile.xhtml
@@ -25,17 +25,17 @@
       <input id="family-name" type="text"/>
     </label>
     <label id="organization-container">
       <span>Company</span>
       <input id="organization" type="text"/>
     </label>
     <label id="street-address-container">
       <span>Street Address</span>
-      <textarea id="street-address"/>
+      <textarea id="street-address" rows="3"/>
     </label>
     <label id="address-level2-container">
       <span>City/Town</span>
       <input id="address-level2" type="text"/>
     </label>
     <label id="address-level1-container">
       <span>State/Province</span>
       <input id="address-level1" type="text"/>
--- a/browser/extensions/formautofill/content/manageProfiles.css
+++ b/browser/extensions/formautofill/content/manageProfiles.css
@@ -20,16 +20,17 @@ fieldset > legend {
   box-sizing: border-box;
   width: 100%;
   padding: 0.4em 0.7em;
   font-size: 0.9em;
   color: #808080;
   background-color: var(--in-content-box-background-hover);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px 2px 0 0;
+  -moz-user-select: none;
 }
 
 option:nth-child(even) {
   background-color: -moz-oddtreerow;
 }
 
 #profiles {
   font-size: 0.85em;
--- a/browser/extensions/formautofill/content/manageProfiles.js
+++ b/browser/extensions/formautofill/content/manageProfiles.js
@@ -234,17 +234,18 @@ ManageProfileDialog.prototype = {
    *
    * @param  {DOMEvent} event
    */
   handleClick(event) {
     if (event.target == this._elements.remove) {
       this.removeAddresses(this._selectedOptions.map(option => option.value));
     } else if (event.target == this._elements.add) {
       this.openEditDialog();
-    } else if (event.target == this._elements.edit) {
+    } else if (event.target == this._elements.edit ||
+               event.target.parentNode == this._elements.addresses && event.detail > 1) {
       this.openEditDialog(this._selectedOptions[0].address);
     }
   },
 
   /**
    * Handle key press events
    *
    * @param  {DOMEvent} event
@@ -269,24 +270,26 @@ ManageProfileDialog.prototype = {
 
   /**
    * Attach event listener
    */
   attachEventListeners() {
     window.addEventListener("unload", this, {once: true});
     window.addEventListener("keypress", this);
     this._elements.addresses.addEventListener("change", this);
+    this._elements.addresses.addEventListener("click", this);
     this._elements.controlsContainer.addEventListener("click", this);
     Services.obs.addObserver(this, "formautofill-storage-changed");
   },
 
   /**
    * Remove event listener
    */
   detachEventListeners() {
     window.removeEventListener("keypress", this);
     this._elements.addresses.removeEventListener("change", this);
+    this._elements.addresses.removeEventListener("click", this);
     this._elements.controlsContainer.removeEventListener("click", this);
     Services.obs.removeObserver(this, "formautofill-storage-changed");
   },
 };
 
 new ManageProfileDialog();
--- a/browser/extensions/formautofill/skin/shared/editProfile.css
+++ b/browser/extensions/formautofill/skin/shared/editProfile.css
@@ -21,16 +21,17 @@ label {
 }
 
 label > span {
   box-sizing: border-box;
   flex: 0 0 8em;
   padding-inline-end: 0.5em;
   align-self: center;
   text-align: end;
+  -moz-user-select: none;
 }
 
 input,
 select {
   box-sizing: border-box;
   flex: 1 0 auto;
   width: calc(50% - 8em);
 }
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -12,17 +12,18 @@
   font-size: 1.25rem;
 }
 
 * {
   -moz-user-select: text;
 }
 
 button,
-treecol {
+treecol,
+html|option {
   /* override the * rule */
   -moz-user-select: none;
 }
 
 #engineList treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/in-content/check.svg");
   -moz-context-properties: fill, stroke;