common/static/common/scripts/app.js

@@ -100,6 +100,7 @@
       const btnInstallAction = document.querySelector('.js-btn-install-action');
       const btnInstallGroup = document.querySelector('.js-btn-install-group');
 
+      const dropdownAllVersionsItemDot = document.querySelectorAll('.js-dropdown-all-versions-item-dot');
       const dropdownAllVersionsWrapper = document.querySelector('.js-dropdown-all-versions-wrapper');
 
       // Create variables multiple
@@ -117,33 +118,50 @@
         // Show dropdownAllVersionsWrapper
         dropdownAllVersionsWrapper.classList.remove('d-none');
 
+        // Get active platform
+
+        /*
+        The navigator objects' 'platform' proporties are arbitrary, and specific to the browser.
+
+        For a light match, we can use the first 3 characters of the platform string.
+        */
+
+        const activePlatform = navigator.platform.toLowerCase();
+        const activePlatformPrefix = activePlatform.substring(0, 3);
+
         btnInstallActionItem.forEach(function(item) {
           // Hide all items by default
           item.classList.add('d-none');
 
+          // Hide dropdownAllVersionsItemDot by default
+          dropdownAllVersionsItemDot.forEach(function(item) {
+            item.classList.add('d-none');
+          });
+
           // Get item platform
           const itemPlatform = item.getAttribute('data-platform');
           const itemPlatformBase = itemPlatform.split('-')[0];
           const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
 
-
-          // Get active platform
-
-          /*
-          The navigator objects' 'platform' proporties are arbitrary, and specific to the browser.
-
-          For a light match, we can use the first 3 characters of the platform string.
-          */
-
-          const activePlatform = navigator.platform.toLowerCase();
-          const activePlatformPrefix = activePlatform.substring(0, 3);
-
           // Show button if item platform matches active platform
           if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
             item.classList.add('btn-install-action-item-active');
             item.classList.remove('d-none');
           }
         });
+
+        dropdownAllVersionsItemDot.forEach(function(item) {
+          // TODO: create named function to not repeat this (optional)
+          // Get item platform
+          const itemPlatform = item.getAttribute('data-platform');
+          const itemPlatformBase = itemPlatform.split('-')[0];
+          const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
+
+          // Show dropdownAllVersionsItemDot if item platform matches active platform
+          if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
+            item.classList.remove('d-none');
+          }
+        });
       }
 
       // Show btnInstallAction

common/static/common/styles/_extension.sass

@@ -475,3 +475,11 @@ a
 
 .featured-image-preview
   width: 16rem
+
+.dropdown-all-versions-item-dot
+  background-color: var(--color-accent)
+  border-radius: 50%
+  height: var(--spacer-1)
+  position: absolute
+  transform: translateX(-1.2rem)
+  width: var(--spacer-1)

extensions/templates/extensions/detail.html

@@ -295,12 +295,13 @@
               <ul class="dropdown-menu js-dropdown-menu w-100" id="js-dropdown-all-versions">
                 {% for download_item in download_list %}
                   <li>
-                    <a class="d-flex dropdown-item justify-content-between" download="{{ download_item.name }}" href="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}">
+                    <a class="align-items-center d-flex dropdown-item justify-content-between" download="{{ download_item.name }}" href="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}">
-                      <span>
+                      {% with platform=download_item.platform %}
-                        {% with platform=download_item.platform %}
+                        <span class="dropdown-all-versions-item-dot js-dropdown-all-versions-item-dot" data-platform="{{ platform.name_first_word|lower|slice:"3" }}"></span>
+                        <span>
                           <i class="i-{{ platform.name_first_word|lower }} me-0"></i> {{ platform.name_first_word }} <span class="text-muted">{{ platform.name_rest}}</span>
-                        {% endwith %}
+                        </span>
-                      </span>
+                      {% endwith %}
                       <span class="text-muted">{{ download_item.size|filesizeformat }}</span>
                     </a>
                   </li>