DependencyList::Row: Replace basic feature listing with generated description and tooltip

Author: Turbo87

app/components/dependency-list/row.hbs

@@ -28,23 +28,34 @@
         {{@dependency.crate_id}}
       </LinkTo>
 
-      <span local-class="metadata" data-test-metadata>
-        {{#if @dependency.optional}}
+      {{#if @dependency.optional}}
+        <span local-class="optional-label" data-test-optional>
           optional
-        {{/if}}
-      </span>
-    </div>
+        </span>
+      {{/if}}
 
-    {{#if (or (not @dependency.default_features) @dependency.features)}}
-      <div local-class="features" data-test-features>
-        {{#if (not @dependency.default_features)}}
-        default-features=false
-        {{/if}}
-        {{#if @dependency.features}}
-        features={{@dependency.features}}
-        {{/if}}
-      </div>
-    {{/if}}
+      {{#if this.featuresDescription}}
+        <span local-class="features-label" data-test-features>
+          {{! extra <span> for better tooltip alignment }}
+          <span>
+            {{this.featuresDescription}}
+
+            <EmberTooltip>
+              <ul local-class="feature-list">
+                <li>
+                  {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
+                </li>
+                {{#each @dependency.features as |feature|}}
+                  <li>
+                    {{svg-jar "checkbox"}} {{feature}}
+                  </li>
+                {{/each}}
+              </ul>
+            </EmberTooltip>
+          </span>
+        </span>
+      {{/if}}
+    </div>
 
     {{#if (or this.description this.loadCrateTask.isRunning)}}
       <div local-class="description" data-test-description>

app/components/dependency-list/row.js

@@ -26,6 +26,19 @@ export default class VersionRow extends Component {
     return this.loadCrateTask.lastSuccessful?.value?.description;
   }
 
+  get featuresDescription() {
+    let { default_features: defaultFeatures, features } = this.args.dependency;
+    let numFeatures = features.length;
+
+    if (numFeatures !== 0) {
+      return defaultFeatures
+        ? `${numFeatures} extra feature${numFeatures > 1 ? 's' : ''}`
+        : `only ${numFeatures} feature${numFeatures > 1 ? 's' : ''}`;
+    } else if (!defaultFeatures) {
+      return 'no default features';
+    }
+  }
+
   @task *loadCrateTask() {
     let { dependency } = this.args;
     return yield this.store.findRecord('crate', dependency.crate_id);

app/components/dependency-list/row.module.css

@@ -94,6 +94,7 @@
     text-transform: uppercase;
     letter-spacing: .7px;
     font-size: 13px;
+    margin-right: 15px;
 
     a {
         position: relative;
@@ -115,12 +116,32 @@
         text-transform: none;
         letter-spacing: normal;
     }
+
+    @media only screen and (max-width: 550px) {
+        display: block;
+        margin-top: 10px;
+    }
 }
 
-.features {
-    margin-top: 10px;
-    color: var(--crate-color);
-    font-size: 80%;
+.optional-label {
+    composes: metadata;
+}
+
+.features-label {
+    composes: metadata;
+}
+
+.feature-list {
+    padding: 0;
+    margin: 10px 5px;
+    list-style: none;
+
+    svg {
+        height: 1em;
+        width: auto;
+        margin-right: 2px;
+        margin-bottom: -.1em;
+    }
 }
 
 .description {