Hey, what’s going on with you, hopefully good things, a small personal update, I think I lost focus on my goals for almost a 1.6 years, right after I joined vz, maybe its beause this is the first ime I ever switched my official day time job, wtf, time..time..time it moves soo fast, nowadays literally everthing takes soo much time in this attention seeking nightmare.. wtf, you can not even ignore most of the things, otherwise you will be an outcast, Something happened and it gave me a wakeup call on why I wanted my life goals on the first place, then I realized, “you are the person shaped by your memories, at least your behaviour should reflect it”, because If I still had my old memories and experiences I would have not changed courses? doing all the things that external factors influences me, my future self can agree or disagree on this.

Electron

I haven’t worked in electron before, embedded view and browser views are three different ways to build the UI for your electron app

  • iframe tag
  • webview tag
  • BrowserView

Officailly in the docs there is note asking people to not use webiew though, “Important Note: we do not recommend you to use WebViews”

What & why

Recently I’ve been tasked with creating an electron experience on my office job, sadly I can not talk about it though, but I can share how I solved some of the engineering problems though.

This post is gona be detailing about,

Problem to solve: Overcoming the lack of support of z-Index on Electron Views

Figma design views

Maybe this can be solved in a different way, maybe there is even an official solution, but when I searched for zindex for browser views, there was not any solution.

For the project, I needed to work with showing different views simultaneously at the same time.

All the views are maintained and accessbile in electron api’s, In addition to that, I built a wrapper Class that track all the windows in the app, It also trackts what is the current active view.

What I mean by main view/ current active view?

  • Section labelled as “1” is like a sidebar to a website, its main purpose of it is to switch between showing content on section labelled as “2”.
  • Both “1” & “2” are BrowserViews positioned absolutely using set bounds

The problem

If the view for the left sidebar (section “1” from image) has to show a popup, that is beyound the bounds (width and height), the content in the view will be cut-off by the main view (section “2” of the image). In browser if we were to do this, we can set z-index to overcome the issue, this is true even for electron, if we have used the iframe instead of BrowserView,

Solution

Since BrowserViews does not have z-index, I have to find a different solution. In BrowserView the last added window is always placed on top of other windows. So this is the reason, the sidebar view (section 1) has its view (view that is out of bounds) cut-off. But luckly we have this api (setTopBrowserView).

[API definition] - win.setTopBrowserView(browserView)

Raises browserView above other BrowserViews attached to win. Throws an error if browserView is not attached to win.

Using setTopBrowserView I can make the sidebar view to come front, wheneven I want to show a popup or any view that is out of bounds (width and height exceeds the bounds in the view).

How do we do this?

For my usecase, I wanted to show a popup that will be out of bounds when user interacts with the contents of the sidebar, so I have a trigger which I can use when to show or hide out of bounds contents.

I can listen for mouse events on the side bar view (section 1 from the image), whenever the mouse enters the sidebar view I can use setTopBrowserView to set sidebarview as the top view.

Now all the contents. Normal and out of bounds contents are visible, as it is the top view.

On mouse leave, I can then set the original view that was top view to reset the behaviour.

How do we do this in react?

Code is pretty straight forward and will make it easy to understand the logic.

render part

<div
...
ref={divListenerRef}
>
...
...
...
</div>

setting up the mouse enter and mouse leave triggers

useEffect(() => {
  if (divListenerRef && divListenerRef.current) {
    console.debug('[setting bounds triggers]');
    divListenerRef.current.addEventListener('mouseenter', callbackToExpand);
    divListenerRef.current.addEventListener('mouseleave', callbackToRestrict);
  }

  return () => {
    if (divListenerRef.current) {
      console.debug('[cleaning up triggers]');
      divListenerRef.current.removeEventListener('mouseenter', callbackToExpand);
      divListenerRef.current.removeEventListener('mouseleave', callbackToRestrict);
    }
  };
}, [popupCoordinates, popupProfile]);

#popupCoordinates, popupProfile are just x,y values & status, whether to show or hide the popup

like I said code is self explanatory. I’ve had this in draft for over couple of months now.. I wanted to check office laptop to refer my code to be accurate, finally had the urge to open office laptop..at 408am. like I said in the begining personal udpate.

Conclusion

Electron is fun, using exisiting tech that we already know to speed up the dev process to deliver quick.. maybe I will cover bundling/building in a diff post..if I feel that I can contribute something different than what is already present all over the internet.

I made the bad desicision of looking back into my past.. I shouldn’t have.. and tried to make contact.. why did I do that? (not influenced by core belief…suggestions?) by the time I got a response, I was already regretting and back to my current self of just moving forward. all happended in july (remember future me!)

The thing about memories,it has proven me once again. Since I started to write..complete and had this post in draft for months, I already forgot a lot.. if I remembered all the things from the begining paragraph while making decisions over the last months, I would have made differnet decisions. Memory is really important to _ your _ & _.. (future me remebers?) maybe I can build something for me that keeps track of all these.. with a search user interface and a keyword.. so I can make an informed decision?? google tasks, keep already do this.. no?..something to think about for me. Hope future me reads this and realises how important some small things can be.