Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Backport popover code from Kiwix PWA #1252

Merged
merged 70 commits into from
Jun 2, 2024

Conversation

Jaifroid
Copy link
Member

@Jaifroid Jaifroid commented May 19, 2024

Fixes #719. This backports the new feature from the PWA.

So far, I have ported the mouseover and the focus events, together with the popover code. Focus event provides keyboard support (tabbing into a link).

To do:

  • Add touch support (long press)
  • Add pointerdown fallback for browsers that don't support touchstart (e.g. Safari on macOS, and Edge legacy)
  • Fix hover over popover in Safari for macOS
  • Disable the contextmenu event if popovers are enabled
  • Enable for Safe mode (without image support, as in the PWA)
  • Add the option to disable popover preview in the UI, with translations
  • Fix support for dark modes
  • Move as many inline styles as possible to stylesheet
  • Suppress popover loading if user has clicked the link
  • Add e2e test for presence of popover on tab into link (Ray Charles ZIM)
  • Make the breakout icon open a new window
  • Fix clicking on a link inside the popover
  • Add popover support to new windows Open a new issue to add popover support to new tabs/windows: Extend popover support to new tabs or windows #1253
  • Clean up code hangovers from the PWA that are not needed here
  • Final testing

@Jaifroid Jaifroid added this to the v4.1 milestone May 19, 2024
@Jaifroid Jaifroid self-assigned this May 19, 2024
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
tests/e2e/spec/legacy-ray_charles.e2e.spec.js Outdated Show resolved Hide resolved
tests/e2e/spec/legacy-ray_charles.e2e.spec.js Outdated Show resolved Hide resolved
tests/e2e/spec/legacy-ray_charles.e2e.spec.js Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/app.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
@audiodude
Copy link
Collaborator

image

@Jaifroid
Copy link
Member Author

Jaifroid commented May 20, 2024

Nice one @audiodude! For now, I'm still working through things and fixing stuff, but I'll be very pleased to request a review when it's ready! Still some rough stuff...

@Jaifroid Jaifroid marked this pull request as draft May 20, 2024 16:38
@Jaifroid
Copy link
Member Author

Jaifroid commented May 24, 2024

@audiodude All done, should be ready now for you to move on to uiUtil.js when/if you have time. I've left a few comments open above for you to review, and I think everything else you suggested is resolved. Thanks once again! It's been a while since I've had the benefits of review (since the previous lead developer left the project). 😊

www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
www/js/lib/uiUtil.js Outdated Show resolved Hide resolved
Copy link
Collaborator

@audiodude audiodude left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one comment, about file structure/code location. I don't want to review more until you resolve because it would change where my comments go and I would get the stupid github "outdated" nonsense.

www/js/lib/uiUtil.js Show resolved Hide resolved
@Jaifroid
Copy link
Member Author

New test deployment as v4.0.9 here:

Ensure it has updated to v4.0.9 (message in Configuration should appear after 15s) and restart or reset if necessary. In Firefox a Reset (Expert Settings) is often needed due to few-hours limit on Service Worker checking.

Copy link
Collaborator

@audiodude audiodude left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good in general. I can see what you mean about the pain of having to deal with Promise and callbacks in the same code base, ick. I've made lots of suggestions about refactoring and extracting local helper functions, I think it will really help readability especially in the aforementioned context.

www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Show resolved Hide resolved
www/js/lib/popovers.js Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
@Jaifroid
Copy link
Member Author

@audiodude Many thanks for helpful comments once again. It's getting towards Friday evening here, so I'll try to resolve everything this weekend. Have a great weekend when you get there! 😊🍾

Copy link
Member Author

@Jaifroid Jaifroid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So in the next push to the PR, I'm refactoring the code to address the identified issues. Some explanatory comments below. I'll close conversations before pushing, or else it gets hard to close them even using the GitHub UI. Many thanks, I think the code is more accessible now, and unneeded (if harmless) Promise resolving should have been fixed.

www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
www/js/lib/popovers.js Outdated Show resolved Hide resolved
@Jaifroid
Copy link
Member Author

New test deployment as v4.0.91 here:

Ensure it has updated to v4.0.91 (message in Configuration should appear after 15s) and restart or reset if necessary. In Firefox a Reset (Expert Settings) is often needed due to few-hours limit on Service Worker checking.

@Jaifroid
Copy link
Member Author

Screenshots in light and dark mode:

image

image

@Jaifroid
Copy link
Member Author

@audiodude Are you happy with the resolved issues? OK to merge after final testing?

NB future PRs will certainly not be as massive as this! This was the outcome of work at the Hackathon, hence a major feature. It's rare to do major features! At some point there will be a PR (see #1253) to add these popovers to new tabs / windows controlled by the app's Service Worker, but not for this PR which is feature-complete as far as I can manage for now. Adding to new tabs or windows needs careful thought, as we have to keep track of opened windows, which we currently don't do explicitly (just let the SW do that job, but it knows nothing about the DOM).

@audiodude
Copy link
Collaborator

Sorry for the delay. LGTM.

@Jaifroid
Copy link
Member Author

Sorry for the delay. LGTM.

Many thanks for your help @audiodude -- you really helped improve the code! 🙏

@Jaifroid
Copy link
Member Author

Jaifroid commented Jun 2, 2024

Last manual tests:

  • Works fine in Firefox 65 (tested on Big Sur). Below Firefox 65, WebP images are not supported by Firefox, so the images will not show. I think it would complicate the code tremendously to try to run the WebP Hero polyfill on popover images for such barely used and obsolete browsers. If user wants to see image, they can open the page and the polyfill will then be run. To be clear, there are only a tiny number of Firefox versions affected: those that don't support WebP and DO support Service Workers, i.e. Firefox 56-64 (our minimum supported Firefox version for ServiceWorker mode is Firefox 56, though in practice SW mode only works reliably on all platforms on non-ESR versions of Firefox 60+).
  • Works fine in Safari 14 on macOS
  • Works fine in Safari 14 on iPad
  • Works fine on Edge 18 on W10
  • Works fine (Safe Mode only) in Edge 16 on W10,

Good to merge.

@Jaifroid Jaifroid merged commit bf4042b into main Jun 2, 2024
10 checks passed
@Jaifroid Jaifroid deleted the Backport-popover-code-from-Kiwix-PWA branch June 2, 2024 14:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support "page preview" feature of Wikipedia and Wikivoyage
2 participants