Added support for opening notes in new windows. Fixes #69

[derekbeau]

@klauscfhq I went ahead and attempted to add this feature since it's something I could use when on Ubuntu. This is my first time working with Electron, so comments and suggestions are requested.

I read/scanned through the documentation, then gave it a try. I may have missed something that I'm unaware of with window management (see Questions below), but my tests looked promising. They behave as expected for macOS close/quit behavior, respecting mainWindow as the main window.

Let me know what changes you would like to see before considering a merge and I'll be happy to make them 👍

---

Tested on: macOS 10.13.4 and Ubuntu 18.04. (I don't currently have a Windows environment set up to test this on).

• Added "New Window" button to top of note frames. Decided against adding to the notes sidebar because that would require adding several elements with event listeners to the DOM.
• Changed menu.js actions to affect the focused window.
• Refactored createMainWIndow() into New, Main, and Sub variations.
• New windows open at (50, -50) offset from the window that spawned it.
• New windows open with a width that approximates the mainWindow note frame (subtracting the sidebar widths).
• New windows auto hide the sidebar to be consistent with the native desktop apps.
• Went with show: true immediately on new windows because waiting for them to be ready still produced a momentary blank window and the lag time from click to open could cause people to click multiple times.

Fix

• Changed ipcMain.on('export-as-pdf') to get title from noteWindow rather than global mainWindow

Potential Changes/Additions

• Set window title to note title. This would be better usability in OS window lists.
• Add a draggable region when sidebar is hidden on macOS. Currently have to exit focus mode to move the note window. This problem doesn't exist on Ubuntu where the window chrome is present.
• Use an icon instead of the "New Window" button

Omissions

• Toggling the theme only changes the focused window. Any new windows inherit the last set theme. This could be seen as a feature, allowing the user to choose a theme for each note window. The alternative, if I'm not mistaken, would be to loop through all windows during a toggle.

Questions

• When a new window is opened, the spawning window is sent two close events with wasClean: true, but then followed by Unrecoverable close condition, not retrying. This doesn't seem to affect the functionality, but worth bringing up. Any suggestions on this?

[klaudiosinani]

Awesome work! A couple of changes and it is good to be merged : )

[klaudiosinani]

It would be better to change the text to something like Open Note, so it can more be more intuitive:

span.appendChild(document.createTextNode('Open Note'));

[klaudiosinani]

Looks nice!

[klaudiosinani]

Here, we can avoid to directly override the defaultOptions object, and use it along with options to merge them against an empty object target:

const tuskWindow = new BrowserWindow(Object.assign({}, defaultOptions, options));

This way, after the merge, defaultOptions with still hold its original attributes.

[klaudiosinani]

Here, we can remove options = options || {};, and do the same as before:

function createSubWindow(url, options = {}) {

[klaudiosinani]

This tuskWindow assignment can be reduced to only one line:

const tuskWindow = createNewWindow(url, Object.assign(options, {show: true}));

[klaudiosinani]

Instead of creating a new note window in focus-mode, which can be easily untoggled by the user, we can create a new event, e.g new-window, that once fired both the sidebar and notes-list are completely removed from the UI using simple css, thus achieving a more native-feeling experience:

// Changes on `index.js`
ipcMain.on('note-frame-loaded', event => {
  if (event.sender !== mainWindow.webContents) {
    event.sender.send('new-window');
  }
});

// Addition to `browser.js`
// Activates the appropriate class names
ipc.on('new-window', () => {  document.documentElement.classList.toggle('new-window', true);}); 

/* Additions to `style/browser.css` */
div#tusk-new-window { /* Minor positioning tweak for the new button */
  margin-right: 8px;
}
.GJDCG5CBNB { /* Also, minor positioning tweak for the new button */
  display: none !important;
}
html.new-window div#gwt-debug-sidebar, html.new-window div#gwt-debug-notesListView, html.new-window div#tusk-new-window { /* Hides both the sidebar & notes-list */
  display: none !important;
}
html.new-window div#gwt-debug-stage, html.new-window div#gwt-debug-NoteView-root { /* Removes the left margin left behind by the hidden sidebar */
  margin-left: 0px !important;
}

[klaudiosinani]

We can create the new note window based on the dimension of the user's display/work-area size, thus always achieving the same window:screen ratio, regardless of the hardware. In adddtion, instead of using indices, we can use array destructuring in order to get the x & y window coordinates, and also we can provide the window with a new unique title, instead of calling it Tusk, using the name of the note as main identifying element:

// New `ipcMain.on('open-sub-window')`
ipcMain.on('open-sub-window', event => {
  const {workAreaSize} = electron.screen.getPrimaryDisplay();
  const {width: screenWidth, height: screenHeight} = workAreaSize;

  const noteWindow = BrowserWindow.fromWebContents(event.sender);
  const [x, y] = noteWindow.getPosition();

  const noteTitle = noteWindow.webContents.getTitle().replace(' | Evernote Web', '');

  const options = {
    x: x + 50,
    y: y - 50,
    title: `${app.getName()} - ${noteTitle}`,
    width: Math.round((screenWidth * 3) / 5),
    height: Math.round((screenHeight * 3) / 5)
  };

  subWindows.push(createSubWindow(noteWindow.webContents.getURL(), options));
});

[klaudiosinani]

Here options = options || {}; can be removed and set a default value {} for the options argument at the method definition:

function createNewWindow(url, options = {}) {

[derekbeau]

Thanks for taking the time to review, @klauscfhq. I'll make the changes this weekend or early next week and update the PR here. 👍

[markusberg-spt]

Can't wait for this feature! Is it going to be merged?

[Nemobil]

What is the status of this feature? Has anything changed within the last 3 years? Unfortunately, this missing feature is a show stopper for me... Any chance that it will be implemented/merged?