Electron Resizing a Frameless Window

Question

I'm working on an app that has a frameless window, and has a html5 video element that displays the webcam filling the document.body at 100%.

I have my mainWindow set to resizable mainWindow.isResizable(true) but I can't resize the window.

When I debug with chrome dev tools I can only resize the window the side chrome dev tools is on. (not sure if it helps, but I'm developing this on an Ubuntu 14.04 based Linux distro called Elementary OS Freya)

Can someone explain why I can't resize my resizable window even though I have my mainWindow set to resizable?

In addition what can I do to solve this problem?

var app = require("app");
var BrowserWindow = require("browser-window");

var mainWindow = null;

// Quit when all windows are closed.
app.on("window-all-closed", function() {
  app.quit();
});

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width: 640,
    height: 480,
    frame: false
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Set Window Resizable
  mainWindow.isResizable(true);

  mainWindow.focus();
});

Answer 1

I managed to figure out what the problem was, and come to find out it wasn't even a javascript problem, All I had to do is mod my CSS for what I want draggable and what I don't.

Because my html and body are also set to draggable that's why I couldn't resize. Here's my solution...

I had to make a new element (div.dialog) and encase my content inside of that. Along with the following CSS.

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.5);
  -webkit-app-region: no-drag;
}
.tips {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  -webkit-app-region: drag;
}

HTML:

<div class="dialog" data-action="toggle">
  <header class="tips" data-action="toggle">
    <div>
      <nav>
        [Space] for Snapshot<br>
        [Esc] to Close
        <p data-action="toggle-tips">[Tab] to Toggle Dialog</p>
      </nav>
    </div>
  </header>
</div>