Merge pull request #11568 from mcirlanaru/bug_899236

Bug 899236 - [Lockscreen] Reintroduce camera button for... r=@alivedise

apps/system/index.html

@@ -846,6 +846,9 @@ <h1 data-l10n-id="downloadUpdatesViaDataConnection">
             <div id="lockscreen-header">
               <div id="lockscreen-connstate" hidden><span></span><span></span></div>
               <div id="lockscreen-mute" hidden></div>
+              <div id="lockscreen-alt-camera" class="lockscreen-icon">
+                <div role="button" data-l10n-id="camera-a11y-button" aria-label="Camera"></div>
+              </div>
               <div class="lockscreen-clock">
                 <span id="lockscreen-clock-numbers"></span>
                 <span id="lockscreen-clock-meridiem"></span>

apps/system/js/lockscreen.js

@@ -145,6 +145,7 @@ var LockScreen = {
     /* Gesture */
     this.area.addEventListener('touchstart', this);
     this.areaCamera.addEventListener('touchstart', this);
+    this.altCamera.addEventListener('touchstart', this);
     this.areaUnlock.addEventListener('touchstart', this);
     this.iconContainer.addEventListener('touchstart', this);
 
@@ -332,7 +333,8 @@ var LockScreen = {
 
       case 'touchstart':
         if (evt.target === this.areaUnlock ||
-           evt.target === this.areaCamera) {
+           evt.target === this.areaCamera ||
+           evt.target === this.altCamera) {
           evt.preventDefault();
           this.handleIconClick(evt.target);
           break;
@@ -503,6 +505,7 @@ var LockScreen = {
     var self = this;
     switch (target) {
       case this.areaCamera:
+      case this.altCamera:
         var panelOrFullApp = function panelOrFullApp() {
           // If the passcode is enabled and it has a timeout which has passed
           // switch to secure camera

apps/system/style/lockscreen/lockscreen.css

@@ -118,6 +118,14 @@
   visibility: inherit;
 }
 
+[data-panel="main"] #lockscreen-alt-camera {
+  visibility: hidden;
+}
+
+[data-panel="passcode"] #lockscreen-alt-camera {
+  opacity: 1;
+}
+
 [data-panel="emergency-call"] #lockscreen-panel-main {
   transform: translateX(-100%);
 }
@@ -246,6 +254,7 @@
   pointer-events: none;
 }
 
+#lockscreen-alt-camera.lockscreen-icon:active,
 .lockscreen-icon-area:active > .lockscreen-icon {
   background-color: rgb(0, 138, 170);
 }
@@ -294,13 +303,21 @@ button::-moz-focus-inner {
   background-size: 3rem;
 }
 
+#lockscreen-alt-camera,
 #lockscreen-area-camera > div {
   background-image: url('./images/icon-camera.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 2.4rem;
 }
 
+#lockscreen-alt-camera {
+  float: right;
+  pointer-events: auto;
+  opacity: 0.1;
+  transition: opacity 0.5s ease;
+}
+
 [data-panel="emergency-call"] #lockscreen-panel-passcode {
   transform: translateX(-100%);
 }