Increase the visibility of the keyboard shortcut for Global Search

closes issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342427/

This commit adds a keyboard shortcut visual cue to search the input field.
It is automatically hidden when input fields become active.
Visual cue adjusts to all possible color themes. It also overpowers
the clear button when there is input in the field but the field is not active.

Changelog: fixed

app/assets/javascripts/header_search/components/app.vue

@@ -112,6 +112,9 @@ export default {
             count: this.searchOptions.length,
           });
     },
+    headerSearchActivityDescriptor() {
+      return this.showDropdown ? 'is-active' : 'is-not-active';
+    },
   },
   methods: {
     ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
@@ -143,7 +146,8 @@ export default {
     v-outside="closeDropdown"
     role="search"
     :aria-label="$options.i18n.searchGitlab"
-    class="header-search gl-relative"
+    class="header-search gl-relative gl-rounded-base"
+    :class="headerSearchActivityDescriptor"
   >
     <gl-search-box-by-type
       id="search"

app/assets/stylesheets/pages/search.scss

@@ -45,6 +45,36 @@ input[type='checkbox']:hover {
     transition: border-color ease-in-out $default-transition-duration,
       background-color ease-in-out $default-transition-duration;
   }
+
+  &.is-not-active {
+    .btn.gl-clear-icon-button {
+      display: none;
+    }
+
+    &::after {
+      content: '/';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      right: 8px;
+      transform: translateY(calc(50% - 4px));
+      padding: 4px 5px;
+      font-size: $gl-font-size-small;
+      font-family: $monospace-font;
+      line-height: 1;
+      vertical-align: middle;
+      border-width: 0;
+      border-style: solid;
+      border-image: none;
+      border-radius: 3px;
+      box-shadow: none;
+      white-space: pre-wrap;
+      // Safari
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      word-break: keep-all;
+    }
+  }
 }
 
 .header-search-dropdown-menu {

app/assets/stylesheets/startup/startup-dark.scss

@@ -1516,6 +1516,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
+body.gl-dark .header-search.is-not-active::after {
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
+}
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -1502,6 +1502,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }

app/assets/stylesheets/themes/theme_helper.scss

@@ -176,6 +176,11 @@
         }
       }
     }
+
+    &.is-not-active::after {
+      color: $search-and-nav-links;
+      background-color: rgba($search-and-nav-links, 0.2);
+    }
   }
 
   .search {

app/views/layouts/_header_search.html.haml

-#js-header-search.header-search{ data: { 'search-context' => header_search_context.to_json,
+#js-header-search.header-search.is-not-active.gl-relative{ data: { 'search-context' => header_search_context.to_json,
 'search-path' => search_path,
 'issues-path' => issues_dashboard_path,
 'mr-path' => merge_requests_dashboard_path,

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -1516,6 +1516,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
+body.gl-dark .header-search.is-not-active::after {
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
+}
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -1502,6 +1502,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }