Navigator button covers debug information.

[eszkadev]

This is an Easy Hack.
Potential mentors: @Darshan-upadhyay1110 @Cwiiis @gokaysatir

Detailed description and rationale

Debug overday should be visible above all other elements in the document area.
We draw document on the canvas (it is called canvas sections).
Html elements will be above that canvas unfortunately (hiding debug overlay).

To solve that problem I recommend start with easiest and quickest option first:

• move the navigator button out of the debug area it if is activated ?
• make navigator button semi-transparent if debug mode is activated ?
• convert button to canvas section and draw in correct place ? (most complicated possibly)

Code pointers

Navigator code: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.NavigatorPanel.ts#L33

Debug mode can be activated by: ctrl + alt + shift + D

[eszkadev]

cc: @banobepascal any UX input here?

[Amruta-25]

if (window.debugMode) {
     this.floatingNavIcon.style.display = 'none';  
     this.floatingNavIcon.style.display = 'block';
 }

Does this align with the expected behavior?

[eszkadev]

@Amruta-25 thanks for interest. Above code has 2 properties assigned to the same variable. I don't understand what do you want to do. Also hiding the button is not a fix. We need to be able to do everything as usual in debug mode, for example to debug navigator :)

[Amruta-25]

You're absolutely right — I mistakenly put both display: none and display: block inside the same if block.
What I originally intended to write was:

if (window.debugMode) {
    this.floatingNavIcon.style.display = 'none';  
} else {
    this.floatingNavIcon.style.display = 'block';
}

That said, I now understand that hiding the button in debug mode isn't acceptable since we still need access to it for debugging..
I’ll shift my approach and start exploring repositioning the button or rendering it within the canvas section as you suggested. I'm still new to the codebase and open source in general, so I really appreciate the guidance and patience. Looking forward to learning more through this!

[eszkadev]

Possibly we ca just start with moving the button a bit down - under text in debug mode...
That would be quickfix for annoying issue. Later you can do a followup with section (if that is acceptable solution cc: @gokaysatir would know)

[gokaysatir]

I think second option:

• make navigator button semi-transparent if debug mode is activated ?

is the best.

Sections can't have accessibility properties (not by default at least). It is better to use sections only for document in general. I think we can avoid a section here.