Enable document Navigator

[pedropintosilva]

Detailed description and rationale

Expose the functionality (Navigator) already present in the LibreOffice (LO) Core. The Navigator displays the different parts of a document, such as headings, tables, frames, objects, or hyperlinks. To see it in action. Open LO Writer and press F5, this will open Navigator. Quick jump to a location in the document by double-clicking an item listed in the Navigator window or enter the respective page number in the spin button.

Initially and if easier, this could be limited (by priority):

• Text documents
• Presentations and Spreadsheets

Milestones with estimated time

1. Add icon in the Collabora Online (COOL) UI which can switch to the Navigator
2. Adapt Navigator deck look / layout , if needed, for COOL
3. Make Navigator working - when we click on the object name then view should jump to that object
   • it will require to send LOK callbacks to the online so view will be scrolled and block default desktop actions
4. Optional: Implement missing JSDialogs functionality (context menu for treeview widget)
   • jsdialogbuilder.cxx will be extended with weld::Menu support, online side will need new popup type (if it doesn't have it ahlready)

• Change Navigator's position #9567

Code pointers

These might (not) be helpful, in doubt consult with @aszucs3 and @eszkadev :

Disabled switching to navigator: https://cgit.freedesktop.org/libreoffice/core/commit/?id=ca54fde
Code handling uno commands in the core: https://opengrok.libreoffice.org/xref/core/desktop/source/lib/init.cxx?r=aea216e2#4263
Callback commands to send message from core to online: https://opengrok.libreoffice.org/xref/core/include/LibreOfficeKit/LibreOfficeKitEnums.h?r=c4b93412
Navigator panel implementation: https://opengrok.libreoffice.org/xref/core/sw/source/uibase/utlui/navipi.cxx
JSDialogs Treeview widget in Online: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.JSDialogBuilder.js#L1715
Navigator's context menu: https://opengrok.libreoffice.org/xref/core/sw/source/uibase/utlui/content.cxx?r=6a031514#1333
JSDialogs core implementation: https://opengrok.libreoffice.org/xref/core/vcl/jsdialog/jsdialogbuilder.cxx
Current JSDialogs popups generation: https://github.com/CollaboraOnline/online/blob/master/browser/src/control/Control.JSDialog.js#L105

• JSDialog enabling: https://opengrok.libreoffice.org/xref/core/vcl/jsdialog/enabled.cxx?r=490fcebb

Required skills / knowledge

C++ - LibreOffice core hacking will be needed
JavaScript + CSS - Collabora Online side

WIP

#6237
https://gerrit.libreoffice.org/c/core/+/150906

[pedropintosilva]

I look to my old notes on this subject (navigator) and I think we have an opportunity here to improve also existing things or make it worse:

• It would be good to avoid adding yet another (sidebar) icon on the top toolbar. Specially when integrators tend to add their own additional icon there
  • This becomes evident in impress, plus we could solve the problem of not being able to hide slides (which is also a way to navigate)
• Cool if we would allow the user to access Properties controls (located in the sidebar) without forcing, every time, to click in a different sidebar icon
  • Otherwise it becomes a pain to use the navigator -> then switch sidebar -> Edit property -> switch again sidebar to access navigator [loop]
• Independent of what it can be achieved technically I would love if we could avoid adding all the options, bells and whistles that comes with core's navigator (I would like, if possible, to avoid increase user flow complexity).
• Others: MS O, G D also seem to share the same opinion I guess.

Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind.

Still any of this ^ should not be taken as a guide or set of instructions. I'm merely initiating a discussion here. Any feedback is welcome.

[Andreas-Kainz]

That's a great idea to have only one Navigator icon where the navigation will popup. What I really really like is that the Navigator is not writer only, there will be also the tabs for calc and the slide previews for impress/draw. Maybe we can expand the Navigator for search and other stuff in the future too (as you show links, comments, ... in the mockup).

At least for mobile it would be also a great improvement to have an navigator icon instead of an preview's toolbar for example.

[aszucs3]

collected what buttons/controls would work in Lool now:

WRITER:
what works:
up/down buttons, Page selector SpinField, content navigation view, header/footer, promote/demote/move buttons
listbox //works, but when value changed, after treeContent selection is jumped, treecontent selection go back to previous state ... (probably a missplaced update or similar)

what not works:
heading lvl dropdown, drag mode selector (drag mode does not work on PC app)
List box on-off toggle button (this only works on PC only if navigator is not on sidebar.. it just hide the treeview)

I dont know:
anchor works something, but may differ from PC app, and im not sure if that really work right
set remainder: i was not able to make it do anything yet... not even at PC app ...

CALC:
works: Data Range, Start/End button, toggle button
not works: Scenarios, drag mode selector (they not work pl PC app as well)
colum/row spinField (probably i could fix it)

IMPRESS:
works: prev/next/first/last slide buttons
not works: drag mode selection, show shapes dropdownlist

---

TreeContent works in all 3, but it does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection

[pedropintosilva]

[edited]
Talked with @eszkadev, better to hide all controls for now. Focus solely on the Navigator tree view and its behaviour/performance. We can then think/test one by one and add it if needed.
[/edited]

Writer

Control	Status	Notes	Screenshot
Up/Down buttons	Works
Page selector SpinField	Works
Content navigation view	Works
Header/footer	Works
Promote/demote/move buttons	Works
Listbox	Almost works	But when value changed, after treeContent selection is jumped, treecontent selection go back to previous state ... (probably a missplaced update or similar)
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Heading lvl dropdown	Doesn't work
Drag mode selector	Doesn't work	Drag mode does not work on PC app
List box on-off toggle button	Doesn't work	This is also flimsy on PC app. It only works on PC only if navigator is not on sidebar
Anchor	To test	works something, but may differ from PC app. Not sure if that really works right. I was not able to make it do anything yet... not even at PC app ...
Documents dropdown	Hide it	Let's hide this

Calc

Control	Status	Notes	Screenshot
Data Range,	Works
Start/End button	Works
Toggle button	Works	Pedro: I'm not sure what is this
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Scenarios	Doesn't work
Drag mode selector	Doesn't work	Also doesn't work on PC app
Colum/row spinField	Doesn't work	Probably i could fix it
Documents dropdown	Hide it	Let's hide this

Impress

Control	Status	Notes	Screenshot
Prev/next/first/last slide buttons	Works
TreeContent	Almost works	It does not know all the PC capabilities, like right click menu, stepping up/down with keyboard... There are still some glitches with the selection
Drag mode selection	Doesn't work
Show shapes dropdownlist	Doesn't work
Documents dropdown	Hide it	Let's hide this

[aszucs3]

I found these glitches/errors:
used document: https://opengrok.libreoffice.org/xref/core/sw/qa/uitest/data/tdf122449.odt

---

Single user:
TreeScroll: scroll jumps to top then scroll down (FullUpdate?) ... so the selected row will be the most bottom on the tree

• Repro1: Dblclick children of other contentType (on the tree)
• Repro2: Dblclick on any graphics / frame content (on the tree)

Unsuccessful Drag&drop item in Tree, change scrollness (FullUpdate?):

• Repro1: Expand all, Jump to Table14, Scroll bottom, Drag any field item, drop anywhere on the tree.
  RESULT: Tree Scoll back to Table14 (normal update?)
  NOTE: This Drag&Drop Does nothing to Document, so no update is needed
• Repro2: Expand all, Jump to Table14, Scroll a bit, Drag Text (heading), drop anywhere on the tree.
  RESULT: Tree Scoll top, then to Table14 (fullUpdate?)
  NOTE: Scroll a bit up or down is not needed for scroll top, it is just for showing that we lose the "scroll a bit" information, as tree Scroll will be in state of "Jump to Table14"

Actual scroll Position changes with sidebar on/off toggle

• Repro1: open doc, open Navigator, expand all, scroll down, close, then open Navigator
  RESULT: Tree scrolled to top
  NOTE: scroll info not saved when navigator disabled?
• Repro2: jump to graphic26, close/open navigator (many times)
  RESULT: Tree scoll changes randomly, but graphic26 will be visible somewhere..
  +1 BUG: in case of headings/hyperlinks/fields, sometimes the the actual row is not visible, it is only 1 line upper.
  NOTE: scroll works ok, if i click on a document's heading, that is not visible in the Tree, and have to scroll up.

---

multi user:
expand / collapse synchronized ?! dont views have separate info about what contentTypes are expanded/collapsed ?!

• Repro1: U12: open, U2: expand hyperlinks, U1: toggle sidebar/refresh (hyperlinks expanded)
• Repro2: U1: open, expand Tables, U2: open (tables expanded)

Change on Tree update other user Tree, resulting non needed scolls

• Repro: U1: jump to Table14, ScrollDown Tree, U2: jump to Heading Text, rewrite Text->Text2
  RESULT: U1: tree scroll back (Scrollless Update would be needed?)

---

Design question:

• long tree element cut into multiple lines, while in desktop app it always 1 line (using horizontal scrollbar if needed) for example, this will be 4 line in heading 4 format: "123456789 123456789 123456789 123456789"
• selected line is not visible now. (it was before), and now it is harder to see if 4 lines are 4 element, or only 1 element.

---

not sure (maybe not happened):

• Once I may seen U2 doc jumped while only U1 did somethingt on contetnTree.. (?)

[pedropintosilva]

We should probably rename it from "Navigator" to something else. For example "Document Outline" as tooltip (hover) and as Title maybe just "Outline"

[jancborchardt]

We should probably rename it from "Navigator" to something else. For example "Document Outline" as tooltip (hover) and as Title maybe just "Outline"

Yup, agree with that one! :)

[pedropintosilva]

Just a note here. In the long run and once the Navigator is placed as shown in #6248 (comment) [1] I still think Navigation is the best option. However, and for now, I think we can either let it as it is Navigator or change it to Outline

Label	Pros	Cons
Navigator	Familiar to LO users (not all)	Describes the component rather than the function/action
Navigation	Familiar to MS O users and understandable to anyone else. Emphasis on the function/action	For now: It can be to generic specially since Navigator is still not integrated with pages/slides sorter
Outline	Familiar to G users.	Describes the display content rather than function/action. Also can be mistaken for other outline types (Bullets and Numbering) and Outline is already a quite prominent label in dialogs and buttons

1."Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind."

[jancborchardt]

@pedropintosilva sure, "Navigation" seems good as well. :) Note that one of the bigger things is also that in both G and MS cases, the navigation is on the left (we do the same for the outline in Nextcloud Text), so that would be something to look into.
(It’s also pretty standard in other places like web apps, PDF readers, wikipedia articles etc you know what I mean. ;)

[pedropintosilva]

@jancborchardt agreed, that's what I meant in my previous comment with "For now: It can be to generic specially since Navigator is still not integrated with pages/slides sorter" (s/to/too)

[thebearon]

@pedropintosilva Can you please update this issue to reflect the current state?

[pedropintosilva]

excerpt from #6248 (comment)

[...]

* It would be good to avoid adding yet another (sidebar) icon on the top toolbar. Specially when integrators tend to add their own additional icon there
  
  [...]

Please check gh#6248-navigator-online.odp (pass gh#6248-navigator) for a quick mockup of what I have in mind.

Just a quick update:

• What was done
  • Many bugs were fixed
  • Only categories with items are shown
  • Buggy non-functional drag-n-drop was disabled
  • Expand/collapse and document scrolling (click to navigate to that element in the document) improved
• To go
  • After discussing with @eszkadev the bigger plan here is to follow the mockup. And for that we probably need to use the Navigator control in dialog that comes from core instead of the Sidebar related control that we are using
    • In the core side (LibreOffice) you can see what I mean by heading over to View -> Navigator