Bug 456077 - No mechanism to edit popup preferences [r=mark.finkle]

mobile/chrome/content/bindings/pageaction.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<!-- ***** BEGIN LICENSE BLOCK *****
+   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
+   -
+   - The contents of this file are subject to the Mozilla Public License Version
+   - 1.1 (the "License"); you may not use this file except in compliance with
+   - the License. You may obtain a copy of the License at
+   - http://www.mozilla.org/MPL/
+   -
+   - Software distributed under the License is distributed on an "AS IS" basis,
+   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+   - for the specific language governing rights and limitations under the
+   - License.
+   -
+   - The Original Code is Mozilla Mobile Browser.
+   -
+   - The Initial Developer of the Original Code is
+   - Mozilla Corporation.
+   - Portions created by the Initial Developer are Copyright (C) 2010
+   - the Initial Developer. All Rights Reserved.
+   -
+   - Contributor(s):
+   -
+   - Alternatively, the contents of this file may be used under the terms of
+   - either the GNU General Public License Version 2 or later (the "GPL"), or
+   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+   - in which case the provisions of the GPL or the LGPL are applicable instead
+   - of those above. If you wish to allow use of your version of this file only
+   - under the terms of either the GPL or the LGPL, and not to allow others to
+   - use your version of this file under the terms of the MPL, indicate your
+   - decision by deleting the provisions above and replace them with the notice
+   - and other provisions required by the LGPL or the GPL. If you do not delete
+   - the provisions above, a recipient may use your version of this file under
+   - the terms of any one of the MPL, the GPL or the LGPL.
+   -
+   - ***** END LICENSE BLOCK ***** -->
+
+<bindings xmlns="http://www.mozilla.org/xbl"
+          xmlns:xbl="http://www.mozilla.org/xbl"
+          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="pageaction" display="xul:hbox">
+    <content>
+      <xul:hbox align="center">
+        <xul:image xbl:inherits="src=image" class="pageaction-image"/>
+      </xul:hbox>
+      <xul:vbox pack="center" flex="1">
+        <xul:label class="pageaction-title" xbl:inherits="value=title" crop="end"/>
+        <xul:label class="pageaction-desc" value="" xbl:inherits="value=description" crop="end"/>
+      </xul:vbox>
+    </content>
+  </binding>
+
+</bindings>

mobile/chrome/content/browser-ui.js

@@ -377,6 +377,9 @@ var BrowserUI = {
     // tabs
     document.getElementById("tabs").resize();
 
+    // Site menu
+    PageActions.resize();
+
     // awesomebar
     let popup = document.getElementById("popup_autocomplete");
     popup.top = this.toolbarH;
@@ -611,24 +614,6 @@ var BrowserUI = {
     Browser.selectedTab = aTab;
   },
 
-  hideTabs: function hideTabs() {
-/*
-    if (ws.isWidgetVisible("tabs-container")) {
-      let widthOfTabs = document.getElementById("tabs-container").boxObject.width;
-      ws.panBy(widthOfTabs, 0, true);
-    }
-*/
-  },
-
-  hideControls: function hideControls() {
-/*
-    if (ws.isWidgetVisible("browser-controls")) {
-      let widthOfControls = document.getElementById("browser-controls").boxObject.width;
-      ws.panBy(-widthOfControls, 0, true);
-    }
-*/
-  },
-
   isTabsVisible: function isTabsVisible() {
     // The _1, _2 and _3 are to make the js2 emacs mode happy
     let [leftvis,_1,_2,_3] = Browser.computeSidebarVisibility();
@@ -863,6 +848,140 @@ var BrowserUI = {
   }
 };
 
+var PageActions = {
+  get _permissionManager() {
+    delete this._permissionManager;
+    return this._permissionManager = Cc["@mozilla.org/permissionmanager;1"].getService(Ci.nsIPermissionManager);
+  },
+
+  get _loginManager() {
+    delete this._loginManager;
+    return this._loginManager = Cc["@mozilla.org/login-manager;1"].getService(Ci.nsILoginManager);
+  },
+
+  // This is easy for an addon to add his own perm type here
+  _permissions: ["popup", "offline-app", "geo"],
+
+  _forEachPermissions: function _forEachPermissions(aHost, aCallback) {
+    let pm = this._permissionManager;
+    for (let i = 0; i < this._permissions.length; i++) {
+      let type = this._permissions[i];
+      if (!pm.testPermission(aHost, type))
+        continue;
+
+      let perms = pm.enumerator;
+      while (perms.hasMoreElements()) {
+        let permission = perms.getNext().QueryInterface(Ci.nsIPermission);
+        if (permission.host == aHost.asciiHost && permission.type == type)
+          aCallback(type);
+      }
+    }
+  },
+
+  updatePagePermissions: function updatePagePermissions() {
+    let host = Browser.selectedBrowser.currentURI;
+    let permissions = [];
+
+    this._forEachPermissions(host, function(aType) {
+      permissions.push(aType);
+    });
+
+    let lm = this._loginManager;
+    if (!lm.getLoginSavingEnabled(host.prePath)) {
+      permissions.push("password");
+    }
+
+    // Show the clear site preferences button if needed
+    if (permissions.length) {
+      let title = Elements.browserBundle.getString("pageactions.reset");
+      let description = [];
+      for each(permission in permissions)
+        description.push(Elements.browserBundle.getString("pageactions." + permission));
+
+      let node = this.appendItem(title, description.join(", "));
+      node.onclick = function(event) {
+        PageActions.clearPagePermissions();
+        PageActions.removeItem(node);
+      }
+    }
+
+    // Show the password button if needed
+    let logins = lm.getAllLogins({});
+    for each(login in logins) {
+      if (login.hostname != host.prePath)
+        continue;
+
+      let title = Elements.browserBundle.getString("pageactions.password.forget");
+      let node = this.appendItem(title, "");
+      node.onclick = function(event) {
+        lm.removeLogin(login);
+        PageActions.removeItem(node);
+      };
+    }
+  },
+
+  clearPagePermissions: function clearPagePermissions() {
+    let pm = this._permissionManager;
+    let host = Browser.selectedBrowser.currentURI;
+    this._forEachPermissions(host, function(aType) {
+      pm.remove(host.asciiHost, aType);
+    });
+
+    let lm = this._loginManager;
+    if (!lm.getLoginSavingEnabled(host.prePath))
+      lm.setLoginSavingEnabled(host.prePath, true);
+  },
+
+  appendItem: function appendItem(aTitle, aDesc, aImage) {
+    let container = document.getElementById("pageactions-container");
+    let item = document.createElement("pageaction");
+    item.setAttribute("title", aTitle);
+    item.setAttribute("description", aDesc);
+    if (aImage)
+      item.setAttribute("image", aImage);
+    container.appendChild(item);
+
+    this.resize();
+    container.hidden = !container.hasChildNodes();
+
+    return item;
+  },
+
+  removeItem: function removeItem(aItem) {
+    let container = document.getElementById("pageactions-container");
+    container.removeChild(aItem);
+
+    if (container.hasChildNodes())
+      this.resize();
+    container.hidden = !container.hasChildNodes();
+  },
+
+  removeAllItems: function removeAllItems() {
+    let container = document.getElementById("pageactions-container");
+    while(container.hasChildNodes())
+      this.removeItem(container.lastChild);
+  },
+
+  resize: function resize() {
+    let container = document.getElementById("pageactions-container");
+    if (container.hidden)
+      return;
+
+    // We manually size the arrowscrollbox
+    let childHeight = container.firstChild.getBoundingClientRect().height;
+    let linesCount = (window.innerHeight < window.innerWidth) ? Math.round(container.childNodes.length / 2)
+                                                              : container.childNodes.length;
+
+    const kMargin = 64;
+    let toolbarHeight = BrowserUI.toolbarH;
+    let identityHeight = document.getElementById("identity-popup-container").getBoundingClientRect().height;
+    let maxHeight = window.innerHeight - (toolbarHeight + identityHeight) - kMargin;
+
+    let additional = 50; // size of the scroll arrows + margins
+    container.style.height = Math.min(maxHeight, linesCount * childHeight + additional) + "px";
+  }
+}
+
 var NewTabPopup = {
   _timeout: 0,
   _tabs: [],

mobile/chrome/content/browser.css

@@ -193,5 +193,9 @@ richlistitem[type="message"]{
 }
 
 dialog {
-    -moz-binding: url("chrome://browser/content/bindings/dialog.xml#dialog");
+  -moz-binding: url("chrome://browser/content/bindings/dialog.xml#dialog");
+}
+
+pageaction {
+  -moz-binding: url("chrome://browser/content/bindings/pageaction.xml#pageaction");
 }

mobile/chrome/content/browser.js

@@ -1638,31 +1638,22 @@ const BrowserSearch = {
       return !this.engines.some(function (e) e.name == element.engine.title);
     }, this);
 
-    let container = document.getElementById('search-container');
-    let buttons = container.getElementsByAttribute("class", "search-engine-button button-dark");
-    for (let i=0; i<buttons.length; i++)
-      container.removeChild(buttons[i]);
-
-    if (newEngines.length == 0) {
-      container.collapsed = true;
+    if (newEngines.length == 0)
       return;
-    }
 
     // XXX limit to the first search engine for now
     for (let i = 0; i<1; i++) {
-      let button = document.createElement("button");
-      button.className = "search-engine-button button-dark";
-      button.setAttribute("oncommand", "BrowserSearch.addPermanentSearchEngine(this.engine);this.parentNode.collapsed=true;");
+      let engine = newEngines[i].engine;
+      let item = PageActions.appendItem(engine.title,
+                                        Elements.browserBundle.getString("pageactions.search.addNew"),
+                                        BrowserUI._favicon.src);
 
-      let engine = newEngines[i];
-      button.engine = engine.engine;
-      button.setAttribute("label", engine.engine.title);
-      button.setAttribute("image", BrowserUI._favicon.src);
-
-      container.appendChild(button);
+      item.engine = engine;
+      item.onclick = function() {
+        BrowserSearch.addPermanentSearchEngine(item.engine);
+        PageActions.removeItem(item);
+      };
     }
-
-    container.collapsed = false;
   },
 
   addPermanentSearchEngine: function (aEngine) {
@@ -2073,8 +2064,14 @@ IdentityHandler.prototype = {
     this._identityPopupContentSupp.textContent = supplemental;
     this._identityPopupContentVerif.textContent = verifier;
 
+    // clean all the previous result
+    PageActions.removeAllItems();
+
     // Update the search engines results
     BrowserSearch.updatePageSearchEngines();
+
+    // Update the per site permissions results
+    PageActions.updatePagePermissions();
   },
 
   show: function ih_show() {

mobile/chrome/content/browser.xul

@@ -307,9 +307,7 @@
         </vbox>
       </hbox>
 
-      <hbox id="search-container" align="center" flex="1">
-        <label id="search-engine-label-add" value="&searchEngine.addSearch;"/>
-      </hbox>
+      <arrowscrollbox id="pageactions-container" orient="vertical" class="window-width" hidden="true"/>
     </vbox>
 
     <vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">

mobile/chrome/jar.mn

@@ -22,6 +22,7 @@ chrome.jar:
   content/bindings/downloads.xml       (content/bindings/downloads.xml)
   content/bindings/console.xml         (content/bindings/console.xml)
   content/bindings/dialog.xml          (content/bindings/dialog.xml)
+  content/bindings/pageaction.xml      (content/bindings/pageaction.xml)
   content/bindings/setting.xml         (content/bindings/setting.xml)
   content/browser.css                  (content/browser.css)
   content/cursor.css                   (content/cursor.css)

mobile/locales/en-US/chrome/browser.dtd

@@ -65,8 +65,6 @@
 <!ENTITY noResults.label           "No results">
 <!ENTITY allBookmarks.label        "See all bookmarks">
 
-<!ENTITY searchEngine.addSearch    "Add Search:">
-
 <!ENTITY bookmarkPopup.label       "Page Bookmarked">
 <!ENTITY bookmarkRemove.label      "Remove">
 <!ENTITY bookmarkEdit.label        "Edit">

mobile/locales/en-US/chrome/browser.properties

@@ -118,3 +118,12 @@ offlineApps.notNow=Not Now
 
 # Bookmark List
 bookmarkList.desktop=Desktop Bookmarks
+
+# Page Actions
+pageactions.search.addNew=Add a New Search Engine
+pageactions.password.forget=Forget Password
+pageactions.reset=Clear Site Preferences
+pageactions.geo=Geolocation
+pageactions.popup=Popup
+pageactions.offline-app=Offline Storage
+pageactions.password=Password

mobile/themes/hildon/browser.css

@@ -844,29 +844,72 @@ box[type="documenttab"]:only-child .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/lock-40.png");
 }
 
-/* search popup   ---------------------------------------------------------- */
-#search-container {
+/* Page Actions popup   ---------------------------------------------------- */
+#pageactions-container {
   border: 2px solid transparent;
   -moz-border-top-colors: #212429 #52555a;
-  padding: 8px; /* core spacing */
-  margin-top: 8px;
-}
-
-#search-engine-label-add {
-  font-size: 18px;
-}
-
-#search-buttons,
-.search-engine-button {
+  padding: 0 8px;
   -moz-user-focus: ignore;
 }
 
-.search-engine-button .button-icon {
+#pageactions-container .scrollbox-innerbox {
+  display: inline-block;
+}
+
+#pageactions-container .autorepeatbutton-down {
+  list-style-image: url(images/arrowdowndark-16.png);
+}
+
+#pageactions-container .autorepeatbutton-up {
+  list-style-image: url(images/arrowupdark-16.png);
+}
+
+/* force the autorepeat buttons to create a 'padding' when collapsed */
+#pageactions-container autorepeatbutton[collapsed="true"],
+#pageactions-container autorepeatbutton[disabled="true"] {
+  visibility: hidden;
+}
+
+pageaction {
+  width: 50%;
+  height: 64px;
+  border-width: 10px;
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
+}
+
+@media all and (orientation: portrait) {
+  pageaction {
+    width :100%;
+  }
+}
+
+pageaction:active:hover {
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
+}
+
+pageaction .pageaction-image {
   width: 32px;
   height: 32px;
   -moz-margin-end: 8px;
 }
 
+pageaction:not([image]) .pageaction-image {
+  width: 0px;
+}
+
+pageaction .pageaction-title {
+  font-size: 18px !important;
+}
+
+pageaction .pageaction-desc {
+  font-size: 14px !important;
+  color: grey;
+}
+
+pageaction .pageaction-desc[value=""] {
+  display: none;
+}
+
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
   font-weight: bold;

mobile/themes/hildon/jar.mn

@@ -24,6 +24,8 @@ chrome.jar:
   images/arrowdown-16.png              (images/arrowdown-16.png)
   images/arrowleftdark-16.png          (images/arrowleftdark-16.png)
   images/arrowrightdark-16.png         (images/arrowrightdark-16.png)
+  images/arrowupdark-16.png            (images/arrowupdark-16.png)
+  images/arrowdowndark-16.png          (images/arrowdowndark-16.png)
   images/ratings-18.png                (images/ratings-18.png)
   images/favicon-default-30.png        (images/favicon-default-30.png)
   images/star-40.png                   (images/star-40.png)

mobile/themes/wince/browser-high.css

@@ -105,9 +105,20 @@
   background: url("images/leftcapSSL-active-64.png");
 }
 
-.search-engine-button .button-icon {
+pageaction {
+  height: 64px;
+  border-width: 10px;
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-64.png") 10 repeat repeat;
+}
+
+pageaction:active:hover {
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-64.png") 10 repeat repeat;
+}
+
+pageaction .pageaction-image {
   width: 32px;
   height: 32px;
+  -moz-margin-end: 8px;
 }
 
 #urlbar-throbber[loading] {

mobile/themes/wince/browser-low.css

@@ -104,9 +104,20 @@
   background: url("images/leftcapSSL-active-36.png");
 }
 
-.search-engine-button .button-icon {
+pageaction {
+  height: 36px;
+  border-width: 6px;
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-default-36.png") 6 repeat repeat;
+}
+
+pageaction:active:hover {
+  -moz-border-image: url("chrome://browser/skin/images/toolbarbutton-active-36.png") 6 repeat repeat;
+}
+
+pageaction .pageaction-image {
   width: 16px;
   height: 16px;
+  -moz-margin-end: 4px;
 }
 
 #urlbar-throbber[loading] {

mobile/themes/wince/browser.css

@@ -523,23 +523,59 @@ box[type="documenttab"]:only-child .documenttab-close {
   font-weight: bold;
 }
 
-/* search popup   ---------------------------------------------------------- */
-#search-container {
+/* Page Actions popup   ----------------------------------------------------- */
+#pageactions-container {
   border: 0.2mm solid transparent;
   -moz-border-top-colors: #212429 #52555a;
-  padding: 1.1mm; /* core spacing */
-  margin-top: 1.1mm; /* core spacing */
-}
-
-#search-engine-label-add {
-  font-size: 80%;
-}
-
-#search-buttons,
-.search-engine-button {
+  padding: 0 1.1mm; /* core spacing */
   -moz-user-focus: ignore;
 }
 
+#pageactions-container .scrollbox-innerbox {
+  display: inline-block;
+}
+
+#pageactions-container .autorepeatbutton-down {
+  list-style-image: url(images/arrowdowndark-16.png);
+}
+
+#pageactions-container .autorepeatbutton-up {
+  list-style-image: url(images/arrowupdark-16.png);
+}
+
+/* force the autorepeat buttons to create a 'padding' when collapsed */
+#pageactions-container autorepeatbutton[collapsed="true"],
+#pageactions-container autorepeatbutton[disabled="true"] {
+  visibility: hidden;
+}
+
+pageaction {
+  width: 50%;
+}
+
+@media all and (orientation: portrait) {
+  pageaction {
+    width :100%;
+  }
+}
+
+pageaction:not([image]) .pageaction-image {
+  width: 0;
+}
+
+pageaction .pageaction-title {
+  font-size: 9pt !important;
+}
+
+pageaction .pageaction-desc[value=""] {
+  display: none;
+}
+
+pageaction .pageaction-desc {
+  font-size: 8pt !important;
+  color: grey;
+}
+
 /* Preferences window   ---------------------------------------------------- */
 .settings-title {
   font-weight: bold;