How do you remove annoy bar when in Kiosk mode

[Spencer Shaw]

In Chrome OS

Launching a Kiosk App from the shelf in portrait mode

The app has an annoying grey bar at the top.

See screenshot

How do i remove it?

Manifest.json

{

"name":"Streetlike1",

"version":"0.2",

"manifest_version":2,

"minimum_chrome_version":"37.0.0.0",

"permissions":

[

"webview",

"power",

"storage",

"videoCapture",

"geolocation",

"pointerLock",

"system.display",

{

"fileSystem":["write","retainEntries","directory"]

},

"accessibilityFeatures.read",

"accessibilityFeatures.modify"

],

"app":{"background":{"scripts":["js/foam.js","js/cab.js","config.js","background_main.js"]}},

"kiosk_enabled":true,

  "kiosk_only": true,

"default_locale":"en",

"icons":{"128":"img/128.png"}

}

[iSh0w .]

In your background.js(that launches the window) have you tried adding 

````

frame: { type: "none" },

state: "maximized",

````

/iSh0w

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-app...@chromium.org.
To post to this group, send email to chromi...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

[Spencer Shaw]

Hi

I added to the background.js file as you suggested:

 frame: { type: "none" },
 state: "maximized",

but the app still has the annoying grey bar at the top

https://chrome.google.com/webstore/detail/fplbpbkfafbnbjaopohcmigfkmhcmcpg/publish-delayed

backgrround.js file
/**
 * Creates the window for the application.
 *
 * @see http://developer.chrome.com/trunk/apps/app.window.html
 */
var runApp = function() {
  if (chrome.power) {
    chrome.power.requestKeepAwake('display');
  }
  console.log(config);
  chrome.app.window.create(
      config ?
      'exported_app_view.html' :
      'designer_view.html',
      {
        id: 'KioskDesignerWindow',
        width: 1100,
        height: 720,
        minWidth: 800,
        minHeight: 600,       

        frame: { type: "none" },
        state: "maximized",

      },
      function(win) {
        if (!this.X) { return; }
        var window = win.contentWindow;
        window.onload = function() {
          this.$addWindow(window);
          var Y = this.X.subWindow(window, 'Kiosk Designer Window');
          this.DOM.init(Y);
        }.bind(this);
        win.onClosed.addListener(function() {
          this.$removeWindow(window);
        }.bind(this));
      }.bind(this));
}.bind(this);

/**
 * Listens for the app launching then creates the window
 *
 * @see http://developer.chrome.com/trunk/apps/app.runtime.html
 * @see http://developer.chrome.com/trunk/apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  runApp();
});


/**
 * Listens for the app restarting then re-creates the window.
 *
 * @see http://developer.chrome.com/trunk/apps/app.runtime.html
 */
chrome.app.runtime.onRestarted.addListener(function() {
  runApp();
});

[iSh0w .]

Strange, try removing

        width: 1100,
        height: 720,
        minWidth: 800,
        minHeight: 600,    

and also remove function(win) and try

you can close and minimize the window using 

chrome.app.window.get("KioskDesignerWindow").close();

chrome.app.window.get("KioskDesignerWindow").minimize();

Example: https://chrome.google.com/webstore/detail/l0ck-for-plex/idckmoepkiifambodeekdjjemiailhkj

only leave 

        frame: { type: "none" },
        state: "maximized",

/iSh0w

[Spencer Shaw]

Hi 

tried removing    

       width: 1100,
        height: 720,
        minWidth: 800,
        minHeight: 600,    

But it hasn't helped.

The example you gave is a paid for app so unable to see what you mean on the next bit. Would you have another example?

[iSh0w .]

Right at the end of this page https://developer.chrome.com/apps/manifest/kiosk_enabled there are samples!

did you try after removing

function(win) {
        if (!this.X) { return; }
        var window = win.contentWindow;
        window.onload = function() {
          this.$addWindow(window);
          var Y = this.X.subWindow(window, 'Kiosk Designer Window');
          this.DOM.init(Y);
        }.bind(this);
        win.onClosed.addListener(function() {
          this.$removeWindow(window);
        }.bind(this));
      }.bind(this));
}.bind(this);

/iSh0w

[Spencer Shaw]

Hi

I changed background_main.js to

var runApp = function() {

  if (chrome.power) {

    chrome.power.requestKeepAwake('display');

  }

  console.log(config);

  chrome.app.window.create(

      config ?

      'exported_app_view.html' :

      'designer_view.html',

      {

        id: 'KioskDesignerWindow',

        frame: { type: "none" },

state: "maximized",

      }

      );

}.bind(this);

Now however, there is just a window saying true.

[Spencer Shaw]

any further thoughts?

[Paul Canning]

I have a kiosk app that I have maximised on ChromeOS. I'll check my code tomorrow and respond.

[Paul Canning]

My background.js file looks like:

chrome.app.runtime.onLaunched.addListener(function() {

  chrome.power.requestKeepAwake('display');

  chrome.app.window.create('index.html', {

    'innerBounds': {

      'width': 1280,

      'height': 720,

 'minWidth': 1280,

 'minHeight': 720

    },

'resizable':true,

'state': 'fullscreen'

  });

});

[Aaron Vanderzwan]

I know this thread is old, but I just ran into this issue and fixed it by editing css/cab.css.  If you open css/cab.css and search for ".browser-controls"... change the padding from 3px to 0.

So:

.browser-controls{display:flex;direction:column;padding:3px}

becomes

.browser-controls{display:flex;direction:column;padding:0}

Thats what worked for me.

[Avi]

Aaron,

Thanks for this advice. I went in and changed the padding to 0 and it substantially decreased the size of the bar, but there was still some of it there. I then changed the padding to -5px, but I still have some of the bar showing. Any advice on how I might resolve this?