Bug 1415054 - Handle RTL in empty customize mode better. r=gijs
authorJared Wein <jwein@mozilla.com>
Wed, 08 Nov 2017 15:32:21 -0500
changeset 444700 438fecbc24117b263e90d0403f8c295fcfea9d23
parent 444699 d1ce4244570bd03a297131804dc58494e203b736
child 444701 dcfe27603357d3456b20d9c6c7d5beb0c9560d28
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs
bugs1415054
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1415054 - Handle RTL in empty customize mode better. r=gijs MozReview-Commit-ID: HjqvOM1n14G
browser/components/customizableui/CustomizeMode.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -2585,17 +2585,22 @@ CustomizeMode.prototype = {
               Math.max(Math.min(ball[1] + ballDxDy[1], gameSide), 0)];
       if (ball[0] <= 0 || ball[0] >= gameSide) {
         ballDxDy[0] *= -1;
       }
     }
 
     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]);
       if ((sign > 0 && ball[0] > p2 + paddleWidth / 2) ||
           (sign < 0 && ball[0] < p2 + paddleWidth / 2)) {
         p2 += sign * 3;
       } else if ((sign > 0 && ball[0] > p2 + paddleWidth / 1.1) ||
                  (sign < 0 && ball[0] < p2 + paddleWidth / 1.1)) {
@@ -2617,25 +2622,26 @@ CustomizeMode.prototype = {
         quit = true;
       }
       ball = ballDef.slice();
       ballDxDy = ballDxDyDef.slice();
       ballDxDy[1] *= score / winScore + 1;
     }
 
     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) {
           if (arena.style.backgroundImage.split(",").length >= 160) {
             quit = true;
           }
 
           image += ", " + arena.style.backgroundImage;
@@ -2646,16 +2652,32 @@ CustomizeMode.prototype = {
         arena.style.backgroundImage = image;
         arena.style.backgroundPosition = position;
         arena.style.backgroundRepeat = repeat;
         arena.style.backgroundSize = size;
       }
     }
 
     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;
         keydownAdj *= 1.05;
       }
     }
 
     function onkeyup(event) {
@@ -2672,20 +2694,23 @@ CustomizeMode.prototype = {
         window.cancelAnimationFrame(rAFHandle);
       }
       let arena = elements.arena;
       while (arena.firstChild) {
         arena.firstChild.remove();
       }
       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;
     }
 
     if (this.uninitWhimsy) {
       return this.uninitWhimsy;
     }
@@ -2697,47 +2722,50 @@ CustomizeMode.prototype = {
     let score = 0;
     let p1 = 0;
     let p2 = 10;
     let gameSide = 300;
     let paddleEdge = 30;
     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;
     let document = this.document;
     let rAFHandle = 0;
     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;
     }
 
     let window = this.window;
     rAFHandle = window.requestAnimationFrame(function animate() {
       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 {
         rAFHandle = window.requestAnimationFrame(animate);
       }
     });
 
     return uninit;
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -575,81 +575,97 @@ toolbarpaletteitem[place=toolbar] > tool
   min-height: 0;
   max-height: 0;
 }
 
 #customization-palette[whimsypong] > toolbarpaletteitem > 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;
   width: 20px;
 }
 
 #customization-pong-arena {
   width: 300px;
   height: 300px;
   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;
 }
 
 @keyframes game-over {
   15% {
     transform: scale(2) translateY(-10px) rotateZ(-90deg);
   }
   35% {
@@ -658,8 +674,17 @@ toolbarpaletteitem[place=toolbar] > tool
   65% {
     opacity: 0;
   }
   100% {
     transform: scale(2) translateY(300px) rotateZ(-2.5turn);
     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); }
+}