Story 2406: Update Search Bar with No-JS design

static/css/v3/header.css

@@ -161,6 +161,7 @@
 
 .header__search-icon {
   color: var(--color-icon-brand-accent);
+  flex-shrink: 0;
 }
 
 .header__search-input-trigger {

templates/includes/icon.html

@@ -105,6 +105,8 @@
     <path d="M3.33341 1.33331H6.00008V2.66665H4.66675V3.99998H3.33341V1.33331ZM3.33341 7.99998H2.00008V3.99998H3.33341V7.99998ZM4.66675 9.33331H3.33341V7.99998H4.66675V9.33331ZM6.00008 10.6666V9.33331H4.66675V10.6666H2.00008V9.33331H0.666748V10.6666H2.00008V12H4.66675V14.6666H6.00008V12H7.33341V10.6666H6.00008ZM6.00008 10.6666V12H4.66675V10.6666H6.00008ZM10.0001 2.66665V3.99998H6.00008V2.66665H10.0001ZM12.6667 3.99998H11.3334V2.66665H10.0001V1.33331H12.6667V3.99998ZM12.6667 7.99998V3.99998H14.0001V7.99998H12.6667ZM11.3334 9.33331V7.99998H12.6667V9.33331H11.3334ZM10.0001 10.6666V9.33331H11.3334V10.6666H10.0001ZM10.0001 12H8.66675V10.6666H10.0001V12ZM10.0001 12H11.3334V14.6666H10.0001V12Z" />
   {% elif icon_name == "linux" %}
     <path d="M7.90012 3.85313C7.93137 3.86876 7.95637 3.90626 7.99387 3.90626C8.02825 3.90626 8.08137 3.89376 8.0845 3.85938C8.09075 3.81563 8.02512 3.78751 7.9845 3.76876C7.93137 3.74688 7.86262 3.73751 7.81262 3.76563C7.80012 3.77188 7.78762 3.78751 7.79387 3.80001C7.80325 3.84063 7.86575 3.83438 7.90012 3.85313ZM7.21575 3.90626C7.25325 3.90626 7.27825 3.86876 7.3095 3.85313C7.34387 3.83438 7.40637 3.84063 7.41887 3.80313C7.42512 3.79063 7.41262 3.77501 7.40012 3.76876C7.35012 3.74063 7.28137 3.75001 7.22825 3.77188C7.18762 3.79063 7.122 3.81876 7.12825 3.86251C7.13137 3.89376 7.1845 3.90938 7.21575 3.90626ZM14.1251 12.6188C14.0126 12.4938 13.9595 12.2563 13.9001 12.0031C13.8439 11.75 13.7782 11.4781 13.572 11.3031C13.5314 11.2688 13.4907 11.2375 13.447 11.2125C13.4064 11.1875 13.3626 11.1656 13.3189 11.15C13.6064 10.2969 13.4939 9.44688 13.2032 8.67813C12.847 7.73751 12.2251 6.91563 11.7501 6.35313C11.2157 5.68126 10.697 5.04376 10.7064 4.10313C10.722 2.66876 10.8657 0.00313404 8.33762 9.0367e-06C5.13762 -0.00624096 5.93762 3.23126 5.90325 4.22501C5.85012 4.95626 5.70325 5.53126 5.20012 6.24688C4.6095 6.95001 3.77825 8.08438 3.3845 9.26876C3.197 9.82813 3.1095 10.3969 3.19075 10.9344C2.98762 11.1156 2.8345 11.3938 2.672 11.5656C2.54075 11.7 2.35012 11.75 2.14075 11.825C1.93137 11.9 1.70325 12.0125 1.56262 12.2781C1.497 12.4 1.47512 12.5313 1.47512 12.6656C1.47512 12.7875 1.49387 12.9125 1.51262 13.0344C1.55012 13.2875 1.59075 13.525 1.53762 13.6844C1.37512 14.1344 1.35325 14.4469 1.46887 14.675C1.58762 14.9031 1.82512 15.0031 2.097 15.0594C2.63762 15.1719 3.372 15.1438 3.95012 15.45C4.56887 15.775 5.197 15.8906 5.697 15.775C6.0595 15.6938 6.35637 15.475 6.50637 15.1438C6.897 15.1406 7.32825 14.975 8.01575 14.9375C8.48137 14.9 9.06575 15.1031 9.73762 15.0656C9.75637 15.1375 9.78137 15.2094 9.81575 15.275V15.2781C10.0751 15.8 10.5595 16.0375 11.0751 15.9969C11.5939 15.9563 12.1407 15.6531 12.5845 15.125C13.0095 14.6125 13.7095 14.4 14.1751 14.1188C14.4064 13.9781 14.5939 13.8031 14.6095 13.5469C14.622 13.2906 14.472 13.0063 14.1251 12.6188ZM7.99075 2.72813C8.297 2.03438 9.0595 2.04688 9.36575 2.71563C9.56887 3.15938 9.47825 3.68126 9.23137 3.97813C9.18137 3.95313 9.047 3.89688 8.83762 3.82501C8.872 3.78751 8.9345 3.74063 8.9595 3.68126C9.1095 3.31251 8.95325 2.83751 8.67512 2.82813C8.447 2.81251 8.24075 3.16563 8.30637 3.54688C8.17825 3.48438 8.01262 3.43751 7.90012 3.40938C7.86887 3.19376 7.89075 2.95313 7.99075 2.72813ZM6.71887 2.36876C7.0345 2.36876 7.36887 2.81251 7.31575 3.41563C7.20637 3.44688 7.09387 3.49376 6.997 3.55938C7.0345 3.28126 6.89387 2.93126 6.697 2.94688C6.4345 2.96876 6.39075 3.60938 6.64075 3.82501C6.672 3.85001 6.70012 3.81876 6.45637 3.99688C5.96887 3.54063 6.12825 2.36876 6.71887 2.36876ZM6.29387 4.26563C6.48762 4.12188 6.71887 3.95313 6.7345 3.93751C6.88137 3.80001 7.15637 3.49376 7.60637 3.49376C7.82825 3.49376 8.09387 3.56563 8.41575 3.77188C8.61262 3.90001 8.76887 3.90938 9.122 4.06251C9.3845 4.17188 9.55012 4.36563 9.45012 4.63126C9.36887 4.85313 9.10637 5.08126 8.74075 5.19688C8.39387 5.30938 8.122 5.69688 7.547 5.66251C7.42512 5.65626 7.32825 5.63126 7.247 5.59688C6.997 5.48751 6.86575 5.27188 6.622 5.12813C6.35325 4.97813 6.2095 4.80313 6.16262 4.65001C6.11887 4.49688 6.16262 4.36876 6.29387 4.26563ZM6.397 14.7031C6.31262 15.8 5.02512 15.7781 4.04387 15.2656C3.1095 14.7719 1.90012 15.0625 1.65325 14.5813C1.57825 14.4344 1.57825 14.1844 1.7345 13.7563V13.75C1.8095 13.5125 1.75325 13.25 1.71575 13.0031C1.67825 12.7594 1.6595 12.5344 1.74387 12.3781C1.85325 12.1688 2.0095 12.0938 2.20637 12.025C2.52825 11.9094 2.57512 11.9188 2.81887 11.7156C2.99075 11.5375 3.11575 11.3125 3.26575 11.1531C3.42512 10.9813 3.57825 10.9 3.81887 10.9375C4.072 10.975 4.29075 11.15 4.50325 11.4375L5.11575 12.55C5.41262 13.1719 6.46262 14.0625 6.397 14.7031ZM6.35325 13.8938C6.22512 13.6875 6.05325 13.4688 5.90325 13.2813C6.12512 13.2813 6.347 13.2125 6.42512 13.0031C6.497 12.8094 6.42512 12.5375 6.19387 12.225C5.772 11.6563 4.997 11.2094 4.997 11.2094C4.57512 10.9469 4.33762 10.625 4.22825 10.275C4.11887 9.92501 4.1345 9.54688 4.21887 9.17501C4.38137 8.45938 4.80012 7.76251 5.06887 7.32501C5.14075 7.27188 5.09387 7.42501 4.797 7.97501C4.53137 8.47813 4.0345 9.64063 4.71575 10.55C4.7345 9.90313 4.88762 9.24376 5.147 8.62813C5.522 7.77188 6.31262 6.28751 6.37512 5.10626C6.4095 5.13126 6.51887 5.20626 6.56887 5.23438C6.71262 5.31876 6.822 5.44376 6.96262 5.55626C7.35012 5.86876 7.85325 5.84376 8.28762 5.59376C8.48137 5.48438 8.63762 5.35938 8.7845 5.31251C9.09387 5.21563 9.34075 5.04376 9.48137 4.84376C9.722 5.79376 10.2845 7.16563 10.6439 7.83438C10.8345 8.19063 11.2157 8.94376 11.3814 9.85313C11.4845 9.85001 11.6001 9.86563 11.722 9.89688C12.1532 8.78126 11.3564 7.57813 10.9939 7.24376C10.847 7.10001 10.8407 7.03751 10.9126 7.04063C11.3064 7.39063 11.8251 8.09376 12.0126 8.88438C12.1001 9.24688 12.1157 9.62501 12.0251 10C12.5376 10.2125 13.147 10.5594 12.9845 11.0875C12.9157 11.0844 12.8845 11.0875 12.8532 11.0875C12.9532 10.7719 12.7314 10.5375 12.1407 10.2719C11.5282 10.0031 11.0157 10.0031 10.9439 10.6625C10.5657 10.7938 10.372 11.1219 10.2751 11.5156C10.1876 11.8656 10.1626 12.2875 10.1376 12.7625C10.122 13.0031 10.0251 13.325 9.92512 13.6688C8.922 14.3844 7.52825 14.6969 6.35325 13.8938ZM14.397 13.5344C14.3689 14.0594 13.1095 14.1563 12.422 14.9875C12.0095 15.4781 11.5032 15.75 11.0595 15.7844C10.6157 15.8188 10.2314 15.6344 10.0064 15.1813C9.8595 14.8344 9.93137 14.4594 10.0407 14.0469C10.1564 13.6031 10.3282 13.1469 10.3501 12.7781C10.3751 12.3031 10.4032 11.8875 10.4814 11.5688C10.5626 11.2469 10.6876 11.0313 10.9095 10.9094C10.9189 10.9031 10.9314 10.9 10.9407 10.8938C10.9657 11.3063 11.1689 11.725 11.5282 11.8156C11.922 11.9188 12.4876 11.5813 12.7282 11.3063C13.0095 11.2969 13.2189 11.2781 13.4345 11.4656C13.7439 11.7313 13.6564 12.4125 13.9689 12.7656C14.3001 13.1281 14.4064 13.375 14.397 13.5344ZM6.41575 4.64688C6.47825 4.70626 6.56262 4.78751 6.66575 4.86876C6.872 5.03126 7.1595 5.20001 7.51887 5.20001C7.88137 5.20001 8.222 5.01563 8.51262 4.86251C8.66575 4.78126 8.85325 4.64376 8.97512 4.53751C9.097 4.43126 9.1595 4.34063 9.072 4.33126C8.9845 4.32188 8.99075 4.41251 8.8845 4.49063C8.747 4.59063 8.58137 4.72188 8.45012 4.79688C8.21887 4.92813 7.84075 5.11563 7.51575 5.11563C7.19075 5.11563 6.93137 4.96563 6.73762 4.81251C6.64075 4.73438 6.5595 4.65626 6.497 4.59688C6.45012 4.55313 6.43762 4.45313 6.36262 4.44376C6.31887 4.44063 6.30637 4.55938 6.41575 4.64688Z" />
+  {% elif icon_name == "lock" %}
+    <path d="M10 1.33203H6.00002V2.66536H4.66669V5.33203H2.66669V14.6654H13.3334V5.33203H11.3334V2.66536H10V1.33203ZM10 2.66536V5.33203H6.00002V2.66536H10ZM6.00002 6.66536H12V13.332H4.00002V6.66536H6.00002ZM8.66669 8.66536H7.33335V11.332H8.66669V8.66536Z" />
   {% elif icon_name == "windows" %}
     <path d="M1 2.92812L6.7375 2.1375V7.68125H1V2.92812ZM1 13.0719L6.7375 13.8625V8.3875H1V13.0719ZM7.36875 13.9469L15 15V8.3875H7.36875V13.9469ZM7.36875 2.05312V7.68125H15V1L7.36875 2.05312Z" />
   {% elif icon_name == "flag" %}

templates/v3/includes/_header_v3.html

@@ -12,6 +12,7 @@
 
   Note: Subcomponents inherit the full parent context. Specifically:
     _header_nav_link.html    uses: url, label, nav_id, is_unread, active_nav_item
+    _header_search_bar.html  uses: current_version
     _header_utilities.html   uses: disable_theme_switcher, request, avatar_id, version_menu_id
 
   Usage:
@@ -69,20 +70,7 @@
     </div>
 
     {% comment %} Search — responsive: full bar on desktop, button on mobile {% endcomment %}
-    <search class="header__search-bar">
-    <button type="button"
-            id="gecko-search-button"
-            class="header__search-input-trigger"
-            data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
-            data-theme-mode="light"
-            data-font-family="var(--font-sans)">
-      <span class="header__search-icon" aria-hidden="true">
-        {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
-      </span>
-      Search
-    </button>
-    <span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
-    </search>
+    {% include "v3/includes/header/_header_search_bar.html" %}
     {% comment %} Desktop & tablet utilities (hidden on mobile) {% endcomment %}
     <div class="header__right">
       {% include "v3/includes/header/_header_utilities.html" with avatar_id="desktop-user-menu" version_menu_id="desktop-version-menu" %}

templates/v3/includes/header/_header_search_bar.html

@@ -0,0 +1,60 @@
+{% comment %}
+  Header Search Bar — Gecko-powered search trigger with JS-disabled fallback.
+
+  The search modal is imported from static/js/boost-gecko/.
+
+  When JavaScript is enabled, the button opens the Gecko search overlay (wired
+  in static/js/search-shortcut.js; Ctrl/Cmd+K shortcut). When JavaScript is
+  disabled, the button and keyboard hint are hidden via an inline <style> in
+  <noscript> and a fallback message is shown instead.
+
+  Variables:
+    current_version  (object, required) — current Boost release (from context processor)
+
+  Usage:
+    {% include "v3/includes/header/_header_search_bar.html" %}
+{% endcomment %}
+<search class="header__search-bar">
+  <button type="button"
+          id="gecko-search-button"
+          class="header__search-input-trigger"
+          data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
+          data-theme-mode="light"
+          data-font-family="var(--font-sans)">
+    <span class="header__search-icon" aria-hidden="true">
+      {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
+    </span>
+    Search
+  </button>
+  <span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
+
+  {% comment %} No-JS fallback (hidden when JS is enabled via CSS) {% endcomment %}
+  <noscript>
+    <style>
+      #gecko-search-button,
+      .header__search-kbd { display: none; }
+      .header__search-bar > noscript { display: contents; }
+      .header__search-bar,
+      .header__search-bar:hover {
+        color: var(--color-text-tertiary);
+        background: var(--color-surface-mid);
+        cursor: not-allowed;
+      }
+      .header__search-bar .header__search-icon,
+      .header__search-bar:hover .header__search-icon,
+      .header__search-bar:hover .header__search-input-trigger {
+        color: var(--color-icon-secondary);
+        cursor: not-allowed;
+      }
+    </style>
+    <span class="header__search-input-trigger" aria-disabled="true">
+      <span class="header__search-icon" aria-hidden="true">
+        {% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
+      </span>
+      Search is not available with JS disabled
+    </span>
+    <span class="header__search-icon" aria-hidden="true">
+      {% include "includes/icon.html" with icon_name="lock" icon_class="header__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+    </span>
+  </noscript>
+</search>