Dev - Add _moveWindowButtons support for -moz-gtk-csd-reversed-placement

[pc-v2]

I add 'or' operator to set window buttons if -moz-gtk-csd-reversed-placement is true

[pc-v2]

this PR should resolve #1836

[pc-v2]

found a bug, when I apply the code it has no padding on top of window controls, so I set this PR to draft

edit: if I replace zen-sidebar-top-buttons-customization-target to zen-sidebar-top-buttons, it looks fine on linux

• with zen-sidebar-top-buttons

    const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
    const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons');
    if (window.AppConstants.platform === 'macosx'|| matchMedia('(-moz-gtk-csd-reversed-placement)').matches) {
      for (let i = 0; i < windowControls.length; i++) {
        if (i === 0) {
          toolboxIcons.prepend(windowControls[i]);
          continue;
        }
        windowControls[i].remove();
      }
    }

• with zen-sidebar-top-buttons-customization-target

  const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
  const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons-customization-target');
  if (window.AppConstants.platform === 'macosx'|| matchMedia('(-moz-gtk-csd-reversed-placement)').matches) {
    for (let i = 0; i < windowControls.length; i++) {
      if (i === 0) {
        toolboxIcons.prepend(windowControls[i]);
        continue;
      }
      windowControls[i].remove();
    }
  }

however, this is easily fixed by using css

@media(-moz-gtk-csd-reversed-placement){
    #zen-sidebar-top-buttons .titlebar-buttonbox-container {
        padding-top: 6px;
        padding-left: 6px
    }
}
@media(-moz-gtk-csd-reversed-placement){
    #nav-bar .titlebar-buttonbox-container {
        padding-top: 5px; 
        padding-left: 6px;
    }
}

Screencast_20241116_113948.webm

[mr-cheff]

Thanks!

[pc-v2]

Just noticed, if I suddenly move the window buttons to right from system settings, it will stay in #zen-sidebar-top-buttons-customization-target area, not on #nav-bar.

[omove]

The Github Actions builds are failing with this PR https://github.com/zen-browser/desktop/actions/runs/11874280234 The Windows ones have this in the logs right before it fails "JavaScript error: chrome://browser/content/ZenCustomizableUI.sys.mjs, line 74: ReferenceError: matchMedia is not defined"