Start #2082, add an A/B test for the My Shots button

mozilla-services · Jan 18, 2017 · 57f6695 · 57f6695
1 parent ce60bdd
commit 57f6695
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/addon/data/shooter-interactive-worker.js b/addon/data/shooter-interactive-worker.js
@@ -826,6 +826,9 @@ function getScreenPosition() {
 function activate() {
   ui.Box.remove();
   addHandlers();
+  if (self.options.styleMyShotsButton) {
+    ui.iframe.addClassName = `styleMyShotsButton-${self.options.styleMyShotsButton.value}`;
+  }
   watchPromise(ui.iframe.display(installHandlersOnDocument).then(() => {
     setState("crosshairs");
   }));

diff --git a/addon/lib/shooter.js b/addon/lib/shooter.js
@@ -252,7 +252,8 @@ const ShotContext = Class({
       contentScriptOptions: {
         "inline-selection.css": self.data.url("inline-selection.css"),
         showMyShotsReminder: ! prefs.hasUsedMyShots,
-        annotateForPage: this.annotateForPage
+        annotateForPage: this.annotateForPage,
+        styleMyShotsButton: getAbTests().styleMyShotsButton
       }
     }));
     this.interactiveWorker.on("detach", () => {

diff --git a/server/src/ab-tests.js b/server/src/ab-tests.js
@@ -4,10 +4,19 @@ let allTests = {
     description: "Highlight the Page Shot button when Page Shot is installed",
     gaField: "cd3",
     version: 1,
-    exclude: [],
+    exclude: ["styleMyShotsButton"],
     options: [
       {name: "badge", probability: 0.1}
     ]
+  },
+  styleMyShotsButton: {
+    description: "Style the My Shots button in some different way",
+    gaField: "cd4",
+    version: 1,
+    exclude: ["highlightButtonOnInstall"],
+    options: [
+      {name: "bright", probability: 0.1}
+    ]
   }
 };
 

diff --git a/static/css/inline-selection.scss b/static/css/inline-selection.scss
@@ -88,7 +88,7 @@ $overlay-z-index: 9999999999;
 .pageshot-highlight-button-download {
   opacity: 0.9;
   transition: opacity 250ms;
-  
+
   &:hover,
   &:focus,
   &:active {
@@ -330,7 +330,7 @@ $overlay-z-index: 9999999999;
       -1px -1px 0 #fff,
       1px -1px 0 #fff,
       -1px 1px 0 #fff,
-      1px 1px 0 #fff; 
+      1px 1px 0 #fff;
 }
 
 // FIXME: some of the styles in .pageshot-moving-element were copied from
@@ -378,6 +378,15 @@ $overlay-z-index: 9999999999;
   width: 135px;
 }
 
+/* styleMyShotsButton test: */
+.styleMyShotsButton-control .pageshot-myshots {
+}
+
+.styleMyShotsButton-bright .pageshot-myshots {
+  font-size: 200%;
+}
+/* end styleMyShotsButton test */
+
 .pageshot-visible {
   @extend .pageshot-myshots;
   pointer-events: all;