1488884 - Convert sidebars from mozTogglers to HTML5 details/summary

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: KumaScript, enhancement, P1)

Description

[John Whitlock [:jwhitlock]]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
MDN has many sidebars that are generated from KumaScript.  For example, the Web/API/Animation/id page [1] has a sidebar generated by calling {{ APIRef("Web Animations") }} [2].  These use the jQuery-based mozTogglers handler [2] to open and close menu items with clicks or keys.

Instead, the HTML5 element <details>[3] can be used, along with <summary> to set the displayed text, and use native support for opening / closing with the mouse or keyboard.

[0] https://developer.mozilla.org/en-US/docs/Web/API/Animation/id
[1] https://github.com/mdn/kumascript/blob/master/macros/APIRef.ejs
[2] https://github.com/mozilla/kuma/blob/0fa1c97e1f7be989d45167026b99a2a7d7a19172/kuma/static/js/components.js#L280-L377
[3] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

What problems would this solve?
===============================
Registering mozTogglers is expensive. Removing the call reduced evaluation of wiki.js from 241ms to 94ms (60% reduction) in in a simulation of Chrome with 6x CPU throttle.  This is also one of the large users of jQuery, which we hope to remove as a requirement.

Who would use this?
===================
MDN visitors

What would users see?
=====================
For most visitors, there should be no change in appearance.



What would users do? What would happen as a result?
===================================================
Visitors using keyboard navigation or assistive browsing may have a different experience with details / summary, using tab to switch between elements and space to toggle open and closed. This could be an improvement over the previous JavaScript implementation.

Is there anything else we should know?
======================================
Also tracked in https://github.com/mdn/sprints/issues/258.

Pull requests are already open:

* https://github.com/mozilla/kuma/pull/4957
* https://github.com/mdn/kumascript/pull/789

The old system allowed an <a href=> element for items that were also toggle targets. When these were hovered over, the destination link would appear in the footer bar. When these were clicked, the JS would toggle the element. This seems like a bug, not a feature, but I couldn't find an existing bug. In the new system, these un-clickable links will be removed.

Comment 1

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/f52b046a3dc4e861f186a06e1ba0f9ef8807f243
bug 1488884: Allow attribute <details open>

Due to an issue with initialization order, details allowed the standard
attributes allowed style, class, id, lang, dir, and title, but not open.

https://github.com/mozilla/kuma/commit/10d027b067a43a101a58998a8ab4104ff65c8729
Merge pull request #4963 from jwhitlock/details-open-1488884

bug 1488884: Allow attribute <details open>

Comment 2

[[github robot]]

Commit pushed to master at https://github.com/mdn/kumascript

https://github.com/mdn/kumascript/commit/50a70d87280b50f39a7fc9d57f4c1cdf5ccdcfad
bug 1488884: Updating sidebars to use details/summary (#789)

Squashed work for bug 1488884:

* Updating sidebars to use details/summary
* Updating macros tests
* adding missing closing tags for the list items
* Removing empty line, indentation fix
* HTTPS links in the HTML Quick Links sidebar
* Cleaning up JS, HTTPS and MDN sidebars
* Clean up nsprapiref sidebar
* Tidying up tools and rtc sidebars
* Adding global attributes section back
* Elements to HTMLElements
* Removing unnecssary data-default-state
* Closing details tag
* adding details element to eventref
* AddOnSidebar fixes
* Fixing Spider Monkey sidebar
* Fixing ejs errors in eventref
* Fixing ejs errors in jsctypes sidebar
* HTML Elements toggleable
* Fixing ejs errors on HTTPSidebar
* Fixing error in SpiderMonkeySidebar
* Fixing formatting
* Escaping in HTML sidebar

Comment 3

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/d9a4a4c2c2b77b7946722c5f60b904b4aa77595a
bug 1488884: Front-end assets work for removing the MozToggler sidebar behavior (#4957)

Squashes several commits for bug 1488884:

* JavaScript and CSS changes necessary to remove MozTogglers from sidebar
* Using set-font-size mixin
* Spacing adjustments for quick links
* Adjusting indentionation for WebExtAPISidebar
* Moving webapiextension styles out of custom
* Padding in the web extension api sidebar
* Adding spacing to current page em's in sidebar
* changing spacing in quick links li's

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mdn/kumascript

https://github.com/mdn/kumascript/commit/230b86441f5d8091d2d6e396a9e656ca238646b6
bug 1488884: eventref: standardize indent

https://github.com/mdn/kumascript/commit/3d1f68f4f97acb0e68ed42bb8e53a510d77c6cb2
bug 1488884: eventref: Add tests

Test eventref for:

* Preview mode (no slug)
* An event in a single group (expanded) in English
* An event in multiple groups (not expanded) in French

https://github.com/mdn/kumascript/commit/8a6f5556e48fe51024e842bebbaa23b9acc63132
bug 1488884: eventref: Fix extra space group name

When the group name already includes the string Events, like
"DOM Events", avoid an extra space when appending " events".

https://github.com/mdn/kumascript/commit/895ed9de608999cd998f02fd61c74fa76796f738
bug 1488884: eventref: Switch to <details open>

Switch from the jQueryUI attribute to the standard open attribute for
details.

https://github.com/mdn/kumascript/commit/2d93aafb6451838709db0f3f237b0ef387d661be
Merge pull request #924 from jwhitlock/eventref-open-1488884

bug 1488884: Update eventref for <details>

Comment 5

[John Whitlock [:jwhitlock]]

Changes pushed to staging and production. On production, re-rendered about 31,000 docs with sidebars in 13+ hours. The sidebars render without errors on English, except for some unrelated issues with the render system (network issues, API rate limiting, etc.)

We're not going to re-render on staging, but instead refresh the database after the server switchover this month.

Comment 6

[ExE Boss]

Attachment: Kuma: Miscellaneous fixes

Comment 7

[ExE Boss]

Attachment: Kuma: Fix Quicklinks `.toggle summary` color

Comment 8

[ExE Boss]

Attachment: Kuma: Fix sidebar links without bottom margin

Comment 9

[ExE Boss]

Sorry for the noise, but Bugzilla is really painful to use on mobile.