Some goggles landing fixes.

1. Fixed locale key validation.
2. Added active state to activate goggles button.
3. Inserted i18n filters into goggles html.

gtf-ignored-keys.json

@@ -1,5 +1,6 @@
 [ "advanced", "beginner", "intermediate", "Webpages with Thimble", "Are you sure you want to delete this make?",
   "Confirm", "Created by", "created", "Updated", "updated", "unpublished", "Resources", "Resource Templates",
   "Remixes with X-Ray Goggles", "NoEventsFound", "Multimedia with Popcorn", "make", "Make", "Details", "Explore",
-  "DetailsShareTwitterMsg", "guide", "Info", "Did you know Webmaker is also available in", "Webmaker", "Events"
+  "DetailsShareTwitterMsg", "guide", "Info", "Did you know Webmaker is also available in", "Webmaker", "Events",
+  "The X-Ray Goggles", "Install the X-Ray Goggles"
 ]

less/angular/pages/goggles.less

@@ -109,7 +109,18 @@
 
       &:focus, &:hover {
         background: darken(@yellow, 10%);
+        outline: 0;
       }
+
+      &:active {
+        box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.6);
+
+        span {
+          position: relative;
+          top: 2px;
+        }
+      }
+
     }
 
     ol.goggles-listing {
@@ -155,17 +166,17 @@
 
       &:before {
         display: inline-block;
-        content: "i";
+        content: "?";
         background: @brand-info;
         color: @white;
         font-weight: normal;
         font-variant: normal;
         text-align: center;
-        width: 1em;
-        height: 1em;
-        border-radius: 1em;
+        width: 1.25em;
+        height: 1.25em;
+        border-radius: 1.2em;
         margin-right: 0.2em;
-        line-height: 1em;
+        line-height: 1.2em;
       }
     }
 

public/views/goggles.html

@@ -1,23 +1,22 @@
 <div class="goggles-backgrounded goggles-xray-image">
 
-      <img src="/Shapes.jpg">
+      <img src="/shapes.jpg">
 
       <div class="goggles-main-box goggles-box">
-        <h1>Remix this page</h1>
+        <h1>{{ 'Remix this page' | i18n }}</h1>
         <ol class="goggles-listing">
-          <li><p><button class="goggles-activate-button">Activate X-ray Goggles</button></p></li>
-          <li><p>Tap the background image</p></li>
-          <li><p>Change the image’s <span class="term">source</span> from Shapes.jpg to Blur.jpg
-              <button class="goggles-help-button">help</button>
-              <p class="goggles-help-toggled hidden">In HTML, the &lt;img&gt; tag identifies an image with src="file_name".</p>
-              <p class="goggles-help-toggled hidden">Change &lt;img src="/Shapes.jpg"&gt; to &lt;img src="/Blur.jpg"&gt;</p>
+          <li><p><button class="goggles-activate-button"><span>{{ 'Activate X-ray Goggles' | i18n }}</span></button></p></li>
+          <li><p>{{ 'Click the background image' | i18n }}</p></li>
+          <li><p>{{ 'Change the image’s' | i18n }} <span class="term">{{ 'source' | i18n }}</span> {{ 'from shapes.jpg to blur.jpg' | i18n }}
+              <button class="goggles-help-button">{{ 'help' | i18n }}</button>
+              <p class="goggles-help-toggled hidden">{{ 'gogglesHelp1' | i18n }}</p>
+              <p class="goggles-help-toggled hidden">{{ 'gogglesHelp2' | i18n }}</p>
           </li>
         </ol>
       </div>
 
       <div class="goggles-sub-box goggles-box">
-        <p>Set up <a ng-href="/{{ lang }}/goggles/install">X-ray Goggles</a> and get the power to view and edit the
-           code behind any website on the Internet.</p>
+        <p>{{ 'gogglesSetup1' | i18n }} <a ng-href="/{{ lang }}/goggles/install">{{ 'gogglesSetup2' | i18n }}</a> {{ 'gogglesSetup3' | i18n }}</p>
       </div>
 
 </div>