Merge pull request #20054 from gtorodelvalle/callscreen-bug-1018283-l…

…ockscreen-visual-refresh-reloaded Bug 1018283 - [Follow-up 951665] Pending visual revision and adjustments of the VR call screen when in lockscreen
mozilla-b2g · Jul 3, 2014 · 05670c0 · 05670c0
2 parents 634558f + da533fe
commit 05670c0
Show file tree

Hide file tree

Showing 58 changed files with 1,083 additions and 969 deletions.
diff --git a/apps/callscreen/index.html b/apps/callscreen/index.html
@@ -53,13 +53,20 @@
     -->
 
     <!-- incoming call / swiper on locked screen-->
-    <link rel="stylesheet" type="text/css" href="/style/swiper.css">
+    <link rel="stylesheet" type="text/css" href="/style/lockscreen.css">
+    <script defer src="/shared/js/settings_listener.js"></script>
+    <script defer src="/shared/js/mobile_operator.js"></script>
     <script defer src="/shared/js/lockscreen_slide.js"></script>
     <script defer src="/shared/js/screen_layout.js"></script>
+    <script defer src="/shared/js/simslot.js"></script>
+    <script defer src="/shared/js/simslot_manager.js"></script>
+    <script defer src="/shared/js/lockscreen_connection_info_manager.js"></script>
   </head>
   <body>
     <article id="call-screen" data-layout>
       <div id="lockscreen-header">
+        <div id="lockscreen-conn-states">
+        </div>
         <div id="lockscreen-clock-time"></div>
         <div id="lockscreen-date"></div>
       </div>
@@ -125,20 +132,20 @@
       </form>
       <article id="main-container">
         <div id="contact-background"></div>
+        <div id="lockscreen-masked-background" class="blank"></div>
+        <div id="lockscreen-area"></div>
         <div id="actions-container">
           <div id="swiper-wrapper">
-            <!--Slider module related widgets -->
-            <div id="lockscreen-area"></div>
             <div id="lockscreen-icon-container">
               <div id="lockscreen-area-hangup"
-                   class="lockscreen-icon-area lockscreen-icon-left dark" role="button"
-                   data-l10n-id="hangup-a11y-button">
+                class="lockscreen-icon-area lockscreen-icon-left dark" role="button"
+                data-l10n-id="hangup-a11y-button" aria-label="Hang Up">
                 <div class="lockscreen-icon">
                 </div>
               </div>
               <div id="lockscreen-area-pickup"
-                   class="lockscreen-icon-area lockscreen-icon-right dark" role="button"
-                   data-l10n-id="pickup-a11y-button">
+                class="lockscreen-icon-area lockscreen-icon-right dark" role="button"
+                data-l10n-id="pickup-a11y-button" aria-label="Pick up">
                 <div class="lockscreen-icon">
                 </div>
               </div>
@@ -149,7 +156,6 @@
                 </div>
               </div>
             </div>
-
           </div>
           <section id="statusMsg" role="status">
             <p></p>

diff --git a/apps/callscreen/js/call_screen.js b/apps/callscreen/js/call_screen.js
@@ -12,6 +12,7 @@ var CallScreen = {
 
   body: document.body,
   screen: document.getElementById('call-screen'),
+  lockscreenConnStates: document.getElementById('lockscreen-conn-states'),
   views: document.getElementById('views'),
 
   calls: document.getElementById('calls'),
@@ -161,6 +162,21 @@ var CallScreen = {
     this.syncSpeakerEnabled();
   },
 
+  _connInfoManagerInitialized: false,
+  initLockScreenConnInfoManager: function cs_initLockScreenConnInfoManager() {
+    if (this._connInfoManagerInitialized) {
+      return;
+    }
+
+    /* mobile connection state on lock screen */
+    if (window.navigator.mozMobileConnections) {
+      LazyL10n.get(function localized(_) {
+          new window.LockScreenConnInfoManager(CallScreen.lockscreenConnStates);
+        CallScreen._connInfoManagerInitialized = true;
+      });
+    }
+  },
+
   _slideInitialized: false,
   initLockScreenSlide: function cs_initLockScreenSlide() {
     if (this._slideInitialized) {
@@ -172,46 +188,49 @@ var CallScreen = {
     this.hangUpIcon = document.getElementById('lockscreen-area-hangup');
     this.pickUpIcon = document.getElementById('lockscreen-area-pickup');
     this.initUnlockerEvents();
-    new LockScreenSlide(
-      // Options
-      {
-        IDs: {
-          overlay: 'main-container',
-          areas: {
-            left: 'lockscreen-area-hangup',
-            right: 'lockscreen-area-pickup'
-          }
+    new LockScreenSlide({
+      useNewStyle: true,
+
+      IDs: {
+        overlay: 'main-container',
+        areas: {
+          left: 'lockscreen-area-hangup',
+          right: 'lockscreen-area-pickup'
         },
-
-        track: {
-          backgroundColor: 'rgba(0, 0, 0, 0.4)'
-        },
-
-        colors: {
-          left: {
-            touchedColor: '255, 0, 0',
-            touchedColorStop: '255, 178, 178'
-          },
-
-          right: {
-            touchedColor: '132, 200, 44',
-            touchedColorStop: '218, 238, 191'
-          }
+      },
+
+      trackNew: {
+        strokeColorTop: 'rgba(0, 0, 0, 0)',
+        strokeColorBottom: 'rgba(0, 0, 0, 0)',
+        fillColorTop: 'rgba(0, 0, 0, 0.1)',
+        fillColorBottom: 'rgba(0, 0, 0, 0.1)'
+      },
+
+      colors: {
+        left: {
+          touchedColor: '224, 0, 0',
+          touchedColorStop: '255, 255, 255'
         },
+        right: {
+          touchedColor: '0, 173, 173',
+          touchedColorStop: '255, 255, 255'
+        }
+      },
 
-        resources: {
-          larrow: '/style/images/lock_screen/LArrow_Lockscreen.png',
-          rarrow: '/style/images/lock_screen/RArrow_Lockscreen.png'
+      iconBG: {
+        left: {
+          color: 'rgba(224, 0, 0, 0.80)'
         },
-        handle: {
-          autoExpand: {
-            sentinelOffset: 80
-          },
-          backgroundColor: '255, 255, 255',
-          backgroundAlpha: 0.85
+        right: {
+          color: 'rgba(0, 173, 173, 0.80)'
         }
+      },
+
+      resourcesNew: {
+        larrow: '/style/images/lock_screen/lockscreen_toggle_arrow_left.png',
+        rarrow: '/style/images/lock_screen/lockscreen_toggle_arrow_right.png'
       }
-    );
+    });
   },
 
   _wallpaperReady: false,
@@ -332,6 +351,7 @@ var CallScreen = {
 
   hashchangeHandler: function cs_hashchangeHandler() {
     if (window.location.hash.startsWith('#locked')) {
+      this.initLockScreenConnInfoManager();
       this.showClock(new Date());
       this.initLockScreenSlide();
 

diff --git a/apps/callscreen/js/handled_call.js b/apps/callscreen/js/handled_call.js
@@ -66,6 +66,7 @@ function HandledCall(aCall) {
     this.updateDirection();
 
     if (navigator.mozIccManager.iccIds.length > 1) {
+      this.node.classList.add('sim-info');
       var n = this.call.serviceId + 1;
       this.viaSimNode.textContent = _('via-sim', { n: n });
       this.simNumberNode.textContent = _('sim-number', { n: n });

diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@1.5x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2.25x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_hangupwhite_40x40@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@1.5x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2.25x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2x.png b/apps/callscreen/style/images/lock_screen/Ico_lsc_pickupwhite_40x40@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@1.5x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2.25x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/LArrow_Lockscreen@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@1.5x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2.25x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png b/apps/callscreen/style/images/lock_screen/RArrow_Lockscreen@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@1.5x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2.25x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_answer@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@1.5x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2.25x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2x.png b/apps/callscreen/style/images/lock_screen/actionicon_lockscreen_reject@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@1.5x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2.25x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_left@2x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@1.5x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@1.5x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2.25x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2.25x.png
diff --git a/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2x.png b/apps/callscreen/style/images/lock_screen/lockscreen_toggle_arrow_right@2x.png
diff --git a/apps/callscreen/style/lockscreen.css b/apps/callscreen/style/lockscreen.css
@@ -0,0 +1,209 @@
+#lockscreen-header {
+  z-index: 9999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  padding: 2rem 2.4rem 4.4rem;
+  color: #fff;
+  opacity: 1;
+}
+
+#lockscreen-conn-states {
+  width: 100%;
+  display: inline-block;
+  font-weight: 300;
+  font-size: 1.4rem;
+  padding-bottom: 1.4rem;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#lockscreen-conn-states span:empty {
+  display: none;
+}
+
+#lockscreen-conn-states span:first-child {
+  display: inline-block;
+  width: 4rem;
+  overflow: visible;
+}
+
+#lockscreen-conn-states span:last-child {
+  display: block;
+}
+
+/* For some reason display: inline-block disregards hidden attribute */
+#lockscreen-conn-states span[hidden],
+#lockscreen-conn-states[hidden] {
+  display: none;
+}
+
+#lockscreen-clock-time {
+  line-height: 1;
+  margin: -1.4rem 0 0 -0.4rem;
+  font-weight: 200;
+  font-size: 8.5rem;
+}
+
+#lockscreen-clock-time span { /* optional meridiem */
+  font-size: 3rem;
+  display: none;
+}
+
+#lockscreen-date {
+  font-weight: 300;
+  font-size: 1.4rem;
+}
+
+#lockscreen-clock-time, #lockscreen-date {
+  color: #fff;
+}
+
+#lockscreen-masked-background {
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+
+  /* Must match the CSS background rule of #screen in system.css */
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+
+  -moz-user-select: none;
+  opacity: 1;
+  z-index: 1;
+}
+
+#lockscreen-masked-background {
+  background-size: 100% 100%;
+  transition: background-image 0.3s ease, background-color 0.3s ease;
+}
+
+#lockscreen-masked-background.blank {
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
+  background-size: 100% 22.6rem;
+}
+
+#lockscreen-area {
+  position: absolute;
+  height: 10rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+}
+
+.lockscreen-icon-area {
+  height: 10rem;
+  position: absolute;
+  border-style: none;
+  transition: opacity 0.5s ease;
+}
+
+.lockscreen-icon {
+  margin-top: 2rem;
+  width: 6rem;
+  height: 6rem;
+
+  pointer-events: none;
+}
+
+#lockscreen-area-slide {
+  text-align: center;
+  width: calc(100%);
+}
+
+.touched .lockscreen-icon {
+  transition: none;
+}
+
+.lockscreen-icon-right {
+  right: calc(50% - 14rem);
+}
+
+.lockscreen-icon-left {
+  left: calc(50% - 14rem);
+}
+
+@media (min-width:768px) {
+  .lockscreen-icon-right {
+    right: calc(50% - 20.5rem);
+  }
+
+  .lockscreen-icon-left {
+    left: calc(50% - 20.5rem);
+  }
+
+  #lockscreen-header {
+    padding-left: 6rem;
+    font-weight: 300;
+  }
+
+  #lockscreen-date {
+    padding-top: 0.5rem;
+    font-size: 2.4rem;
+  }
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+:-moz-any(.touched, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
+:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
+  display: none;
+  animation: none;
+}
+
+#lockscreen-area-pickup > div {
+  background-image: url('./images/lock_screen/Ico_lsc_pickupwhite_40x40.png');
+  background-position: 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 4rem;
+}
+
+.lockscreen-icon-left, .lockscreen-icon-right {
+  z-index: 16;
+  pointer-events: auto;
+}
+
+/* Compensation for the effects after enabling the pointer-event attribute. */
+.lockscreen-icon-left:active, .lockscreen-icon-right:active {
+  background: none;
+}
+
+#lockscreen-area-hangup > div {
+  background-image: url('./images/lock_screen/Ico_lsc_hangupwhite_40x40.png');
+  background-position: 1.4rem center;
+  background-repeat: no-repeat;
+  background-size: 4rem;
+}
+
+#lockscreen-icon-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 10rem;
+  pointer-events: none;
+  z-index: 5;
+  background-color: rgba(255, 255, 255, .85);
+}
+
+.touched #lockscreen-icon-container {
+  transition: none;
+}
+
+.touched .lockscreen-icon-area {
+  transition: none;
+}
+
+#lockscreen-canvas-wrapper {
+  position: absolute;
+  bottom: 0.75rem;
+  z-index: 8;
+  width: 100%;
+}