Bug 514217: Apply new awesomebar format/styling to bookmarks manager, r=mfinkle
authorVivien Nicolas <21@vingtetun.org>
Wed, 09 Sep 2009 21:47:37 -0400
changeset 65533 2e90c1acedf1e8d25f9187992b0d72bace78b338
parent 65532 96285fccbe50e33b9c4e82ce63c7fbdab1c8a8b3
child 65534 4db200c7ddd0c4979c417e95db21bf116401e77a
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs514217
Bug 514217: Apply new awesomebar format/styling to bookmarks manager, r=mfinkle
mobile/chrome/content/bindings.xml
mobile/locales/en-US/chrome/browser.dtd
mobile/themes/hildon/browser.css
mobile/themes/hildon/platform.css
mobile/themes/wince/browser-high.css
mobile/themes/wince/browser-low.css
mobile/themes/wince/browser.css
mobile/themes/wince/platform.css
--- a/mobile/chrome/content/bindings.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -474,37 +474,43 @@
       <method name="startEditing">
         <parameter name="autoSelect"/>
         <body>
           <![CDATA[
             if (!this._itemId)
               return;
 
             this._isEditing = true;
-            if (this.control)
+            if (this.control) {
+              this.setAttribute("selected", "true");
+              this.control.scrollBoxObject.ensureElementIsVisible(this);
               this.control.activeItem = this;
+            }
 
             this.updateFields();
 
             this._nameField.focus();
             if (autoSelect)
               this._nameField.select();
+
           ]]>
         </body>
       </method>
       <method name="stopEditing">
         <parameter name="shouldSave"/>
         <body>
           <![CDATA[
             if (shouldSave)
               this.save();
 
             this._isEditing = false;
-            if (this.control)
+            if (this.control) {
+              this.control.activeItem.removeAttribute("selected");
               this.control.activeItem = null;
+            }
 
             this.updateFields();
 
             let event = document.createEvent("Events");
             event.initEvent("close", true, false);
             this.dispatchEvent(event);
           ]]>
         </body>
@@ -528,33 +534,36 @@
                     tagsToAdd.push(tags[i]);
                 }
 
                 if (tagsToAdd.length > 0)
                   PlacesUtils.tagging.tagURI(this._uri, tagsToAdd);
                 if (tagsToRemove.length > 0)
                   PlacesUtils.tagging.untagURI(this._uri, tagsToRemove);
               }
+              this.setAttribute('tags', this.tags);
 
               // If the URI was updated change it in the bookmark, but don't
               // allow a blank URI. Revert to previous URI if blank.
               let spec = this.spec;
               if (spec && this._uri.spec != spec) {
                 try {
                   this._uri = this._ioService.newURI(spec, null, null);
                   PlacesUtils.bookmarks.changeBookmarkURI(this._itemId, this._uri);
+                  this.setAttribute('uri', this.spec);
                 }
                 catch (e) { }
               }
               if (spec != this._uri.spec)
                 spec = this.spec = this._uri.spec;
             }
 
             // Update the name and use the URI if name is blank
             this.name = this.name || spec;
+            this.setAttribute('title', this.name);
             PlacesUtils.bookmarks.setItemTitle(this._itemId, this.name);
           ]]>
         </body>
       </method>
       <method name="remove">
         <body>
           <![CDATA[
             PlacesUtils.bookmarks.removeItem(this._itemId);
@@ -601,94 +610,73 @@
             // implemented by sub classes
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="place-item" extends="chrome://browser/content/bindings.xml#place-base">
-    <content>
-      <xul:image anonid="favicon" class="bookmark-item-image"/>
-      <xul:grid flex="1">
-        <xul:columns>
-          <xul:column flex="1"/>
-          <xul:column/>
-        </xul:columns>
-        <xul:rows>
-          <xul:row align="center">
-            <xul:textbox anonid="name" readonly="true" xbl:inherits="value=title"/>
-            <xul:hbox align="center" anonid="edit-controls" class="bookmark-manage-controls">
-              <xul:image anonid="close-button" class="close-button"
-                         onmousedown="document.getBindingParent(this).remove()"/>
-              <xul:button anonid="folder-button" label="&editBookmarkMove.label;"
-                          oncommand="document.getBindingParent(this).move()"/>
-              <xul:button anonid="edit-button" label="&editBookmarkEdit.label;"
-                          oncommand="document.getBindingParent(this).startEditing()"/>
-              <xul:button anonid="done-button" label="&editBookmarkDone.label;" hidden="true"
-                          oncommand="document.getBindingParent(this).stopEditing(true)"/>
-            </xul:hbox>
-          </xul:row>
-          <xul:row anonid="uri-row" align="center" hidden="true">
+    <content align="center">
+      <xul:hbox flex="1">
+        <xul:image anonid="favicon" class="bookmark-item-image"/>
+
+        <xul:vbox flex="1">
+          <xul:hbox anonid="description-box" flex="1" align="center">
+            <xul:vbox flex="1">
+              <xul:label class="bookmark-item-name" xbl:inherits="value=title"/>
+              <xul:label class="bookmark-item-uri" xbl:inherits="value=uri" crop="center"/>
+            </xul:vbox>
+            <xul:label class="bookmark-item-tags" xbl:inherits="value=tags"/>
+          </xul:hbox>
+
+          <xul:vbox flex="1" anonid="bookmark-edit-textboxes" class="bookmark-edit-textboxes" hidden="true">
+            <xul:textbox anonid="name" xbl:inherits="value=title"/>
             <xul:textbox anonid="uri" xbl:inherits="value=uri"/>
-          </xul:row>
-          <xul:row anonid="tags-row" align="center" hidden="true">
             <xul:textbox anonid="tags" xbl:inherits="value=tags" emptytext="&editBookmarkTags.label;"/>
-          </xul:row>
-        </xul:rows>
-      </xul:grid>
+          </xul:vbox>
+        
+          <xul:hbox anonid="bookmark-manage-controls" align="center" class="bookmark-manage-controls" hidden="true">
+            <xul:button anonid="close-button" class="bookmark-close-button"
+                        label="&editBookmarkRemove.label;" onmousedown="document.getBindingParent(this).remove()"/>
+            <xul:button anonid="folder-button" class="bookmark-folder-button" 
+                        label="&editBookmarkMove.label;" oncommand="document.getBindingParent(this).move()"/>
+            <xul:spacer flex="1"/>
+            <xul:button anonid="done-button" label="&editBookmarkDone.label;"
+                        oncommand="document.getBindingParent(this).stopEditing(true)"/>
+          </xul:hbox>
+        </xul:vbox>
+      </xul:hbox>
     </content>
+
     <implementation>
       <method name="updateFields">
         <body>
           <![CDATA[
-            this._nameField.readOnly = !this._isEditing;
-            document.getAnonymousElementByAttribute(this, "anonid", "edit-button").hidden = this._isEditing;
-            document.getAnonymousElementByAttribute(this, "anonid", "done-button").hidden = !this._isEditing;
+            document.getAnonymousElementByAttribute(this, "anonid", "description-box").hidden = this._isEditing;
 
-            document.getAnonymousElementByAttribute(this, "anonid", "uri-row").hidden = !this._isEditing;
-            document.getAnonymousElementByAttribute(this, "anonid", "tags-row").hidden = !this._isEditing;
+            document.getAnonymousElementByAttribute(this, "anonid", "bookmark-edit-textboxes").hidden = !this._isEditing;
+            document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage-controls").hidden = !this._isEditing;
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
-  <binding id="place-folder" extends="chrome://browser/content/bindings.xml#place-base">
-    <content align="center">
-      <xul:image anonid="favicon" class="bookmark-folder-image"/>
-      <xul:grid flex="1">
-        <xul:columns>
-          <xul:column flex="1"/>
-          <xul:column/>
-        </xul:columns>
-        <xul:rows>
-          <xul:row align="center">
-            <xul:textbox anonid="name" readonly="true" xbl:inherits="value=title"/>
-            <xul:hbox align="center" anonid="edit-controls" class="bookmark-manage-controls">
-              <xul:image anonid="close-button" class="close-button"
-                         onmousedown="document.getBindingParent(this).remove()"/>
-              <xul:button anonid="folder-button" label="&editBookmarkMove.label;"
-                          oncommand="document.getBindingParent(this).move()"/>
-              <xul:button anonid="edit-button" label="&editBookmarkEdit.label;"
-                          oncommand="document.getBindingParent(this).startEditing()"/>
-              <xul:button anonid="done-button" label="&editBookmarkDone.label;" hidden="true"
-                          oncommand="document.getBindingParent(this).stopEditing(true)"/>
-            </xul:hbox>
-          </xul:row>
-        </xul:rows>
-      </xul:grid>
-    </content>
+  <binding id="place-folder" extends="chrome://browser/content/bindings.xml#place-item">
     <implementation>
       <method name="updateFields">
         <body>
           <![CDATA[
-            this._nameField.readOnly = !this._isEditing;
-            document.getAnonymousElementByAttribute(this, "anonid", "edit-button").hidden = this._isEditing;
-            document.getAnonymousElementByAttribute(this, "anonid", "done-button").hidden = !this._isEditing;
+            document.getAnonymousElementByAttribute(this, "anonid", "description-box").hidden = this._isEditing;
+
+            this._uriField.hidden = true;
+            this._tagsField.hidden = true;
+            document.getAnonymousElementByAttribute(this, "anonid", "bookmark-edit-textboxes").hidden = !this._isEditing;
+            document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage-controls").hidden = !this._isEditing;
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="place-label" extends="chrome://browser/content/bindings.xml#place-base">
     <content align="center">
@@ -915,19 +903,24 @@
         </body>
       </method>
 
       <method name="_fireOpen">
         <parameter name="aEvent"/>
         <parameter name="aItem"/>
         <body>
           <![CDATA[
-            if (aEvent.target.isEditing || aEvent.originalTarget.localName == "button")
+            if (aEvent.originalTarget.localName == "button" || this._activeItem == aItem)
               return;
 
+            if (this._manageUI) {
+              aItem.startEditing();
+              return;
+            }
+
             if (aItem.type == "folder") {
               this.openFolder(aItem.itemId);
             }
             else {
               // Force the item to be active
               this._activeItem = aItem;
 
               // This is a callback used to forward information to some
--- a/mobile/locales/en-US/chrome/browser.dtd
+++ b/mobile/locales/en-US/chrome/browser.dtd
@@ -18,17 +18,17 @@
 <!ENTITY selectAll.label       "Select All">
 <!ENTITY noSuggestions.label   "(No suggestions)">
 <!ENTITY addToDictionary.label "Add to Dictionary">
 
 <!ENTITY bookmarksHeader.label     "Bookmarks">
 <!ENTITY bookmarksManage.label     "Manage">
 <!ENTITY foldersHeader.label       "Folders">
 
-<!ENTITY editBookmarkEdit.label    "Edit">
+<!ENTITY editBookmarkRemove.label  "Remove">
 <!ENTITY editBookmarkMove.label    "Move">
 <!ENTITY editBookmarkDone.label    "Done">
 <!ENTITY editBookmarkTags.label    "Add tags here">
 
 <!ENTITY helperApp.prompt          "What would you like to do with">
 <!ENTITY helperApp.open            "Open">
 <!ENTITY helperApp.save            "Save">
 <!ENTITY helperApp.nothing         "Nothing">
--- a/mobile/themes/hildon/browser.css
+++ b/mobile/themes/hildon/browser.css
@@ -455,54 +455,82 @@ toolbarbutton.page-button {
 
 .place-list-children {
   -moz-appearance: none;
   border: none !important;
   padding: 0;
 }
 
 .bookmark-folder, .bookmark-item {
-  padding: 0.5mm 0.2mm;
+  padding: 0.5mm 1.1mm;
   border-bottom: 0.1mm solid rgb(207,207,207);
   min-height: 14.4mm; /* row size */
-  -moz-box-align: center;
+}
+
+.bookmark-manage-controls {
+  padding-top: 1.1mm;
+  padding-bottom: 1.1mm;
+}
+
+.bookmark-edit-textboxes {
+  padding-top: 1.1mm;
 }
 
-.bookmark-folder textbox[readonly="true"], .bookmark-item textbox[readonly="true"] {
-  -moz-appearance: none !important;
-  background-color: transparent;
-  border: none !important;
-  -moz-user-select: none !important;
+.bookmark-item-image {
+  max-height: 16px;
+  max-width: 16px;
+  margin: 1.6mm 4mm 5mm 2mm;
+}
+
+placeitem[selected] .bookmark-item-image {
+  margin-top: 4mm;
+}
+
+.bookmark-item-name {
+  font-size: 15.75pt !important;
+}
+
+.bookmark-item-uri {
+  font-size: 10pt !important;
+  color: blue;
+}
+
+.bookmark-item-tags {
+  color: black;
+  margin-right: 2.2mm;
+  font-size: 11.75pt !important;
+  font-weight: lighter;
 }
 
 placelabel.bookmark-folder {
   border-bottom: 0.1mm solid rgb(255,255,255);
 }
 
-.bookmark-item-image, .bookmark-folder-image {
-  width: 24px;
-  height: 24px;
+/* folders have a fixed image */
+placeitem[type=folder] .bookmark-item-image {
+  list-style-image: url("chrome://browser/skin/images/folder-30.png");
 }
 
-/* folders have a fixed image */
-.bookmark-folder-image {
-  list-style-image: url("chrome://browser/skin/images/folder-30.png");
+/* hide the unuseful fields for folder */
+placeitem[type=folder] .bookmark-item-uri,
+placeitem[type=folder] .bookmark-item-tags {
+  visibility: hidden;
 }
 
 /* control the manage controls */
-.bookmark-manage-controls, .bookmark-folder-new {
+.bookmark-folder-new {
   visibility: collapse;
 }
 
-placelist[ui="manage"] .bookmark-manage-controls,
-placelist[ui="manage"] .bookmark-folder-new,
-placeitem[ui="manage"] .bookmark-manage-controls {
+placelist[ui="manage"] .bookmark-folder-new {
   visibility: visible;
 }
 
+placeitem[ui="manage"] .bookmark-close-button,
+placeitem[ui="manage"] .bookmark-folder-button,
 placeitem[ui="manage"] .bookmark-item-image {
   visibility: collapse;
 }
 
 /* be consistent with the size of placeitem */
 placelabel {
   min-height: 14.4mm; /* row size */
   -moz-box-align: center;
--- a/mobile/themes/hildon/platform.css
+++ b/mobile/themes/hildon/platform.css
@@ -59,16 +59,20 @@ label {
 
 /* Override any OS inverse themes */
 richlistbox,
 textbox {
   color: black;
   background-color: white;
 }
 
+textbox[isempty="true"] {
+  color: gray;
+}
+
 /* panels ------------------------------------------------------------------ */
 .panel-dark {
   color: white;
   background-color: #36373b;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {
--- a/mobile/themes/wince/browser-high.css
+++ b/mobile/themes/wince/browser-high.css
@@ -237,17 +237,17 @@
 #tool-folders-close {
   min-height: 0 !important;
   min-width: 0 !important;
   margin-top: -40px; /* keep pixels */
   list-style-image: url("chrome://browser/skin/images/fullscreen-up-40.png");
 }
 
 /* folders have a fixed image */
-.bookmark-folder-image {
+placeitem[type=folder] .bookmark-item-image {
   list-style-image: url("chrome://browser/skin/images/folder-30.png");
 }
 
 .close-button {
   -moz-appearance: none;
   border: none;
   margin: 0;
   padding: 0;
--- a/mobile/themes/wince/browser-low.css
+++ b/mobile/themes/wince/browser-low.css
@@ -236,17 +236,17 @@
 #tool-folders-close {
   min-height: 0 !important;
   min-width: 0 !important;
   margin-top: -18px; /* keep pixels */
   list-style-image: url("chrome://browser/skin/images/fullscreen-up-24.png");
 }
 
 /* folders have a fixed image */
-.bookmark-folder-image {
+placeitem[type=folder] .bookmark-item-image {
   list-style-image: url("chrome://browser/skin/images/folder-24.png");
 }
 
 .close-button {
   -moz-appearance: none;
   border: none;
   margin: 0;
   padding: 0;
--- a/mobile/themes/wince/browser.css
+++ b/mobile/themes/wince/browser.css
@@ -242,49 +242,77 @@ toolbarbutton.page-button {
 
 .place-list-children {
   -moz-appearance: none;
   border: none !important;
   padding: 0;
 }
 
 .bookmark-folder, .bookmark-item {
-  padding: 0.25mm 0.1mm;
+  padding: 0.25mm 0.55mm;
   border-bottom: 0.05mm solid rgb(207,207,207);
   min-height: 7.2mm; /* row size */
-  -moz-box-align: center;
+}
+
+.bookmark-manage-controls {
+  padding-top: 0.55mm;
+  padding-bottom: 0.55mm;
+}
+
+.bookmark-edit-textboxes {
+  padding-top: 0.55mm;
 }
 
-.bookmark-folder textbox[readonly="true"], .bookmark-item textbox[readonly="true"] {
-  -moz-appearance: none !important;
-  background-color: transparent;
-  border: none !important;
-  -moz-user-select: none !important;
+.bookmark-item-image {
+  max-height: 16px;
+  max-width: 16px;
+  margin: 1.6mm 1.5mm 0mm 2mm;
+}
+
+placeitem[selected] .bookmark-item-image {
+  margin-top: 3mm;
+}
+
+.bookmark-item-name {
+  font-size: 9pt !important;
+}
+
+.bookmark-item-uri {
+  font-size: 8pt !important;
+  color: blue;
+}
+
+.bookmark-item-tags {
+  color: black;
+  margin-right: 1.1mm;
+  font-size: 8pt !important;
+  font-weight: lighter;
 }
 
 placelabel.bookmark-folder {
   border-bottom: 0.05mm solid rgb(255,255,255);
 }
 
-.bookmark-item-image, .bookmark-folder-image {
-  width: 24px;
-  height: 24px;
+/* hide the unuseful fields for folder */
+placeitem[type=folder] .bookmark-item-uri,
+placeitem[type=folder] .bookmark-item-tags {
+  visibility: hidden;
 }
 
 /* control the manage controls */
-.bookmark-manage-controls, .bookmark-folder-new {
+.bookmark-folder-new {
   visibility: collapse;
 }
 
-placelist[ui="manage"] .bookmark-manage-controls,
-placelist[ui="manage"] .bookmark-folder-new,
-placeitem[ui="manage"] .bookmark-manage-controls {
+placelist[ui="manage"] .bookmark-folder-new {
   visibility: visible;
 }
 
+placeitem[ui="manage"] .bookmark-close-button,
+placeitem[ui="manage"] .bookmark-folder-button,
 placeitem[ui="manage"] .bookmark-item-image {
   visibility: collapse;
 }
 
 /* be consistent with the size of placeitem */
 placelabel {
   min-height: 7.2mm; /* row size */
   -moz-box-align: center;
--- a/mobile/themes/wince/platform.css
+++ b/mobile/themes/wince/platform.css
@@ -42,16 +42,20 @@
 
 /* Override any OS inverse themes */
 richlistbox,
 textbox {
   color: black;
   background-color: white;
 }
 
+textbox[isempty="true"] {
+  color: gray;
+}
+
 /* panels ------------------------------------------------------------------ */
 .panel-dark {
   color: white;
   background-color: #36373b;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {