Add information on how crate sizes are computed

Author: GuillaumeGomez

templates/crate/details.html

@@ -40,11 +40,17 @@
                         {%- if let Some(source_size) = source_size -%}
                             <li class="pure-menu-heading">Size</li>
                             <li class="pure-menu-item">
-                                <span class="documented-info">Source code size: {{(*source_size)|filesizeformat}}</span>
+                                <span class="documented-info">Source code size: {{(*source_size)|filesizeformat}} <span class="size" tabindex=0>
+                                    {{- crate::icons::IconCircleInfo.render_solid(false, false, "") -}}
+                                    <span class="info">This is the summed size of all the files inside the crates.io package for this release.</span>
+                                </span>
                             </li>
                             {%- if let Some(doc_size) = documentation_size -%}
                                 <li class="pure-menu-item">
-                                    <span class="documented-info">Documentation size: {{(*doc_size)|filesizeformat}}</span>
+                                    <span class="documented-info">Documentation size: {{(*doc_size)|filesizeformat}} <span class="size" tabindex=0>
+                                        {{- crate::icons::IconCircleInfo.render_solid(false, false, "") -}}
+                                        <span class="info">This is the summed size of all files generated by rustdoc for all configured targets</span>
+                                </span>
                                 </li>
                             {%- endif -%}
                         {%- endif -%}

templates/style/style.scss

@@ -479,6 +479,20 @@ div.package-page-container {
             width: 100%;
         }
 
+        .documented-info .size .info {
+            display: none;
+            position: absolute;
+            top: 90%;
+            background: var(--color-background-code);
+            z-index: 1;
+            border: 1px solid var(--color-menu-border);
+        }
+
+        .documented-info .size:hover .info,
+        .documented-info .size:focus .info {
+            display: block;
+        }
+
         li.pure-menu-heading:first-child {
             margin-top: 0;
         }