content/static: show deprecated symbols specially

For golang/go#40850 Change-Id: I1b7d2ac03dbba61646a63edc373fe2b9db993756 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/314592 Trust: Jonathan Amsterdam <jba@google.com> Run-TryBot: Jonathan Amsterdam <jba@google.com> TryBot-Result: kokoro <noreply+kokoro@google.com> Reviewed-by: Jamal Carvalho <jamal@golang.org> Reviewed-by: Julie Qiu <julie@golang.org>
2021-04-28 09:13:39 -04:00 · 2021-04-28 09:13:39 -04:00 · 15d2d7e5d5
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@ -565,7 +565,6 @@ pre,
  color: var(--gray-3);
 }

-/* common dialog styles */
 .Dialog {
  padding: 0;
  position: fixed;
--- a/content/static/css/unit_doc.css
+++ b/content/static/css/unit_doc.css
@ -42,7 +42,6 @@
 .UnitDoc .Documentation h4 {
  font-size: 1.375rem;
 }
-
 .Documentation {
  color: var(--gray-1);
  display: block;
@ -301,8 +300,7 @@
  font-style: italic;
  margin-left: 0.5rem;
 }
-
-.Documentation-bodyDeprecated {
+.Documentation-deprecatedBody {
  color: var(--gray-3);
  font-size: 1rem;
  font-style: italic;
@ -310,8 +308,20 @@
  margin-left: 0.5rem;
  margin-right: 0.5rem;
 }
-
-.Documentation-deprecatedShowLink {
-  font-size: 1rem;
-  font-weight: 400;
+.Documentation-deprecatedDetails .Documentation-deprecatedBody::after {
+  color: var(--turq-dark);
+  content: 'Show';
+  margin-left: 1rem;
+}
+.Documentation-deprecatedDetails[open] .Documentation-deprecatedBody::after {
+  color: var(--turq-dark);
+  content: 'Hide';
+  margin-left: 1rem;
+}
+.Documentation-deprecatedDetails > summary {
+  list-style: none;
+  opacity: 1;
+}
+.Documentation-deprecatedDetails .Documentation-source {
+  opacity: 1;
 }
--- a/content/static/html/doc/body.tmpl
+++ b/content/static/html/doc/body.tmpl
@ -167,10 +167,26 @@

 {{define "item"}}
  {{$id := safe_id .FullName}}
-  <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
-    <span>{{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a></span>
-    {{- template "since_version" .FullName -}}
-  </h4>{{"\n"}}
-  {{- template "declaration" . -}}
-  {{- template "example" .Examples -}}
+  {{if .IsDeprecated}}
+    <details class="Documentation-deprecatedDetails">
+      <summary>
+        <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+          <span>
+            {{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a>
+              <span class="Documentation-deprecatedBody">deprecated</span>
+          </span>
+          {{- template "since_version" .FullName -}}
+        </h4>{{"\n"}}
+      </summary>
+      {{- template "declaration" . -}}
+      {{- template "example" .Examples -}}
+    </details>
+  {{else}}
+    <h4 tabindex="-1" id="{{$id}}" data-kind="{{.Kind}}" class="{{.HeaderClass}}">
+      <span>{{.HeaderStart}} {{source_link .Name .Decl}} <a class="Documentation-idLink" href="#{{$id}}">¶</a></span>
+        {{- template "since_version" .FullName -}}
+    </h4>{{"\n"}}
+    {{- template "declaration" . -}}
+    {{- template "example" .Examples -}}
+  {{end}}
 {{end}}
--- a/internal/godoc/dochtml/testdata/deprecated-on.golden
+++ b/internal/godoc/dochtml/testdata/deprecated-on.golden
@ -57,11 +57,17 @@ Deprecated: use GoodC.
 </section>
 <h3 tabindex="-1" id="pkg-functions" class="Documentation-functionsHeader">Functions <a href="#pkg-functions">¶</a></h3>
 <section class="Documentation-functions"><div class="Documentation-function">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="BadF" data-kind="function" class="Documentation-functionHeader">
-<span>func <a class="Documentation-source" href="src">BadF</a> <a class="Documentation-idLink" href="#BadF">¶</a></span>
+<span>
+func <a class="Documentation-source" href="src">BadF</a> <a class="Documentation-idLink" href="#BadF">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func BadF()</pre>
 </div>
@ -70,6 +76,7 @@ Deprecated: use GoodC.
 </div><p>BadF is bad.
 Deprecated: use GoodF.
 </p>
+</details>
 </div><div class="Documentation-function">
 <h4 tabindex="-1" id="GoodF" data-kind="function" class="Documentation-functionHeader">
 <span>func <a class="Documentation-source" href="src">GoodF</a> <a class="Documentation-idLink" href="#GoodF">¶</a></span>
@ -82,11 +89,17 @@ Deprecated: use GoodF.
 </div></section>
 <h3 tabindex="-1" id="pkg-types" class="Documentation-typesHeader">Types <a href="#pkg-types">¶</a></h3>
 <section class="Documentation-types"><div class="Documentation-type">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="BadT" data-kind="type" class="Documentation-typeHeader">
-<span>type <a class="Documentation-source" href="src">BadT</a> <a class="Documentation-idLink" href="#BadT">¶</a></span>
+<span>
+type <a class="Documentation-source" href="src">BadT</a> <a class="Documentation-idLink" href="#BadT">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>type BadT <a href="/builtin#int">int</a></pre>
 </div>
@ -96,6 +109,7 @@ Deprecated: use GoodF.
 Deprecated: use GoodT.
 Don&#39;t use this.
 </p>
+</details>
 </div><div class="Documentation-type">
 <h4 tabindex="-1" id="GoodT" data-kind="type" class="Documentation-typeHeader">
 <span>type <a class="Documentation-source" href="src">GoodT</a> <a class="Documentation-idLink" href="#GoodT">¶</a></span>
@ -106,11 +120,17 @@ Don&#39;t use this.
 <pre>type GoodT <a href="/builtin#int">int</a></pre>
 </div>
 <div class="Documentation-typeFunc">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="NewGoodTBad" data-kind="function" class="Documentation-typeFuncHeader">
-<span>func <a class="Documentation-source" href="src">NewGoodTBad</a> <a class="Documentation-idLink" href="#NewGoodTBad">¶</a></span>
+<span>
+func <a class="Documentation-source" href="src">NewGoodTBad</a> <a class="Documentation-idLink" href="#NewGoodTBad">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func NewGoodTBad() <a href="#GoodT">GoodT</a></pre>
 </div>
@ -119,6 +139,7 @@ Don&#39;t use this.
 </div><p>NewGoodTBad is bad.
 Deprecated: use NewGoodTGood.
 </p>
+</details>
 </div><div class="Documentation-typeFunc">
 <h4 tabindex="-1" id="NewGoodTGood" data-kind="function" class="Documentation-typeFuncHeader">
 <span>func <a class="Documentation-source" href="src">NewGoodTGood</a> <a class="Documentation-idLink" href="#NewGoodTGood">¶</a></span>
@ -129,11 +150,17 @@ Deprecated: use NewGoodTGood.
 <pre>func NewGoodTGood() <a href="#GoodT">GoodT</a></pre>
 </div>
 </div><div class="Documentation-typeMethod">
+<details class="Documentation-deprecatedDetails">
+<summary>
 <h4 tabindex="-1" id="GoodT.BadM" data-kind="method" class="Documentation-typeMethodHeader">
-<span>func (GoodT) <a class="Documentation-source" href="src">BadM</a> <a class="Documentation-idLink" href="#GoodT.BadM">¶</a></span>
+<span>
+func (GoodT) <a class="Documentation-source" href="src">BadM</a> <a class="Documentation-idLink" href="#GoodT.BadM">¶</a>
+<span class="Documentation-deprecatedBody">deprecated</span>
+</span>
 <span class="Documentation-sinceVersion">
 </span>
 </h4>
+</summary>
 <div class="Documentation-declaration">
 <pre>func (<a href="#GoodT">GoodT</a>) BadM()</pre>
 </div>
@ -142,6 +169,7 @@ Deprecated: use NewGoodTGood.
 </div><p>BadM is bad.
 Deprecated: use GoodM.
 </p>
+</details>
 </div><div class="Documentation-typeMethod">
 <h4 tabindex="-1" id="GoodT.GoodM" data-kind="method" class="Documentation-typeMethodHeader">
 <span>func (GoodT) <a class="Documentation-source" href="src">GoodM</a> <a class="Documentation-idLink" href="#GoodT.GoodM">¶</a></span>