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,16 +118,6 @@
         // Show dropdownAllVersionsWrapper
         dropdownAllVersionsWrapper.classList.remove('d-none');
 
-        btnInstallActionItem.forEach(function(item) {
-          // Hide all items by default
-          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
 
         /*
@@ -138,12 +129,39 @@
         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);
+
           // 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 %}
+                        <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>
+                      {% endwith %}
                       <span class="text-muted">{{ download_item.size|filesizeformat }}</span>
                     </a>
                   </li>