Null-safety badge on package listing

app/lib/frontend/request_context.dart

@@ -20,6 +20,10 @@ class RequestContext {
   /// Whether experimental UI features are activated.
   final bool isExperimental;
 
+  /// Whether we should display null-safety related data on the UI.
+  /// TODO: remove this field after launching null-safety support.
+  final bool isNullSafetyDisplayed;
+
   /// Whether indexing of the content by robots should be blocked.
   final bool blockRobots;
 
@@ -30,6 +34,7 @@ class RequestContext {
   const RequestContext({
     this.indentJson = false,
     this.isExperimental = false,
+    this.isNullSafetyDisplayed = false,
     this.blockRobots = true,
     this.uiCacheEnabled = false,
   });

app/lib/frontend/templates/listing.dart

@@ -66,6 +66,8 @@ String renderPackageList(
       'last_uploaded': view.shortUpdated,
       'desc': view.ellipsizedDescription,
       'is_flutter_favorite': view.tags.contains(PackageTags.isFlutterFavorite),
+      'is_null_safe': requestContext.isNullSafetyDisplayed &&
+          view.tags.contains(PackageVersionTags.isNullSafe),
       'publisher_id': view.publisherId,
       'publisher_url':
           view.publisherId == null ? null : urls.publisherUrl(view.publisherId),

app/lib/frontend/templates/views/pkg/package_list_experimental.mustache

@@ -33,21 +33,28 @@
     {{/is_external}}
     {{^is_external}}
     <p class="packages-metadata">
-      v <a href="{{& url}}">{{version}}</a>
-      {{#show_prerelease_version}} / <a href="{{& prerelease_version_url}}">{{prerelease_version}}</a>{{/show_prerelease_version}}
-      • Updated: <span>{{last_uploaded}}</span>
+      <span class="packages-metadata-block">
+        v <a href="{{& url}}">{{version}}</a>
+        {{#show_prerelease_version}} / <a href="{{& prerelease_version_url}}">{{prerelease_version}}</a>{{/show_prerelease_version}}
+        • Updated: <span>{{last_uploaded}}</span>
+      </span>
       {{#publisher_id}}
-      <img class="packages-vp-icon"
+      <span class="packages-metadata-block">
+        <img class="packages-vp-icon"
            src="{{& static_assets.img__verified-publisher-icon_svg}}"
            title="Published by a pub.dev verified publisher" />
-      <a href="/publishers/{{publisher_id}}">{{publisher_id}}</a>
+        <a href="/publishers/{{publisher_id}}">{{publisher_id}}</a>
+      </span>
       {{/publisher_id}}
       {{#is_flutter_favorite}}
-        <span class="package-badge">
-          <img class="package-badge-icon" src="{{static_assets.img__flutter-logo-32x32_png}}" />
-          Flutter Favorite
-        </span>
+      <span class="package-badge">
+        <img class="package-badge-icon" src="{{static_assets.img__flutter-logo-32x32_png}}" />
+        Flutter Favorite
+      </span>
       {{/is_flutter_favorite}}
+      {{#is_null_safe}}
+      <span class="package-badge" title="Supports the null safety language feature.">Null safety</span>
+      {{/is_null_safe}}
     </p>
     {{/is_external}}
     <div>{{& tags_html}}</div>

app/lib/shared/handler_helpers.dart

@@ -105,6 +105,7 @@ shelf.Handler _requestContextWrapper(shelf.Handler handler) {
     registerRequestContext(RequestContext(
       indentJson: indentJson,
       isExperimental: isExperimental,
+      isNullSafetyDisplayed: hasExperimentalCookie,
       blockRobots: !enableRobots,
       uiCacheEnabled: uiCacheEnabled,
     ));

app/lib/shared/tags.dart

@@ -33,6 +33,12 @@ abstract class PackageTags {
 abstract class PackageVersionTags {
   /// PackageVersion supports only legacy (Dart 1) SDK.
   static const String isLegacy = 'is:legacy';
+
+  /// The PackageVersion is null-safe.
+  ///
+  /// See definition at `_NullSafetyViolationFinder` in
+  /// https://github.com/dart-lang/pana/blob/master/lib/src/tag_detection.dart
+  static const String isNullSafe = 'is:null-safe';
 }
 
 /// Collection of SDK tags (with prefix and value).

pkg/web_css/lib/src/_list_experimental.scss

@@ -355,6 +355,10 @@ body.experimental {
     font-size: 12px;
   }
 
+  .packages-metadata-block {
+    margin: 0 8px 0 0;
+  }
+
   .package-badge {
     display: inline-block;
     background: white;
@@ -364,7 +368,7 @@ body.experimental {
 
     font-size: 12px;
     padding: 1px 6px;
-    margin: 0 12px;
+    margin: 0 8px 0 0;
 
     .package-badge-icon {
       max-width: 13px;
@@ -377,7 +381,6 @@ body.experimental {
   .packages-vp-icon {
     display: inline-block;
     height: 14px;
-    margin-left: 4px;
     position: relative;
     top: 3px;
     opacity: 0.5;