Use the same title attribute for both download count widget. (#9004)

Author: isoos

app/lib/frontend/templates/_consts.dart

@@ -11,6 +11,10 @@ const myPackagesTabTitle = 'Packages';
 const myLikedPackagesTabTitle = 'Likes';
 const myActivityLogTabTitle = 'Activity log';
 
+/// Text to display when the mouse pointer is hovering over the download count number.
+const titleFor30DaysDownloadCounts =
+    'Number of downloads of this package during the past 30 days';
+
 class SdkDict {
   final String topSdkPackages;
   final String searchPackagesLabel;

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

@@ -5,6 +5,7 @@
 import 'package:_pub_shared/format/number_format.dart';
 
 import '../../../dom/dom.dart' as d;
+import '../../_consts.dart';
 
 d.Node labeledScoresNode({
   required String package,
@@ -36,10 +37,7 @@ d.Node labeledScoresNode({
         child: _labeledScore('points', grantedPubPoints?.toString(), sign: ''),
       ),
       d.div(
-        attributes: {
-          'title':
-              'Number of downloads of this package during the past 30 days',
-        },
+        attributes: {'title': titleFor30DaysDownloadCounts},
         classes: ['packages-score', 'packages-score-downloads'],
         child: _labeledScore(
           'downloads',

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

@@ -7,14 +7,15 @@ import 'dart:convert';
 import 'package:_pub_shared/data/download_counts_data.dart';
 import 'package:_pub_shared/format/number_format.dart';
 import 'package:pana/models.dart';
-import 'package:pub_dev/frontend/dom/material.dart';
 import 'package:pub_dev/service/download_counts/backend.dart';
 import 'package:pub_dev/shared/utils.dart';
 
 import '../../../../scorecard/models.dart' hide ReportStatus;
 import '../../../../shared/urls.dart' as urls;
 import '../../../dom/dom.dart' as d;
+import '../../../dom/material.dart';
 import '../../../static_files.dart';
+import '../../_consts.dart';
 
 /// Renders the score page content.
 d.Node scoreTabNode({
@@ -337,14 +338,20 @@ d.Node _likeKeyFigureNode(int? likeCount) {
 
 d.Node _downloadCountsKeyFigureNode(int? downloadCounts) {
   if (downloadCounts == null) {
-    return _keyFigureNode(value: '--', supplemental: '', label: 'downloads');
+    return _keyFigureNode(
+      value: '--',
+      supplemental: '',
+      label: 'downloads',
+      title: titleFor30DaysDownloadCounts,
+    );
   }
   return _keyFigureNode(
     value:
         '${compactFormat(downloadCounts).value}'
         '${compactFormat(downloadCounts).suffix}',
     supplemental: '',
     label: 'downloads',
+    title: titleFor30DaysDownloadCounts,
   );
 }
 
@@ -373,10 +380,13 @@ d.Node _keyFigureNode({
   required String value,
   required String supplemental,
   required String label,
+  String? title,
   List<String>? classes,
 }) {
+  final attributes = title == null ? null : {'title': title};
   return d.div(
     classes: ['score-key-figure', ...?classes],
+    attributes: attributes,
     children: [
       d.div(
         classes: ['score-key-figure-title'],

app/test/frontend/golden/pkg_score_page.html

@@ -228,7 +228,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
                     </div>
-                    <div class="score-key-figure">
+                    <div class="score-key-figure" title="Number of downloads of this package during the past 30 days">
                       <div class="score-key-figure-title">
                         <span class="score-key-figure-value">--</span>
                         <span class="score-key-figure-supplemental"></span>

app/test/frontend/golden/pkg_score_page_with_downloads_chart.html

@@ -228,7 +228,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
                     </div>
-                    <div class="score-key-figure">
+                    <div class="score-key-figure" title="Number of downloads of this package during the past 30 days">
                       <div class="score-key-figure-title">
                         <span class="score-key-figure-value">--</span>
                         <span class="score-key-figure-supplemental"></span>

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

@@ -219,7 +219,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
                     </div>
-                    <div class="score-key-figure">
+                    <div class="score-key-figure" title="Number of downloads of this package during the past 30 days">
                       <div class="score-key-figure-title">
                         <span class="score-key-figure-value">--</span>
                         <span class="score-key-figure-supplemental"></span>

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

@@ -223,7 +223,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
                     </div>
-                    <div class="score-key-figure">
+                    <div class="score-key-figure" title="Number of downloads of this package during the past 30 days">
                       <div class="score-key-figure-title">
                         <span class="score-key-figure-value">--</span>
                         <span class="score-key-figure-supplemental"></span>