Merge pull request #354 from wireapp/staging

release 2016-10-25

.gitignore

@@ -15,6 +15,7 @@
 /deploy
 /dist
 /docs
+/keys
 /nbproject
 /node_modules
 /temp

app/demo/template/buttons.htm

@@ -17,7 +17,7 @@ <h2>Icon</h2>
 <br><br>
 <div class="button-icon">
   <div class="box-round icon-contacts"></div>
-  <span>Import OSX Contacts</span>
+  <span>Import macOS Contacts</span>
 </div>
 <h2>Round</h2>
 <h3>button-round-xl</h3>

app/page/template/_dist/app.htm

@@ -13,6 +13,7 @@
 <script src="/script/util/scroll-helpers.js"></script>
 <script src="/script/util/Statistics.js"></script>
 <script src="/script/util/storage.js"></script>
+<script src="/script/util/StringUtil.js"></script>
 <script src="/script/util/CountryCodes.js"></script>
 <script src="/script/util/worker.js"></script>
 <!-- Storage -->
@@ -26,6 +27,7 @@
 <script src="/script/service/BackendClientError.js"></script>
 <script src="/script/service/BackendEnvironment.js"></script>
 <script src="/script/service/Client.js"></script>
+<script src="/script/service/RequestQueueBlockedState.js"></script>
 <!-- Events -->
 <script src="/script/event/Backend.js"></script>
 <script src="/script/event/Client.js"></script>
@@ -45,6 +47,11 @@
 <!-- Localization -->
 <script src="/script/localization/strings-init.js"></script>
 <script src="/script/localization/strings-de.js"></script>
+<script src="/script/localization/strings-es.js"></script>
+<script src="/script/localization/strings-fi.js"></script>
+<script src="/script/localization/strings-hr.js"></script>
+<script src="/script/localization/strings-ro.js"></script>
+<script src="/script/localization/strings-ru.js"></script>
 <script src="/script/localization/strings.js"></script>
 <script src="/script/localization/Localizer.js"></script>
 <!-- Media -->
@@ -68,6 +75,9 @@
 <!-- Announce -->
 <script src="/script/announce/AnnounceService.js"></script>
 <script src="/script/announce/AnnounceRepository.js"></script>
+<!-- Bot -->
+<script src="/script/bot/BotService.js"></script>
+<script src="/script/bot/BotRepository.js"></script>
 <!-- Telemetry -->
 <script src="/script/telemetry/app_init/AppInitStatistics.js"></script>
 <script src="/script/telemetry/app_init/AppInitStatisticsValue.js"></script>
@@ -94,6 +104,8 @@
 <script src="/script/connect/ConnectSource.js"></script>
 <script src="/script/connect/ConnectTrigger.js"></script>
 <script src="/script/connect/PhoneBook.js"></script>
+<!-- Ephemeral -->
+<script src="/script/ephemeral/ephemeralTimings.js"></script>
 <!-- GeoLocation -->
 <script src="/script/location/GeoLocation.js"></script>
 <!-- Conversation -->
@@ -184,6 +196,7 @@
 <script src="/script/components/contextMenu.js"></script>
 <script src="/script/components/deviceCard.js"></script>
 <script src="/script/components/deviceRemove.js"></script>
+<script src="/script/components/ephemeralTimer.js"></script>
 <script src="/script/components/groupList.js"></script>
 <script src="/script/components/inputElement.js"></script>
 <script src="/script/components/topPeople.js"></script>
@@ -203,6 +216,7 @@
 <script src="/script/components/calling/deviceToggleButton.js"></script>
 <!-- Entities -->
 <script src="/script/message/CallMessageType.js"></script>
+<script src="/script/message/EphemeralStatusType.js"></script>
 <script src="/script/message/StatusType.js"></script>
 <script src="/script/message/PingMessageType.js"></script>
 <script src="/script/message/ReactionType.js"></script>

app/page/template/content/conversation/conversation-input.htm

@@ -19,13 +19,14 @@
                   class="conversation-input-text border-theme"
                   data-bind="event: {'keydown': on_input_key_down},
                              focus_on_keydown: true,
+                             css: {'ephemeral-input': conversation_et().ephemeral_timer()},
                              enter: on_input_enter,
                              hasFocus: blinking_cursor,
                              textInput: input,
                              resize: input,
                              resize_callback: scroll_message_list,
                              click: on_input_click,
-                             l10n_placeholder: z.string.tooltip_conversation_input_placeholder"
+                             attr: {'placeholder': input_tooltip}"
                   data-uie-name="input-message">
         </textarea>
       </div>
@@ -42,6 +43,27 @@
           <!-- /ko -->
 
           <!-- ko if: input().length === 0 -->
+
+            <!-- ko if: conversation_et().is_one2one() -->
+              <span id="conversation-input-ephemeral"
+                    class="controls-right-button conversation-input-ephemeral"
+                    data-bind="l10n_tooltip: z.string.de.tooltip_conversation_ephemeral"
+                    data-uie-name="do-set-ephemeral-timer">
+                <!-- ko if: conversation_et().ephemeral_timer() -->
+                  <div class="ephemeral-timer-button">
+                    <span class="ephemeral-timer-button-unit" data-bind="text: z.util.format_milliseconds_short(conversation_et().ephemeral_timer())[1]"></span>
+                    <span class="full-screen" data-bind="text: z.util.format_milliseconds_short(conversation_et().ephemeral_timer())[0]"></span>
+                  </div>
+                <!-- /ko -->
+                <!-- ko ifnot: conversation_et().ephemeral_timer() -->
+                  <span class="button-icon-large icon-hourglass"></span>
+                <!-- /ko -->
+                  <context-menu class="controls-right-button-ephemeral-context"
+                                params="entries: get_context_menu_entries(), placement: 'top', tag: 'ephemeral'"
+                                tabindex="-1"></context-menu>
+              </span>
+            <!-- /ko -->
+
             <label id="conversation-input-photo"
                    class="controls-right-button button-icon-large icon-library"
                    data-bind="attr: {'title': picture_tooltip}">

app/page/template/content/conversation/message-list.htm

@@ -1,10 +1,11 @@
  <div id="message-list" class="message-list" data-bind="with: $root.message_list, show_all_timestamps: true">
    <div class="messages-wrap" data-bind="antiscroll, event: {scroll: on_scroll}">
      <div class="messages"
-          data-bind="css: {'messages-centered': center_messages},
+          data-bind="css: {'flex-center': center_messages},
                      foreach: {data: conversation().messages_visible, as: 'message'}">
       <div class="message"
            data-bind="css: $parent.get_css_class(message),
+                      message_in_viewport: function() {$parent.message_in_viewport(message)},
                       attr: {'data-uie-uid': message.id, 'data-uie-value': message.super_type}, 'data-uie-sending-status': message.status"
            data-uie-name="item-message">
         <div data-bind="template: {name: 'timestamp'}"></div>

app/page/template/content/preferences-account.htm

@@ -28,7 +28,7 @@
 
       <section class="preferences-section preferences-section-account-security">
         <hr class="preferences-separator">
-        <div class="preferences-link text-theme" data-bind="click: click_on_reset_password, l10n_text: z.string.preferences_account_change_password, l10n_tooltip: z.string.tooltip_preferences_password" data-uie-name="do-reset-password"></div>
+        <div class="preferences-link text-theme" data-bind="click: click_on_reset_password, l10n_text: z.string.preferences_account_reset_password, l10n_tooltip: z.string.tooltip_preferences_password" data-uie-name="do-reset-password"></div>
         <div class="preferences-link text-theme" data-bind="click: click_on_delete_account, l10n_text: z.string.preferences_account_delete" data-uie-name="go-delete-account"></div>
       </section>
 

app/page/template/content/preferences-device-details.htm

@@ -1,4 +1,4 @@
-<div id="preferences-devices" class="preferences-page preferences-devices" data-bind="with: $root.preferences_device_details" data-uie-name="preferences-devices-details">
+<div id="preferences-device-details" class="preferences-page preferences-device-details" data-bind="with: $root.preferences_device_details" data-uie-name="preferences-devices-details">
   <div class="preferences-titlebar" data-bind="l10n_text: z.string.preferences_device_details"></div>
   <div class="preferences-content-wrapper">
     <div class="preferences-content" data-bind="antiscroll">

app/page/template/content/preferences-devices.htm

@@ -41,6 +41,7 @@
               </div>
             </div>
           <!-- /ko -->
+          <div class="preferences-detail" data-bind="l10n_text: z.string.preferences_devices_active_detail"></div>
         </section>
       <!-- /ko -->
     </div>

app/page/template/content/preferences-options.htm

@@ -28,20 +28,20 @@
       <section class="preferences-section">
         <header class="preferences-header" data-bind="l10n_text: z.string.preferences_options_contacts"></header>
         <div class="preferences-option">
-          <div class="preferences-option-icon" data-bind="click: connect_google, l10n_tooltip: z.string.tooltip_preferences_contacts" data-uie-name="do-share-contacts">
+          <div class="preferences-option-icon" data-bind="click: connect_google, l10n_tooltip: z.string.tooltip_preferences_contacts_gmail" data-uie-name="do-share-contacts">
             <svg>
               <use xlink:href="#icon-gmail"></use>
             </svg>
             <label data-bind="l10n_text: z.string.preferences_options_contacts_gmail"></label>
           </div>
           <!-- ko if: window.zAddressBook -->
-            <div class="preferences-option-icon" data-bind="click: connect_osx_contacts, l10n_tooltip: z.string.preferences_share_osx_contacts" data-uie-name="do-share-osx-contacts">
+            <div class="preferences-option-icon" data-bind="click: connect_macos_contacts, l10n_tooltip: z.string.tooltip_preferences_contacts_macos" data-uie-name="do-share-osx-contacts">
               <div class="icon-contacts"></div>
-              <label data-bind="l10n_text: z.string.preferences_options_contacts_osx"></label>
+              <label data-bind="l10n_text: z.string.preferences_options_contacts_macos"></label>
             </div>
           <!-- /ko -->
         </div>
-        <div class="preferences-detail"  data-bind="l10n_text: z.string.preferences_options_contacts_detail"></div>
+        <div class="preferences-detail" data-bind="l10n_text: z.string.preferences_options_contacts_detail"></div>
       </section>
 
       <section class="preferences-section">

app/page/template/partials/template-message.htm

@@ -38,12 +38,14 @@
       <span data-bind='text: message.sender_name()'></span>
       <span class="message-header-label-icon icon-trash" data-bind="attr: {title: message.display_deleted_timestamp()}"></span>
     </div>
-    <time class="time" data-bind="text: message.display_deleted_timestamp(), attr: {'data-timestamp': message.deleted_timestamp, 'data-uie-uid': message.id}" data-uie-name="item-message-delete-timestamp"></time>
+    <div class="message-body-actions message-body-actions-large">
+      <time class="time" data-bind="text: message.display_deleted_timestamp(), attr: {'data-timestamp': message.deleted_timestamp, 'data-uie-uid': message.id}" data-uie-name="item-message-delete-timestamp"></time>
+    </div>
   </div>
 </script>
 
 <script type="text/html" id="normal">
-  <div class="message-header" data-bind="css: {'message-hide-user-avatar': $parent.should_hide_user_avatar($data)}">
+  <div class="message-header" data-bind="visible: !$parent.should_hide_user_avatar($data)">
     <div class="message-header-icon">
       <user-avatar class="sender-avatar user-avatar-xs" data-bubble="#participants-bubble" data-placement="vertical" params="user: message.user(), click: $parent.on_message_user_click"></user-avatar>
     </div>
@@ -59,51 +61,52 @@
     <!-- ko foreach: {data: message.assets, as: 'asset'} -->
       <!-- ko if: asset.is_medium_image() -->
         <div class="message-asset-image" data-bind="fit_to_viewport: asset">
-          <div class="image image-loading" data-bind="background_image: asset.resource, viewport_changed: $parents[1].viewport_changed, click: $parents[1].show_detail, attr: {'data-uie-visible': $parent.visible}" data-uie-name="go-image-detail" >
-            <img class="image-element" data-bind="attr: {src: asset.dummy_url}"/>
-            <span class="image-placeholder-icon">
-              <div class="three-dots">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            </span>
+          <div class="image image-loading" data-bind="
+            attr: {'data-uie-visible': $parent.visible},
+            background_image: asset.resource,
+            click: $parents[1].show_detail,
+            css: {'bg-color-ephemeral': message.is_expired()},
+            viewport_changed: $parents[1].viewport_changed
+            " data-uie-name="go-image-detail">
+            <!-- ko ifnot: message.is_expired() -->
+              <img class="image-element" data-bind="attr: {src: asset.dummy_url}"/>
+              <span class="image-placeholder-icon">
+                <div class="three-dots">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </span>
+            <!-- /ko -->
+            <!-- ko if: message.is_expired() -->
+              <img class="image-element image-ephemeral" data-bind="attr: {src: asset.dummy_url}"/>
+            <!-- /ko -->
           </div>
         </div>
       <!-- /ko -->
       <!-- ko if: asset.is_text() -->
         <!-- ko if: asset.should_render_text -->
-          <div class="text" data-bind="html: asset.render(), css: {'message-is-editing': $parent.is_editing, 'text-large': z.util.emoji.contains_only_emojies(asset.text), 'text-graphite': message.status() === z.message.StatusType.SENDING}"></div>
+          <div class="text" data-bind="html: asset.render(), css: {'text-graphite': $parent.is_editing, 'text-large': z.util.emoji.contains_only_emojies(asset.text), 'text-graphite': message.status() === z.message.StatusType.SENDING, 'ephemeral-message-obfuscated': message.is_expired()}"></div>
         <!-- /ko -->
         <!-- ko foreach: asset.previews() -->
-          <link-preview-asset params="preview: $data, viewport_changed: $parents[2].viewport_changed"></link-preview-asset>
+          <link-preview-asset params="expired: message.is_expired(), preview: $data, viewport_changed: $parents[2].viewport_changed"></link-preview-asset>
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: asset.is_video() -->
-        <video-asset params="asset: asset"></video-asset>
+        <video-asset data-bind="css: {'bg-color-ephemeral': message.is_expired()}" params="asset: asset, expired: message.is_expired()"></video-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_audio() -->
-        <audio-asset params="asset: asset"></audio-asset>
+        <audio-asset data-bind="css: {'bg-color-ephemeral': message.is_expired()}" params="asset: asset, expired: message.is_expired()"></audio-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_file() -->
-        <file-asset params="asset: asset"></file-asset>
+        <file-asset data-bind="css: {'bg-color-ephemeral': message.is_expired()}" params="asset: asset, expired: message.is_expired()"></file-asset>
       <!-- /ko -->
       <!-- ko if: asset.is_location() -->
         <location-asset params="asset: asset"></location-asset>
       <!-- /ko -->
-
-      <context-menu params="entries: function() {return $parents[1].get_context_menu_entries(message)}, tag: 'message', data: message.id"
-                    class="context-menu icon-more font-size-xs"
-                    tabindex="-1"></context-menu>
-      <!-- ko ifnot: message.timestamp == '' -->
-        <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp, 'data-uie-uid': message.id}" data-uie-name="item-message-timestamp"></time>
-        <!-- ko if: $parents[1].is_last_delivered_message(message) -->
-          <span class="message-status" data-bind="l10n_text: z.string.conversation_message_delivered"></span>
-        <!-- /ko -->
-      <!-- /ko -->
     <!-- /ko -->
 
-    <!-- ko if: !message.other_likes().length && message.status() !== z.message.StatusType.SENDING -->
+    <!-- ko if: !message.other_likes().length && message.is_reactable() -->
       <div class="message-body-like">
         <span class="message-body-like-icon like-button message-show-on-hover" data-bind="attr: {'data-ui-value': message.is_liked()}, css: {'like-button-liked': message.is_liked()}, style: {opacity: message.is_liked() ? 1 : ''}, click: $parent.click_on_like">
           <span class="icon-liked"></span>
@@ -112,6 +115,19 @@
       </div>
     <!-- /ko -->
 
+    <div class="message-body-actions">
+      <context-menu params="entries: function() {return $parent.get_context_menu_entries(message)}, tag: 'message', data: message.id"
+                    class="context-menu icon-more font-size-xs"
+                    tabindex="-1"></context-menu>
+      <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp, 'data-uie-uid': message.id}" data-uie-name="item-message-timestamp"></time>
+      <!-- ko if: $parent.is_last_delivered_message(message) -->
+        <span class="message-status" data-bind="l10n_text: z.string.conversation_message_delivered"></span>
+      <!-- /ko -->
+      <!-- ko if: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
+        <ephemeral-timer class="message-ephemeral-timer" params="expires: message.expire_after_millis()"></ephemeral-timer>
+      <!-- /ko -->
+    </div>
+
   </div>
   <!-- ko if: message.other_likes().length -->
     <div class="message-footer">
@@ -205,18 +221,21 @@
     <div class="message-header-icon">
       <user-avatar class="sender-avatar user-avatar-xs" data-bubble="#participants-bubble" data-placement="vertical" params="user: message.user(), click: $parent.on_message_user_click"></user-avatar>
     </div>
-    <div class="message-header-label" data-bind="css: message.accent_color">
+    <div class="message-header-label" data-bind="css: message.ping_color">
       <span class="label-bold" data-bind='text: message.sender_name()'></span>
       <span class="ellipsis" data-bind="text: message.caption"></span>
       <span class="message-icon-ping icon-ping" data-bind="css: message.animation()"></span>
     </div>
+    <div class="message-body-actions">
+      <context-menu params="entries: function() {return $parent.get_context_menu_entries($data)}, tag: 'message', data: message.id"
+                    class="context-menu icon-more font-size-xs"
+                    tabindex="-1"></context-menu>
+      <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
+      <!-- ko if: message.ephemeral_status() === z.message.EphemeralStatusType.ACTIVE -->
+      <ephemeral-timer class="message-ephemeral-timer" params="expires: message.expire_after_millis()"></ephemeral-timer>
+      <!-- /ko -->
+    </div>
   </div>
-  <context-menu params="entries: function() {return $parent.get_context_menu_entries($data)}, tag: 'message', data: message.id"
-                class="context-menu icon-more font-size-xs"
-                tabindex="-1"></context-menu>
-  <!-- ko ifnot: message.timestamp == '' -->
-    <time class="time" data-bind="text: message.display_timestamp_short(), attr: {'data-timestamp': message.timestamp}"></time>
-  <!-- /ko -->
 </script>
 
 <script type="text/html" id="system">