[web_app] Minor cleanup and consistency improvements (#8145)

Author: parlough

pkg/web_app/lib/src/_dom_helper.dart

@@ -9,7 +9,7 @@ import 'package:mdc_web/mdc_web.dart' show MDCDialog;
 import 'deferred/markdown.dart' deferred as md;
 
 /// Displays a message via the modal window.
-Future modalMessage(String title, Element content) async {
+Future<void> modalMessage(String title, Element content) async {
   await modalWindow(
     titleText: title,
     content: content,
@@ -85,9 +85,9 @@ Element _buildDialog({
 
   /// The callback will be called with `true` when "OK" was clicked, and `false`
   /// when "Cancel" was clicked.
-  required Function(bool) closing,
+  required void Function(bool) closing,
 }) =>
-    Element.div()
+    DivElement()
       ..classes.add('mdc-dialog')
       ..attributes.addAll({
         'role': 'alertdialog',
@@ -96,25 +96,25 @@ Element _buildDialog({
         'aria-describedby': 'pub-dialog-content',
       })
       ..children = [
-        Element.div()
+        DivElement()
           ..classes.add('mdc-dialog__container')
           ..children = [
-            Element.div()
+            DivElement()
               ..classes.add('mdc-dialog__surface')
               ..children = [
-                Element.tag('h2')
+                HeadingElement.h2()
                   ..classes.add('mdc-dialog__title')
                   ..id = 'pub-dialog-title'
                   ..innerText = titleText,
-                Element.div()
+                DivElement()
                   ..classes.add('mdc-dialog__content')
                   ..id = 'pub-dialog-content'
                   ..children = [content],
                 Element.footer()
                   ..classes.add('mdc-dialog__actions')
                   ..children = [
                     if (isQuestion)
-                      Element.tag('button')
+                      ButtonElement()
                         ..classes.addAll([
                           'mdc-button',
                           'mdc-dialog__button',
@@ -126,11 +126,11 @@ Element _buildDialog({
                           closing(false);
                         })
                         ..children = [
-                          Element.span()
+                          SpanElement()
                             ..classes.add('mdc-button__label')
                             ..innerText = cancelButtonText ?? 'Cancel',
                         ],
-                    Element.tag('button')
+                    ButtonElement()
                       ..classes.addAll([
                         'mdc-button',
                         'mdc-dialog__button',
@@ -142,18 +142,18 @@ Element _buildDialog({
                         closing(true);
                       })
                       ..children = [
-                        Element.span()
+                        SpanElement()
                           ..classes.add('mdc-button__label')
                           ..innerText = okButtonText ?? 'Ok',
                       ],
                   ],
               ],
           ],
-        Element.div()..classes.add('mdc-dialog__scrim'),
+        DivElement()..classes.add('mdc-dialog__scrim'),
       ];
 
 /// Creates an [Element] with unformatted [text] content.
-Element text(String text) => Element.div()..text = text;
+Element text(String text) => DivElement()..text = text;
 
 /// Creates an [Element] with Markdown-formatted content.
 Future<Element> markdown(String text) async {
@@ -203,12 +203,12 @@ bool _isInsideContent(Element e, Element content) {
 /// Disables all focusable elements, except for the elements inside
 /// [allowedComponents]. Returns a [Function] that will restore the
 /// original focusability state of the disabled elements.
-Function disableAllFocusability({
+void Function() disableAllFocusability({
   required List<Element> allowedComponents,
 }) {
   final focusableElements =
       document.body!.querySelectorAll(_focusableSelectors.join(', '));
-  final restoreFocusabilityFns = <Function>[];
+  final restoreFocusabilityFns = <void Function()>[];
   for (final e in focusableElements) {
     if (allowedComponents.any((content) => _isInsideContent(e, content))) {
       continue;
@@ -224,7 +224,7 @@ Function disableAllFocusability({
 
 /// Update [e] to disable focusability and return a [Function] that can be
 /// called to revert its original state.
-Function _disableFocusability(Element e) {
+void Function() _disableFocusability(Element e) {
   final isLink = e.tagName.toLowerCase() == 'a';
   final hasTabindex = e.hasAttribute('tabindex');
   final attributesToSet = <String, String>{

pkg/web_app/lib/src/account.dart

@@ -5,10 +5,9 @@
 import 'dart:async';
 import 'dart:html';
 
-import 'package:web_app/src/page_data.dart';
-
 import 'admin_pages.dart' deferred as admin_pages;
 import 'api_client/api_client.dart' deferred as api_client;
+import 'page_data.dart';
 
 final _signInButton = document.getElementById('-account-login');
 final isNotAuthenticated = _signInButton != null;
@@ -29,8 +28,8 @@ void _initSessionMonitor() {
     return;
   }
 
-  final minCheckDelay = Duration(minutes: 5);
-  final authenticationThreshold = Duration(minutes: 55);
+  const minCheckDelay = Duration(minutes: 5);
+  const authenticationThreshold = Duration(minutes: 55);
   final maxDurationBetweenChecks = authenticationThreshold - minCheckDelay;
   final sessionExpiresThreshold = authenticationThreshold - (minCheckDelay * 2);
 
@@ -86,7 +85,7 @@ void _initSessionMonitor() {
         // unless the user session timed out or expired.
         //
         // In any of the above cases, defaulting to the default frequency is safe.
-        await Future.delayed(minCheckDelay);
+        await Future<void>.delayed(minCheckDelay);
       } else {
         // When the session is active, we can run the next check just before the
         // authentication threshold maxes out. Added sanity checks to bound the delay
@@ -99,7 +98,7 @@ void _initSessionMonitor() {
         } else if (nextCheck < minCheckDelay) {
           nextCheck = minCheckDelay;
         }
-        await Future.delayed(nextCheck);
+        await Future<void>.delayed(nextCheck);
       }
 
       // Update session information and label.

pkg/web_app/lib/src/admin_pages.dart

@@ -37,7 +37,7 @@ void _initGenericForm() {
       button.onClick.listen((event) async {
         final body = <String, Object?>{};
         for (final field in form.querySelectorAll('[name]')) {
-          final name = field.attributes['name']!;
+          final name = field.getAttribute('name')!;
           if (field is InputElement &&
               !(field.disabled ?? false) &&
               field.value != null) {
@@ -54,7 +54,7 @@ void _initGenericForm() {
               api_client.sendJson(verb: 'POST', path: endpoint, body: body),
           successMessage: null,
           onSuccess: (r) async {
-            final result = r ?? <String, dynamic>{};
+            final result = r ?? {};
             // Goto a new location to display the feedback message.
             if (onSuccessGotoUrl != null) {
               window.location.href = onSuccessGotoUrl;
@@ -125,10 +125,9 @@ class _PkgAdminWidget {
         .getElementById('-admin-restore-retract-package-version-button');
     _restoreRetractPackageVersionButton?.onClick
         .listen((_) => _restoreRetracted());
-    if (_inviteUploaderContent != null) {
-      _inviteUploaderContent!.remove();
-      _inviteUploaderContent!.classes.remove('modal-content-hidden');
-    }
+    _inviteUploaderContent
+      ?..classes.remove('modal-content-hidden')
+      ..remove();
     for (final btn
         in document.querySelectorAll('.-pub-remove-uploader-button')) {
       btn.onClick.listen((_) => _removeUploader(btn.dataset['email']!));
@@ -205,7 +204,7 @@ class _PkgAdminWidget {
       isQuestion: true,
       okButtonText: 'Invite',
       content: _inviteUploaderContent!,
-      onExecute: () => _doInviteUploader(),
+      onExecute: _doInviteUploader,
     );
   }
 
@@ -495,7 +494,7 @@ class _PublisherAdminWidget {
       isQuestion: true,
       okButtonText: 'Add',
       content: _addMemberContent!,
-      onExecute: () => _inviteMember(),
+      onExecute: _inviteMember,
     );
   }
 
@@ -553,7 +552,7 @@ class _ConsentWidget {
 
   void _updateButtons(bool? granted) {
     final text = granted! ? 'Consent accepted.' : 'Consent rejected.';
-    _buttons!.replaceWith(Element.p()..text = text);
+    _buttons!.replaceWith(ParagraphElement()..text = text);
   }
 
   Future<void> _accept() async {

pkg/web_app/lib/src/deferred/markdown.dart

@@ -8,7 +8,7 @@ import 'package:markdown/markdown.dart' as md;
 
 /// Creates an [Element] with Markdown-formatted content.
 Future<Element> markdown(String text) async {
-  return Element.div()
+  return DivElement()
     ..setInnerHtml(
       md.markdownToHtml(text),
       validator: NodeValidator(uriPolicy: _UnsafeUriPolicy()),

pkg/web_app/lib/src/foldable.dart

@@ -4,7 +4,7 @@
 
 import 'dart:async';
 import 'dart:html';
-import 'dart:math' show min, max;
+import 'dart:math' show max, min;
 
 void setupFoldable() {
   _setEventForFoldable();
@@ -61,7 +61,7 @@ void _setEventForFoldable() {
 
     final foldableIcon = h.querySelector('.foldable-icon');
     if (foldableIcon != null) {
-      foldableIcon.attributes['tabindex'] = '0';
+      foldableIcon.setAttribute('tabindex', '0');
     }
 
     // listen on trigger events

pkg/web_app/lib/src/gtm_js.dart

@@ -7,12 +7,12 @@ library;
 
 import 'dart:js_interop';
 
-import 'package:web/web.dart' as dart_html;
+import 'package:web/web.dart' as web;
 
 @JS('dataLayer.push')
 external void _push(JSAny? data);
 
-void _pushMap(Map<String, dynamic> data) {
+void _pushMap(Map<String, Object?> data) {
   _push(data.jsify());
 }
 
@@ -25,7 +25,7 @@ void gtmCustomEvent({
     'event': 'custom-event', // hardcoded, used in GTM Trigger
     'customEventCategory': category,
     'customEventAction': action,
-    'customEventLabel': 'path:${dart_html.window.location.pathname}',
+    'customEventLabel': 'path:${web.window.location.pathname}',
     'customEventValue': '1',
   });
 }

pkg/web_app/lib/src/hoverable.dart

@@ -34,8 +34,8 @@ void _setEventForHoverable() {
 
 /// Deactivates the active hover (hiding the hovering panel).
 void deactivateHover(_) {
-  if (_activeHover != null) {
-    _activeHover!.classes.remove('hover');
+  if (_activeHover case final activeHoverElement?) {
+    activeHoverElement.classes.remove('hover');
     _activeHover = null;
   }
 }
@@ -46,7 +46,7 @@ void registerHoverable(Element h) {
     if (h != _activeHover) {
       deactivateHover(e);
       _activeHover = h;
-      _activeHover!.classes.add('hover');
+      h.classes.add('hover');
       e.stopPropagation();
     }
   });
@@ -77,16 +77,17 @@ void _setEventForPackageTitleCopyToClipboard() {
 Future<void> _animateCopyFeedback(Element feedback) async {
   feedback.classes.add('visible');
   await window.animationFrame;
-  await Future.delayed(Duration(milliseconds: 1600));
+  await Future<void>.delayed(Duration(milliseconds: 1600));
   feedback.classes.add('fadeout');
   await window.animationFrame;
   // NOTE: keep in sync with _variables.scss 0.9s animation with the key
   //       $copy-feedback-transition-opacity-delay
-  await Future.delayed(Duration(milliseconds: 900));
+  await Future<void>.delayed(Duration(milliseconds: 900));
   await window.animationFrame;
 
-  feedback.classes.remove('visible');
-  feedback.classes.remove('fadeout');
+  feedback.classes
+    ..remove('visible')
+    ..remove('fadeout');
 }
 
 void _copyToClipboard(String text) {
@@ -127,7 +128,7 @@ void _setupCopyAndFeedbackButton({
   required Element feedback,
   required String Function() textFn,
 }) {
-  copy.attributes['tabindex'] = '0';
+  copy.setAttribute('tabindex', '0');
 
   Future<void> doCopy() async {
     final text = textFn();

pkg/web_app/lib/src/likes.dart

@@ -7,17 +7,18 @@ import 'dart:html';
 
 import 'package:_pub_shared/format/number_format.dart';
 import 'package:mdc_web/mdc_web.dart' show MDCIconButtonToggle;
-import 'package:web_app/src/_dom_helper.dart';
-import 'package:web_app/src/account.dart';
 
+import '_dom_helper.dart';
+import 'account.dart';
 import 'api_client/api_client.dart' deferred as api_client;
 import 'page_data.dart';
 
 Future<void> _done = Future.value();
 
 /// Ensure only one task runs at the same time.
 void _enqueue(Future<void> Function() task) {
-  _done = _done.then((_) => task(), onError: (e) => print('Action failed: $e'));
+  _done = _done.then((_) => task(),
+      onError: (Object? e) => print('Action failed: $e'));
 }
 
 void setupLikesList() {
@@ -52,7 +53,7 @@ void setupLikes() {
   if (likeButton == null) return;
 
   final iconButtonToggle = MDCIconButtonToggle(likeButton);
-  int likesDelta = 0;
+  var likesDelta = 0;
 
   // keep in-sync with app/lib/frontend/templates/views/shared/detail/header.dart
   String likesString() {

pkg/web_app/lib/src/mobile_nav.dart

@@ -36,7 +36,7 @@ void _setEventForDetailMetadataToggle() {
 
   var isVisible = false;
   // ignore: cancel_subscriptions
-  StreamSubscription? stateSubscription;
+  StreamSubscription<void>? stateSubscription;
   final currentTitle = document.head?.querySelector('title')?.text?.trim();
   final currentUrl = window.location.toString();
   document.querySelectorAll('.detail-metadata-toggle').forEach((e) {

pkg/web_app/lib/src/page_data.dart

@@ -8,16 +8,16 @@ import 'package:_pub_shared/data/page_data.dart';
 
 /// The server-provided config/data for the current page.
 ///
-/// This is the <meta name="pub-page-data" content="[json-data]"> embedded in
+/// This is the `<meta name="pub-page-data" content="[json-data]">` embedded in
 /// the `head` section of the HTML page.
 final PageData pageData = _extractData();
 
 PageData _extractData() {
   final meta = document.head?.querySelector('meta[name="pub-page-data"]');
   if (meta != null) {
     try {
-      final text = meta.attributes['content']!;
-      final map = pageDataJsonCodec.decode(text) as Map<String, dynamic>;
+      final text = meta.getAttribute('content')!;
+      final map = pageDataJsonCodec.decode(text) as Map<String, Object?>;
       return PageData.fromJson(map);
     } catch (_) {
       // ignore exception