Bug 1415054 - Handle RTL in empty customize mode better. r=gijs

MozReview-Commit-ID: HjqvOM1n14G

--HG--
extra : rebase_source : fb133bb320f37585f63f872ead38ba7e7f87e544

browser/components/customizableui/CustomizeMode.jsm

@@ -2590,7 +2590,12 @@ CustomizeMode.prototype = {
 
     function updatePlayers() {
       if (keydown) {
-        p1 += (keydown == 37 ? -1 : 1) * 10 * keydownAdj;
+        let p1Adj = 1;
+        if ((keydown == 37 && !isRTL) ||
+            (keydown == 39 && isRTL)) {
+          p1Adj = -1;
+        }
+        p1 += p1Adj * 10 * keydownAdj;
       }
 
       let sign = Math.sign(ballDxDy[0]);
@@ -2622,15 +2627,16 @@ CustomizeMode.prototype = {
     }
 
     function draw() {
-      elements.player1.style.transform = "translate(" + p1 + "px, -37px)";
-      elements.player2.style.transform = "translate(" + p2 + "px, 300px)";
-      elements.ball.style.transform = "translate(" + ball[0] + "px, " + ball[1] + "px)";
-      elements.score.textContent = score;
-      elements.lives.setAttribute("lives", lives);
+      let xAdj = isRTL ? -1 : 1;
+      elements["wp-player1"].style.transform = "translate(" + (xAdj * p1) + "px, -37px)";
+      elements["wp-player2"].style.transform = "translate(" + (xAdj * p2) + "px, " + gameSide + "px)";
+      elements["wp-ball"].style.transform = "translate(" + (xAdj * ball[0]) + "px, " + ball[1] + "px)";
+      elements["wp-score"].textContent = score;
+      elements["wp-lives"].setAttribute("lives", lives);
       if (score >= winScore) {
         let arena = elements.arena;
         let image = "url(chrome://browser/skin/customizableui/whimsy.png)";
-        let position = `${ball[0] - 10}px ${ball[1] - 10}px`;
+        let position = `${(isRTL ? gameSide : 0) + (xAdj * ball[0]) - 10}px ${ball[1] - 10}px`;
         let repeat = "no-repeat";
         let size = "20px";
         if (arena.style.backgroundImage) {
@@ -2651,6 +2657,22 @@ CustomizeMode.prototype = {
     }
 
     function onkeydown(event) {
+      keys.push(event.which);
+      if (keys.length > 10) {
+        keys.shift();
+        let codeEntered = true;
+        for (let i = 0; i < keys.length; i++) {
+          if (keys[i] != keysCode[i]) {
+            codeEntered = false;
+            break;
+          }
+        }
+        if (codeEntered) {
+          elements.arena.setAttribute("kcode", "true");
+          let spacer = document.querySelector("#customization-palette > toolbarpaletteitem");
+          spacer.setAttribute("kcode", "true");
+        }
+      }
       if (event.which == 37 /* left */ ||
           event.which == 39 /* right */) {
         keydown = event.which;
@@ -2677,10 +2699,13 @@ CustomizeMode.prototype = {
       }
       arena.removeAttribute("score");
       arena.removeAttribute("lives");
+      arena.removeAttribute("kcode");
       arena.style.removeProperty("background-image");
       arena.style.removeProperty("background-position");
       arena.style.removeProperty("background-repeat");
       arena.style.removeProperty("background-size");
+      let spacer = document.querySelector("#customization-palette > toolbarpaletteitem");
+      spacer.removeAttribute("kcode");
       elements = null;
       document = null;
       quit = true;
@@ -2702,6 +2727,8 @@ CustomizeMode.prototype = {
     let paddleWidth = 84;
     let keydownAdj = 1;
     let keydown = 0;
+    let keys = [];
+    let keysCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
     let lives = 5;
     let winScore = 11;
     let quit = false;
@@ -2710,18 +2737,19 @@ CustomizeMode.prototype = {
     let elements = {
       arena: document.getElementById("customization-pong-arena")
     };
+    let isRTL = document.documentElement.matches(":-moz-locale-dir(rtl)");
 
     document.addEventListener("keydown", onkeydown);
     document.addEventListener("keyup", onkeyup);
 
     for (let id of ["player1", "player2", "ball", "score", "lives"]) {
       let el = document.createElement("box");
-      el.id = id;
-      elements[id] = elements.arena.appendChild(el);
+      el.id = "wp-" + id;
+      elements[el.id] = elements.arena.appendChild(el);
     }
 
     let spacer = this.visiblePalette.querySelector("toolbarpaletteitem");
-    for (let player of ["#player1", "#player2"]) {
+    for (let player of ["#wp-player1", "#wp-player2"]) {
       let val = "-moz-element(#" + spacer.id + ") no-repeat";
       elements.arena.querySelector(player).style.background = val;
     }
@@ -2731,8 +2759,8 @@ CustomizeMode.prototype = {
       update();
       draw();
       if (quit) {
-        elements.score.textContent = score;
-        elements.lives && elements.lives.setAttribute("lives", lives);
+        elements["wp-score"].textContent = score;
+        elements["wp-lives"] && elements["wp-lives"].setAttribute("lives", lives);
         elements.arena.setAttribute("score", score);
         elements.arena.setAttribute("lives", lives);
       } else {

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -580,8 +580,8 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
   margin: 0 -7px;
 }
 
-#lives,
-#ball {
+#wp-lives,
+#wp-ball {
   /* Don't need HiDPI versions since the size used will be scaled down to 20x20. */
   background-image: url("chrome://browser/skin/customizableui/whimsy.png");
   background-size: contain;
@@ -594,57 +594,73 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
   border-left: 1px solid currentColor;
   border-right: 1px solid currentColor;
   margin: 16px auto 0;
+  box-sizing: content-box;
 }
 
-#ball {
-  margin-left: -10px;
+#customization-palette[whimsypong] > toolbarpaletteitem[kcode],
+#customization-pong-arena[kcode] {
+  animation-name: kcode;
+  animation-timing-function: steps(5);
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+
+#wp-ball {
+  margin-inline-start: -10px;
   margin-top: -10px;
   height: 20px;
 }
 
-#player1,
-#player2 {
+#wp-player1,
+#wp-player2 {
   width: 84px;
   height: calc(39px + 3em);
-  background-color: rgba(255,255,0,.5);
 }
 
-#player1,
-#player2,
-#ball,
-#score {
+#wp-player1,
+#wp-player2,
+#wp-ball,
+#wp-score {
   position: fixed;
 }
 
-#score {
+#wp-score {
   transform: translateX(-4ch);
 }
 
-#lives {
+#wp-score:-moz-locale-dir(rtl) {
+  transform: translateX(4ch);
+}
+
+#wp-lives {
   transform: translate(-4ch, 1ch);
 }
 
-#lives[lives="5"] {
+#wp-lives:-moz-locale-dir(rtl) {
+  transform: translate(4ch, 1ch);
+}
+
+#wp-lives[lives="5"] {
   height: 100px;
 }
 
-#lives[lives="4"] {
+#wp-lives[lives="4"] {
   height: 80px;
 }
 
-#lives[lives="3"] {
+#wp-lives[lives="3"] {
   height: 60px;
 }
 
-#lives[lives="2"] {
+#wp-lives[lives="2"] {
   height: 40px;
 }
 
-#lives[lives="1"] {
+#wp-lives[lives="1"] {
   height: 20px;
 }
 
-#customization-pong-arena[lives="0"] > #ball {
+#customization-pong-arena[lives="0"] > #wp-ball {
   animation: game-over 4s forwards ease;
 }
 
@@ -663,3 +679,12 @@ toolbarpaletteitem[place=toolbar] > toolbarspring {
     opacity: 0;
   }
 }
+
+@keyframes kcode {
+  0% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+  20% { border-color: rgb(252,82,27); color: rgb(252,82,27); }
+  40% { border-color: rgb(251,179,0); color: rgb(251,179,0); }
+  60% { border-color: rgb(105,211,0); color: rgb(105,211,0); }
+  80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
+  100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
+}