Bug 413497 - Awesome bar should use a throbber to provide feedback that search is in progress. r=mano, ui-r=beltzner, a1.9=damons

browser/base/content/browser.css

@@ -23,6 +23,11 @@ toolbar[printpreview="true"] {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
 }
 
+#urlbar-throbber:not([busy="true"]),
+#urlbar-throbber[busy="true"] + #page-proxy-favicon {
+  display: none;
+} 
+
 /* ::::: Unified Back-/Forward Button ::::: */
 #back-forward-dropmarker > image ,
 #back-forward-dropmarker > label {

browser/base/content/browser.js

@@ -75,9 +75,7 @@ var gLastBrowserCharset = null;
 var gPrevCharset = null;
 var gURLBar = null;
 var gFindBar = null;
-var gProxyButton = null;
 var gProxyFavIcon = null;
-var gProxyDeck = null;
 var gNavigatorBundle = null;
 var gIsLoadingBlank = false;
 var gLastValidURLStr = "";
@@ -2108,6 +2106,28 @@ function UpdateUrlbarSearchSplitterState()
     splitter.parentNode.removeChild(splitter);
 }
 
+var LocationBarHelpers = {
+  _timeoutID: null,
+
+  _searchBegin: function LocBar_searchBegin() {
+    function delayedBegin(self) {
+      self._timeoutID = null;
+      document.getElementById("urlbar-throbber").setAttribute("busy", "true");
+    }
+
+    this._timeoutID = setTimeout(delayedBegin, 500, this);
+  },
+
+  _searchComplete: function LocBar_searchComplete() {
+    // Did we finish the search before delayedBegin was invoked?
+    if (this._timeoutID) {
+      clearTimeout(this._timeoutID);
+      this._timeoutID = null;
+    }
+    document.getElementById("urlbar-throbber").removeAttribute("busy");
+  }
+};
+
 function UpdatePageProxyState()
 {
   if (gURLBar && gURLBar.value != gLastValidURLStr)
@@ -2119,15 +2139,11 @@ function SetPageProxyState(aState)
   if (!gURLBar)
     return;
 
-  if (!gProxyButton)
-    gProxyButton = document.getElementById("page-proxy-button");
   if (!gProxyFavIcon)
     gProxyFavIcon = document.getElementById("page-proxy-favicon");
-  if (!gProxyDeck)
-    gProxyDeck = document.getElementById("page-proxy-deck");
 
   gURLBar.setAttribute("pageproxystate", aState);
-  gProxyButton.setAttribute("pageproxystate", aState);
+  gProxyFavIcon.setAttribute("pageproxystate", aState);
 
   // the page proxy state is set to valid via OnLocationChange, which
   // gets called when we switch tabs.
@@ -2151,21 +2167,17 @@ function PageProxySetIcon (aURL)
     PageProxyClearIcon();
   else if (gProxyFavIcon.getAttribute("src") != aURL)
     gProxyFavIcon.setAttribute("src", aURL);
-  else if (gProxyDeck.selectedIndex != 1)
-    gProxyDeck.selectedIndex = 1;
 }
 
 function PageProxyClearIcon ()
 {
-  if (gProxyDeck.selectedIndex != 0)
-    gProxyDeck.selectedIndex = 0;
-  if (gProxyFavIcon.hasAttribute("src"))
-    gProxyFavIcon.removeAttribute("src");
+  gProxyFavIcon.removeAttribute("src");
 }
 
+
 function PageProxyDragGesture(aEvent)
 {
-  if (gProxyButton.getAttribute("pageproxystate") == "valid") {
+  if (gProxyFavIcon.getAttribute("pageproxystate") == "valid") {
     nsDragAndDrop.startDrag(aEvent, proxyIconDNDObserver);
     return true;
   }
@@ -3123,9 +3135,7 @@ function BrowserToolboxCustomizeDone(aToolboxChanged)
   // Update global UI elements that may have been added or removed
   if (aToolboxChanged) {
     gURLBar = document.getElementById("urlbar");
-    gProxyButton = document.getElementById("page-proxy-button");
     gProxyFavIcon = document.getElementById("page-proxy-favicon");
-    gProxyDeck = document.getElementById("page-proxy-deck");
     gHomeButton.updateTooltip();
     gIdentityHandler._cacheElements();
     window.XULBrowserWindow.init();

browser/base/content/browser.xul

@@ -307,6 +307,8 @@
                  ontextentered="return handleURLBarCommand(param);"
                  ontextreverted="return handleURLBarRevert();"
                  pageproxystate="invalid"
+                 onsearchbegin="LocationBarHelpers._searchBegin();"
+                 onsearchcomplete="LocationBarHelpers._searchComplete();"
                  onfocus="document.getElementById('identity-box').style.MozUserFocus= 'normal'"
                  onblur="document.getElementById('identity-box').style.MozUserFocus = 'ignore';">
           <!-- Use onclick instead of normal popup= syntax since the popup
@@ -317,18 +319,14 @@
                onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
                onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
             <hbox align="center">
-              <deck id="page-proxy-deck" onclick="PageProxyClickHandler(event);">
-                <image id="page-proxy-button"
-                       ondraggesture="PageProxyDragGesture(event);"
-                       tooltiptext="&proxyIcon.tooltip;"/>
+              <stack id="page-proxy-stack"
+                     onclick="PageProxyClickHandler(event);"
+                     tooltiptext="&proxyIcon.tooltip;">
+                <image id="urlbar-throbber" busy="false"/>
                 <image id="page-proxy-favicon" validate="never"
                        ondraggesture="PageProxyDragGesture(event);"
-                       onload="this.parentNode.selectedIndex = 1;
-                               event.stopPropagation();"
-                       onerror="this.removeAttribute('src');
-                                this.parentNode.selectedIndex = 0;"
-                       tooltiptext="&proxyIcon.tooltip;"/>
-              </deck>
+                       onerror="this.removeAttribute('src');"/>
+              </stack>
               <label id="identity-icon-label"/>
             </hbox>
           </box>

browser/themes/gnomestripe/browser/browser.css

@@ -814,28 +814,28 @@ toolbar[iconsize="small"] #paste-button[disabled="true"] {
 }
 
 /* Favicon */
-#page-proxy-deck,
+#page-proxy-stack,
 #page-proxy-favicon,
-#page-proxy-button {
+#urlbar-throbber {
   width: 16px;
   height: 16px;
 }
 
-#page-proxy-deck {
+#page-proxy-stack {
   margin: 2px 3px;
 }
 
-#page-proxy-favicon {
-  list-style-image: none;
+#page-proxy-favicon:not([src]) {
+  list-style-image: url("chrome://global/skin/icons/folder-item.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-#page-proxy-button {
-  list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-  -moz-image-region: rect(0px, 16px, 16px, 0px);}
+#page-proxy-favicon[pageproxystate="invalid"] {
+  -moz-image-region: rect(16px, 16px, 32px, 0px);
+}
 
-#page-proxy-button[pageproxystate="invalid"] {
-  cursor: default;
-  -moz-image-region: rect(16px, 16px, 32px, 0px) !important;
+#urlbar-throbber {
+  list-style-image: url("chrome://global/skin/throbber/Throbber-small.gif");
 }
 
 /* Identity indicator */

browser/themes/pinstripe/browser/browser.css

@@ -652,36 +652,36 @@ toolbar[mode="icons"] #forward-button[open="true"] {
 
 /* ----- PAGE PROXY ICON ----- */
 
-#page-proxy-deck,
+#page-proxy-stack,
 #page-proxy-favicon,
-#page-proxy-button {
+#urlbar-throbber {
   width: 16px;
   height: 16px;
   margin: 0px;
   padding: 0px;
 }
 
-#page-proxy-deck {
+#page-proxy-stack {
   -moz-margin-start: 11px;
   margin-bottom: 1px;
   opacity: 1.0;
 }
 
-#page-proxy-favicon {
-  list-style-image: none;
-}
-
-#page-proxy-button {
+#page-proxy-favicon:not([src]) {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
 
-#page-proxy-button[pageproxystate="invalid"] {
-  cursor: default;
+#page-proxy-favicon[pageproxystate="invalid"] {
   opacity: 0.5;
 }
 
-#identity-box:active > #page-proxy-deck,
-#identity-box[open="true"] > #page-proxy-deck {
+#urlbar-throbber {
+  list-style-image: url("chrome://global/skin/icons/loading_16.png");
+}
+
+
+#identity-box:active > #page-proxy-stack,
+#identity-box[open="true"] > #page-proxy-stack {
   opacity: 0.75;
 }
 
@@ -1363,8 +1363,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   -moz-box-pack: center;
 }
 
-#identity-box.verifiedIdentity > hbox > #page-proxy-deck,
-#identity-box.verifiedDomain > hbox > #page-proxy-deck {
+#identity-box.verifiedIdentity > hbox > #page-proxy-stack,
+#identity-box.verifiedDomain > hbox > #page-proxy-stack {
   -moz-margin-start: 0;
 }
 

browser/themes/winstripe/browser/browser.css

@@ -1007,28 +1007,28 @@ toolbar[iconsize="small"] #paste-button:not([disabled="true"]):hover:active {
 
 /* ::::: page proxy icon ::::: */
 
-#page-proxy-deck,
+#page-proxy-stack,
 #page-proxy-favicon,
-#page-proxy-button {
+#urlbar-throbber {
   width: 16px;
   height: 16px;
 }
 
-#page-proxy-deck {
+#page-proxy-stack {
   margin: 2px 3px;
 }
 
-#page-proxy-favicon {
-  list-style-image: none;
+#page-proxy-favicon:not([src]) {
+  list-style-image: url("chrome://global/skin/icons/folder-item.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px)
 }
 
-#page-proxy-button {
-  list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-  -moz-image-region: rect(0px, 16px, 16px, 0px);}
+#page-proxy-favicon[pageproxystate="invalid"] {
+  -moz-image-region: rect(32px, 16px, 48px, 0px);
+}
 
-#page-proxy-button[pageproxystate="invalid"] {
-  cursor: default;
-  -moz-image-region: rect(32px, 16px, 48px, 0px) !important;
+#urlbar-throbber {
+  list-style-image: url("chrome://global/skin/throbber/Throbber-small.gif");
 }