Bug 628654 - Show connecting / waiting / loading status messages in small overlay on top of content at bottom of screen. r=gavin a=b

browser/base/content/browser.css

@@ -513,3 +513,26 @@ window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-m
 browser[tabmodalPromptShowing] {
   -moz-user-focus: none !important;
 }
+
+/* Status panel */
+
+statuspanel {
+  -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel");
+  position: relative;
+  margin-top: -3em;
+  pointer-events: none; /* don't block the content across the whole browser width */
+}
+
+statuspanel[label=""] {
+  visibility: collapse;
+}
+
+statuspanel[mirror] {
+  -moz-box-pack: end;
+}
+
+.statuspanel-inner {
+  height: 3em;
+  -moz-box-align: end;
+  pointer-events: auto;
+}

browser/base/content/browser.js

@@ -4026,6 +4026,10 @@ var XULBrowserWindow = {
     delete this.reloadCommand;
     return this.reloadCommand = document.getElementById("Browser:Reload");
   },
+  get statusTextField () {
+    delete this.statusTextField;
+    return this.statusTextField = document.getElementById("statusbar-display");
+  },
   get isImage () {
     delete this.isImage;
     return this.isImage = document.getElementById("isImage");
@@ -4051,19 +4055,23 @@ var XULBrowserWindow = {
     delete this.throbberElement;
     delete this.stopCommand;
     delete this.reloadCommand;
+    delete this.statusTextField;
     delete this.statusText;
   },
 
   setJSStatus: function (status) {
     this.jsStatus = status;
+    this.updateStatusField();
   },
 
   setJSDefaultStatus: function (status) {
     this.jsDefaultStatus = status;
+    this.updateStatusField();
   },
 
   setDefaultStatus: function (status) {
     this.defaultStatus = status;
+    this.updateStatusField();
   },
 
   setOverLink: function (url, anchorElt) {
@@ -4074,6 +4082,17 @@ var XULBrowserWindow = {
                         encodeURIComponent);
       gURLBar.setOverLink(url);
     }
+  }, 
+
+  updateStatusField: function () {
+    var text = this.status || this.jsStatus || this.jsDefaultStatus || this.defaultStatus;
+
+    // check the current value so we don't trigger an attribute change
+    // and cause needless (slow!) UI updates
+    if (this.statusText != text) {
+      this.statusTextField.label = text;
+      this.statusText = text;
+    }
   },
 
   // Called before links are navigated to to allow us to retarget them if needed.
@@ -4177,19 +4196,12 @@ var XULBrowserWindow = {
 
           if (location.spec != "about:blank") {
             switch (aStatus) {
-              case Components.results.NS_BINDING_ABORTED:
-                msg = gNavigatorBundle.getString("nv_stopped");
-                break;
               case Components.results.NS_ERROR_NET_TIMEOUT:
                 msg = gNavigatorBundle.getString("nv_timeout");
                 break;
             }
           }
         }
-        // If msg is false then we did not have an error (channel may have
-        // been null, in the case of a stray image load).
-        if (!msg && (!location || location.spec != "about:blank"))
-          msg = gNavigatorBundle.getString("nv_done");
 
         this.status = "";
         this.setDefaultStatus(msg);
@@ -4371,6 +4383,7 @@ var XULBrowserWindow = {
 
   onStatusChange: function (aWebProgress, aRequest, aStatus, aMessage) {
     this.status = aMessage;
+    this.updateStatusField();
   },
 
   // Properties used to cache security state used to update the UI

browser/base/content/browser.xul

@@ -981,6 +981,7 @@
                   contentcontextmenu="contentAreaContextMenu"
                   autocompletepopup="PopupAutoComplete"
                   onclick="return contentAreaClick(event, false);"/>
+      <statuspanel id="statusbar-display" label=""/>
     </vbox>
     <vbox id="browser-border-end" hidden="true" layer="true"/>
   </hbox>

browser/base/content/tabbrowser.xml

@@ -3692,4 +3692,38 @@
     </handlers>
   </binding>
 
+  <binding id="statuspanel" display="xul:hbox">
+    <content>
+      <xul:hbox class="statuspanel-inner">
+        <xul:label class="statuspanel-label"
+                   xbl:inherits="value=label,mirror"
+                   flex="1"
+                   crop="end"/>
+      </xul:hbox>
+    </content>
+
+    <implementation>
+      <property name="label">
+        <setter>
+          if (!this.label)
+            this.removeAttribute("mirror");
+          this.setAttribute("label", val);
+          return val;
+        </setter>
+        <getter>
+          return this.getAttribute("label");
+        </getter>
+      </property>
+    </implementation>
+
+    <handlers>
+      <handler event="mouseover">
+        if (this.hasAttribute("mirror"))
+          this.removeAttribute("mirror");
+        else
+          this.setAttribute("mirror", "true");
+      </handler>
+    </handlers>
+  </binding>
+
 </bindings>

browser/themes/gnomestripe/browser/browser.css

@@ -1831,3 +1831,28 @@ panel[dimmed="true"] {
   margin-top: -2px;
   margin-bottom: -2px;
 }
+
+/* Status panel */
+
+.statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background: -moz-linear-gradient(white, #ddd);
+  border: 1px none #ccc;
+  border-top-style: solid;
+  color: #333;
+}
+
+.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
+.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
+.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}

browser/themes/pinstripe/browser/browser.css

@@ -2387,3 +2387,28 @@ panel[dimmed="true"] {
 #addonbar-closebutton:hover:active {
   list-style-image: url("chrome://global/skin/icons/closetab-active.png");
 }
+
+/* Status panel */
+
+.statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background: -moz-linear-gradient(white, #ddd);
+  border: 1px none #ccc;
+  border-top-style: solid;
+  color: #333;
+}
+
+.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
+.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
+.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}

browser/themes/winstripe/browser/browser.css

@@ -2293,3 +2293,28 @@ panel[dimmed="true"] {
 #addonbar-closebutton:hover:active {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
+
+/* Status panel */
+
+.statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background: -moz-linear-gradient(white, #ddd);
+  border: 1px none #ccc;
+  border-top-style: solid;
+  color: #333;
+}
+
+.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
+.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
+.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}