Bug 1824659 - replace sphinx panel by sphinx design r=firefox-source-docs-reviewers,perftest-reviewers,sylvestre,sparky

Differential Revision: https://phabricator.services.mozilla.com/D173680

docs/_static/sphinx_design.css

@@ -10,7 +10,7 @@ a.dropdown-link {
     visibility: hidden;
 }
 
-details.dropdown:hover a.dropdown-link {
+details.sd-dropdown:hover a.dropdown-link {
     visibility: visible;
 }
 

docs/_static/sphinx_design.js

@@ -5,7 +5,7 @@
 (function() {
   "use strict";
 
-  var dropdownClassName = "dropdown";
+  var dropdownClassName = "sd-dropdown";
 
   function getDropdownElement() {
     var dropdownId = window.location.hash;
@@ -39,7 +39,7 @@
       aTag.innerHTML = "¶";
 
       var summaryElement = dropdowns[i].getElementsByClassName(
-        "summary-title"
+        "sd-summary-title"
       )[0];
       summaryElement.insertBefore(
         aTag,

docs/conf.py

@@ -45,7 +45,7 @@ extensions = [
     "sphinxcontrib.mermaid",
     "sphinx_copybutton",
     "sphinx_markdown_tables",
-    "sphinx_panels",
+    "sphinx_design",
     "bzlink",
 ]
 
@@ -102,6 +102,9 @@ html_favicon = os.path.join(topsrcdir, "browser/branding/nightly/firefox.ico")
 
 exclude_patterns = ["_build", "_staging", "_venv"]
 pygments_style = "sphinx"
+# generate label “slugs” for header anchors so that
+# we can reference them from markdown links.
+myst_heading_anchors = 5
 
 # We need to perform some adjustment of the settings and environment
 # when running on Read The Docs.
@@ -137,12 +140,12 @@ html_show_copyright = False
 autosectionlabel_maxdepth = 1
 
 
-def install_sphinx_panels(app, pagename, templatename, context, doctree):
+def install_sphinx_design(app, pagename, templatename, context, doctree):
     if "perfdocs" in pagename:
-        app.add_js_file("sphinx_panels.js")
-        app.add_css_file("sphinx_panels.css")
+        app.add_js_file("sphinx_design.js")
+        app.add_css_file("sphinx_design.css")
 
 
 def setup(app):
     app.add_css_file("custom_theme.css")
-    app.connect("html-page-context", install_sphinx_panels)
+    app.connect("html-page-context", install_sphinx_design)

python/sites/docs.txt

@@ -18,7 +18,7 @@ pypi:livereload==2.6.3
 pypi:Markdown==3.3.4
 pypi:MarkupSafe==2.0.1
 pypi:mock==5.0.1
-pypi:myst-parser==0.16.1
+pypi:myst-parser==0.17
 pypi:mdit-py-plugins==0.3.0
 pypi:parsimonious==0.10.0
 pypi:pyasn1==0.4.8
@@ -39,7 +39,7 @@ pypi:singledispatch==4.0.0
 pypi:snowballstemmer==2.2.0
 pypi:Sphinx==4.5
 pypi:sphinx-copybutton==0.5.1
-pypi:sphinx-panels==0.6.0
+pypi:sphinx-design==0.3.0
 pypi:sphinx-js==3.2.1
 pypi:sphinx-markdown-tables==0.0.15
 pypi:sphinx-rtd-theme==1.2.0

testing/perfdocs/generated/awsy.rst

@@ -15,7 +15,7 @@ Awsy tests
 
 
 .. dropdown:: base (FF)
-   :container: + anchor-id-base-Awsy-tests
+   :class-container: anchor-id-base-Awsy-tests
 
    **Owner**: :mccr8 and Perftest Team
 
@@ -54,7 +54,7 @@ Awsy tests
 
 
 .. dropdown:: dmd (FF)
-   :container: + anchor-id-dmd-Awsy-tests
+   :class-container: anchor-id-dmd-Awsy-tests
 
    **Owner**: :mccr8 and Perftest Team
 
@@ -93,7 +93,7 @@ Awsy tests
 
 
 .. dropdown:: tp5 (FF)
-   :container: + anchor-id-tp5-Awsy-tests
+   :class-container: anchor-id-tp5-Awsy-tests
 
    **Owner**: :mccr8 and Perftest Team
 
@@ -116,7 +116,7 @@ Awsy tests
 
 
 .. dropdown:: tp6 (FF)
-   :container: + anchor-id-tp6-Awsy-tests
+   :class-container: anchor-id-tp6-Awsy-tests
 
    **Owner**: :mccr8 and Perftest Team
 

testing/perfdocs/generated/talos.rst

@@ -325,9 +325,9 @@ median values of the raw data from the subtests).
 
 Tests which are imported benchmarks are:
 
--  `ARES6 <#ARES6>`_
+-  `ARES6 <#ares6>`_
 -  `dromaeo <#dromaeo>`_
--  `JetStream <#JetStream>`_
+-  `JetStream <#jetstream>`_
 -  `kraken <#kraken>`_
 -  `motionmark <#motionmark>`_
 -  `stylebench <#stylebench>`_
@@ -372,7 +372,7 @@ Talos Tests
 For the sample commands found below, note that the capitalization used is important. Without the exact spelling, the test won't be found when running locally.
 
 .. dropdown:: ARES6
-   :container: + anchor-id-ARES6
+   :class-container: anchor-id-ARES6
 
    * contact: :jandem and SpiderMonkey Team
    * source: `ARES-6 <https://searchfox.org/mozilla-central/source/third_party/webkit/PerformanceTests/ARES-6>`__
@@ -426,7 +426,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: JetStream
-   :container: + anchor-id-JetStream
+   :class-container: anchor-id-JetStream
 
    * contact: :jandem and SpiderMonkey Team
    * source: `jetstream.manifest <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/jetstream/jetstream.manifest>`__ and jetstream.zip from tooltool
@@ -485,7 +485,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: a11yr
-   :container: + anchor-id-a11yr
+   :class-container: anchor-id-a11yr
 
    * contact: :jamie and accessibility team
    * source: `a11y.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/a11y>`__
@@ -683,7 +683,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: about_preferences_basic
-   :container: + anchor-id-about_preferences_basic
+   :class-container: anchor-id-about_preferences_basic
 
    * contact: :jaws and :gijs
    * source: `about_preferences_basic.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/about-preferences/about_preferences_basic.manifest>`__
@@ -900,7 +900,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: basic_compositor_video
-   :container: + anchor-id-basic_compositor_video
+   :class-container: anchor-id-basic_compositor_video
 
    * contact: :b0bh00d, :jeffm, and gfx
    * source: `video <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/video>`__
@@ -1116,7 +1116,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: cpstartup
-   :container: + anchor-id-cpstartup
+   :class-container: anchor-id-cpstartup
 
    * contact: :mconley, Firefox Desktop Front-end team, Gijs, fqueze, and dthayer
    * measuring: Time from opening a new tab (which creates a new content process) to having that new content process be ready to load URLs.
@@ -1306,7 +1306,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: cross_origin_pageload
-   :container: + anchor-id-cross_origin_pageload
+   :class-container: anchor-id-cross_origin_pageload
 
    * contact: :sefeng, :jesup, and perf eng team
    * measuring: The time it takes to load a page which has 20 cross origin iframes
@@ -1495,7 +1495,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: damp
-   :container: + anchor-id-damp
+   :class-container: anchor-id-damp
 
    * contact: :ochameau and devtools team
    * source: `damp <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/devtools>`__
@@ -1866,7 +1866,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: displaylist_mutate
-   :container: + anchor-id-displaylist_mutate
+   :class-container: anchor-id-displaylist_mutate
 
    * contact: :miko and gfx
    * source: `displaylist_mutate.html <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/layout/benchmarks/displaylist_mutate.html>`__
@@ -2065,7 +2065,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: dromaeo
-   :container: + anchor-id-dromaeo
+   :class-container: anchor-id-dromaeo
 
    * description:
       | Dromaeo suite of tests for JavaScript performance testing. See the
@@ -2088,7 +2088,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: dromaeo_css
-   :container: + anchor-id-dromaeo_css
+   :class-container: anchor-id-dromaeo_css
 
    * contact: :emilio, and css/layout team
    * source: `css.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/dromaeo>`__
@@ -2259,7 +2259,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: dromaeo_dom
-   :container: + anchor-id-dromaeo_dom
+   :class-container: anchor-id-dromaeo_dom
 
    * contact: :peterv and dom team
    * source: `dom.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/dromaeo>`__
@@ -2366,7 +2366,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: glterrain
-   :container: + anchor-id-glterrain
+   :class-container: anchor-id-glterrain
 
    * contact: :jgilbert and gfx
    * source: `glterrain <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/webgl/benchmarks/terrain>`__
@@ -2645,7 +2645,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: glvideo
-   :container: + anchor-id-glvideo
+   :class-container: anchor-id-glvideo
 
    * contact: :jgilbert and gfx
    * source: `glvideo <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/webgl/benchmarks/video>`__
@@ -2920,7 +2920,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: kraken
-   :container: + anchor-id-kraken
+   :class-container: anchor-id-kraken
 
    * contact: :sdetar, jandem, and SpiderMonkey Team
    * source: `kraken.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/kraken>`__
@@ -3097,7 +3097,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: motionmark_animometer
-   :container: + anchor-id-motionmark_animometer
+   :class-container: anchor-id-motionmark_animometer
 
    * contact: :b0bh00d, :jeffm, and gfx
    * source: `source <https://searchfox.org/mozilla-central/source/third_party/webkit/PerformanceTests/MotionMark>`__ `manifests <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/motionmark>`__
@@ -3151,7 +3151,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: motionmark_htmlsuite
-   :container: + anchor-id-motionmark_htmlsuite
+   :class-container: anchor-id-motionmark_htmlsuite
 
    * contact: :jrmuizel and graphics(gfx) team
    * tpmanifest: ${talos}/tests/motionmark/htmlsuite.manifest
@@ -3197,7 +3197,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: motionmark_webgl
-   :container: + anchor-id-motionmark_webgl
+   :class-container: anchor-id-motionmark_webgl
 
    * contact: :jgilbert and gfx
    * source: `source <https://searchfox.org/mozilla-central/source/third_party/webkit/PerformanceTests/MotionMark>`__ `manifest <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/motionmark/webgl.manifest>`__
@@ -3448,7 +3448,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: pdfpaint
-   :container: + anchor-id-pdfpaint
+   :class-container: anchor-id-pdfpaint
 
    * contact: :calixte and CI and Quality Tools team
    * source:
@@ -3629,7 +3629,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: perf_reftest
-   :container: + anchor-id-perf_reftest
+   :class-container: anchor-id-perf_reftest
 
    * contact: :emilio and css/layout team
    * source: `perf-reftest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest>`__
@@ -3859,7 +3859,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: perf_reftest_singletons
-   :container: + anchor-id-perf_reftest_singletons
+   :class-container: anchor-id-perf_reftest_singletons
 
    * contact: :emelio and Layout team
    * source: `perf-reftest-singletons <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/perf-reftest-singletons>`__
@@ -4030,7 +4030,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: rasterflood_gradient
-   :container: + anchor-id-rasterflood_gradient
+   :class-container: anchor-id-rasterflood_gradient
 
    * contact: :jrmuizel, :jimm, and gfx
    * source: `rasterflood_gradient.html <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/gfx/benchmarks/rasterflood_gradient.html>`__
@@ -4235,7 +4235,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: rasterflood_svg
-   :container: + anchor-id-rasterflood_svg
+   :class-container: anchor-id-rasterflood_svg
 
    * contact: :jrmuizel, :jimm, and gfx
    * source: `rasterflood_svg.html <https://searchfox.org/mozilla-central/source/testing/talos/talos/tests/gfx/benchmarks/rasterflood_svg.html>`__
@@ -4438,7 +4438,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: sessionrestore
-   :container: + anchor-id-sessionrestore
+   :class-container: anchor-id-sessionrestore
 
    * contact: :dale, :dao, :farre, session restore module owners/peers, and DOM team
    * source: `talos/sessionrestore <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/startup_test/sessionrestore>`__
@@ -4651,7 +4651,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: sessionrestore_many_windows
-   :container: + anchor-id-sessionrestore_many_windows
+   :class-container: anchor-id-sessionrestore_many_windows
 
    * See `sessionrestore <#sessionrestore>`_.
    * profile_path: ${talos}/startup_test/sessionrestore/profile-manywindows
@@ -4822,7 +4822,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: sessionrestore_no_auto_restore
-   :container: + anchor-id-sessionrestore_no_auto_restore
+   :class-container: anchor-id-sessionrestore_no_auto_restore
 
    * See `sessionrestore <#sessionrestore>`_.
    * preferences: {'browser.startup.page': 1, 'talos.sessionrestore.norestore': True}
@@ -4994,7 +4994,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: startup_about_home_paint
-   :container: + anchor-id-startup_about_home_paint
+   :class-container: anchor-id-startup_about_home_paint
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * source: `addon <https://hg.mozilla.org/mozilla-central/file/tip/testing/talos/talos/startup_test/startup_about_home_paint/addon/>`__
@@ -5182,7 +5182,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: startup_about_home_paint_cached
-   :container: + anchor-id-startup_about_home_paint_cached
+   :class-container: anchor-id-startup_about_home_paint_cached
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * See `startup_about_home_paint <#startup_about_home_paint>`_.
@@ -5361,7 +5361,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: startup_about_home_paint_realworld_webextensions
-   :container: + anchor-id-startup_about_home_paint_realworld_webextensions
+   :class-container: anchor-id-startup_about_home_paint_realworld_webextensions
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * source: `addon <https://hg.mozilla.org/mozilla-central/file/tip/testing/talos/talos/startup_test/startup_about_home_paint/addon/>`__
@@ -5514,7 +5514,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: stylebench
-   :container: + anchor-id-stylebench
+   :class-container: anchor-id-stylebench
 
    * contact: :emilio and Layout team
    * source: `stylebench.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/stylebench/stylebench.manifest>`__
@@ -5530,7 +5530,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tabpaint
-   :container: + anchor-id-tabpaint
+   :class-container: anchor-id-tabpaint
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * source: `tabpaint <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/tabpaint>`__
@@ -5733,7 +5733,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tabswitch
-   :container: + anchor-id-tabswitch
+   :class-container: anchor-id-tabswitch
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * source: `tabswitch <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/tabswitch>`__
@@ -5968,7 +5968,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tart
-   :container: + anchor-id-tart
+   :class-container: anchor-id-tart
 
    * contact: :mconley, Firefox Desktop Front-end team, :gijs, :fqueze, and :dthayer
    * source: `tart <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/tart>`__
@@ -6214,7 +6214,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tp5
-   :container: + anchor-id-tp5
+   :class-container: anchor-id-tp5
 
    * description:
       | Note that the tp5 test no longer exists (only talos-tp5o) though many
@@ -6229,7 +6229,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tp5n
-   :container: + anchor-id-tp5n
+   :class-container: anchor-id-tp5n
 
    * contact: fx-perf@mozilla.com
    * description:
@@ -6308,7 +6308,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tp5o
-   :container: + anchor-id-tp5o
+   :class-container: anchor-id-tp5o
 
    * contact: :davehunt, and perftest team
    * source: `tp5n.zip <#page-sets>`__
@@ -6583,7 +6583,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tp5o_scroll
-   :container: + anchor-id-tp5o_scroll
+   :class-container: anchor-id-tp5o_scroll
 
    * contact: :botond, :tnikkel, :hiro, and layout team
    * source: `tp5n.zip <#page-sets>`__
@@ -6843,7 +6843,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tp5o_webext
-   :container: + anchor-id-tp5o_webext
+   :class-container: anchor-id-tp5o_webext
 
    * contact: :mixedpuppy and webextension team
    * preferences: {'xpinstall.signatures.required': False}
@@ -7015,7 +7015,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tresize
-   :container: + anchor-id-tresize
+   :class-container: anchor-id-tresize
 
    * contact: :gcp and platform integration
    * source: `tresize-test.html <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/startup_test/tresize/addon/content/tresize-test.html>`__
@@ -7223,7 +7223,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: ts_paint
-   :container: + anchor-id-ts_paint
+   :class-container: anchor-id-ts_paint
 
    * contact: :mconley, Firefox Desktop Front-end team,
    * source: `tspaint_test.html <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/startup_test/tspaint_test.html>`__
@@ -7427,7 +7427,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: ts_paint_heavy
-   :container: + anchor-id-ts_paint_heavy
+   :class-container: anchor-id-ts_paint_heavy
 
    * `ts_paint <#ts_paint>`_ test run against a heavy user profile.
    * contact: :mconley, Firefox Desktop Front-end team,
@@ -7440,7 +7440,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: ts_paint_webext
-   :container: + anchor-id-ts_paint_webext
+   :class-container: anchor-id-ts_paint_webext
 
    * contact: :mconley, Firefox Desktop Front-end team,
    * preferences: {'xpinstall.signatures.required': False}
@@ -7612,7 +7612,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tscrollx
-   :container: + anchor-id-tscrollx
+   :class-container: anchor-id-tscrollx
 
    * contact: :jrmuizel and gfx
    * source: `scroll.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/scroll>`__
@@ -7823,7 +7823,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tsvg_static
-   :container: + anchor-id-tsvg_static
+   :class-container: anchor-id-tsvg_static
 
    * contact: :jwatt, :dholbert
    * source: `svg_static <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/svg_static/>`__
@@ -8019,7 +8019,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tsvgm
-   :container: + anchor-id-tsvgm
+   :class-container: anchor-id-tsvgm
 
    * An svg-only number that measures SVG rendering performance for dynamic content only.
    * contact: :jwatt, :dholbert
@@ -8041,7 +8041,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tsvgr_opacity
-   :container: + anchor-id-tsvgr_opacity
+   :class-container: anchor-id-tsvgr_opacity
 
    * contact: :jwatt, :dholbert
    * source: `svg_opacity.manifest <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/svg_opacity/svg_opacity.manifest>`__
@@ -8247,7 +8247,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: tsvgx
-   :container: + anchor-id-tsvgx
+   :class-container: anchor-id-tsvgx
 
    * contact: :jwatt, :dholbert
    * source: `svgx <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/svgx>`__
@@ -8463,7 +8463,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: twinopen
-   :container: + anchor-id-twinopen
+   :class-container: anchor-id-twinopen
 
    * contact: :gcp and platform integration
    * source: `twinopen <https://dxr.mozilla.org/mozilla-central/source/testing/talos/talos/tests/twinopen>`__
@@ -8661,7 +8661,7 @@ For the sample commands found below, note that the capitalization used is import
 
 
 .. dropdown:: v8_7
-   :container: + anchor-id-v8_7
+   :class-container: anchor-id-v8_7
 
    * description:
       | This is the V8 (version 7) javascript benchmark taken verbatim and slightly modified

testing/talos/perfdocs/index.rst

@@ -325,9 +325,9 @@ median values of the raw data from the subtests).
 
 Tests which are imported benchmarks are:
 
--  `ARES6 <#ARES6>`_
+-  `ARES6 <#ares6>`_
 -  `dromaeo <#dromaeo>`_
--  `JetStream <#JetStream>`_
+-  `JetStream <#jetstream>`_
 -  `kraken <#kraken>`_
 -  `motionmark <#motionmark>`_
 -  `stylebench <#stylebench>`_

tools/lint/perfdocs/framework_gatherers.py

@@ -251,7 +251,7 @@ class RaptorGatherer(FrameworkGatherer):
             )
 
         result = f".. dropdown:: {title}\n"
-        result += f"   :container: + anchor-id-{title}-{suite_name[0]}\n\n"
+        result += f"   :class-container: anchor-id-{title}-{suite_name[0]}\n\n"
 
         for idx, description in enumerate(matcher):
             if description["name"] != title:
@@ -413,7 +413,7 @@ class TalosGatherer(FrameworkGatherer):
 
     def build_test_description(self, title, test_description="", suite_name=""):
         result = f".. dropdown:: {title}\n"
-        result += f"   :container: + anchor-id-{title}\n\n"
+        result += f"   :class-container: anchor-id-{title}\n\n"
 
         yml_descriptions = [s.strip() for s in test_description.split("- ") if s]
         for description in yml_descriptions:
@@ -534,7 +534,7 @@ class AwsyGatherer(FrameworkGatherer):
     def build_test_description(self, title, test_description="", suite_name=""):
         dropdown_suite_name = suite_name.replace(" ", "-")
         result = f".. dropdown:: {title} ({test_description})\n"
-        result += f"   :container: + anchor-id-{title}-{dropdown_suite_name}\n\n"
+        result += f"   :class-container: anchor-id-{title}-{dropdown_suite_name}\n\n"
 
         awsy_data = read_yaml(self._yaml_path)["suites"]["Awsy tests"]
         if "owner" in awsy_data.keys():