From 9d820a4e0871670b3a53180e0bb7ad461ab61263 Mon Sep 17 00:00:00 2001
From: Neil Deakin <neil@mozilla.com>
Date: Mon, 15 Dec 2008 11:44:27 -0500
Subject: [PATCH] Bug 465293, edit bookmark ui, r=mfinkle

--HG--
rename : mobile/chrome/content/urlbar.xml => mobile/chrome/content/bindings.xml
---
 .../content/{urlbar.xml => bindings.xml}      | 171 +++++++++++++-
 mobile/chrome/content/browser-ui.js           | 217 +++++++++---------
 mobile/chrome/content/browser.css             |   8 +-
 mobile/chrome/content/browser.xul             |  45 +---
 mobile/chrome/jar.mn                          |   2 +-
 mobile/chrome/skin/browser.css                |   2 +-
 mobile/locales/en-US/chrome/browser.dtd       |   9 +-
 7 files changed, 298 insertions(+), 156 deletions(-)
 rename mobile/chrome/content/{urlbar.xml => bindings.xml} (52%)

diff --git a/mobile/chrome/content/urlbar.xml b/mobile/chrome/content/bindings.xml
similarity index 52%
rename from mobile/chrome/content/urlbar.xml
rename to mobile/chrome/content/bindings.xml
index e6a0a75755f..4707df0bf42 100644
--- a/mobile/chrome/content/urlbar.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0"?>
-<!DOCTYPE bindings PUBLIC "-//MOZILLA//DTD XBL V1.0//EN" "http://www.mozilla.org/xbl">
+
+<!DOCTYPE bindings [
+<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
+%browserDTD;
+]>
 
 <bindings
     xmlns="http://www.mozilla.org/xbl"
@@ -223,4 +227,169 @@
     </handlers>
   </binding>
 
+  <binding id="editbookmark">
+    <content flex="1">
+      <grid flex="1"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+        <columns>
+          <column/>
+          <column flex="1"/>
+          <column/>
+        </columns>
+        <rows>
+          <row align="center">
+            <label value="&editBookmarkName.label;"/>
+            <textbox anonid="name" xbl:inherits="value=name"/>
+            <button label="&editBookmarkDone.label;"
+                    oncommand="document.getBindingParent(this).stopEditing(true)"/>
+          </row>
+          <row align="center">
+            <label value="&editBookmarkURI.label;"/>
+            <textbox anonid="uri" xbl:inherits="value=uri"/>
+            <button class="close-button"
+                    oncommand="document.getBindingParent(this).remove()"/>
+          </row>
+          <row align="center">
+            <label value="&editBookmarkTags.label;"/>
+            <textbox anonid="tags" xbl:inherits="value=tags"/>
+          </row>
+        </rows>
+      </grid>
+    </content>
+    <implementation>
+      <field name="_bookmarkItem"/>
+      <field name="_bookmarkURI"/>
+      <field name="_nameField">
+        document.getAnonymousElementByAttribute(this, "anonid", "name");
+      </field>
+      <field name="_uriField">
+        document.getAnonymousElementByAttribute(this, "anonid", "uri");
+      </field>
+      <field name="_tagsField">
+        document.getAnonymousElementByAttribute(this, "anonid", "tags");
+      </field>
+      <property name="name" onget="return this._nameField.value"
+                            onset="this._nameField.value = val; return val;"/>
+      <property name="uri" onget="return this._uriField.value"
+                               onset="this._uriField.value = val; return val;"/>
+      <property name="tags" onget="return this._tagsField.value"
+                            onset="this._tagsField.value = val; return val;"/>
+      <property name="tagsAsArray" readonly="true">
+        <getter>
+          <![CDATA[
+            // we don't require the leading space (after each comma)
+            var tags = this.tags.split(",");
+            for (var i = 0; i < tags.length; i++) {
+              // remove trailing and leading spaces
+              tags[i] = tags[i].trim();
+
+              // remove empty entries from the array.
+              if (tags[i] == "") {
+                tags.splice(i, 1);
+                i--;
+              }
+            }
+
+            return tags;
+          ]]>
+        </getter>
+      </property>
+      <method name="startEditing">
+        <parameter name="uri"/>
+        <body>
+          <![CDATA[
+            var item = PlacesUtils.getMostRecentBookmarkForURI(uri);
+            if (item == -1)
+              return;
+
+            this._bookmarkItem = item;
+            this._bookmarkURI = uri;
+
+            this.name = PlacesUtils.bookmarks.getItemTitle(item);
+            this.uri = uri.spec;
+            var currentTags = PlacesUtils.tagging.getTagsForURI(uri, {});
+            this.tags = currentTags.join(", ");
+
+            this._nameField.focus();
+          ]]>
+        </body>
+      </method>
+      <method name="stopEditing">
+        <parameter name="shouldSave"/>
+        <body>
+          <![CDATA[
+            if (shouldSave)
+              this.save();
+
+            let event = document.createEvent("Events");
+            event.initEvent("close", true, false);
+            this.dispatchEvent(event);
+          ]]>
+        </body>
+      </method>
+      <method name="save">
+        <body>
+          <![CDATA[
+            var item = this._bookmarkItem;
+            var uri = this._bookmarkURI;
+
+            // Update the name
+            PlacesUtils.bookmarks.setItemTitle(this._bookmarkItem, this.name);
+
+            // Update the tags
+            var currentTags = PlacesUtils.tagging.getTagsForURI(uri, {});
+            var tags = this.tagsAsArray;
+            if (tags.length > 0 || currentTags.length > 0) {
+              var tagsToRemove = [];
+              var tagsToAdd = [];
+              var i;
+              for (i = 0; i < currentTags.length; i++) {
+                if (tags.indexOf(currentTags[i]) == -1)
+                  tagsToRemove.push(currentTags[i]);
+              }
+              for (i = 0; i < tags.length; i++) {
+                if (currentTags.indexOf(tags[i]) == -1)
+                  tagsToAdd.push(tags[i]);
+              }
+
+              if (tagsToAdd.length > 0)
+                PlacesUtils.tagging.tagURI(uri, tagsToAdd);
+              if (tagsToRemove.length > 0)
+                PlacesUtils.tagging.untagURI(uri, tagsToRemove);
+            }
+
+            if (uri.spec != this.uri) {
+              var ios = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
+              var newuri = ios.newURI(this.uri, null, null);
+
+              PlacesUtils.bookmarks.changeBookmarkURI(item, newuri);
+            }
+          ]]>
+        </body>
+      </method>
+      <method name="remove">
+        <body>
+          <![CDATA[
+            PlacesUtils.bookmarks.removeItem(this._bookmarkItem);
+
+            // If this was the last bookmark (excluding tag-items and livemark
+            // children, see getMostRecentBookmarkForURI) for the bookmark's url,
+            // remove the url from tag containers as well.
+            var uri = this._bookmarkURI;
+            if (PlacesUtils.getMostRecentBookmarkForURI(uri) == -1) {
+              var tags = PlacesUtils.tagging.getTagsForURI(uri, {});
+              PlacesUtils.tagging.untagURI(uri, tags);
+            }
+
+            let event = document.createEvent("Events");
+            event.initEvent("RemoveBookmark", true, false);
+            this.dispatchEvent(event);
+
+            this.stopEditing(false);
+          ]]>
+        </body>
+      </method>
+    </implementation>
+  </binding>
+  
 </bindings>
diff --git a/mobile/chrome/content/browser-ui.js b/mobile/chrome/content/browser-ui.js
index 69cfa0a4366..cfcafe76136 100644
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -78,6 +78,7 @@ var BrowserUI = {
   _autocompleteNavbuttons : null,
   _favicon : null,
   _faviconLink : null,
+  _editingBookmark : null,
 
   _titleChanged : function(aDocument) {
     var browser = Browser.currentBrowser;
@@ -338,13 +339,7 @@ var BrowserUI = {
     forward.setAttribute("disabled", !browser.canGoForward);
 
     // Check for a bookmarked page
-    var star = document.getElementById("tool-star");
-    if (PlacesUtils.getMostRecentBookmarkForURI(browser.currentURI) != -1) {
-      star.setAttribute("starred", "true");
-    }
-    else {
-      star.removeAttribute("starred");
-    }
+    this.updateStar();
 
     var urlString = this.getDisplayURI(browser);
     if (urlString == "about:blank") {
@@ -459,7 +454,7 @@ var BrowserUI = {
       this._showToolbar(false);
       this._editToolbar(false);
 
-      window.addEventListener("keypress", this.closePopup, false);
+      window.addEventListener("keypress", this.closeBookmarks, false);
 
       bookmark.hidden = true;
       panelUI.hidden = true;
@@ -502,33 +497,116 @@ var BrowserUI = {
     for (var i=0; i<aItems.length; i++) {
       let node = aItems[i];
       let listItem = document.createElement("richlistitem");
-      listItem.setAttribute("class", "urllist-item");
+      listItem.align = "center";
+      listItem.className = "urllist-item";
       listItem.setAttribute("value", node.uri);
 
-      let box = document.createElement("vbox");
-      box.setAttribute("pack", "center");
       let image = document.createElement("image");
       image.setAttribute("class", "urllist-image");
       let icon = node.icon ? node.icon.spec : fis.getFaviconImageForPage(ios.newURI(node.uri, null, null)).spec
       image.setAttribute("src", icon);
-      box.appendChild(image);
-      listItem.appendChild(box);
+      listItem.appendChild(image);
+
+      let box = document.createElement("hbox");
+      box.align = "center";
+      box.flex = 1;
 
       let label = document.createElement("label");
-      label.setAttribute("class", "urllist-text");
+      label.className = "urllist-text";
       label.setAttribute("value", node.title);
-      label.setAttribute("flex", "1");
       label.setAttribute("crop", "end");
-      listItem.appendChild(label);
+      label.flex = 1;
+      box.appendChild(label);
+
+      let button = document.createElement("button");
+      button.setAttribute("label", "Edit");
+      box.appendChild(button);
+
+      listItem.appendChild(box);
       list.appendChild(listItem);
-      listItem.addEventListener("click", function() { BrowserUI.goToURI(node.uri); }, true);
+
+      button.addEventListener("command", BrowserUI.editBookmark, false);
+      box.addEventListener("click", BrowserUI.goToBookmark, false);
     }
 
     list.focus();
   },
 
-  closePopup : function(aEvent)
-  {
+  updateStar : function() {
+    var star = document.getElementById("tool-star");
+    if (PlacesUtils.getMostRecentBookmarkForURI(Browser.currentBrowser.currentURI) != -1)
+      star.setAttribute("starred", "true");
+    else
+      star.removeAttribute("starred");
+  },
+
+  goToBookmark : function(aEvent) {
+    if (aEvent.originalTarget.localName == "button")
+      return;
+
+    var list = document.getElementById("urllist-items")
+    BrowserUI.goToURI(list.selectedItem.value)
+  },
+
+  editBookmark : function(aEvent) {
+    var selectedItem = document.getElementById("urllist-items").selectedItem;
+    if (!selectedItem)
+      return;
+
+    if (BrowserUI._editingBookmark)
+      BrowserUI._editingBookmark.lastChild.stopEditing(true);
+    BrowserUI._editingBookmark = selectedItem;
+
+    selectedItem.childNodes[1].collapsed = true; // the hbox
+
+    var bookmarkEdit = document.createElement("editbookmark");
+    selectedItem.appendChild(bookmarkEdit);
+
+    var ios = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
+    var uri = ios.newURI(selectedItem.value, null, null);
+
+    bookmarkEdit.startEditing(uri);
+    bookmarkEdit.addEventListener("RemoveBookmark", BrowserUI.removeBookmark, false);
+  },
+
+  stopEditBookmark : function() {
+    var item = this._editingBookmark;
+    if (!item)
+      return;
+
+    var edititem = item.lastChild;
+    edititem.removeEventListener("RemoveBookmark", BrowserUI.removeBookmark, false);
+    item.value = edititem.uri;
+
+    item.childNodes[1].firstChild.value = edititem.name; // the bookmark title label
+    item.childNodes[1].collapsed = false;  // the hbox
+    this._editingBookmark.removeChild(edititem);
+    this._editingBookmark = null;
+
+    this.updateStar();
+    document.getElementById("urllist-items").focus();
+  },
+
+  removeBookmark : function() {
+    if (BrowserUI._editingBookmark) {
+      var list = document.getElementById("urllist-items");
+      list.removeItemAt(list.getIndexOfItem(BrowserUI._editingBookmark));
+      BrowserUI._editingBookmark = null;
+    }
+    BrowserUI.updateStar();
+  },
+
+  closeBookmarks : function(aEvent) {
+    if (aEvent.type == "keypress" && aEvent.keyCode != aEvent.DOM_VK_ESCAPE)
+      return;
+
+    if (BrowserUI._editingBookmark)
+      BrowserUI._editingBookmark.lastChild.stopEditing(true);
+    BrowserUI.show(UIMODE_NONE);
+    document.getElementById("urllist-items").blur();
+  },
+
+  closePopup : function(aEvent) {
     if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE)
       BrowserUI.show(UIMODE_NONE);
   },
@@ -658,7 +736,7 @@ var BrowserUI = {
 
         if (PlacesUtils.getMostRecentBookmarkForURI(bookmarkURI) == -1) {
           var bookmarkId = PlacesUtils.bookmarks.insertBookmark(PlacesUtils.bookmarks.bookmarksMenuFolder, bookmarkURI, PlacesUtils.bookmarks.DEFAULT_INDEX, bookmarkTitle);
-          document.getElementById("tool-star").setAttribute("starred", "true");
+          BrowserUI.updateStar();
 
           var ios = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
           var favicon = document.getElementById("urlbar-favicon");
@@ -705,108 +783,21 @@ var BrowserUI = {
 };
 
 var BookmarkHelper = {
-  _item : null,
-  _uri : null,
-
-  _getTagsArrayFromTagField : function() {
-    // we don't require the leading space (after each comma)
-    var tags = document.getElementById("bookmark-tags").value.split(",");
-    for (var i=0; i<tags.length; i++) {
-      // remove trailing and leading spaces
-      tags[i] = tags[i].replace(/^\s+/, "").replace(/\s+$/, "");
-
-      // remove empty entries from the array.
-      if (tags[i] == "") {
-        tags.splice(i, 1);
-        i--;
-      }
-    }
-    return tags;
-  },
-
   edit : function(aURI) {
-    this._uri = aURI;
-    this._item = PlacesUtils.getMostRecentBookmarkForURI(this._uri);
-
-    if (this._item != -1) {
-      document.getElementById("bookmark-name").value = PlacesUtils.bookmarks.getItemTitle(this._item);
-      var currentTags = PlacesUtils.tagging.getTagsForURI(this._uri, {});
-      document.getElementById("bookmark-tags").value = currentTags.join(", ");
-      document.getElementById("bookmark-folder").value = ""; // XXX either use this or remove it
-    }
-    document.getElementById("bookmark-name").focus();
-
+    var bookmarkEdit = document.getElementById("bookmark-edit");
+    bookmarkEdit.startEditing(aURI);
     window.addEventListener("keypress", this, true);
-    document.getElementById("bookmark-form").addEventListener("change", this, true);
-  },
-
-  remove : function() {
-    if (this._item) {
-      // Remove bookmark itself
-      PlacesUtils.bookmarks.removeItem(this._item);
-
-      // If this was the last bookmark (excluding tag-items and livemark
-      // children, see getMostRecentBookmarkForURI) for the bookmark's url,
-      // remove the url from tag containers as well.
-      if (PlacesUtils.getMostRecentBookmarkForURI(this._uri) == -1) {
-        var tags = PlacesUtils.tagging.getTagsForURI(this._uri, {});
-        PlacesUtils.tagging.untagURI(this._uri, tags);
-      }
-
-      document.getElementById("tool-star").removeAttribute("starred");
-    }
-    this.close();
-  },
-
-  save : function() {
-    if (this._item) {
-      // Update the name
-      PlacesUtils.bookmarks.setItemTitle(this._item, document.getElementById("bookmark-name").value);
-
-      // Update the tags
-      var tags = this._getTagsArrayFromTagField();
-      var currentTags = PlacesUtils.tagging.getTagsForURI(this._uri, {});
-      if (tags.length > 0 || currentTags.length > 0) {
-        var tagsToRemove = [];
-        var tagsToAdd = [];
-        var i;
-        for (i=0; i<currentTags.length; i++) {
-          if (tags.indexOf(currentTags[i]) == -1)
-            tagsToRemove.push(currentTags[i]);
-        }
-        for (i=0; i<tags.length; i++) {
-          if (currentTags.indexOf(tags[i]) == -1)
-            tagsToAdd.push(tags[i]);
-        }
-
-        if (tagsToAdd.length > 0)
-          PlacesUtils.tagging.tagURI(this._uri, tagsToAdd);
-        if (tagsToRemove.length > 0)
-          PlacesUtils.tagging.untagURI(this._uri, tagsToRemove);
-      }
-
-    }
   },
 
   close : function() {
+    var bookmarkEdit = document.getElementById("bookmark-edit");
     window.removeEventListener("keypress", this, true);
-    document.getElementById("bookmark-form").removeEventListener("change", this, true);
-
-    this._item = null;
     BrowserUI.show(UIMODE_NONE);
+    BrowserUI.updateStar();
   },
 
   handleEvent: function (aEvent) {
-    switch (aEvent.type) {
-      case "keypress":
-        if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) {
-          document.getElementById("bookmark-close").focus();
-          this.close();
-        }
-        break;
-      case "change":
-        this.save();
-        break;
-    }
+    if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE)
+      document.getElementById("bookmark-edit").stopEditing(true);
   }
 };
diff --git a/mobile/chrome/content/browser.css b/mobile/chrome/content/browser.css
index c01b3e93a43..788fe3d0b53 100644
--- a/mobile/chrome/content/browser.css
+++ b/mobile/chrome/content/browser.css
@@ -1,5 +1,5 @@
 #urlbar-edit {
-    -moz-binding: url("chrome://browser/content/urlbar.xml#autocomplete-aligned");
+    -moz-binding: url("chrome://browser/content/bindings.xml#autocomplete-aligned");
 }
 
 #tabs {
@@ -36,5 +36,9 @@ notification button {
 }
 
 #popup_autocomplete {
-  -moz-binding: url("chrome://browser/content/urlbar.xml#popup_autocomplete");
+  -moz-binding: url("chrome://browser/content/bindings.xml#popup_autocomplete");
+}
+
+editbookmark {
+  -moz-binding: url("chrome://browser/content/bindings.xml#editbookmark");
 }
diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul
index 7752c21aa1a..449b4baaebf 100644
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -334,12 +334,14 @@
     </hbox>
 
     <vbox id="urllist-container" hidden="true" style="-moz-stack-sizing: ignore;" top="0" left="0">
-      <hbox id="urllist-items-container" flex="1">
+      <vbox id="urllist-items-container" flex="1">
         <richlistbox id="urllist-items" flex="1"
-                     onkeypress="if (event.keyCode == event.DOM_VK_RETURN) BrowserUI.goToURI(this.selectedItem.value)"/>
-      </hbox>
+                     onkeypress="if (event.target == this &amp;&amp; event.keyCode == event.DOM_VK_RETURN)
+                                   BrowserUI.goToBookmark(this)"
+                     onclose="BrowserUI.stopEditBookmark()"/>
+      </vbox>
       <hbox pack="end">
-        <button id="urllist-close" oncommand="BrowserUI.show(UIMODE_NONE)"/>
+        <button class="close-button" oncommand="BrowserUI.closeBookmarks(event)"/>
       </hbox>
     </vbox>
 
@@ -351,36 +353,11 @@
     </vbox>
 
     <vbox id="bookmark-container" hidden="true" style="-moz-stack-sizing: ignore;" top="60" left="0">
-      <vbox id="bookmark-form">
-        <hbox align="start">
-          <image id="bookmark-image" src="chrome://browser/skin/images/starred48.png"/>
-          <grid id="bookmark-grid" flex="1">
-            <columns>
-              <column/>
-              <column flex="1"/>
-            </columns>
-            <rows>
-              <row>
-                <label value="&bookmarkName.label;" for="bookmark-name"/>
-                <textbox id="bookmark-name"/>
-              </row>
-              <row>
-                <label value="&bookmarkFolder.label;" for="bookmark-folder"/>
-                <textbox id="bookmark-folder"/>
-              </row>
-              <row>
-                <label value="&bookmarkTags.label;" for="bookmark-tags"/>
-                <textbox id="bookmark-tags"/>
-              </row>
-            </rows>
-          </grid>
-        </hbox>
-        <hbox id="bookmark-buttons">
-          <button label="&bookmarkRemove.label;" oncommand="BookmarkHelper.remove()"/>
-          <spacer flex="1"/>
-          <button id="bookmark-close" oncommand="BookmarkHelper.close()"/>
-        </hbox>
-      </vbox>
+      <hbox id="bookmark-form" align="start">
+        <image id="bookmark-image" src="chrome://browser/skin/images/starred48.png"/>
+        <editbookmark id="bookmark-edit" flex="1" onclose="BookmarkHelper.close()"
+                      onchange="this.save()"/>
+      </hbox>
     </vbox>
 
   </stack>
diff --git a/mobile/chrome/jar.mn b/mobile/chrome/jar.mn
index a4b0cc74b3d..08ba9cf3914 100644
--- a/mobile/chrome/jar.mn
+++ b/mobile/chrome/jar.mn
@@ -15,7 +15,7 @@ browser.jar:
   content/browser.js                   (content/browser.js)
   content/browser-ui.js                (content/browser-ui.js)
   content/commandUtil.js               (content/commandUtil.js)
-  content/urlbar.xml                   (content/urlbar.xml)
+  content/bindings.xml                 (content/bindings.xml)
   content/tabs.xml                     (content/tabs.xml)
   content/notification.xml             (content/notification.xml)
   content/browser.css                  (content/browser.css)
diff --git a/mobile/chrome/skin/browser.css b/mobile/chrome/skin/browser.css
index 96aa063c1f7..00a516f4a5d 100644
--- a/mobile/chrome/skin/browser.css
+++ b/mobile/chrome/skin/browser.css
@@ -353,7 +353,7 @@ toolbarbutton.panel-button {
   padding: 8px;
 }
 
-#urllist-close {
+.close-button {
   -moz-appearance: none;
   border: none;
   margin: 0;
diff --git a/mobile/locales/en-US/chrome/browser.dtd b/mobile/locales/en-US/chrome/browser.dtd
index 367bd336d07..730ce07fdce 100644
--- a/mobile/locales/en-US/chrome/browser.dtd
+++ b/mobile/locales/en-US/chrome/browser.dtd
@@ -32,10 +32,11 @@
 <!ENTITY noSuggestions.label   "(No suggestions)">
 <!ENTITY addToDictionary.label "Add to Dictionary">
 
-<!ENTITY bookmarkName.label    "Name:">
-<!ENTITY bookmarkFolder.label  "Folder:">
-<!ENTITY bookmarkTags.label    "Tags:">
-<!ENTITY bookmarkRemove.label  "Remove Bookmark">
+<!ENTITY editBookmarkName.label    "Name:">
+<!ENTITY editBookmarkURI.label     "Address:">
+<!ENTITY editBookmarkTags.label    "Tags:">
+<!ENTITY bookmarkRemove.label      "Remove Bookmark">
+<!ENTITY editBookmarkDone.label    "Done">
 
 <!ENTITY findOnCmd.label     "Find in This Page…">
 <!ENTITY findOnCmd.accesskey "F">