Auto merge of #3505 - bikeshedder:show-features-of-dependencies, r=Turbo87

Show features of dependencies

I keep getting asked why my crate depends on `tokio` besides it just needing a small subset of features: deadpool-rs/deadpool#88

This PR adds the list of features used from each dependency to the dependencies tab:

![image](https://user-images.githubusercontent.com/1112569/114195470-c5ce5800-9950-11eb-88c0-8e607a29213d.png)

Author: bors

app/components/dependency-list/row.hbs

@@ -28,11 +28,33 @@
         {{@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>
+        </span>
+      {{/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)}}

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,6 +116,32 @@
         text-transform: none;
         letter-spacing: normal;
     }
+
+    @media only screen and (max-width: 550px) {
+        display: block;
+        margin-top: 10px;
+    }
+}
+
+.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 {