Added a preference to toggle the sidebar opening on hover in compact mode

[afonsofrancof]

This addresses #3760.
I keep accidentally opening the sidebar even after a few weeks of using zen, so It would be nice to have the option of not opening the sidebar when hovering near it.
This would make it so it would only open with the keyboard shortcut to toggle compact mode.

[afonsofrancof]

@mauro-balades have you had the time to look at this yet?
Thanks :)

[joshdonnell]

@afonsofrancof @mauro-balades

Any chance this can get looked at, would make a great edition for people who like to run in Compact made with shortcuts for toggling between tabs etc.

[luke-concannon]

Agree - I'm finding it to be the one major pain point - accidentally triggering the sidebar on hover when interacting with elements on the side of a page. I want to just be able to manage its visibility manually.

[mauro-balades]

Yeah, but could everything be unified into a single statement? Or at least define the transitions in not (-pref...) for better readability? Thanks

[joshdonnell]

@afonsofrancof

I have pushed a PR to your fork, please review and if you are happy can you update this PR

[afonsofrancof]

I have pushed a PR to your fork, please review and if you are happy can you update this PR

@joshdonnell

Your changes also add

{
     element: document.getElementById('zen-appcontent-navbar-container'),
     screenEdge: 'top',
}

to the array based on the condition. Shouldn't it be added regardless?

Also, maybe we should invert the condition like @mauro-balades asked.

In that case, it would be something like this

get hoverableElements() {
  return [
    ...(!Services.prefs.getBoolPref("zen.view.compact.show-sidebar-on-hover", true)
      ? []
      : [
          {
            element: this.sidebar,
            screenEdge: this.sidebarIsOnRight ? "right" : "left",
            keepHoverDuration: 100,
          },
        ]),
    {
      element: document.getElementById("zen-appcontent-navbar-container"),
      screenEdge: "top",
    },
  ];
}

Here we only use the condition on the sidebar itself.
What do you think?

[joshdonnell]

I have pushed a PR to your fork, please review and if you are happy can you update this PR

@joshdonnell

Your changes also add

{
     element: document.getElementById('zen-appcontent-navbar-container'),
     screenEdge: 'top',
}

to the array based on the condition. Shouldn't it be added regardless?

Also, maybe we should invert the condition like @mauro-balades asked.

In that case, it would be something like this

get hoverableElements() {
  return [
    ...(!Services.prefs.getBoolPref("zen.view.compact.show-sidebar-on-hover", true)
      ? []
      : [
          {
            element: this.sidebar,
            screenEdge: this.sidebarIsOnRight ? "right" : "left",
            keepHoverDuration: 100,
          },
        ]),
    {
      element: document.getElementById("zen-appcontent-navbar-container"),
      screenEdge: "top",
    },
  ];
}

Here we only use the condition on the sidebar itself. What do you think?

I have updated my PR I miss read the code so sorry for my oversight here. I have updated, however I don't think we should reverse the check as this goes against how other ternary's are working in the project

[afonsofrancof]

@mauro-balades
Is it better now? :)