Always On Top plugin panel for dev purposes

Silviu-Bucsa

Based on this tutorial:
https://www.smashingmagazine.com/2019/07/build-sketch-plugin-javascript-html-css-part-1/

I am trying to make a panel stay always on top - for development purposes - just like the Sketch DevTools plugin does.

I've tried using:
window.setLevel(CGWindowLevelForKey(kCGMaximumWindowLevelKey));
right after
window.makeKeyAndOrderFront(nil);

based on what I could read from the Sketch DevTools plugin, but it doesn't work...

How can I set the window to be always on top?

kevgski

Pretty sure you only need one or two things to make the panel stay on top. Have you tried what is in that article?

window.floatingPanel = true

Which I think you could also do

window.level = NSFloatingWindowLevel
// https://github.com/KevinGutowski/betterTypePanel/blob/master/src/my-command.js#L104

Silviu-Bucsa

Hey @kevgski,

window.floatingPanel = true
was already set and working as intended based on the the SmashingMagazine tutorial and AppKit documentation.

window.level = NSFloatingWindowLevel
partially solved my problem, as this brings the plugin window in front of the all the active windows when Sketch.app is focused even above Sketch DevTools - but only when it's focused - which helps me a lot than before, because the Sketch DevTools window floats above all other windows and when it's clicked it will bring the plugin's panel in focus regardless where the Sketch.app window is "hidden".

But to take it further, I want my plugin's panel to float above all other windows, just like Sketch DevTools window does...
I've tried this:
function showWindow(window) { window.makeKeyAndOrderFront(nil); window.setLevel(CGWindowLevelForKey(kCGMaximumWindowLevelKey)); }
but it doesn't keep the plugin's window on top of all other windows - apparently it does the same thing with:
window.level = NSFloatingWindowLevel

Below it's a dropbox link of a gif to show the behaviour I would want to implement for my plugin:

Silviu-Bucsa

Addendum

I've also tried using SKPM with the template: skpm/with-webview and the behaviour is the same: puts the plugin window on top only if Sketch.app or Sketch DevTools are in focus

kevgski

Sounds like what you want is a window rather than a panel. Check out the window programming guide for more details:

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/WinPanel/Introduction.html

Essentially the idea is that rather than

NSPanel.alloc().init()

You want

NSWindow.alloc().init()

and you want to use the more generic methods for window management.

Silviu-Bucsa

Thank you! This worked perfectly! 😀

Now I shall go and read the documentation again and pay more attention to what I'm reading..
I assumed NSPanel being a subclass of NSWindow would be able to access "everything" the NSWindow can...

Annoyingly simple! Thank you again!

firefly-ac

I hope this will help, too. I was trying to achieve the same thing as the sketch-dev-tools does. Here is what I did when I build the plugin with skpm.
When you initiate the browser window, try set alwaysOnTop to true.

For example,

const identifier = "my-plugin-identifier"
const browserWindow = new BrowserWindow({
    identifier,
    width: 300,
    height:300,
    alwaysOnTop: true
  })

I learned this from reviewing the source code of sketch-dev-tools

kevgski

You can look at BrowserWindow options here: https://github.com/skpm/sketch-module-web-view/blob/master/docs/browser-window.md

firefly-ac

Thanks for the suggestion. Now I managed to make the plugin window stick on the top of everything, which is quite annoying, since it stuck on the top when the user is performing other tasks. Is there a way to set the window level just above the Sketch App?

I know make it as a modal will do the trick but that's not something I wanted because it covers the design. Please let me know if it is doable.