Replace unstyled meter with progress (#19968)

Replace the only `<meter>` element in use with a `<progress>` which is
styled properly. Also slightly adjust colors on it for better contrast.

Co-authored-by: Lunny Xiao <[email protected]>

Author: silverwind

templates/repo/diff/box.tmpl

@@ -19,8 +19,8 @@
 			</div>
 			<div class="diff-detail-actions df ac">
 				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
-					<meter id="viewed-files-summary" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></meter>
-					<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
+					<progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
+					<label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-2" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
 						{{.i18n.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
 					</label>
 				{{end}}

web_src/js/features/pull-view-file.js

@@ -9,8 +9,8 @@ const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all
 // Refreshes the summary of viewed files if present
 // The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
 function refreshViewedFilesSummary() {
-  const viewedFilesMeter = document.getElementById('viewed-files-summary');
-  viewedFilesMeter?.setAttribute('value', prReview.numberOfViewedFiles);
+  const viewedFilesProgress = document.getElementById('viewed-files-summary');
+  viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
   const summaryLabel = document.getElementById('viewed-files-summary-label');
   if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
     .replace('%[1]d', prReview.numberOfViewedFiles)

web_src/less/_base.less

@@ -211,19 +211,19 @@ details summary > * {
 }
 
 progress {
-  background: var(--color-secondary);
+  background: var(--color-secondary-dark-1);
   border-radius: 6px;
   border: none;
   overflow: hidden;
 }
 progress::-webkit-progress-bar {
-  background: var(--color-secondary);
+  background: var(--color-secondary-dark-1);
 }
 progress::-webkit-progress-value {
-  background-color: var(--color-secondary-dark-3);
+  background-color: var(--color-secondary-dark-4);
 }
 progress::-moz-progress-bar {
-  background: var(--color-secondary-dark-3);
+  background: var(--color-secondary-dark-4);
 }
 
 * {

web_src/less/_review.less

@@ -280,3 +280,8 @@ a.blob-excerpt:hover {
 .viewed-file-checked-form {
   background-color: var(--color-primary-light-4);
 }
+
+#viewed-files-summary {
+  width: 72px;
+  height: 10px;
+}