From aa66390484a48fb7572b37b330c4931b9f69a8f1 Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Wed, 8 Nov 2017 15:32:21 -0500 Subject: [PATCH] Bug 1415054 - Handle RTL in empty customize mode better. r=gijs MozReview-Commit-ID: HjqvOM1n14G --HG-- extra : rebase_source : fb133bb320f37585f63f872ead38ba7e7f87e544 --- .../customizableui/CustomizeMode.jsm | 52 +++++++++++---- .../customizableui/customizeMode.inc.css | 63 +++++++++++++------ 2 files changed, 84 insertions(+), 31 deletions(-) diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm index ff50ec8ed9ac..fe62846808a1 100644 --- a/browser/components/customizableui/CustomizeMode.jsm +++ b/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 { diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css index 8b7bda9f549c..afc37183ae5e 100644 --- a/browser/themes/shared/customizableui/customizeMode.inc.css +++ b/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); } +}