Merge pull request #338 from demokritos/dev

Autohide statusbar in fullscreen.

Author: maxauthority

common/content/commandline.js

@@ -14,7 +14,7 @@
 let timeID = null;
 
 const CommandLine = Module("commandline", {
-    requires: ["config", "liberator", "modes", "services", "storage", "template", "util", "styles"],
+    requires: ["config", "liberator", "modes", "services", "storage", "template", "util"],
 
     init: function () {
         const self = this;
@@ -26,9 +26,6 @@ const CommandLine = Module("commandline", {
             storage.newArray(liberator.storeName(mode, isPrivate), { store: !isPrivate});
         }, this);
 
-        liberator.registerObserver("fullscreen", this.updateBottombar);
-        liberator.registerObserver("modeChange", this.updateBottombar);
-
         // Really inideal.
         let services = modules.services; // Storage objects are global to all windows, 'modules' isn't.
         storage.newObject("sanitize", function () {
@@ -183,9 +180,6 @@ const CommandLine = Module("commandline", {
 
         this._commandlineDisplayTimeoutID = null;
 
-        this._bottomBarHidden = false;
-        this._hlContentSepValue;
-
         this.registerCallback("submit", modes.EX, function (command) {
             if (self._commandlineDisplayTimeoutID) {
                 window.clearTimeout(self._commandlineDisplayTimeoutID);
@@ -566,38 +560,6 @@ const CommandLine = Module("commandline", {
         this._setPrompt("");
     },
 
-    /**
-     * Callback function for updating the Bottombar
-     */
-    updateBottombar: function (){
-        hide = window.fullScreen && liberator.mode == 1;
-        commandline.hideBottombar(hide);
-    },
-    /**
-     * Totally hides the vimperator bar at the bottom of the screen (for fullscreen mode)
-     */
-    hideBottombar: function (hide){
-        if( hide == this._bottomBarHidden)
-            return;
-        this._bottomBarHidden = hide;
-        let bb = document.getElementById('liberator-bottombar');
-        if (! bb)
-            return;
-
-        if (hide) {
-            this._hlContentSepValue = highlight.get('ContentSeparator').value;
-            bb.style.height = '0px';
-            bb.style.overflow = 'hidden';
-            highlight.set('ContentSeparator', 'display:none', true, false);
-        }
-        else {
-            bb.style.height = '';
-            bb.style.overflow = '';
-            highlight.set('ContentSeparator', this._hlContentSepValue, true, false);
-        }
-    },
-
-
     /**
      * Make the command line visible, hiding the status messages below
      *

common/content/events.js

@@ -1179,6 +1179,7 @@ const Events = Module("events", {
             this._fullscreen = window.fullScreen;
             liberator.triggerObserver("fullscreen", this._fullscreen);
             autocommands.trigger("Fullscreen", { state: this._fullscreen });
+            statusline.setVisibility(statusline.setVisibility.FULLSCREEN);
         }
     }
 }, {

common/content/modes.js

@@ -104,6 +104,7 @@ const Modes = Module("modes", {
                 if (oldExtended & modes.HINTS)
                     hints.hide();
                 commandline.close();
+                statusline.setVisibility(statusline.setVisibility.MODE_OFF);
                 break;
         }
 
@@ -119,6 +120,11 @@ const Modes = Module("modes", {
         } else if (newMode === modes.COMPOSE) {
             services.get("focus").clearFocus(window);
         }
+
+        if (newMode == modes.COMMAND_LINE) {
+            statusline.setVisibility(statusline.setVisibility.MODE_ON);
+        }
+
     },
 
     NONE: 0,

common/content/statusline.js

@@ -72,6 +72,8 @@ const StatusLine = Module("statusline", {
         // our status bar fields
         this._statusfields = {};
         this._statuslineWidget = document.getElementById("liberator-status");
+        // initialize setVisibility static variables
+        this.setVisibility(-1);
     },
 
     /**
@@ -123,6 +125,63 @@ const StatusLine = Module("statusline", {
         }
     },
 
+    // set the visibility of the statusline
+    setVisibility: function (request) {
+        if ( typeof this.setVisibility.currVisibility == 'undefined' ) {
+            this.setVisibility.currVisibility = true;
+            this.setVisibility.prevVisibility = true;
+            this.setVisibility.contentSeparator
+                = highlight.get('ContentSeparator').value;
+
+            // kinds of requests
+            this.setVisibility.MODE_ON  = 0;      // commandline active
+            this.setVisibility.MODE_OFF = 1;      // commandline inactive
+            this.setVisibility.TOGGLE = 2;        // toggle on or off
+            this.setVisibility.FULLSCREEN = 3;    // in or out of fullscreen
+        }
+
+        const bb = document.getElementById("liberator-bottombar");
+        const sv = this.setVisibility;
+
+        if (!bb) return;
+
+        var toggle_off = function () {
+            bb.style.height = '0px';
+            bb.style.overflow = 'hidden';
+            highlight.set('ContentSeparator', 'display: none;');
+        };
+
+        var toggle_on = function () {
+            bb.style.height = '';
+            bb.style.overflow = '';
+            highlight.set('ContentSeparator', sv.contentSeparatorValue);
+        };
+
+        switch (request) {
+        case sv.TOGGLE:
+            sv.currVisibility = !sv.currVisibility;
+            if (sv.currVisibility) toggle_on();
+            else toggle_off();
+            break;
+        case sv.FULLSCREEN:
+            if (window.fullScreen) {
+                sv.prevVisibility = sv.currVisibility;
+                sv.currVisibility = false;
+                toggle_off();
+            } else {
+                sv.currVisibility = sv.currVisibility || sv.prevVisibility;
+                if (sv.currVisibility) toggle_on();
+            }
+            break;
+        case sv.MODE_ON:
+            if (!sv.currVisibility) toggle_on();
+            break;
+        case sv.MODE_OFF:
+            if (!sv.currVisibility) toggle_off();
+            break;
+        }
+    },
+
     /**
      * Set any field in the statusbar
      *

vimperator/NEWS

@@ -8,6 +8,10 @@
     the window when closing the last tab, should set this option to false (either through about:config
     or with :set! browser.tabs.closeWindowWithLastTab=false)
     * gr toggles Reader View
+    * Autohide statusbar: When entering fullscreen mode, the statusbar is
+      hidden and temporarily showed up with command inputs. Also, Users can
+      manually hide and unhide the statusbar with a command:
+      :js statusline.setVisibility(statusline.setVisibility.TOGGLE)
 
 2015-08-25:
     * Version 3.10.1