Issue #449 - Add a visual hint for the 'g' => GitHub shortcut.

Author: Mike Taylor

webcompat/static/css/development/layout/utilities.css

@@ -4,6 +4,15 @@
   font-weight: 700;
 }
 
+.wc-keyhint {
+  background-color: var(--wc-variant-background-dark);
+  border-radius: 5px;
+  color: #fff;
+  display: inline-block;
+  padding: 0.2em 0.5em;
+  vertical-align: middle;
+}
+
 /*---------- Utilities Position ----------*/
 
 .wc-pos-absolute {

webcompat/static/js/lib/issue-list.js

@@ -442,7 +442,8 @@ issueList.MainView = Backbone.View.extend({
   el: $('.js-issue-page'),
   events: {},
   keyboardEvents: {
-    'g': 'githubWarp'
+    'g': 'githubWarp',
+    'G': 'githubWarp'
   },
   initialize: function() {
     this.initSubViews();

webcompat/templates/issue-list.html

@@ -104,10 +104,11 @@ <h1 class="IssueList-title wc-Title--l">Issues</h1>
              </ul>
           </div>
         <% } %>
+        <p class="wc-float-right wc-margin-bottom"><span class="wc-keyhint">G</span> takes you to the GitHub view of this page.</p>
         </script>
       </div>
     </div>
-     </main>
+  </main>
   </div>
 
 <script type="text/template" id="dropdown-tmpl">