Extending Tray [$500 awarded]

[saneef]

I'm just starting out with node-webkit.

Is it possible to extend the Tray to have an view inside it?

I'm trying to have a small view inside Taskbar Menu. Any small pointers is much appreciated.

The $500 bounty on this issue has been claimed at Bountysource.

[sindresorhus]

👍

[FWeinb]

I made click events work with this PR. The things left to do are:

• API for getting the position of the tray icon.
• support for transparent frames to create a non rectangle overlay (PR)

[mrfabbri]

I'm looking into this and I found out there is no reliable way to get general access to the view associated with the tray status icon across all platforms (and even across different versions of the same platform); also the tray icon could be hidden (like on Windows where tray icons often are placed in an extended area) so in that case a Tray.x getter wouldn't make much sense.

What I think instead is a viable solution (and also makes sense usage wise) is to have x and y coordinates of the tray icon inside the click event of the Tray item, e.g.:

var gui = require('nw.gui');

function showCustomTrayMenuAt(position) {
  ...
}

var tray = new gui.Tray({ icon:'path-to-icon.png' });
tray.on('click', function(pos) {
  // pos.x is x coordinate of the tray icon
  // pos.y is y coordinate of the tray icon
  showCustomTrayMenuAt(pos);
}

On Mac OS X we can find the position of the status item (as it is view associated with currentEvent during the click event) while on Aura (Windows and Linux) we can only return the cursor position (which would be inside the bounding box of the status icon but with slight differences depending on where effectively the user clicked).

/cc @rogerwang @tommoor

[FWeinb]

I made a little Proof Of Concept:

You can download it here

So it is finally possible to do this with node-webkit 0.11.3

[tommoor]

@FWeinb very nice, this will be helpful for folks 😄

[mrfabbri]

@FWeinb neat! This could definitely go into a gist and be referenced from docs; also the templating of icons on dark menus is nice :-)

/mf

On 17 Dec 2014, at 00:01, FWeinb notifications@github.com wrote:

I made a little Proof Of Concept:

You can download it here

So it is finally possible to to this with node-webkit 0.11.3

—
Reply to this email directly or view it on GitHub.

[FWeinb]

@mrfabbri Thanks!
There is still an issue, the tray window is always rendered in low-res even on a hi-dpi display. I don't now maybe the Window.open command can't create hi-dpi views?

[tommoor]

It's rendered hi res here, although in your demo there is a drop shadow filter which makes it look blurry. If I remove that it's crisp

On Wed, Dec 17, 2014 at 3:06 AM, FWeinb notifications@github.com wrote:

@mrfabbri Thanks!

There is still an issue, the tray window is always rendered in low-res even on a hi-dpi display. I don't now maybe the Window.open command can't create hi-dpi views?

Reply to this email directly or view it on GitHub:
#1874 (comment)

[lassse]

@FWeinb Thanks, great example!

[raguay]

This isn't working on the latest build (version 15). The line that tries to make use of the position data freezes the application. The above proof of concept is dead. At least, it isn't working for me on a Mac OS X system.

[rogerwang]

CC @ghostoy

[garymoon]

There are several recent changes that break custom tray window apps (another example here: https://github.com/zcbenz/nw-sample-apps/tree/master/custom-tray-menu) including the deprecation of the toolbar property and the switch from return value to callback in Window.open. However, after accounting for these changes, it does seem that the Tray object's click event does not provide any arguments in the latest build on OS X. I've decided against using this functionality myself for now, but would be happy to test a fix if desired.