Refactor report page styles: reusable foldable sections. (dart-lang#8061

)

app/lib/frontend/templates/report.dart

@@ -93,16 +93,16 @@ Iterable<d.Node> _report(
     d.p(text: ''),
     // illegal content
     if (subject.isPackage)
-      _block(
-        title: 'I believe the package contains illegal content.',
+      _foldableSection(
+        title: d.text('I believe the package contains illegal content.'),
         children: [
           d.markdown('Please report illegal content through the '
               '[illegal content reporting form here]($lcpsDeepLink).')
         ],
       )
     else if (subject.isPublisher)
-      _block(
-        title: 'I believe the publisher contains illegal content.',
+      _foldableSection(
+        title: d.text('I believe the publisher contains illegal content.'),
         children: [
           d.markdown('Please report illegal content through the '
               '[illegal content reporting form here]($lcpsDeepLink).')
@@ -111,9 +111,9 @@ Iterable<d.Node> _report(
 
     // contact
     if (subject.isPackage)
-      _block(
-        title:
-            'I have found a bug in the package / I need help using the package.',
+      _foldableSection(
+        title: d.text(
+            'I have found a bug in the package / I need help using the package.'),
         children: [
           d.markdown('Please consult the package page: '
               '[`pub.dev/packages/${subject.package}`](https://pub.dev/packages/${subject.package})'),
@@ -131,8 +131,8 @@ Iterable<d.Node> _report(
         ],
       )
     else if (subject.isPublisher)
-      _block(
-        title: 'I want to contact the publisher.',
+      _foldableSection(
+        title: d.text('I want to contact the publisher.'),
         children: [
           d.markdown('Please consult the publisher page: '
               '[`pub.dev/publishers/${subject.publisherId}`](https://pub.dev/publishers/${subject.publisherId})'),
@@ -143,9 +143,9 @@ Iterable<d.Node> _report(
       ),
 
     // direct report
-    _block(
-      classes: ['report-page-direct-report'],
-      title: 'I believe the $kindLabel violates pub.dev/policy.',
+    _foldableSection(
+      buttonDivClasses: ['report-page-direct-report'],
+      title: d.text('I believe the $kindLabel violates pub.dev/policy.'),
       children: [
         if (!(sessionData?.isAuthenticated ?? false))
           d.fragment([
@@ -176,8 +176,8 @@ Iterable<d.Node> _report(
     ),
 
     // problem with pub.dev
-    _block(
-      title: 'I have a problem with the pub.dev website.',
+    _foldableSection(
+      title: d.text('I have a problem with the pub.dev website.'),
       children: [
         d.markdown('Security vulnerabilities may be reported through '
             '[goo.gl/vulnz](https://goo.gl/vulnz)'),
@@ -235,34 +235,34 @@ Iterable<d.Node> _appeal(
   ];
 }
 
-d.Node _block({
-  required String title,
+d.Node _foldableSection({
+  required d.Node title,
   required Iterable<d.Node> children,
-  List<String>? classes,
+  Iterable<String>? buttonDivClasses,
 }) {
   return d.div(
-    classes: ['report-page-section', 'foldable', ...?classes],
+    classes: ['foldable-section', 'foldable'],
     children: [
       d.div(
-        classes: ['report-page-section-title', 'foldable-button'],
+        classes: ['foldable-button', ...?buttonDivClasses],
         children: [
           d.img(
             classes: ['foldable-icon'],
             image: d.Image(
               src: staticUrls
-                  .getAssetUrl('/static/img/report-foldable-icon.svg'),
+                  .getAssetUrl('/static/img/foldable-section-icon.svg'),
               alt: 'trigger folding of the section',
               width: 13,
               height: 6,
             ),
           ),
-          d.text(title),
+          title,
         ],
       ),
       d.div(
-        classes: ['report-page-section-body', 'foldable-content'],
+        classes: ['foldable-content'],
         children: children,
-      )
+      ),
     ],
   );
 }

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

@@ -141,7 +141,7 @@ d.Node _section(ReportSection section) {
                   classes: ['foldable-icon'],
                   image: d.Image(
                     src: staticUrls
-                        .getAssetUrl('/static/img/report-foldable-icon.svg'),
+                        .getAssetUrl('/static/img/foldable-section-icon.svg'),
                     alt: 'trigger folding of the section',
                     width: 13,
                     height: 6,

app/test/frontend/golden/pkg_score_page.html

@@ -248,7 +248,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                           <span class="pkg-report-header-score-granted">18</span>
                           /
                           <span class="pkg-report-header-score-max">30</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -275,7 +275,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">36</span>
                           /
                           <span class="pkg-report-header-score-max">40</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">

app/test/frontend/golden/report_page.html

@@ -117,25 +117,25 @@ <h1>Report a problem</h1>
             ?
           </p>
           <p></p>
-          <div class="report-page-section foldable">
-            <div class="report-page-section-title foldable-button">
-              <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+          <div class="foldable-section foldable">
+            <div class="foldable-button">
+              <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
               I believe the package contains illegal content.
             </div>
-            <div class="report-page-section-body foldable-content">
+            <div class="foldable-content">
               <p>
                 Please report illegal content through the
                 <a href="https://reportcontent.google.com/troubleshooter?product=dart_pub&amp;content_id=https://pub.dev/packages/oxygen&amp;url=https://pub.dev/packages/oxygen/example" rel="ugc">illegal content reporting form here</a>
                 .
               </p>
             </div>
           </div>
-          <div class="report-page-section foldable">
-            <div class="report-page-section-title foldable-button">
-              <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+          <div class="foldable-section foldable">
+            <div class="foldable-button">
+              <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
               I have found a bug in the package / I need help using the package.
             </div>
-            <div class="report-page-section-body foldable-content">
+            <div class="foldable-content">
               <p>
                 Please consult the package page:
                 <a href="https://pub.dev/packages/oxygen">
@@ -151,12 +151,12 @@ <h1>Report a problem</h1>
               </p>
             </div>
           </div>
-          <div class="report-page-section foldable report-page-direct-report">
-            <div class="report-page-section-title foldable-button">
-              <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+          <div class="foldable-section foldable">
+            <div class="foldable-button report-page-direct-report">
+              <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
               I believe the package violates pub.dev/policy.
             </div>
-            <div class="report-page-section-body foldable-content">
+            <div class="foldable-content">
               <p>Contact information:</p>
               <div class="mdc-form-field">
                 <label for="report-email">Email</label>
@@ -181,12 +181,12 @@ <h1>Report a problem</h1>
               <button id="report-submit" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple" data-form-api-button="submit">Submit</button>
             </div>
           </div>
-          <div class="report-page-section foldable">
-            <div class="report-page-section-title foldable-button">
-              <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+          <div class="foldable-section foldable">
+            <div class="foldable-button">
+              <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
               I have a problem with the pub.dev website.
             </div>
-            <div class="report-page-section-body foldable-content">
+            <div class="foldable-content">
               <p>
                 Security vulnerabilities may be reported through
                 <a href="https://goo.gl/vulnz" rel="ugc">goo.gl/vulnz</a>

app/test/task/testdata/goldens/packages/oxygen/score.html

@@ -240,7 +240,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                           <span class="pkg-report-header-score-granted">10</span>
                           /
                           <span class="pkg-report-header-score-max">30</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -380,7 +380,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">20</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -422,7 +422,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">20</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -492,7 +492,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">50</span>
                           /
                           <span class="pkg-report-header-score-max">50</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -516,7 +516,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">40</span>
                           /
                           <span class="pkg-report-header-score-max">40</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">

app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html

@@ -244,7 +244,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                           <span class="pkg-report-header-score-granted">10</span>
                           /
                           <span class="pkg-report-header-score-max">30</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -384,7 +384,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">20</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -426,7 +426,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">20</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -496,7 +496,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">50</span>
                           /
                           <span class="pkg-report-header-score-max">50</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">
@@ -520,7 +520,7 @@ <h3>
                           <span class="pkg-report-header-score-granted">40</span>
                           /
                           <span class="pkg-report-header-score-max">40</span>
-                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/report-foldable-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
+                          <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
                         </div>
                       </div>
                       <div class="foldable-content">

pkg/web_css/lib/src/_report.scss

@@ -10,13 +10,13 @@
     width: 100%;
     margin-bottom: 12px;
   }
+}
 
-  .report-page-section {
-    border-top: 1px solid #eee;
-    margin: 12px 0px;
-  }
+.foldable-section {
+  border-top: 1px solid #eee;
+  margin: 12px 0px;
 
-  .report-page-section-title {
+  >.foldable-button {
     font-size: 18px;
     font-weight: 500;
     padding: 8px 0px;
@@ -27,10 +27,6 @@
     }
   }
 
-  .report-page-section-body {
-    padding-left: 16px;
-  }
-
   .foldable-icon {
     margin: 0px 8px 3px 8px;
     width: 12px;
@@ -39,9 +35,13 @@
     transition: transform .3s linear;
   }
 
-  .foldable.-active {
+  &.-active {
     .foldable-icon {
       transform: rotate(180deg);
     }
   }
+
+  >.foldable-content {
+    margin-left: 28px; // foldable icon's margins + width
+  }
 }