Hints are not visible on Bing Chat

[hakan-demirli]

Describe the bug
Hints are in the menu but they are not drawn on the screen.

Precise recipe to reproduce the issue

• Go to bing.com.
• Click chat
• Open hints, ctrl-j or f depends on the mode.
• Observe that no hints are visible on the screen.

For website-specific issues:
Can you reproduce this issue with Epiphany / GNOME Web (https://wiki.gnome.org/Apps/Web)?
No. Only on bing chat.
Information

• OS name+version: Arch Linux
• Graphics card and driver: AMD Integrated GPU in 4800H
• Desktop environment / Window manager name+version: Hyprland
• How you installed Nyxt (Guix pack, package manager, build from source): Pacman
• Information from show-system-information:

Renderer: GI-GTK
Operating system kernel: Linux 6.6.2-arch1-1
Lisp implementation: SBCL 2.3.8 (Dynamic space size: 3221225472)
Features: (:NYXT-GI-GTK :NYXT-GTK :NYXT-GI-GTK :NYXT-GTK :NYXT-3.9 :NYXT-3 :NYXT-3.9.2 :CLIPBOARD-CONTENT-METHOD :SWANK :SLYNK :PLUMP-UTF-32 :PARENSCRIPT :NSYMBOLS :FSET-EXT-STRINGS :SBCL+SAFE-STANDARD-READTABLE :NAMED-READTABLES :GLOBAL-VARS :CL-FAD :LPARALLEL :21BIT-CHARS :CUSTOM-HASH-TABLE-NATIVE :CL-PPCRE-UNICODE :CL-UNICODE :CL-JSON-DOUBLE-FLOAT-IS-SUBSUMED :CL-JSON-SINGLE-FLOAT-IS-SUBSUMED :CHUNGA :FLEXI-STREAMS :CL-PPCRE :WEBKIT2 :WEBKIT-2.42.2 :WEBKIT-2.42 :WEBKIT-2 :WEBKIT2-CORS-ALLOWLIST :WEBKIT2-PASTE-PLAINTEXT :WEBKIT2-TRACKING :WEBKIT2-MUTE :WEBKIT2-EMOJI :WEBKIT2-MEDIA :WEBKIT2-SANDBOXING :GTK-3-22 :GTK-3-20 :GTK-3-18 :GTK-3-16 :GTK-3-14 :GTK-3-12 :GTK-3-10 :GTK-3-8 :GTK-3-6 :GTK-3-4 :GTK :GDK-3-22 :GDK-3-20 :GDK-3-18 :GDK-3-16 :GDK-3-14 :GDK-3-12 :GDK-3-10 :GDK-3-8 :GDK-3-6 :GDK-3-4 :CAIRO-1-10 :CAIRO-1-12 :GDK-PIXBUF :CLOSER-MOP :GLIB-2-30 :GLIB-2-32 :GLIB-2-34 :GLIB-2-36 :GLIB-2-38 :GLIB-2-40 :GLIB-2-42 :GLIB-2-44 :GLIB-2-46 :GLIB-2-48 :GLIB-2-50 :GLIB-2-52 :GLIB-2-54 :GLIB-2-56 :GLIB-2-58 :GLIB :BORDEAUX-THREADS :LPARALLEL.WITH-CLTL2 :LPARALLEL.WITH-CAS :LPARALLEL.WITH-STEALING-SCHEDULER :SPLIT-SEQUENCE CFFI-FEATURES:FLAT-NAMESPACE CFFI-FEATURES:X86-64 CFFI-FEATURES:UNIX :CFFI CFFI-SYS::FLAT-NAMESPACE ALEXANDRIA::SEQUENCE-EMPTYP :FAST-IO-SV :FAST-IO :CL-JSON-CLOS :CL-JSON :SBCL-USES-SB-ROTATE-BYTE CHIPZ-SYSTEM:GRAY-STREAMS :THREAD-SUPPORT :ASDF3.3 :ASDF3.2 :ASDF3.1 :ASDF3 :ASDF2 :ASDF :OS-UNIX :NON-BASE-CHARS-EXIST-P :ASDF-UNICODE :ARENA-ALLOCATOR :X86-64 :GENCGC :64-BIT :ANSI-CL :COMMON-LISP :ELF :IEEE-FLOATING-POINT :LINUX :LITTLE-ENDIAN :PACKAGE-LOCAL-NICKNAMES :SB-CORE-COMPRESSION :SB-LDB :SB-PACKAGE-LOCKS :SB-THREAD :SB-UNICODE :SBCL :UNIX)

ASDF version: 3.3.1
ASDF registries: (NYXT-SOURCE-REGISTRY ENVIRONMENT-SOURCE-REGISTRY)
Critical dependencies: (/build/nyxt/src/_build/cl-cffi-gtk/gtk/cl-cffi-gtk.asd /build/nyxt/src/_build/cl-gobject-introspection/cl-gobject-introspection.asd /build/nyxt/src/_build/cl-webkit/webkit2/cl-webkit2.asd)

[aadcg]

Thanks for the bug report @hakan-demirli.

I can reproduce it and it shows a major flaw in the architecture of hint-mode. The added hint elements must be added either (1) as a shadow DOM or (2) as children of an element whose sibling is body. This has been noted by @heiwiper before. From #3001:

(@heiwiper) I also want to suggest moving all the hint elements into a single parent element outside the main DOM body.

The issue in this bing page is that its CSS sets display to none for elements that match the Nyxt hints. It was only a matter of time until an actual example of this flaw would be observed.

[heiwiper]

The added hint elements must be added either (1) as a shadow DOM or (2) as children of an element whose sibling is body.

The two suggestions are complementary:

• The node being a sibling of body serves as a good separation of hints added by nyxt from the rest of the DOM.
• The Shadow DOM serves to encapsulate hint elements from the rest of the DOM.

I would like to work on this issue if possible.

[aadcg]

@heiwiper they are complementary, but encapsulation isn't mandatory. I'd probably only give it a try after the hints are moved outside of body. My fear is that the shadow DOM is relatively recent and there may be API inconsistencies across different web renderers. Will there be performance discrepancies? Open questions.

Once we support at least 2 renderers (#2989), we'd be in a better position to attempt using shadow DOMs.

Please go ahead if you'd like to work on it. Thanks.

[heiwiper]

@heiwiper they are complementary, but encapsulation isn't mandatory. I'd probably only give it a try after the hints are moved outside of body.

I agree with you. Shadow DOM would serve as an extra layer so it is not a necessity for now at least. I will keep an eye on the other issue you have mentioned.

Edit: add quote

[aartaka]

My fear is that the shadow DOM is relatively recent and there may be API inconsistencies across different web renderers. Will there be performance discrepancies? Open questions.

Well, the shadowRoot is well-supported by most major browsers and engines, including WebKit.

[aadcg]

Closed via #3284.