Merge pull request #473 from /issues/449/2

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

Author: magsout

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

@@ -425,7 +425,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

@@ -103,10 +103,11 @@
              </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">