CODEWITHSUNDEEP
javascriptelectronsystem-tray
user9888433
user9888433

Reputation: 69

Electron tray Icon duplication issue (Windows 10)

I am building my first electron project and I am having an issue where there is duplication of the tray icon. Here's to show you what's going on in a picture:

[Picture]

I would like to point out that I am testing the app. Starting and stopping it frequently. And the icons do eventually get reduced to one (windows 10 garbage collecting?). However I'm still convinced this is abnormal behaviour.

The app itself allows users to open new windows to monitor things. As I don't like where 'additional' windows minimise to in electron, I have set them to 'hide' when minimised. The idea being that when a user wants to show that window again they can select it from a list when they right-click on the app icon in the system tray and select the desired window name.

I believe the issue might have something to do with the way I'm creating and destroying the tray icon when updating it. What I do is destroy the tray then build it up again (as seen in the code below) after appending the new window name to the template array.

Is this a good idea to do it this way? - I haven't seen many examples of how to do this so I made it up myself.

If you need any more information don't hesitate to comment below. Thanks!

Relevant code: (in main.js)

const iconPath = path.join(__dirname, '/images/testIcon.png')
let tray = null;

function ShowWindow(windowNameFromTray)
{
    singleWindow.webContents.send('open-window-from-other-process', windowNameFromTray);
}

ipcMain.on('open-currently-open-window', function(e, windowName)
{
    ShowWindow(windowName)
})

let template = 
[
    {
        label: 'windows',
            submenu:[]
    }
]

ipcMain.on('retrieved-windowId', function(e, windowName)
{
    tray.destroy()
    tray = new Tray(iconPath)
    tray.setToolTip('Window App')

    var element =  
        {
            label: windowName,
            click() 
            { 
                ShowWindow(windowName)
            }
        }

    template[0].submenu.push(element)
    let contextMenu = Menu.buildFromTemplate(template)
    tray.setContextMenu(contextMenu)
});

...

Upvotes: 2

Views: 1985

Answers (1)

Thalinda Bandara
Thalinda Bandara

Reputation: 1079

Hello I don't know this is the same issue for you also but I found that this is related to the destroying of the tray first we have to create a Tray object in the main.js file and after create that we have to user that Tray Object in Global Scope. now what we are doing wrong is we are creating the tray icon and we are not destroying something else and again we are creating something new now my solution is to share one Tray object is everywhere this way we destroying the same Tray object so it doesn't create a new one when we are creating a new one This is my code I am Creating my Tray in an another file Main.js

    const electron = require("electron");
      let app = null;
        let tray = null;    
        const { app, BrowserWindow, ipcMain,Tray, Menu,dialog} = electron;
    const nativeImage = electron.nativeImage
        global.share = { app, BrowserWindow, ipcMain,Tray,tray,BackGroudProecess, Menu,mainwin,nativeImage};
const Mytray= require('./tray.js');
Mytray.Create(languagerPack);//you don't need to pass the language pack in here this code according to my developement (obivously you get that ;-) )

tray.js

module.export ={
    CreateTray(items){
    
     let p = new Promise((res,rej)=>{
       const iconPath = path.join(__dirname+"../../../img/icon.ico");
       global.share.tray  = new Tray(global.share.nativeImage.createFromPath(iconPath))
       res(global.share.tray);//this is the important palce we have pass global tray 
     })
    p.then((tray)=>{
       const trayMenuTemplate = [
          {
    
    
             label:items.not_signed,
             enabled: false
          },
    
          {
             label:items.about,// 'About',
             click: function () {
                global.share.mainwin.webContents.send("OPEN:ABOUT",{state:true});
             }
          },
    
          {
             label:items.help,// 'Help',
             click: function () {
                console.log("Clicked on Help")
             }
          },
       ]
    
       let trayMenu = global.share.Menu.buildFromTemplate(trayMenuTemplate)
       
       if(tray != null){
          tray.setContextMenu(trayMenu)
       }
    }).catch((rej)=>{console.log(rej)})
       },
    
    }

}

how to Destroy?

   global.share.tray.destroy() // this way it destroys the correct tray since there is only one tray object in the whole program

And when you're destroying and reaceating new tray you have to make sure the old one is destroyed or not and this is how you do it

if(global.share.tray.isDestroyed){
  console.log("Is Destroyed");
}

Upvotes: 1

Related Questions