Table of Contents for package admin page.

app/lib/frontend/dom/dom.dart

@@ -224,6 +224,7 @@ Node a({
   String? rel,
   String? target,
   String? title,
+  String? name,
 }) {
   return dom.element(
     'a',
@@ -234,6 +235,7 @@ Node a({
       if (rel != null) 'rel': rel,
       if (target != null) 'target': target,
       if (title != null) 'title': title,
+      if (name != null) 'name': name,
       ...?attributes,
     },
     children: children,

app/lib/frontend/templates/views/pkg/admin_page.dart

@@ -9,6 +9,7 @@ import '../../../../package/models.dart';
 import '../../../../shared/urls.dart' as urls;
 import '../../../dom/dom.dart' as d;
 import '../../../dom/material.dart' as material;
+import '../shared/toc.dart';
 
 /// Creates the package admin page content.
 d.Node packageAdminPageNode({
@@ -20,6 +21,28 @@ d.Node packageAdminPageNode({
 }) {
   final pkgHasPublisher = package.publisherId != null;
   return d.fragment([
+    renderToc([
+      TocNode('Ownership', href: '#ownership'),
+      TocNode(
+        'Options',
+        href: '#options',
+        children: [
+          TocNode('Discontinued', href: '#discontinued'),
+          TocNode('Unlisted', href: '#unlisted'),
+        ],
+      ),
+      TocNode(
+        'Automated publishing',
+        href: '#automated-publishing',
+        children: [
+          TocNode('GitHub Actions', href: '#github-actions'),
+          TocNode('Google Cloud Service account',
+              href: '#google-cloud-service-account'),
+        ],
+      ),
+      TocNode('Version retraction', href: '#version-retraction'),
+    ]),
+    d.a(name: 'ownership'),
     d.h2(text: 'Package ownership'),
     d.div(children: [
       if (!pkgHasPublisher) ...[
@@ -121,7 +144,9 @@ d.Node packageAdminPageNode({
         ),
       ],
     ]),
-    d.h2(text: 'Package Options'),
+    d.a(name: 'options'),
+    d.h2(text: 'Package options'),
+    d.a(name: 'discontinued'),
     d.h3(text: 'Discontinued'),
     d.markdown(
         'A package can be marked as [discontinued](https://dart.dev/tools/pub/publishing#discontinue) '
@@ -161,6 +186,7 @@ d.Node packageAdminPageNode({
       ),
     ],
     if (!package.isDiscontinued) ...[
+      d.a(name: 'unlisted'),
       d.h3(text: 'Unlisted'),
       d.markdown(
           'A package that\'s marked as *unlisted* doesn\'t normally appear in search results on pub.dev. '
@@ -175,7 +201,8 @@ d.Node packageAdminPageNode({
       ),
     ],
     _automatedPublishing(package),
-    d.h2(text: 'Package Version Retraction'),
+    d.a(name: 'version-retraction'),
+    d.h2(text: 'Version retraction'),
     d.div(children: [
       d.markdown(
           'You can [retract](https://dart.dev/go/package-retraction) a package version up to 7 days after publication.'),
@@ -184,7 +211,7 @@ d.Node packageAdminPageNode({
           ' it and stop new applications from taking dependency on it without a dependency override.'),
       d.markdown(
           'You can restore a retracted package version if the version was retracted within the last 7 days.'),
-      d.h3(text: 'Retract Package Version'),
+      d.h3(text: 'Retract package version'),
       if (retractableVersions.isNotEmpty) ...[
         material.dropdown(
           id: '-admin-retract-package-version-input',
@@ -208,7 +235,7 @@ d.Node packageAdminPageNode({
       if (retractableVersions.isEmpty)
         d.markdown('This package has no retractable versions.'),
     ]),
-    d.h3(text: 'Restore Retracted Package Version'),
+    d.h3(text: 'Restore retracted package version'),
     d.div(children: [
       if (retractedVersions.isNotEmpty) ...[
         material.dropdown(
@@ -242,7 +269,9 @@ d.Node _automatedPublishing(Package package) {
   final gcp = package.automatedPublishing?.gcpConfig;
   final isGithubEnabled = github?.isEnabled ?? false;
   return d.fragment([
+    d.a(name: 'automated-publishing'),
     d.h2(text: 'Automated publishing'),
+    d.a(name: 'github-actions'),
     d.h3(text: 'Publishing from GitHub Actions'),
     d.div(
       classes: [
@@ -342,6 +371,7 @@ d.Node _automatedPublishing(Package package) {
         if (isGithubEnabled) _exampleGithubWorkflow(github!),
       ],
     ),
+    d.a(name: 'google-cloud-service-account'),
     d.h3(text: 'Publishing with Google Cloud Service account'),
     d.markdown(
         'When publishing with a GCP _service account_ is enabled, the service account configured here '

app/lib/frontend/templates/views/shared/toc.dart

@@ -0,0 +1,51 @@
+// Copyright (c) 2021, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import '../../../dom/dom.dart' as d;
+
+/// Renders Table of Contents from [nodes].
+///
+/// The hiearchy of the sections is encoded in [TocNode.children].
+d.Node renderToc(Iterable<TocNode> nodes) {
+  return d.div(
+    classes: ['pub-toc-container'],
+    child: d.div(
+      classes: ['pub-toc'],
+      children: [
+        d.div(child: d.b(text: 'Sections')),
+        ...nodes.expand((n) => _renderNode(n, 0)),
+      ],
+    ),
+  );
+}
+
+Iterable<d.Node> _renderNode(TocNode node, int level) sync* {
+  yield d.div(
+    classes: ['pub-toc-node', 'pub-toc-node-$level'],
+    child: node.href == null
+        ? d.text(node.label)
+        : d.a(href: node.href, text: node.label),
+  );
+  if (node.children != null) {
+    yield* node.children!.expand((n) => _renderNode(n, level + 1));
+  }
+}
+
+/// Describes a tree node in the table of contents hierarchy.
+class TocNode {
+  /// The text label to be display.
+  final String label;
+
+  /// The link href to use, if omitted, only a regular text is displayed.
+  final String? href;
+
+  /// Children nodes of this node.
+  List<TocNode>? children;
+
+  TocNode(
+    this.label, {
+    this.href,
+    this.children,
+  });
+}

app/test/frontend/golden/pkg_admin_page.html

@@ -241,6 +241,38 @@ <h3 class="detail-lead-title">Metadata</h3>
             <div class="detail-container detail-body-main">
               <div class="detail-tabs-content">
                 <section class="tab-content detail-tab-admin-content -active">
+                  <div class="pub-toc-container">
+                    <div class="pub-toc">
+                      <div>
+                        <b>Sections</b>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-0">
+                        <a href="#ownership">Ownership</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-0">
+                        <a href="#options">Options</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-1">
+                        <a href="#discontinued">Discontinued</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-1">
+                        <a href="#unlisted">Unlisted</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-0">
+                        <a href="#automated-publishing">Automated publishing</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-1">
+                        <a href="#github-actions">GitHub Actions</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-1">
+                        <a href="#google-cloud-service-account">Google Cloud Service account</a>
+                      </div>
+                      <div class="pub-toc-node pub-toc-node-0">
+                        <a href="#version-retraction">Version retraction</a>
+                      </div>
+                    </div>
+                  </div>
+                  <a name="ownership"></a>
                   <h2>Package ownership</h2>
                   <div>
                     <p>You can transfer this package to a verified publisher if you are a member of the publisher. Transferring the package removes the current uploaders, so that only the members of the publisher can upload new versions.</p>
@@ -321,7 +353,9 @@ <h3>Uploaders</h3>
                       </div>
                     </div>
                   </div>
-                  <h2>Package Options</h2>
+                  <a name="options"></a>
+                  <h2>Package options</h2>
+                  <a name="discontinued"></a>
                   <h3>Discontinued</h3>
                   <p>
                     A package can be marked as
@@ -345,6 +379,7 @@ <h3>Discontinued</h3>
                       <label for="-admin-is-discontinued-checkbox">Mark "discontinued"</label>
                     </div>
                   </div>
+                  <a name="unlisted"></a>
                   <h3>Unlisted</h3>
                   <p>
                     A package that's marked as
@@ -366,7 +401,9 @@ <h3>Unlisted</h3>
                       <label for="-admin-is-unlisted-checkbox">Mark "unlisted"</label>
                     </div>
                   </div>
+                  <a name="automated-publishing"></a>
                   <h2>Automated publishing</h2>
+                  <a name="github-actions"></a>
                   <h3>Publishing from GitHub Actions</h3>
                   <div class="-pub-form-checkbox-row -pub-form-checkbox-toggle-next-sibling">
                     <div class="mdc-form-field">
@@ -486,6 +523,7 @@ <h3>Publishing from GitHub Actions</h3>
                       </div>
                     </div>
                   </div>
+                  <a name="google-cloud-service-account"></a>
                   <h3>Publishing with Google Cloud Service account</h3>
                   <p>
                     When publishing with a GCP
@@ -527,7 +565,8 @@ <h3>Publishing with Google Cloud Service account</h3>
                   <p>
                     <button id="-pkg-admin-automated-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Update</button>
                   </p>
-                  <h2>Package Version Retraction</h2>
+                  <a name="version-retraction"></a>
+                  <h2>Version retraction</h2>
                   <div>
                     <p>
                       You can
@@ -536,7 +575,7 @@ <h2>Package Version Retraction</h2>
                     </p>
                     <p>This will not remove the package version, but warn developers using it and stop new applications from taking dependency on it without a dependency override.</p>
                     <p>You can restore a retracted package version if the version was retracted within the last 7 days.</p>
-                    <h3>Retract Package Version</h3>
+                    <h3>Retract package version</h3>
                     <div id="-admin-retract-package-version-input" class="mdc-select mdc-select--filled -admin-dropdown" data-mdc-auto-init="MDCSelect">
                       <div class="mdc-select__anchor">
                         <span class="mdc-select__ripple"></span>
@@ -563,7 +602,7 @@ <h3>Retract Package Version</h3>
                       <button id="-admin-retract-package-version-button" class="mdc-button mdc-button--raised pub-button-danger" data-mdc-auto-init="MDCRipple">Retract Package Version</button>
                     </p>
                   </div>
-                  <h3>Restore Retracted Package Version</h3>
+                  <h3>Restore retracted package version</h3>
                   <div>
                     <div id="-admin-restore-retract-package-version-input" class="mdc-select mdc-select--filled -admin-dropdown" data-mdc-auto-init="MDCSelect">
                       <div class="mdc-select__anchor">

pkg/web_css/lib/src/_base.scss

@@ -440,3 +440,26 @@ a.-x-ago {
     padding: 8px;
   }
 }
+
+.pub-toc {
+  border-left: 4px solid var(--pub-inset-bgColor);
+  padding: 4px 12px;
+  color: var(--pub-default-text-color);
+
+  a {
+    color: var(--pub-default-text-color);
+  }
+
+  .pub-toc-node-0 {
+    margin-top: 4px;
+  }
+  .pub-toc-node-1 {
+    margin-left: 12px;
+  }
+  .pub-toc-node-2 {
+    margin-left: 24px;
+  }
+  .pub-toc-node-3 {
+    margin-left: 36px;
+  }
+}

pkg/web_css/test/expression_test.dart

@@ -48,6 +48,7 @@ void main() {
       expressions.removeWhere(
           (e) => e.startsWith('detail-tab-') && e.endsWith('-content'));
       expressions.removeWhere((e) => e.startsWith('package-badge-'));
+      expressions.removeWhere((e) => e.startsWith('pub-toc-node-'));
       // shared CSS file (with dartdoc)
       expressions.removeAll([
         'cookie-notice-container',