From 28aaa545d84909cb44755c027ed9ddb4d0f80f8a Mon Sep 17 00:00:00 2001
From: CFresquet <CFresquet@yahoo.com>
Date: Mon, 1 May 2017 08:07:16 -0700
Subject: [PATCH 01/19] Created RequestModule

---
 scripts/system/makeUserConnection.js | 69 ++++------------------
 scripts/system/pal.js                | 61 +++----------------
 scripts/system/request.js            | 87 ++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+), 112 deletions(-)
 create mode 100644 scripts/system/request.js

diff --git a/scripts/system/makeUserConnection.js b/scripts/system/makeUserConnection.js
index 0ffea0c568..56eaf34a6d 100644
--- a/scripts/system/makeUserConnection.js
+++ b/scripts/system/makeUserConnection.js
@@ -9,6 +9,9 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+
+var RequestModule = Script.require('./request.js');
+
 (function() { // BEGIN LOCAL_SCOPE
 
     var LABEL = "makeUserConnection";
@@ -121,64 +124,13 @@
             [].map.call(arguments, JSON.stringify)));
     }
 
+    function debugPrint() {
+        print( [].slice.call(arguments).join(' ') );
+    }
+
     function cleanId(guidWithCurlyBraces) {
         return guidWithCurlyBraces.slice(1, -1);
     }
-    function request(options, callback) { // cb(error, responseOfCorrectContentType) of url. A subset of npm request.
-        var httpRequest = new XMLHttpRequest(), key;
-        // QT bug: apparently doesn't handle onload. Workaround using readyState.
-        httpRequest.onreadystatechange = function () {
-            var READY_STATE_DONE = 4;
-            var HTTP_OK = 200;
-            if (httpRequest.readyState >= READY_STATE_DONE) {
-                var error = (httpRequest.status !== HTTP_OK) && httpRequest.status.toString() + ':' + httpRequest.statusText,
-                    response = !error && httpRequest.responseText,
-                    contentType = !error && httpRequest.getResponseHeader('content-type');
-                if (!error && contentType.indexOf('application/json') === 0) { // ignoring charset, etc.
-                    try {
-                        response = JSON.parse(response);
-                    } catch (e) {
-                        error = e;
-                    }
-                }
-                if (error) {
-                    response = {statusCode: httpRequest.status};
-                }
-                callback(error, response);
-            }
-        };
-        if (typeof options === 'string') {
-            options = {uri: options};
-        }
-        if (options.url) {
-            options.uri = options.url;
-        }
-        if (!options.method) {
-            options.method = 'GET';
-        }
-        if (options.body && (options.method === 'GET')) { // add query parameters
-            var params = [], appender = (-1 === options.uri.search('?')) ? '?' : '&';
-            for (key in options.body) {
-                if (options.body.hasOwnProperty(key)) {
-                    params.push(key + '=' + options.body[key]);
-                }
-            }
-            options.uri += appender + params.join('&');
-            delete options.body;
-        }
-        if (options.json) {
-            options.headers = options.headers || {};
-            options.headers["Content-type"] = "application/json";
-            options.body = JSON.stringify(options.body);
-        }
-        for (key in options.headers || {}) {
-            if (options.headers.hasOwnProperty(key)) {
-                httpRequest.setRequestHeader(key, options.headers[key]);
-            }
-        }
-        httpRequest.open(options.method, options.uri, true);
-        httpRequest.send(options.body);
-    }
 
     function handToString(hand) {
         if (hand === Controller.Standard.RightHand) {
@@ -420,6 +372,7 @@
     // initiate the shake, they will race to see who sends the connectionRequest after noticing the
     // waiting message.  Either way, they will start connecting eachother at that point.
     function startHandshake(fromKeyboard) {
+
         if (fromKeyboard) {
             debug("adding animation");
             // just in case order of press/unpress is broken
@@ -492,7 +445,7 @@
         }
         // No-op if we were successful, but this way we ensure that failures and abandoned handshakes don't leave us
         // in a weird state.
-        request({uri: requestUrl, method: 'DELETE'}, debug);
+        RequestModule.request({ uri: requestUrl, method: 'DELETE' }, debug);
     }
 
     function updateTriggers(value, fromKeyboard, hand) {
@@ -606,7 +559,7 @@
                 connectionRequestCompleted();
             } else { // poll
                 Script.setTimeout(function () {
-                    request({
+                    RequestModule.request({
                         uri: requestUrl,
                         // N.B.: server gives bad request if we specify json content type, so don't do that.
                         body: requestBody
@@ -658,7 +611,7 @@
 
         // This will immediately set response if successful (e.g., the other guy got his request in first),
         // or immediate failure, and will otherwise poll (using the requestBody we just set).
-        request({ //
+        RequestModule.request({ //
             uri: requestUrl,
             method: 'POST',
             json: true,
diff --git a/scripts/system/pal.js b/scripts/system/pal.js
index ae64065216..c543926fb3 100644
--- a/scripts/system/pal.js
+++ b/scripts/system/pal.js
@@ -12,6 +12,8 @@
 // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+var RequestModule = Script.require('./request.js');
+
 (function() { // BEGIN LOCAL_SCOPE
 
 var populateNearbyUserList, color, textures, removeOverlays,
@@ -271,7 +273,7 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
         break;
     case 'removeConnection':
         connectionUserName = message.params;
-        request({
+        RequestModule.request({
             uri: METAVERSE_BASE + '/api/v1/user/connections/' + connectionUserName,
             method: 'DELETE'
         }, function (error, response) {
@@ -285,7 +287,7 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
 
     case 'removeFriend':
         friendUserName = message.params;
-        request({
+        RequestModule.request({
             uri: METAVERSE_BASE + '/api/v1/user/friends/' + friendUserName,
             method: 'DELETE'
         }, function (error, response) {
@@ -298,7 +300,7 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
         break
     case 'addFriend':
         friendUserName = message.params;
-        request({
+        RequestModule.request({
             uri: METAVERSE_BASE + '/api/v1/user/friends',
             method: 'POST',
             json: true,
@@ -331,58 +333,9 @@ function updateUser(data) {
 //
 // These are prototype versions that will be changed when the back end changes.
 var METAVERSE_BASE = location.metaverseServerUrl;
-function request(options, callback) { // cb(error, responseOfCorrectContentType) of url. A subset of npm request.
-    var httpRequest = new XMLHttpRequest(), key;
-    // QT bug: apparently doesn't handle onload. Workaround using readyState.
-    httpRequest.onreadystatechange = function () {
-        var READY_STATE_DONE = 4;
-        var HTTP_OK = 200;
-        if (httpRequest.readyState >= READY_STATE_DONE) {
-            var error = (httpRequest.status !== HTTP_OK) && httpRequest.status.toString() + ':' + httpRequest.statusText,
-                response = !error && httpRequest.responseText,
-                contentType = !error && httpRequest.getResponseHeader('content-type');
-            if (!error && contentType.indexOf('application/json') === 0) { // ignoring charset, etc.
-                try {
-                    response = JSON.parse(response);
-                } catch (e) {
-                    error = e;
-                }
-            }
-            callback(error, response);
-        }
-    };
-    if (typeof options === 'string') {
-        options = {uri: options};
-    }
-    if (options.url) {
-        options.uri = options.url;
-    }
-    if (!options.method) {
-        options.method = 'GET';
-    }
-    if (options.body && (options.method === 'GET')) { // add query parameters
-        var params = [], appender = (-1 === options.uri.search('?')) ? '?' : '&';
-        for (key in options.body) {
-            params.push(key + '=' + options.body[key]);
-        }
-        options.uri += appender + params.join('&');
-        delete options.body;
-    }
-    if (options.json) {
-        options.headers = options.headers || {};
-        options.headers["Content-type"] = "application/json";
-        options.body = JSON.stringify(options.body);
-    }
-    for (key in options.headers || {}) {
-        httpRequest.setRequestHeader(key, options.headers[key]);
-    }
-    httpRequest.open(options.method, options.uri, true);
-    httpRequest.send(options.body);
-}
-
 
 function requestJSON(url, callback) { // callback(data) if successfull. Logs otherwise.
-    request({
+    RequestModule.request({
         uri: url
     }, function (error, response) {
         if (error || (response.status !== 'success')) {
@@ -394,7 +347,7 @@ function requestJSON(url, callback) { // callback(data) if successfull. Logs oth
 }
 function getProfilePicture(username, callback) { // callback(url) if successfull. (Logs otherwise)
     // FIXME Prototype scrapes profile picture. We should include in user status, and also make available somewhere for myself
-    request({
+    RequestModule.request({
         uri: METAVERSE_BASE + '/users/' + username
     }, function (error, html) {
         var matched = !error && html.match(/img class="users-img" src="([^"]*)"/);
diff --git a/scripts/system/request.js b/scripts/system/request.js
new file mode 100644
index 0000000000..a5c419892e
--- /dev/null
+++ b/scripts/system/request.js
@@ -0,0 +1,87 @@
+"use strict";
+
+//  request.js
+//
+//  Created by Cisco Fresquet on 04/24/2017.
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+/* global module */
+// @module request
+//
+// This module contains the `request` module implementation
+
+// ===========================================================================================
+module.exports = {
+
+    // ------------------------------------------------------------------
+    test: function () {
+        debug("Test completed.");
+    },
+
+    // ------------------------------------------------------------------
+    request: function (options, callback) { // cb(error, responseOfCorrectContentType) of url. A subset of npm request.
+            var httpRequest = new XMLHttpRequest(), key;
+        // QT bug: apparently doesn't handle onload. Workaround using readyState.
+        httpRequest.onreadystatechange = function () {
+            var READY_STATE_DONE = 4;
+            var HTTP_OK = 200;
+            if (httpRequest.readyState >= READY_STATE_DONE) {
+                var error = (httpRequest.status !== HTTP_OK) && httpRequest.status.toString() + ':' + httpRequest.statusText,
+                    response = !error && httpRequest.responseText,
+                    contentType = !error && httpRequest.getResponseHeader('content-type');
+                if (!error && contentType.indexOf('application/json') === 0) { // ignoring charset, etc.
+                    try {
+                        response = JSON.parse(response);
+                    } catch (e) {
+                        error = e;
+                    }
+                }
+                if (error) {
+                    response = { statusCode: httpRequest.status };
+                }
+                callback(error, response);
+            }
+        };
+        if (typeof options === 'string') {
+            options = { uri: options };
+        }
+        if (options.url) {
+            options.uri = options.url;
+        }
+        if (!options.method) {
+            options.method = 'GET';
+        }
+        if (options.body && (options.method === 'GET')) { // add query parameters
+            var params = [], appender = (-1 === options.uri.search('?')) ? '?' : '&';
+            for (key in options.body) {
+                if (options.body.hasOwnProperty(key)) {
+                    params.push(key + '=' + options.body[key]);
+                }
+            }
+            options.uri += appender + params.join('&');
+            delete options.body;
+        }
+        if (options.json) {
+            options.headers = options.headers || {};
+            options.headers["Content-type"] = "application/json";
+            options.body = JSON.stringify(options.body);
+        }
+        for (key in options.headers || {}) {
+            if (options.headers.hasOwnProperty(key)) {
+                httpRequest.setRequestHeader(key, options.headers[key]);
+            }
+        }
+        httpRequest.open(options.method, options.uri, true);
+        httpRequest.send(options.body);
+        }
+};
+
+// ===========================================================================================
+// @function - debug logging
+function debug() {
+    print('RequestModule | ' + [].slice.call(arguments).join(' '));
+}

From d1dff7606cc779a802c54dbc999649dd80a17adf Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 14:10:24 -0700
Subject: [PATCH 02/19] Lint cleanup; Immediate share button visibility;

---
 interface/src/ui/SnapshotUploader.cpp      |   2 +
 scripts/system/html/css/SnapshotReview.css |  24 +-
 scripts/system/html/img/fb_logo72.png      | Bin 0 -> 1587 bytes
 scripts/system/html/img/twitter_logo72.png | Bin 0 -> 1394 bytes
 scripts/system/html/js/SnapshotReview.js   | 421 +++++++++++++--------
 scripts/system/snapshot.js                 |   5 +-
 6 files changed, 289 insertions(+), 163 deletions(-)
 create mode 100644 scripts/system/html/img/fb_logo72.png
 create mode 100644 scripts/system/html/img/twitter_logo72.png

diff --git a/interface/src/ui/SnapshotUploader.cpp b/interface/src/ui/SnapshotUploader.cpp
index aa37608476..3408cb8512 100644
--- a/interface/src/ui/SnapshotUploader.cpp
+++ b/interface/src/ui/SnapshotUploader.cpp
@@ -31,6 +31,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) {
         auto dataObject = doc.object().value("data").toObject();
         QString thumbnailUrl = dataObject.value("thumbnail_url").toString();
         QString imageUrl = dataObject.value("image_url").toString();
+        QString snapshotID = dataObject.value("id").toString();
         auto addressManager = DependencyManager::get<AddressManager>();
         QString placeName = _inWorldLocation.authority(); // We currently only upload shareable places, in which case this is just host.
         QString currentPath = _inWorldLocation.path();
@@ -43,6 +44,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) {
         if (dataObject.contains("shareable_url")) {
             detailsObject.insert("shareable_url", dataObject.value("shareable_url").toString());
         }
+        detailsObject.insert("snapshot_id", snapshotID);
         QString pickledDetails = QJsonDocument(detailsObject).toJson();
         userStoryObject.insert("details", pickledDetails);
         userStoryObject.insert("thumbnail_url", thumbnailUrl);
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index ccc9386d13..0aa422ca84 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -104,7 +104,7 @@ input[type=button].naked:active {
 */
 
 /*
-// START styling of share bar
+// START styling of share overlay
 */
 .shareControls {
     display: flex;
@@ -212,6 +212,28 @@ input[type=button].naked:active {
 // END styling of share overlay
 */
 
+/*
+// START styling of uploading message
+*/
+.uploadingMessage {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    left: 0;
+    top: 0;
+}
+.uploadingMessage > img {
+    width: 72px;
+    height: 72px;
+    display: block;
+    margin: 60px auto 10px auto;
+}
+/*
+// END styling of uploading message
+*/
+
 /*
 // START styling of snapshot controls (bottom panel) and its contents
 */
diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e3a2370dd2bab99c363f5bf5d06d8e89ee30e5c
GIT binary patch
literal 1587
zcmbVMeM}Q)7(Y=F4GtK@PgstVZElmc*DtOoEwpz9Di*p@uoI(P+oNsD_3HJY2P_--
zfgke&L`)o_Btz%?V#w5>PIM}cIMiS^6#=JNK#Vw*MFj<yL#q43_{W~)O`be?e!u7W
zJ@50r>kMhhQ>V<D0sz2NT?%dl03d}wL4g1OWcD{E0{}3S)tcE1I+yhk3<;=hw1ot9
z6k#WgBw;ID-b%&;z<7t#WM<9!g{YOL1O%TW;3yBkTYLiNA*?Qv1udlA=~hC2pJ;|a
zr%eehlIcZy4@NqiDMbvKQIuw~7P+hn8<d~|<2jV0JQT?iAV=l7y(p)IMtM=U7v;l3
z2pmmeT}tRxQ)ayZ#At>DWdcd8RRqJJTrPm6GPxX{2Z}|oSSS(;Me<l!ipu1uI1U^$
zNCn0-wp`SRCymu&Y`IFv!LlAyDD?S!0-r=cGj<`YP$+l~u{f5o<;Hpo-7LYyy1jG!
z3^?hvGENWcq}?FTNLc86RtZ6V36w{#e@*Q6jt$C6Q$mjL2w{OpNKw45QNdo;NWN*~
zt=V2vp@$S2NiUtxSV<$9JI4>^D9^hK@rfS29!+PQcBh-j!)a?iMY>rXu7o(sBd|Gb
zs7Qv0U^q@HiW7_E2n-`4M1o<k1QB6kwM?t=bG!|!LDW)AE|IC_upEZ9Vnm}=YcQ=u
zg5a1&q7eD9I=7c4+*Z<G*XgwRvC?;9QH&u8mS#*eo#)>GgM(&iuY>l0ScV*&t0$~Z
zHy`+fzo1uoaguQskhUa-rohn&qt3T<pvL0Vnk2PCf{ZE0V5tI8Cn*qEtx;oIXbfxn
zKT{K`z<43Q9{*Vvf5?a@@$T#8SAlPy59zikAqGlN4a+8P1AqWRhpSCo$NkP`S2z(F
z`0!)90B-)#Sp9y#A!7ILtU0R_U7s(GWDTpJ1vLk%D^t%LSDgR)bOX9>Vqg35ecu>X
zL25j?YLCTb-O|&sWMSU$&fJRb>YcTFT9qO3UpzoIg*-j=^wfk)-p7w)V!GPvSo5sX
z6B*^Is_t#42C|m-)D@qu9V%I}^*!Ar>0nc8<W2KOx`XI}8P9{W6A5%~_#Y0#{0UHK
zX^`nMH+!(hN`>uMz~12&Mbt#aI&RL!bB>J+n41odYc#bKHLUn$@#Gts;TN~(|4`a`
zq5j+1dwV_eTLkAT?ka)J7e*qx_Une%u6p6PHGQbxd^MnNNYFV$pYvDVbZOOw>@{XX
zSsL>qc&Ny-qwZK|UC)`CYV2jy_e9B|rAXNbH)+{G!MdYm%c+=4`Q@K}*IRtMvUPi+
z{L%B1h;Jx#QTx7sqBcfHJPb>z3h!z-e(UU}rIVr**Y7>+tS=1DNbk-O94WcHEI6W#
z85rNc8GXL;!^+R@44n(kI_!Ed%TiI^IM{oJy|?Sn`&?~KqL1yqXzHk`{ORh{zV`LE
z9~^8cxN*HRCiI$mbQb4A_eMXl2=}zyEBLuMr1z2IiEI~`sj6#?v>bW-Rdh0#`I~WK
z>h^%rt!G{EnuM;SO;he#(aYDqY#X%0skI&0hV(1)`e%`)ropU{P3af+Z*17|!Aa(2
z{h{)jrJIZ4fUvcRe4!bBCkO}2Mk7Hu7!daB?}>pkx5D#k?X01vX`(c`?W!epUS;;Q
sE7^S|?6hW8Memb{eba`wwS|le1lD8gSC&6Z!uW4or%l5TX>wNl3u=i}%K!iX

literal 0
HcmV?d00001

diff --git a/scripts/system/html/img/twitter_logo72.png b/scripts/system/html/img/twitter_logo72.png
new file mode 100644
index 0000000000000000000000000000000000000000..862f2452285534cc699d9b8cd50ede0e92c2c083
GIT binary patch
literal 1394
zcmV-&1&#WNP)<h;3K|Lk000e1NJLTq002k;002k`0ssI2+K(g<00009a7bBm001QE
z001QE0Z=68_y7O}BuPX;RA_<inp;d9RTzN(GiP@8M!P@@%d+jZnsTdcV@y#g5}{R#
zmqbl8+C(Ka=!*%_#0OJN`e0IxrbcVjib_Ik3^tmyO=?UuMG+d1N@+`>3WXL}mU6Q!
zd!4HfH9!}ZopW{;GGxBDo$Sm%-<)&)^UuGFHrD%LHNvd)4WtS~Om7%sdczRY8-|$P
zFvRqRA*MGBF}<;B#n_b%@8D2=I+I~RVFCL6vNtGeb>)>2!w4!p?EWHdXBKAA-0=aw
z+|Va{`?nAfl$cZQ&BpzHc_I>fJRXR&HBgqzwvLKI5>M7?Lm!t~OI<kL7ra5`_2zKf
z4G91^4CT3ORUwyQh9^#kWVK#|BWA{M<N?bsL*iSl5%n?Vv%$_ZJYw~%S!!*&?daG;
zwl6R9o7XaBE}UUTvI6_hgoz@OiS5c^*ICf>d8ViY2iu9=EEsAl5?I~BjG<-+H~aDH
z9=_2l0ssO~8Ivq4?#%vw{!|s3J}j|tggLc(E4M9^>>LH4u7^L|8NJVm4;Gv6bf`U@
zEKII#ZlyoF#dPdpn{(cgr7>fuF5(h@?{>TaxgZ_?`ApjJy|&??a&=nm;wBSAw_Dur
z#6LZ5-@8%Od@jjhGc9VL!Ymuom{J#ZaHy__uj}U3pGYP)8j79aSyohAVLe)I-IQqM
z+`XQ%7*GI?UgqCD7bRNJWXYp*LRxqb0X*hm_qg%#KC!l&zdp10Y{|CLhzT;h-4^-2
zcfr1v2(n;JBhoa#cnC8_FBX`7f689J$NJ<QCI=Tg>!@}I2nb38xfPI(SV&aruL$!K
zaSRNC3O8HfX2T+MPDtm*rLIY--!FTE%6M3_a!C!uCDrF$e5HrYPfsw^Ru)Qfa7oTw
zc_C7H1!+bLfOINu%fy1LRR0$Cg@|vHrOF-ulBJ9}$fDKk;F_McR~K;&y#n>KB*Gh{
zj6yaQug}Pp9`>bz<$H_kRlOs}Kz55~M;A%=DWz+YG9sB+vrinMof{O0GIWeDi<lt8
zM;D@Wktn!wQyvR1OY#7KAFc|guL*R)Ncnk?K0y(S$qKyD68Uvlq>ZQ+MS&9o^igQ?
zTSS6a8pH2(L>G1@G^EKV4#p`v)j*lJIR?Jz;dh@59`1}zs&25TM**nqPHMtacBzV;
z>{sPhURKgf2ot|#C8qs`)Z$BOwo{H+i%<OLrsUvKVkIkZs3S_(ESiN<Oj6*TwkV&P
z?Yf~)px(Y_p)ZauOiFK_jnLKXOE5SiANos!tum>q@5F#m-56HiolOWYK}~bSALm_`
zh-AyzGhT7`$>67#_~hH}vH}O%BFRs}TM)On<H0hpc@6X27SpSDE$9lUKmqvReDt$R
z1bwIk_oLN?>@0dA-&9pdWu?IT=c8YAX=VkQh^@DveR-yri@0^<Z9@PEi*TSd@?*co
z^(Up6i2+X<Q|!ch-0XvH))M!ZlLYil%Qejr>X)u1P%D;gMXzn=wq{@x0}eBC*^re*
z$!yM13F><IPcBA7sVS!kk_Sfc=q9#iySXqUsaz_`aO#?H<RahiPhmrjI4d#;%3SQe
zJX5(F+gP$O8w$v$2E^}rg`q&odyMqy-oc?#7v7b_-jjv%9Sj#|nT>^&?kTB#O!~to
zbxlc{S1R$)W*@@{Tz1B3MQb@^#vm#X5@0GKkAxIW$_NUy*~cUWh6D0&K$DAU!>awC
zhasjn3^Bc7i0KVOOm7%sdczRY8-|$PShZsR0V1^GX^jP^B>(^b07*qoM6N<$f{Z<n
AZ2$lO

literal 0
HcmV?d00001

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index ed290e9756..8185117669 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -1,3 +1,5 @@
+/*jslint browser:true */
+/*jslint maxlen: 180*/
 "use strict";
 //
 //  SnapshotReview.js
@@ -17,23 +19,23 @@ function showSetupInstructions() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
-    '<br/>' +
-    '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
-    "<h4>Setup Instructions</h4>" +
-    "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
-    '<br/>' +
-    '<div style="text-align:center;">' +
-        '<input class="blueButton" style="margin-left:auto;margin-right:auto;width:130px;" type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />' +
-    '</div>';
+        '<br/>' +
+        '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
+        "<h4>Setup Instructions</h4>" +
+        "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
+        '<br/>' +
+        '<div style="text-align:center;">' +
+            '<input class="blueButton" style="margin-left:auto;margin-right:auto;width:130px;" type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />' +
+        '</div>';
     document.getElementById("snap-button").disabled = true;
 }
 function showSetupComplete() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
-    '<br/>' +
-    "<h4>You're all set!</h4>" +
-    '<p>Try taking a snapshot by pressing the red button below.</p>';
+        '<br/>' +
+        "<h4>You're all set!</h4>" +
+        '<p>Try taking a snapshot by pressing the red button below.</p>';
 }
 function chooseSnapshotLocation() {
     EventBridge.emitWebEvent(JSON.stringify({
@@ -52,68 +54,71 @@ function clearImages() {
     imageCount = 0;
     idCounter = 0;
 }
-function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) {
-    if (!image_data.localPath) {
-        return;
+
+function selectImageToShare(selectedID, isSelected) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
-    var id = "p" + idCounter++;
-    // imageContainer setup
-    var imageContainer = document.createElement("DIV");
-    imageContainer.id = id;
-    imageContainer.style.width = "95%";
-    imageContainer.style.height = "240px";
-    imageContainer.style.margin = "5px auto";
-    imageContainer.style.display = "flex";
-    imageContainer.style.justifyContent = "center";
-    imageContainer.style.alignItems = "center";
-    imageContainer.style.position = "relative";
-    // img setup
-    var img = document.createElement("IMG");
-    img.id = id + "img";
-    if (imageCount > 1) {
-        img.setAttribute("class", "multiple");
-    }
-    img.src = image_data.localPath;
-    imageContainer.appendChild(img);
-    document.getElementById("snapshot-images").appendChild(imageContainer);
-    paths.push(image_data.localPath);
-    var isGif = img.src.split('.').pop().toLowerCase() === "gif";
-    if (isGif) {
-        imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
-    }
-    if (!isGifLoading && !isShowingPreviousImages && canShare) {
-        shareForUrl(id);
-    } else if (isShowingPreviousImages && canShare && image_data.story_id) {
-        appendShareBar(id, image_data.story_id, isGif, blastButtonDisabled, hifiButtonDisabled)
+    var imageContainer = document.getElementById(selectedID),
+        image = document.getElementById(selectedID + 'img'),
+        shareBar = document.getElementById(selectedID + "shareBar"),
+        shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"),
+        showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"),
+        itr,
+        containers = document.getElementsByClassName("shareControls");
+
+    if (isSelected) {
+        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false); };
+        showShareButtonsButton.classList.remove("inactive");
+        showShareButtonsButton.classList.add("active");
+
+        image.onclick = function () { selectImageToShare(selectedID, false); };
+        imageContainer.style.outline = "4px solid #00b4ef";
+        imageContainer.style.outlineOffset = "-4px";
+
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+
+        shareButtonsDiv.style.visibility = "visible";
+
+        for (itr = 0; itr < containers.length; itr += 1) {
+            var parentID = containers[itr].id.slice(0, 2);
+            if (parentID !== selectedID) {
+                selectImageToShare(parentID, false);
+            }
+        }
+    } else {
+        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true); };
+        showShareButtonsButton.classList.remove("active");
+        showShareButtonsButton.classList.add("inactive");
+
+        image.onclick = function () { selectImageToShare(selectedID, true); };
+        imageContainer.style.outline = "none";
+
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
+
+        shareButtonsDiv.style.visibility = "hidden";
     }
 }
-function appendShareBar(divID, story_id, isGif, blastButtonDisabled, hifiButtonDisabled) {
-    var story_url = "https://highfidelity.com/user_stories/" + story_id;
-    var parentDiv = document.getElementById(divID);
-    parentDiv.setAttribute('data-story-id', story_id);
-    document.getElementById(divID).appendChild(createShareBar(divID, isGif, story_url, blastButtonDisabled, hifiButtonDisabled));
-    if (divID === "p0") {
-        selectImageToShare(divID, true);
-    }
-}
-function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButtonDisabled) {
-    var shareBar = document.createElement("div");
+function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled) {
+    var shareBar = document.createElement("div"),
+        shareButtonsDivID = parentID + "shareButtonsDiv",
+        showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv",
+        showShareButtonsButtonID = parentID + "showShareButtonsButton",
+        showShareButtonsLabelID = parentID + "showShareButtonsLabel",
+        blastToConnectionsButtonID = parentID + "blastToConnectionsButton",
+        shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton",
+        facebookButtonID = parentID + "facebookButton",
+        twitterButtonID = parentID + "twitterButton";
+
     shareBar.id = parentID + "shareBar";
     shareBar.className = "shareControls";
-    var shareButtonsDivID = parentID + "shareButtonsDiv";
-    var showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv";
-    var showShareButtonsButtonID = parentID + "showShareButtonsButton";
-    var showShareButtonsLabelID = parentID + "showShareButtonsLabel";
-    var blastToConnectionsButtonID = parentID + "blastToConnectionsButton";
-    var shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton";
-    var facebookButtonID = parentID + "facebookButton";
-    var twitterButtonID = parentID + "twitterButton";
-    shareBar.innerHTML += '' +
-        '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">' +
-            '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />' +
-            '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
-            '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(' + parentID + ')" target="_blank" href="https://www.facebook.com/dialog/feed?app_id=1585088821786423&link=' + shareURL + '"></a>' +
-            '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(' + parentID + ')" target="_blank" href="https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelity&hashtags=VR,HiFi"></a>' +
+    shareBar.innerHTML = '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">' +
+            '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' +
+                blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />' +
+            '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' +
+                shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
+            '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
+            '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
         '</div>' +
         '<div class="showShareButtonsButtonDiv" id="' + showShareButtonsButtonDivID + '">' +
             '<label id="' + showShareButtonsLabelID + '" for="' + showShareButtonsButtonID + '">SHARE</label>' +
@@ -124,103 +129,196 @@ function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButt
         '</div>';
 
     // Add onclick handler to parent DIV's img to toggle share buttons
-    document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true) };
+    document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
 
     return shareBar;
 }
-function selectImageToShare(selectedID, isSelected) {
-    if (selectedID.id) {
-        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
-    }
-    var imageContainer = document.getElementById(selectedID);
-    var image = document.getElementById(selectedID + 'img');
-    var shareBar = document.getElementById(selectedID + "shareBar");
-    var shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv");
-    var showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton");
-
-    if (isSelected) {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false) };
-        showShareButtonsButton.classList.remove("inactive");
-        showShareButtonsButton.classList.add("active");
-
-        image.onclick = function () { selectImageToShare(selectedID, false) };
-        imageContainer.style.outline = "4px solid #00b4ef";
-        imageContainer.style.outlineOffset = "-4px";
-
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
-
-        shareButtonsDiv.style.visibility = "visible";
-
-        var containers = document.getElementsByClassName("shareControls");
-        var parentID;
-        for (var i = 0; i < containers.length; ++i) {
-            parentID = containers[i].id.slice(0, 2);
-            if (parentID !== selectedID) {
-                selectImageToShare(parentID, false);
-            }
-        }
-    } else {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true) };
-        showShareButtonsButton.classList.remove("active");
-        showShareButtonsButton.classList.add("inactive");
-
-        image.onclick = function () { selectImageToShare(selectedID, true) };
-        imageContainer.style.outline = "none";
-
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
-
-        shareButtonsDiv.style.visibility = "hidden";
+function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled) {
+    document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled));
+    if (divID === "p0") {
+        selectImageToShare(divID, true);
     }
 }
 function shareForUrl(selectedID) {
     EventBridge.emitWebEvent(JSON.stringify({
         type: "snapshot",
         action: "shareSnapshotForUrl",
-        data: paths[parseInt(selectedID.substring(1))]
+        data: paths[parseInt(selectedID.substring(1), 10)]
     }));
 }
+function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) {
+    if (!image_data.localPath) {
+        return;
+    }
+    var id = "p" + (idCounter++),
+        imageContainer = document.createElement("DIV"),
+        img = document.createElement("IMG"),
+        isGif = img.src.split('.').pop().toLowerCase() === "gif";
+    imageContainer.id = id;
+    imageContainer.style.width = "95%";
+    imageContainer.style.height = "240px";
+    imageContainer.style.margin = "5px auto";
+    imageContainer.style.display = "flex";
+    imageContainer.style.justifyContent = "center";
+    imageContainer.style.alignItems = "center";
+    imageContainer.style.position = "relative";
+    img.id = id + "img";
+    img.src = image_data.localPath;
+    imageContainer.appendChild(img);
+    document.getElementById("snapshot-images").appendChild(imageContainer);
+    paths.push(image_data.localPath);
+    if (isGif) {
+        imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
+    }
+    if (!isGifLoading && !isShowingPreviousImages && canShare) {
+        shareForUrl(id);
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
+    }
+    if (isShowingPreviousImages && image_data.story_id) {
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
+        updateShareInfo(id, image_data.story_id);
+    }
+}
+function showUploadingMessage(selectedID, destination) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+
+    var uploadingMessage = document.createElement("div");
+    uploadingMessage.id = selectedID + "uploadingMessage";
+    uploadingMessage.className = "uploadingMessage";
+    uploadingMessage.setAttribute("data-destination", destination);
+
+    var socialIcon = document.createElement("img");
+    switch (destination) {
+        case 'blast':
+            socialIcon.src = "img/shareIcon.png";
+            break;
+        case 'hifi':
+            socialIcon.src = "img/shareToFeed.png";
+            break;
+        case 'facebook':
+            socialIcon.src = "img/fb_logo72.png";
+            break;
+        case 'twitter':
+            socialIcon.src = "img/twitter_logo72.png";
+            break;
+    }
+    uploadingMessage.appendChild(socialIcon);
+
+    uploadingMessage.innerHTML += '<span>Preparing Snapshot for Sharing...</span>';
+
+    document.getElementById(selectedID).appendChild(uploadingMessage);
+}
+function hideUploadingMessage(selectedID, storyID) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+
+    var uploadingMessage = document.getElementById(selectedID + "uploadingMessage");
+    if (uploadingMessage) {
+        uploadingMessage.remove();
+        var destination = uploadingMessage.getAttribute("data-destination");
+
+        switch (destination) {
+            case 'blast':
+                blastToConnections(selectedID, selectedID === "p1");
+                break;
+            case 'hifi':
+                shareWithEveryone(selectedID, selectedID === "p1");
+                break;
+            case 'facebook':
+                var facebookButton = document.getElementById(selectedID + "facebookButton");
+                window.open(facebookButton.getAttribute("href"), "_blank");
+                break;
+            case 'twitter':
+                var twitterButton = document.getElementById(selectedID + "twitterButton");
+                window.open(twitterButton.getAttribute("href"), "_blank");
+                break;
+        }
+
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "removeFromStoryIDsToMaybeDelete",
+            story_id: storyID
+        }));
+    }
+}
+function updateShareInfo(containerID, storyID) {
+    if (containerID.id) {
+        containerID = containerID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+    var shareBar = document.getElementById(containerID + "shareBar"),
+        parentDiv = document.getElementById(containerID),
+        shareURL = "https://highfidelity.com/user_stories/" + storyID,
+        facebookButton = document.getElementById(containerID + "facebookButton"),
+        twitterButton = document.getElementById(containerID + "twitterButton");
+
+    parentDiv.setAttribute('data-story-id', storyID);
+
+    facebookButton.setAttribute("target", "_blank");
+    facebookButton.setAttribute("href", 'https://www.facebook.com/dialog/feed?app_id=1585088821786423&link=' + shareURL);
+
+    twitterButton.setAttribute("target", "_blank");
+    twitterButton.setAttribute("href", 'https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelity&hashtags=VR,HiFi');
+
+    hideUploadingMessage(containerID, storyID);
+}
 function blastToConnections(selectedID, isGif) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
 
     document.getElementById(selectedID + "blastToConnectionsButton").disabled = true;
 
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "blastToConnections",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id"),
-        isGif: isGif
-    }));
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
+
+    if (storyID) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "blastToConnections",
+            story_id: storyID,
+            isGif: isGif
+        }));
+    } else {
+        showUploadingMessage(selectedID, 'blast');
+    }
 }
 function shareWithEveryone(selectedID, isGif) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
 
     document.getElementById(selectedID + "shareWithEveryoneButton").disabled = true;
 
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "shareSnapshotWithEveryone",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id"),
-        isGif: isGif
-    }));
-}
-function shareButtonClicked(selectedID) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "shareButtonClicked",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id")
-    }));
-}
-function cancelSharing(selectedID) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
-    var shareBar = document.getElementById(selectedID + "shareBar");
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
-    shareBar.style.display = "inline";
+    if (storyID) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "shareSnapshotWithEveryone",
+            story_id: storyID,
+            isGif: isGif
+        }));
+    } else {
+        showUploadingMessage(selectedID, 'hifi');
+    }
+}
+function shareButtonClicked(destination, selectedID) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
+
+    if (!storyID) {
+        showUploadingMessage(selectedID, destination);
+    }
 }
 
 function handleCaptureSetting(setting) {
-    var stillAndGif = document.getElementById('stillAndGif');
-    var stillOnly = document.getElementById('stillOnly');
+    var stillAndGif = document.getElementById('stillAndGif'),
+        stillOnly = document.getElementById('stillOnly');
+
     stillAndGif.checked = setting;
     stillOnly.checked = !setting;
 
@@ -229,19 +327,20 @@ function handleCaptureSetting(setting) {
             type: "snapshot",
             action: "captureStillAndGif"
         }));
-    }
+    };
+
     stillOnly.onclick = function () {
         EventBridge.emitWebEvent(JSON.stringify({
             type: "snapshot",
             action: "captureStillOnly"
         }));
-    }
+    };
 
 }
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(false);
+    //testInBrowser(2);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -251,7 +350,9 @@ window.onload = function () {
             if (message.type !== "snapshot") {
                 return;
             }
-            
+
+            var messageOptions = message.options;
+
             switch (message.action) {
                 case 'showSetupInstructions':
                     showSetupInstructions();
@@ -265,9 +366,8 @@ window.onload = function () {
                     break;
                 case 'showPreviousImages':
                     clearImages();
-                    var messageOptions = message.options;
                     imageCount = message.image_data.length;
-                    message.image_data.forEach(function (element, idx, array) {
+                    message.image_data.forEach(function (element, idx) {
                         addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled);
                     });
                     break;
@@ -275,28 +375,28 @@ window.onload = function () {
                     // The last element of the message contents list contains a bunch of options,
                     // including whether or not we can share stuff
                     // The other elements of the list contain image paths.
-                    var messageOptions = message.options;
 
                     if (messageOptions.containsGif) {
                         if (messageOptions.processingGif) {
                             imageCount = message.image_data.length + 1; // "+1" for the GIF that'll finish processing soon
                             message.image_data.push({ localPath: messageOptions.loadingGifPath });
-                            message.image_data.forEach(function (element, idx, array) {
+                            message.image_data.forEach(function (element, idx) {
                                 addImage(element, idx === 1, idx === 0 && messageOptions.canShare, false);
                             });
                         } else {
-                            var gifPath = message.image_data[0].localPath;
-                            var p1img = document.getElementById('p1img');
+                            var gifPath = message.image_data[0].localPath,
+                                p1img = document.getElementById('p1img');
                             p1img.src = gifPath;
 
                             paths[1] = gifPath;
                             if (messageOptions.canShare) {
                                 shareForUrl("p1");
+                                appendShareBar("p1", true, false, false);
                             }
                         }
                     } else {
                         imageCount = message.image_data.length;
-                        message.image_data.forEach(function (element, idx, array) {
+                        message.image_data.forEach(function (element) {
                             addImage(element, false, messageOptions.canShare, false);
                         });
                     }
@@ -306,7 +406,7 @@ window.onload = function () {
                     break;
                 case 'snapshotUploadComplete':
                     var isGif = message.image_url.split('.').pop().toLowerCase() === "gif";
-                    appendShareBar(isGif ? "p1" : "p0", message.story_id, isGif);
+                    updateShareInfo(isGif ? "p1" : "p0", message.story_id);
                     break;
                 default:
                     console.log("Unknown message action received in SnapshotReview.js.");
@@ -333,13 +433,18 @@ function takeSnapshot() {
     }));
 }
 
-function testInBrowser(isTestingSetupInstructions) {
-    if (isTestingSetupInstructions) {
+function testInBrowser(test) {
+    if (test === 0) {
         showSetupInstructions();
-    } else {
+    } else if (test === 1) {
         imageCount = 1;
         //addImage({ localPath: 'http://lorempixel.com/553/255' });
-        addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-05-01_15-48-15.gif' }, false, true, true, false, false);
-        addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-05-01_15-48-15.jpg' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+    } else if (test === 2) {
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+        showUploadingMessage("p0", 'facebook');
+        showUploadingMessage("p1", 'twitter');
     }
 }
diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js
index d0d1bd96f5..eb45a07e2f 100644
--- a/scripts/system/snapshot.js
+++ b/scripts/system/snapshot.js
@@ -182,7 +182,6 @@ function onMessage(message) {
             break;
         case 'blastToConnections':
             isLoggedIn = Account.isLoggedIn();
-            storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             if (message.isGif) {
                 Settings.setValue("previousAnimatedSnapBlastingDisabled", true);
             } else {
@@ -242,7 +241,6 @@ function onMessage(message) {
             break;
         case 'shareSnapshotWithEveryone':
             isLoggedIn = Account.isLoggedIn();
-            storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             if (message.isGif) {
                 Settings.setValue("previousAnimatedSnapHifiSharingDisabled", true);
             } else {
@@ -283,8 +281,7 @@ function onMessage(message) {
                 snapshotToShareAfterLogin = { path: message.data, href: message.href || href };
             }
             break;
-        case 'shareButtonClicked':
-            print('Twitter or FB "Share" button clicked! Removing ID', message.story_id, 'from storyIDsToMaybeDelete[].');
+        case 'removeFromStoryIDsToMaybeDelete':
             storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             print('storyIDsToMaybeDelete[] now:', JSON.stringify(storyIDsToMaybeDelete));
             break;

From d8095c5ea51cf4930924f6ceb6f4b235907da3f1 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 14:20:27 -0700
Subject: [PATCH 03/19] New setup instructions; new 'blank snapshot' text

---
 scripts/system/html/js/SnapshotReview.js | 29 +++++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 8185117669..060ce2f76a 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -20,7 +20,7 @@ function showSetupInstructions() {
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
         '<br/>' +
-        '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
+        '<p>Take and share snaps and GIFs with people in High Fidelity, Facebook, and Twitter.</p>' +
         "<h4>Setup Instructions</h4>" +
         "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
         '<br/>' +
@@ -34,8 +34,21 @@ function showSetupComplete() {
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
         '<br/>' +
-        "<h4>You're all set!</h4>" +
-        '<p>Try taking a snapshot by pressing the red button below.</p>';
+        '<div style="text-align:center;font-weight:bold;">' +
+            '<p>Snapshot location set.</p>' +
+            '<p>Press the big red button to take a snap!</p>' +
+        '</div>';
+}
+function showSnapshotInstructions() {
+    var snapshotImagesDiv = document.getElementById("snapshot-images");
+    snapshotImagesDiv.className = "snapshotInstructions";
+    snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
+        '<br/>' +
+        '<p>Take and share snaps and GIFs with people in High Fidelity, Facebook, and Twitter.</p>' +
+        '<br/>' +
+        '<div style="text-align:center;font-weight:bold;">' +
+            '<p>Press the big red button to take a snap!</p>' +
+        '</div>';
 }
 function chooseSnapshotLocation() {
     EventBridge.emitWebEvent(JSON.stringify({
@@ -367,9 +380,13 @@ window.onload = function () {
                 case 'showPreviousImages':
                     clearImages();
                     imageCount = message.image_data.length;
-                    message.image_data.forEach(function (element, idx) {
-                        addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled);
-                    });
+                    if (imageCount > 0) {
+                        message.image_data.forEach(function (element, idx) {
+                            addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled);
+                        });
+                    } else {
+                        showSnapshotInstructions();
+                    }
                     break;
                 case 'addImages':
                     // The last element of the message contents list contains a bunch of options,

From 1067d1e0f6fddb4fe73204a702ae7d2eaaed6aee Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 14:43:16 -0700
Subject: [PATCH 04/19] Don't let user blast in certain cases

---
 scripts/system/html/js/SnapshotReview.js | 42 ++++++++++++++----------
 scripts/system/snapshot.js               |  3 +-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 060ce2f76a..8a569bdf5c 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -112,7 +112,7 @@ function selectImageToShare(selectedID, isSelected) {
         shareButtonsDiv.style.visibility = "hidden";
     }
 }
-function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled) {
+function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
     var shareBar = document.createElement("div"),
         shareButtonsDivID = parentID + "shareButtonsDiv",
         showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv",
@@ -125,10 +125,11 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
 
     shareBar.id = parentID + "shareBar";
     shareBar.className = "shareControls";
-    shareBar.innerHTML = '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">' +
-            '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' +
-                blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />' +
-            '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' +
+    var shareBarInnerHTML = '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
+    if (canBlast) {
+        shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
+    }
+    shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' +
                 shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
             '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
             '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
@@ -141,13 +142,18 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
             '</div>' +
         '</div>';
 
+    shareBar.innerHTML = shareBarInnerHTML;
+
     // Add onclick handler to parent DIV's img to toggle share buttons
     document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
 
     return shareBar;
 }
-function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled) {
-    document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled));
+function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
+    if (divID.id) {
+        divID = divID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+    document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast));
     if (divID === "p0") {
         selectImageToShare(divID, true);
     }
@@ -159,7 +165,7 @@ function shareForUrl(selectedID) {
         data: paths[parseInt(selectedID.substring(1), 10)]
     }));
 }
-function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) {
+function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled, canBlast) {
     if (!image_data.localPath) {
         return;
     }
@@ -184,11 +190,11 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
         imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
     }
     if (!isGifLoading && !isShowingPreviousImages && canShare) {
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled, true);
         shareForUrl(id);
-        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
     }
     if (isShowingPreviousImages && image_data.story_id) {
-        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast);
         updateShareInfo(id, image_data.story_id);
     }
 }
@@ -353,7 +359,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(2);
+    //testInBrowser(1);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -382,7 +388,7 @@ window.onload = function () {
                     imageCount = message.image_data.length;
                     if (imageCount > 0) {
                         message.image_data.forEach(function (element, idx) {
-                            addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled);
+                            addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled, messageOptions.canBlast);
                         });
                     } else {
                         showSnapshotInstructions();
@@ -408,7 +414,7 @@ window.onload = function () {
                             paths[1] = gifPath;
                             if (messageOptions.canShare) {
                                 shareForUrl("p1");
-                                appendShareBar("p1", true, false, false);
+                                appendShareBar("p1", true, false, false, true);
                             }
                         }
                     } else {
@@ -454,13 +460,13 @@ function testInBrowser(test) {
     if (test === 0) {
         showSetupInstructions();
     } else if (test === 1) {
-        imageCount = 1;
+        imageCount = 2;
         //addImage({ localPath: 'http://lorempixel.com/553/255' });
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
     } else if (test === 2) {
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
         showUploadingMessage("p0", 'facebook');
         showUploadingMessage("p1", 'twitter');
     }
diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js
index eb45a07e2f..966f43cc55 100644
--- a/scripts/system/snapshot.js
+++ b/scripts/system/snapshot.js
@@ -311,7 +311,8 @@ function onButtonClicked() {
         snapshotOptions = {
             containsGif: previousAnimatedSnapPath !== "",
             processingGif: false,
-            shouldUpload: false
+            shouldUpload: false,
+            canBlast: location.domainId === Settings.getValue("previousSnapshotDomainID")
         }
         imageData = [];
         if (previousStillSnapPath !== "") {

From 0beceae59b8a263f8e78e32cccbcee03b8f0b1bd Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 15:19:20 -0700
Subject: [PATCH 05/19] Checkpoint

---
 scripts/system/html/css/SnapshotReview.css | 117 +++++++++++----------
 scripts/system/html/js/SnapshotReview.js   |  72 ++++++++-----
 2 files changed, 110 insertions(+), 79 deletions(-)

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index 0aa422ca84..7d4239985f 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -111,20 +111,70 @@ input[type=button].naked:active {
     justify-content: space-between;
     flex-direction: row;
     align-items: center;
-    height: 45px;
-    line-height: 60px;
+    height: 65px;
+    line-height: 65px;
     width: calc(100% - 8px);
     position: absolute;
     bottom: 4px;
     left: 4px;
     right: 4px;
 }
+.showShareButtonsButtonDiv {
+    display: inline-flex;
+    align-items: center;
+    font-family: Raleway-SemiBold;
+    font-size: 14px;
+    color: white;
+    width: 60px;
+    height: 100%;
+    margin-right: 10px;
+    margin-bottom: 15px;
+}
+.showShareButtonsButtonDiv > label {
+    text-shadow: 2px 2px 3px #000000;
+    margin-bottom: -10px;
+    margin-left: 12px;
+}
+.showShareButton.active {
+    border-color: #00b4ef;
+    border-width: 3px;
+    background-color: white;
+}
+.showShareButton.active:hover {
+    background-color: #afafaf;
+}
+.showShareButton.active:active {
+    background-color: white;
+}
+.showShareButton.inactive {
+    border-width: 0;
+    background-color: white;
+}
+.showShareButton.inactive:hover {
+    background-color: #afafaf;
+}
+.showShareButton.inactive:active {
+    background-color: white;
+}
+.showShareButtonDots {
+    display: block;
+    width: 40px;
+    height: 40px;
+    font-family: HiFi-Glyphs;
+    font-size: 60px;
+    position: absolute;
+    left: 6px;
+    bottom: 42px;
+    color: white;
+    pointer-events: none;
+}
 .shareButtons {
     display: flex;
     align-items: center;
-    margin-left: 15px;
+    margin-left: 0;
+    margin-bottom: 15px;
     height: 100%;
-    width: 75%;
+    width: calc(100% - 60px);
 }
 .blastToConnections {
     text-align: left;
@@ -155,58 +205,15 @@ input[type=button].naked:active {
     margin-right: 8px;
     border-radius: 3px;
 }
-.showShareButtonsButtonDiv {
-    display: inline-flex;
-    align-items: center;
-    font-family: Raleway-SemiBold;
-    font-size: 14px;
-    color: white;
-    height: 100%;
-    margin-right: 10px;
-}
-.showShareButtonsButtonDiv > label {
-    text-shadow: 2px 2px 3px #000000;
-}
-.showShareButton {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    border-width: 0;
-    margin-left: 5px;
-    outline: none;
-}
-.showShareButton.active {
-    border-color: #00b4ef;
-    border-width: 3px;
-    background-color: white;
-}
-.showShareButton.active:hover {
-    background-color: #afafaf;
-}
-.showShareButton.active:active {
-    background-color: white;
-}
-.showShareButton.inactive {
-    border-width: 0;
-    background-color: white;
-}
-.showShareButton.inactive:hover {
-    background-color: #afafaf;
-}
-.showShareButton.inactive:active {
-    background-color: white;
-}
-.showShareButtonDots {
-    display: block;
-    width: 40px;
-    height: 40px;
-    font-family: HiFi-Glyphs;
-    font-size: 60px;
+.shareControlsHelp {
+    height: 25px;
+    line-height: 25px;
     position: absolute;
-    right: 20px;
-    bottom: 12px;
-    color: #00b4ef;
-    pointer-events: none;
+    bottom: 0;
+    left: 65px;
+    right: 0;
+    font-family: Raleway-Regular;
+    font-weight: 400;
 }
 /*
 // END styling of share overlay
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 8a569bdf5c..5045f1a5e9 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -76,14 +76,15 @@ function selectImageToShare(selectedID, isSelected) {
         image = document.getElementById(selectedID + 'img'),
         shareBar = document.getElementById(selectedID + "shareBar"),
         shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"),
-        showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"),
+        shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
+        showShareButtonsButtonDiv = document.getElementById(selectedID + "showShareButtonsButtonDiv"),
         itr,
         containers = document.getElementsByClassName("shareControls");
 
     if (isSelected) {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false); };
-        showShareButtonsButton.classList.remove("inactive");
-        showShareButtonsButton.classList.add("active");
+        showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, false); };
+        showShareButtonsButtonDiv.classList.remove("inactive");
+        showShareButtonsButtonDiv.classList.add("active");
 
         image.onclick = function () { selectImageToShare(selectedID, false); };
         imageContainer.style.outline = "4px solid #00b4ef";
@@ -92,6 +93,7 @@ function selectImageToShare(selectedID, isSelected) {
         shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
 
         shareButtonsDiv.style.visibility = "visible";
+        shareBarHelp.style.visibility = "visible";
 
         for (itr = 0; itr < containers.length; itr += 1) {
             var parentID = containers[itr].id.slice(0, 2);
@@ -100,9 +102,9 @@ function selectImageToShare(selectedID, isSelected) {
             }
         }
     } else {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true); };
-        showShareButtonsButton.classList.remove("active");
-        showShareButtonsButton.classList.add("inactive");
+        showShareButtonsButtonDiv.onclick = function () { selectImageToShare(selectedID, true); };
+        showShareButtonsButtonDiv.classList.remove("active");
+        showShareButtonsButtonDiv.classList.add("inactive");
 
         image.onclick = function () { selectImageToShare(selectedID, true); };
         imageContainer.style.outline = "none";
@@ -110,13 +112,14 @@ function selectImageToShare(selectedID, isSelected) {
         shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
 
         shareButtonsDiv.style.visibility = "hidden";
+        shareBarHelp.style.visibility = "hidden";
     }
 }
 function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast) {
     var shareBar = document.createElement("div"),
+        shareBarHelpID = parentID + "shareBarHelp",
         shareButtonsDivID = parentID + "shareButtonsDiv",
         showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv",
-        showShareButtonsButtonID = parentID + "showShareButtonsButton",
         showShareButtonsLabelID = parentID + "showShareButtonsLabel",
         blastToConnectionsButtonID = parentID + "blastToConnectionsButton",
         shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton",
@@ -125,25 +128,25 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
 
     shareBar.id = parentID + "shareBar";
     shareBar.className = "shareControls";
-    var shareBarInnerHTML = '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
-    if (canBlast) {
-        shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
-    }
-    shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' +
-                shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
-            '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
-            '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
-        '</div>' +
-        '<div class="showShareButtonsButtonDiv" id="' + showShareButtonsButtonDivID + '">' +
-            '<label id="' + showShareButtonsLabelID + '" for="' + showShareButtonsButtonID + '">SHARE</label>' +
-            '<input type="button" class="showShareButton inactive" id="' + showShareButtonsButtonID + '" onclick="selectImageToShare(' + parentID + ', true)" />' +
-            '<div class="showShareButtonDots">' +
+    var shareBarInnerHTML = '<div class="showShareButtonsButtonDiv inactive" id="' + showShareButtonsButtonDivID + '" onclick="selectImageToShare(' + parentID + ', true)">' +
+            '<label id="' + showShareButtonsLabelID + '">SHARE</label>' +
+            '<span class="showShareButtonDots">' +
                 '&#xe019;' +
             '</div>' +
+        '</div>' +
+        '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
+    if (canBlast) {
+        shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
+    }
+    shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
+            '<a class="facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
+            '<a class="twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
         '</div>';
 
     shareBar.innerHTML = shareBarInnerHTML;
 
+    shareBar.innerHTML += '<div class="shareControlsHelp" id="' + shareBarHelpID + '"></div>';
+
     // Add onclick handler to parent DIV's img to toggle share buttons
     document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
 
@@ -323,6 +326,27 @@ function shareWithEveryone(selectedID, isGif) {
         showUploadingMessage(selectedID, 'hifi');
     }
 }
+function shareButtonHovered(destination, selectedID) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
+    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
+
+    switch (destination) {
+        case 'blast':
+            shareBarHelp.style.backgroundColor = "#EA4C5F";
+            break;
+        case 'hifi':
+            shareBarHelp.style.backgroundColor = "#1FC6A6";
+            break;
+        case 'facebook':
+            shareBarHelp.style.backgroundColor = "#3C58A0";
+            break;
+        case 'twitter':
+            shareBarHelp.style.backgroundColor = "#00B4EE";
+            break;
+    }
+}
 function shareButtonClicked(destination, selectedID) {
     if (selectedID.id) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
@@ -359,7 +383,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(1);
+    testInBrowser(1);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -462,11 +486,11 @@ function testInBrowser(test) {
     } else if (test === 1) {
         imageCount = 2;
         //addImage({ localPath: 'http://lorempixel.com/553/255' });
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
         addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
     } else if (test === 2) {
-        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
         addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
         showUploadingMessage("p0", 'facebook');
         showUploadingMessage("p1", 'twitter');
     }

From 7817c72ea13b67d466a5231ac1f0b19c78dee4c5 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 15:58:43 -0700
Subject: [PATCH 06/19] Another checkpoint

---
 scripts/system/html/css/SnapshotReview.css |  83 +++++++--------------
 scripts/system/html/img/blast_icon.svg     |  20 +++++
 scripts/system/html/img/fb_icon.svg        |  13 ++++
 scripts/system/html/img/fb_logo.png        | Bin 1257 -> 0 bytes
 scripts/system/html/img/fb_logo72.png      | Bin 1587 -> 0 bytes
 scripts/system/html/img/hifi_icon.svg      |  19 +++++
 scripts/system/html/img/shareIcon.png      | Bin 15201 -> 0 bytes
 scripts/system/html/img/shareToFeed.png    | Bin 15486 -> 0 bytes
 scripts/system/html/img/twitter_icon.svg   |  12 +++
 scripts/system/html/img/twitter_logo.png   | Bin 552 -> 0 bytes
 scripts/system/html/img/twitter_logo72.png | Bin 1394 -> 0 bytes
 scripts/system/html/js/SnapshotReview.js   |  34 ++++++---
 12 files changed, 116 insertions(+), 65 deletions(-)
 create mode 100644 scripts/system/html/img/blast_icon.svg
 create mode 100644 scripts/system/html/img/fb_icon.svg
 delete mode 100644 scripts/system/html/img/fb_logo.png
 delete mode 100644 scripts/system/html/img/fb_logo72.png
 create mode 100644 scripts/system/html/img/hifi_icon.svg
 delete mode 100644 scripts/system/html/img/shareIcon.png
 delete mode 100644 scripts/system/html/img/shareToFeed.png
 create mode 100644 scripts/system/html/img/twitter_icon.svg
 delete mode 100644 scripts/system/html/img/twitter_logo.png
 delete mode 100644 scripts/system/html/img/twitter_logo72.png

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index 7d4239985f..c0d5991e0b 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -125,36 +125,21 @@ input[type=button].naked:active {
     font-family: Raleway-SemiBold;
     font-size: 14px;
     color: white;
-    width: 60px;
+    width: 75px;
     height: 100%;
-    margin-right: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 0px;
+}
+.showShareButtonsButtonDiv.active:hover {
+    background-color: rgba(0, 0, 0, 0.45);
+    background-size: 2px;
 }
 .showShareButtonsButtonDiv > label {
     text-shadow: 2px 2px 3px #000000;
-    margin-bottom: -10px;
+    margin-bottom: -14px;
     margin-left: 12px;
 }
-.showShareButton.active {
-    border-color: #00b4ef;
-    border-width: 3px;
-    background-color: white;
-}
-.showShareButton.active:hover {
-    background-color: #afafaf;
-}
-.showShareButton.active:active {
-    background-color: white;
-}
-.showShareButton.inactive {
-    border-width: 0;
-    background-color: white;
-}
-.showShareButton.inactive:hover {
-    background-color: #afafaf;
-}
-.showShareButton.inactive:active {
-    background-color: white;
+.showShareButtonsButtonDiv:hover > label {
+    text-shadow: none;
 }
 .showShareButtonDots {
     display: block;
@@ -164,56 +149,44 @@ input[type=button].naked:active {
     font-size: 60px;
     position: absolute;
     left: 6px;
-    bottom: 42px;
+    bottom: 32px;
     color: white;
     pointer-events: none;
 }
 .shareButtons {
     display: flex;
-    align-items: center;
-    margin-left: 0;
-    margin-bottom: 15px;
-    height: 100%;
+    align-items: flex-end;
+    height: 40px;
     width: calc(100% - 60px);
+    margin-bottom: 25px;
+    margin-left: 0;
+}
+.shareButtons img {
+    width: 40px;
+    height: 40px;
+}
+.shareButton {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
 }
 .blastToConnections {
-    text-align: left;
-    margin-right: 20px;
-    height: 29px;
+    background-image: url(../img/fb_logo.png);
 }
 .shareWithEveryone {
     background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center;
-    border-width: 0px;
-    text-align: left;
-    margin-right: 8px;
-    height: 29px;
-    width: 30px;
-    border-radius: 3px;
-}
-.facebookButton {
-    background-image: url(../img/fb_logo.png);
-    width: 29px;
-    height: 29px;
-    display: inline-block;
-    margin-right: 8px;
-}
-.twitterButton {
-    background-image: url(../img/twitter_logo.png);
-    width: 29px;
-    height: 29px;
-    display: inline-block;
-    margin-right: 8px;
-    border-radius: 3px;
 }
 .shareControlsHelp {
     height: 25px;
     line-height: 25px;
     position: absolute;
     bottom: 0;
-    left: 65px;
+    left: 73px;
     right: 0;
     font-family: Raleway-Regular;
-    font-weight: 400;
+    font-weight: 500;
+    padding-left: 8px;
+    color: white;
 }
 /*
 // END styling of share overlay
diff --git a/scripts/system/html/img/blast_icon.svg b/scripts/system/html/img/blast_icon.svg
new file mode 100644
index 0000000000..31df8e7f53
--- /dev/null
+++ b/scripts/system/html/img/blast_icon.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M39.3,25.9c1.6,4.2,3.2,8.4,4.8,12.5c0.1,0.3,0.2,0.6,0,0.9c-0.3,0.3-0.6,0.3-1,0.2c-4-0.8-8.1-1.7-12.1-2.5
+	c-0.5-0.1-1-0.1-1.5,0.1c-0.5,0.2-1,0.4-1.5,0.6c-0.8,0.3-0.9,0.7-0.4,1.4c2.1,2.7,4.2,5.5,6.3,8.2c0.1,0.2,0.2,0.3,0.3,0.5
+	c0.2,0.4,0.1,0.7-0.3,1c-0.1,0.1-0.3,0.2-0.5,0.2c-1.5,0.6-3,1.1-4.4,1.7c-0.8,0.3-1,0.3-1.5-0.4c-2.3-3-4.6-5.9-6.9-8.9
+	c-0.5-0.6-0.6-0.6-1.3-0.4c-0.3,0.1-0.6,0.2-0.8,0.3c-1,0.3-2-0.1-2.3-1.1c-1.2-3.2-2.5-6.5-3.7-9.7c-0.4-1.1,0-2,1.1-2.5
+	c0.9-0.4,1.9-0.7,2.8-1.1c2.7-1,5.3-2,8-3c0.5-0.2,0.9-0.5,1.2-0.9c2.4-3.3,4.9-6.6,7.4-9.9c0.2-0.3,0.4-0.5,0.8-0.5
+	c0.4,0,0.5,0.4,0.7,0.7C36.1,17.5,37.7,21.7,39.3,25.9z"/>
+<path class="st0" d="M38.2,15.6c-0.2,0-0.4-0.1-0.6-0.2c-0.6-0.3-0.7-1.1-0.4-1.6l3.7-6.1C41.3,7.1,42,7,42.6,7.3
+	c0.6,0.3,0.7,1.1,0.4,1.6l-3.7,6.1C39,15.4,38.6,15.6,38.2,15.6z"/>
+<path class="st0" d="M53.1,36.7c-0.1,0-0.2,0-0.3,0l-7.4-1.6c-0.6-0.1-1-0.8-0.9-1.4c0.1-0.6,0.8-1,1.4-0.9l7.4,1.6
+	c0.6,0.1,1,0.8,0.9,1.4C54.1,36.4,53.6,36.7,53.1,36.7z"/>
+<path class="st0" d="M42.5,24.8c-0.4,0-0.9-0.3-1.1-0.7c-0.3-0.6,0-1.3,0.6-1.6l7.5-3.5c0.6-0.3,1.3,0,1.6,0.6
+	c0.3,0.6,0,1.3-0.6,1.6L43,24.7C42.8,24.8,42.7,24.8,42.5,24.8z"/>
+</svg>
diff --git a/scripts/system/html/img/fb_icon.svg b/scripts/system/html/img/fb_icon.svg
new file mode 100644
index 0000000000..6d67d17bb2
--- /dev/null
+++ b/scripts/system/html/img/fb_icon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M22.3,32c1.9,0,3.8,0,5.8,0c0.4,0,0.4,0,0.4,0.4c0,6,0,12.1,0,18.1h7.8c0-6,0-12.1,0-18.1c0-0.4,0-0.4,0.4-0.4
+	c1.9,0,3.8,0,5.8,0c0.3,0,0.3,0,0.4-0.3c0.2-1.2,0.3-2.5,0.5-3.7c0.1-1.2,0.3-2.3,0.4-3.5h-7.4c0-0.1,0-0.2,0-0.3c0-1.6,0-3.3,0-4.9
+	c0-0.4,0.1-0.8,0.2-1.2c0.3-1.1,1-1.7,2.1-1.9c0.5-0.1,1.1-0.1,1.6-0.1c1.1,0,2.3,0,3.4,0c0.3,0,0.3-0.1,0.3-0.3c0-2,0-4.1,0-6.1
+	c0-0.2-0.1-0.3-0.3-0.4c-2-0.2-4-0.3-6-0.2c-2.2,0.1-4.2,0.7-6,2.1c-1.5,1.3-2.4,2.9-2.8,4.8c-0.3,1-0.3,2.1-0.3,3.2
+	c0,1.7,0,3.4,0,5v0.4h-0.3c-2,0-3.9,0-5.9,0c-0.3,0-0.3,0.1-0.3,0.3c0,2.3,0,4.6,0,6.9C22,32,22,32,22.3,32z"/>
+</svg>
diff --git a/scripts/system/html/img/fb_logo.png b/scripts/system/html/img/fb_logo.png
deleted file mode 100644
index 1de20bacd8fb5719db3291365576d6368a5ff510..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1257
zcmbVMTWl0n7(QC5q@|jWMiwtH8D1>y?#%4$&dv;bo1NJ$YuM6kx44mqGMzcw9oo4#
zGj*qp1_ML_4>k(n5-tsiiSfl4LTZe`R*D1>$y#dyO^uc(e5f=9v2sbxlwI(l;lY!f
z<mAuyegFUc=RaqEds}Nm-OF_VfQIyDAqxO_&D|?&0RY<$_PhuHSZgQqc86ZDOQHz@
zC+po1NvmQH%tBEfc>8-82B4;><nnetvxSv()hD_bpQ9SUUE!Exh*B@Kk#5+dXc6?*
z*P|$+$Px6-U<S_^JS-}k2Tj;9*p`z9dnHCjV^JjRu#Re|&=wI#?b9sQiJ(imtY)!p
z7(<aIh}|1O9~G6)v?IK3LL}%Ty%J6k2u1mbK#-z{7Q~Meehl|xIOQb*Y>;C8A*8a<
zC=xd10-F_5m0YG=h@eH=HdqWRl}f%6>C?>~j9?hX)$sehrd;q^1DY*5Ud`H2RS=*h
znTla6x`w!lVz=IJM^LnCK{Ya&$HJObX_Ta^m?Ih(;lnXib$u-vw(Kl?QpU1qD>q<3
zEDJ5Y-;`h$7B*DLj%qwTkqb038Fs6w^eCFxC+JeY3N<?|L{LXHe6k|5c#y^kA{4+w
zew?BSg2ri*=LwR=c|R9SCaN0CaTB2wPLe5(qX>#1l72do<Pv<6Bx!+9kPKesrZvkJ
zH3?SpDvDg?GEe2Qya`2HH*>n)SDk?NqHgO}Q8y62gF;@<h?1hYfhPBY9{ClZsk{T_
zl&P!8QioY(nF=^Q#3fQ3L(&!JJP}}MF2&FUm*Ds$TH(t7r)yXg31jYf{AXOMp{$T{
zkB^5xiadEfP?IC5iN>OxAIXydJhLV(a5-nH`|JzDKU^9cYk%%SL;T8keAC>Dovm2?
z<oR{AQ#I?3Mz+MKFU7mcE6*G{e)X_P605+D(+7TLu6v&SHQ;&G+vsWhWQFJ2^}Oes
z#f2Z|W^Ql&pgi3<`DHH29X);S+A%KM7@V=pFLo2Zymxv0yNl)RGZ&GTvGm8$12+N_
ztw-egrn{e=`zl<w>*1frSCL1C3k&nJYi8fw*!=Cj^TVTe!(4sS$f09vJMZ5g`mMPB
z)0@99?y9}F{f&crZ8^C*JwLkmKr;4sU6}j(R_xwCcYeA(<audgdgA$^SUJ|VKKw8~
zaAHchGXBcGoAY}%{`KKo?9M;RBX^ol&OWF+bN1xb!y|iI)S4Ts*@cDX$y3|j2Q>h_
W+`9J^=-T9dKIvqe@Ofg#?tcLbL$|sB

diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png
deleted file mode 100644
index 8e3a2370dd2bab99c363f5bf5d06d8e89ee30e5c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1587
zcmbVMeM}Q)7(Y=F4GtK@PgstVZElmc*DtOoEwpz9Di*p@uoI(P+oNsD_3HJY2P_--
zfgke&L`)o_Btz%?V#w5>PIM}cIMiS^6#=JNK#Vw*MFj<yL#q43_{W~)O`be?e!u7W
zJ@50r>kMhhQ>V<D0sz2NT?%dl03d}wL4g1OWcD{E0{}3S)tcE1I+yhk3<;=hw1ot9
z6k#WgBw;ID-b%&;z<7t#WM<9!g{YOL1O%TW;3yBkTYLiNA*?Qv1udlA=~hC2pJ;|a
zr%eehlIcZy4@NqiDMbvKQIuw~7P+hn8<d~|<2jV0JQT?iAV=l7y(p)IMtM=U7v;l3
z2pmmeT}tRxQ)ayZ#At>DWdcd8RRqJJTrPm6GPxX{2Z}|oSSS(;Me<l!ipu1uI1U^$
zNCn0-wp`SRCymu&Y`IFv!LlAyDD?S!0-r=cGj<`YP$+l~u{f5o<;Hpo-7LYyy1jG!
z3^?hvGENWcq}?FTNLc86RtZ6V36w{#e@*Q6jt$C6Q$mjL2w{OpNKw45QNdo;NWN*~
zt=V2vp@$S2NiUtxSV<$9JI4>^D9^hK@rfS29!+PQcBh-j!)a?iMY>rXu7o(sBd|Gb
zs7Qv0U^q@HiW7_E2n-`4M1o<k1QB6kwM?t=bG!|!LDW)AE|IC_upEZ9Vnm}=YcQ=u
zg5a1&q7eD9I=7c4+*Z<G*XgwRvC?;9QH&u8mS#*eo#)>GgM(&iuY>l0ScV*&t0$~Z
zHy`+fzo1uoaguQskhUa-rohn&qt3T<pvL0Vnk2PCf{ZE0V5tI8Cn*qEtx;oIXbfxn
zKT{K`z<43Q9{*Vvf5?a@@$T#8SAlPy59zikAqGlN4a+8P1AqWRhpSCo$NkP`S2z(F
z`0!)90B-)#Sp9y#A!7ILtU0R_U7s(GWDTpJ1vLk%D^t%LSDgR)bOX9>Vqg35ecu>X
zL25j?YLCTb-O|&sWMSU$&fJRb>YcTFT9qO3UpzoIg*-j=^wfk)-p7w)V!GPvSo5sX
z6B*^Is_t#42C|m-)D@qu9V%I}^*!Ar>0nc8<W2KOx`XI}8P9{W6A5%~_#Y0#{0UHK
zX^`nMH+!(hN`>uMz~12&Mbt#aI&RL!bB>J+n41odYc#bKHLUn$@#Gts;TN~(|4`a`
zq5j+1dwV_eTLkAT?ka)J7e*qx_Une%u6p6PHGQbxd^MnNNYFV$pYvDVbZOOw>@{XX
zSsL>qc&Ny-qwZK|UC)`CYV2jy_e9B|rAXNbH)+{G!MdYm%c+=4`Q@K}*IRtMvUPi+
z{L%B1h;Jx#QTx7sqBcfHJPb>z3h!z-e(UU}rIVr**Y7>+tS=1DNbk-O94WcHEI6W#
z85rNc8GXL;!^+R@44n(kI_!Ed%TiI^IM{oJy|?Sn`&?~KqL1yqXzHk`{ORh{zV`LE
z9~^8cxN*HRCiI$mbQb4A_eMXl2=}zyEBLuMr1z2IiEI~`sj6#?v>bW-Rdh0#`I~WK
z>h^%rt!G{EnuM;SO;he#(aYDqY#X%0skI&0hV(1)`e%`)ropU{P3af+Z*17|!Aa(2
z{h{)jrJIZ4fUvcRe4!bBCkO}2Mk7Hu7!daB?}>pkx5D#k?X01vX`(c`?W!epUS;;Q
sE7^S|?6hW8Memb{eba`wwS|le1lD8gSC&6Z!uW4or%l5TX>wNl3u=i}%K!iX

diff --git a/scripts/system/html/img/hifi_icon.svg b/scripts/system/html/img/hifi_icon.svg
new file mode 100644
index 0000000000..acbb98a3b3
--- /dev/null
+++ b/scripts/system/html/img/hifi_icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M12,52.3c6.5,0,13.2,0,20.2,0c6.5,0,13.4,0,20.6,0c3.5,0,5-1.6,5-5.6c0-10.2,0-20.5,0-30.7c0-4-1.3-5.5-5-5.5
+	c-4.8,0-9.6,0-14.4,0l-5.9,0c-2,0-4,0-6,0c-4.8,0-9.7,0-14.5,0c-3.5,0-4.9,1.5-4.9,5.5c0,10.3,0,20.6,0,30.9
+	C7.1,50.6,8.6,52.3,12,52.3z M41.9,43.3C41.9,43.3,41.9,43.3,41.9,43.3c0.1-0.1,0.1-0.1,0.1-0.2c1.4-1.5,2.8-3,4.3-4.6l0.8-0.9
+	c0.6,0.6,1.1,1.2,1.7,1.8c1.8,1.9,3.7,3.9,5.4,6c0.2,0.3,0.3,1.2,0,2.7c-0.1,0.1-0.5,0.2-1.5,0.4c-4.4,0.9-7.7-0.6-10.2-4.5
+	C42.4,43.8,42.2,43.5,41.9,43.3z M54.5,32.1c0,2.7,0,5.5,0,8.2L53.3,39c-1.4-1.5-2.8-3-4.2-4.4c-1.7-1.8-2.3-1.8-3.9,0
+	c-1.4,1.5-2.8,3-4.2,4.5l-1.5,1.6l-3.4-3.6c-3.4-3.7-6.8-7.3-10.2-10.9c-1.1-1.2-1.8-1.8-2.4-1.8c-0.6,0-1.3,0.6-2.4,1.8
+	c-2.6,2.8-5.4,5.5-8.1,8.4l-3,2.9v-4.4c0-1.6,0.2-3.2,0.2-4.8c0-4.1,0.1-8.4,0.1-12.5c0-0.7,0.1-1.1,0.3-1.3
+	c0.2-0.2,0.6-0.3,1.2-0.3c13.7,0,27.3,0,41.2,0c0.5,0,1,0,1.2,0.3c0.1,0.2,0.2,0.5,0.2,0.9C54.5,20.9,54.5,26.6,54.5,32.1z
+	 M12.7,40.2c2.7-2.7,5.2-5.4,7.9-8.3c0.9-1,1.9-2.1,2.9-3.1L42,48.5c-0.2,0-0.4,0-0.6,0c-9.6,0-19.3,0-28.9,0c-0.8,0-1.5,0-1.7-0.2
+	c-0.2-0.2-0.2-1-0.3-2l0-0.1C10.2,43.7,10.9,42,12.7,40.2z"/>
+<path class="st0" d="M37,23.7c0,2.1,1.4,3.8,3.3,3.8c1.9,0,3.4-1.6,3.4-3.7c0-2.1-1.4-3.8-3.3-3.8C38.5,19.9,37,21.6,37,23.7z"/>
+</svg>
diff --git a/scripts/system/html/img/shareIcon.png b/scripts/system/html/img/shareIcon.png
deleted file mode 100644
index 0486ac920222964fc18287bd03131bc70ed942bd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15201
zcmeI3TZ|J`7{|{F5-IM!pkbp3!>mRyPUq6=jMFYlyU<3uuFINTObkqCPP-G@nPFzS
z?d}u0(FBA@l&l7fl1PX?NRS6_5Wx_m5i}A*P*CK-#E1%-5LbvsGrhOF-RueB#hhQ#
zK78N#f8U({xlCWWy}xf=yXzho0H8e{iw*z)I-SoQ3jhF@@}a)~01J)SMhk#Ni=9s!
z*!yZH0Q|4&;IKWMSTD$W)-5S|61odn12~A?1w)dzK$}Ryw5o;3t4EKMgsOzdAzy+?
z7!f$4#>P#!VZ3ip9^WGK3fUcYi3OpMHL}o_h(b1_SwbO17V8R{B{*T4B#J}qEg`bU
zX-Etw`iY2cLc-_vQ!?ub5&_=L`uHH{eVE`F)=x7$&3Y+@6&PM%SfUIWb`b<2no3F-
zh^{TSGnG_`9I<Ufpy_-*@6LPNx|ya~p66+XqdAT;l@w)-X|`0LG^?vrq*5meE!k8J
zTh%qfsVgP*oE;)br%{#iys}2Mk!F>>ll3fJkPMo2Gjt14A~Cxxo1IZ<*}bFo>`H5J
z%z*R&wDg=Q!`@M-*<CX|gd$h#7&$Xj^hc3tn1NZS*%r;Z*%=?f7}0Ir8qr(KyP9q}
zds|J_7N@~8C(}{}3u+6QlPSrHTcLzl$QnY#gp#eBgSwsxmv&iy<>`q?#MxB=V&#yk
zDSF;oCDP53+IrWj!Kh@zu%o0HFU9!>S)btJ1h0=`0s_O-6)BBus*!-Uq)4_jmnsco
zo9pO`ni`u^mD<S08i|Au*DPDoWEhWz3t7Xhs)``{gA&hr{8TUrIV$DzLW&P~eU#$y
z207O64@i8lILSu&w9-*s&N&+?9u1cczM{*jQrkTO!zWpuOUV=`DISVtVSq|90f~|V
z9LuttNAmi)N~5}B(;7Wys%ce|GIe8|xhSe4@P5bzgWeRy2Nj0$B)v&0DS2cn;Dtek
z_p-c)t+tq<%(PZ9)v|SStS(WxF*d-hjnPUXqZV%vLozMs9Lx||IhpmFwTf6g;DRJO
zcTZS$wl7pfx*=M7tSV)hI(<3kW<jZboxF9A{0P)$+y13e#Zj$`SbECNOD60|L(QJc
z$t+cElr@(ZY3HuasM8ar_)RQ?C5_(PGR*B%{V$fm+4-f3$Rm=LhDw;OY~V^@ZYx(>
z&&HEgxe%tGL{X82lx}7vJFI4<G^7nJEz-4Mt*2OhMF|l-qnim`fnkqWdvn!=>r~Fm
z$+;z<W=qA>$%@4nRzs|L{IGM{Gr8jU0LL&4L$l6zSz4cNmTsI~TAyx~)|5|ZsvYLa
z-I~I6D(4Man)L=ll402I^Lcz?@x@vnZdUZG1(+F*s#&O6&V9vs%bMoIjKYnrgmsCs
zu(TEGewGyzrRYF(ZP+E!)gPP{&8?+2qgx1Wf&{h;32YY<*e)cnT}WWNkid2!f$c&9
z+l2(S3khr&64)*zuw6)CyO6+kA%X2e0^5ZIwhIYt7ZTVmB(PmbV7rjOb|Hc7LIT@`
z1hxwaY!?#PE+nvBNMO5=z;+>l?Lq?Eg#@+>32YY<*e)cnT}WWNkid2!F{@p!+Fv-K
zri92m*&Y7qaNr;SfRJMY2>`|)0ASk$0N4KoVB60C<QM=hZw5ek1%M^`i<>@K3jnwp
zkM;}}&L5i$bxbgKKHL4_DBK^>=ZEfo^uk-;zrViYtBcQdpIP<PZN0>azUb@M4o2UV
zyDxnF<nxn@m2GVgt($k?q`H4%>ET7E(;a(aLp!HVuUXpp^t{Ep+SfgPU~B)pPj@|X
zwk`DK>J?1K{vE-#Wvd^IeX*O|{$29Y0<Y`jadOd*fBqq!@|pXN+<xUsZpqa7^JjK;
zz5Myx>7Op|9@#PE+O?#wXJ6;k<O}P+eWPn)V9(fHAG94h^w}?8Ut7-o_Rjt9eG@;@
zu6h^tov^wtUw`xW&U619ekr(eYT3D5Z27VI`HL&=r6NbU{H7bP{V;h}y>TD-d+)JR
UXL=U)Ie&tU_x42(t=as{e=9bQEdT%j

diff --git a/scripts/system/html/img/shareToFeed.png b/scripts/system/html/img/shareToFeed.png
deleted file mode 100644
index f681c49d8f83a3f77ec8db52f62ff2bd1e6ee628..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15486
zcmeI3ZEO_B8OH}h;@XV~#K_=)(De}10rvLg-n^^3a~z+I-E!tIZn0Y+-rJqCx4zrm
z?yh}j%OR&yC{C=pA*!IHp$$@6wIz{h(<YRL7AT}?0fFL#BuWUe6-uHgEg>S%v{3E6
z_+D%iMo~UQnxABUn3@0c?EL3>X79@m2AfxvmEK(n04Qr}^tS*2EC7H-U%DLt0FFFw
z1pt(&jqN%BUoJQQW`Ny4T>t?4rqtSIv;|gkf)cgyq7s6(cvLk-z*7@fd7&E`mJsZe
zWUuvK2mfrfNTS!e-Wi|*Y8~v78v8Z4uD`ie=<gO-(OTmx^~AY&RE<J|x5T3nS?A(j
zYceh;>zp}ES}n;XMz_~mYbLa`1%j43MS~Wn%|!^bz1retZM2iEW*jRm3`M(0iX~|W
zLD3w=aujVzWA&9<EEbO@hPf7hLpq%%hP~D<!%#VrjKyNMnBAsmog~e&EJ-mW!w{Mn
zCiFhp;Nyg>FG&T-#PLI2&?ME66xm|N<wHu3;k8=LL=&X<6;&q^$$Hv5L5Y%aUL|Q8
zMNT6M1a2;iMyFKjMt!ewbEV$er$Vv?>Pn9$!1`V&8%w5o2vL}bqxNW#q(7oS!U&8)
z+0aSaMo;+&YL{XtdY3ZIz9*)q-Mt}&vxk%CnK?79492BtWadmtmMn!7o_JK{>NLn3
ziq@(q5nrmxf|;kc)YX|)<+fC<mt;|i>GycZLP_?#v(ccRH=xf{5|o2rT&=W=bGQh~
z%~4cNgw(Qv00C(5B5&}Y8X|9DVGu=>!hN3}BD*X<Kp?<1$-2SI0&Md8;!)KmNg_wt
zU11oq^F+0Swi8Z=!$t74y_(?dPKt6d0^?#_$?fIKCx!MaLXTNLO@3dh-$g}`#B9-U
zZov_z1coLUUgQayhHfH6xp{(jGc-*zcHZG)GKq46O-i&zlR71tkL0W|_ad5mp~Jkx
zAv%eWlXVj;bTCB78FCRK!}9KGcbE<HLMFu&VJ4+&lypPU`f?^R7sWdG-TcwaL_|tn
z94fEr(CkOAHPeu}H9CPO+1DH|m{*QZFsl}d9x`t<`&bjCWzrPKc}o_g;^)Yx&k^f_
z^0ZZ-ij!P2eFR+z8!=vkwVhBlZlxPjQS)Vm;XR~zKS!j=6RGjfa0)u#`x(#RmRjnI
ze+FjFr*<K9@p2~=ePpI|GXuAFY^lS{@2O0mPVPaEC~#p#i}Hp~it?S1ROL<&nH|jL
z^h~^yxH=`GXaPlpKD#ITs>&J8QJHTe^L~J`!6*BY_9Wj>d1Hm^+sr<X^d#528H%DP
zk~aURrMc6E()OE6bEgZXS>-om$?!4hYz4zPD)W_@+Vwh>7ogAOblRPs<eM~ixKI(4
z;xN+Ym!eSC&6~>3q&0;TQwrO&LZ&)bm@|<Urb;2_cUW>FHQM5D@RfSViC>r*&F4#Y
zN1r1&2@=>YB(PmbV7rjOb|Hc7LIT@`1hxwaY!?#PE+nvBNMO5=z;+>l?Lq?Eg#@+>
z32YY<*e)cnT}WWNkid2!f$c&9+l2(S3khr&64)*zuw6)CyO6+kA%X2e0^5ZIwhIYt
z7ZTVmB(PmbV7rjOb|Hc7LIT@`#7*rg&3>~9WzlPmS!;YN7oKi3KL-^WTLJ*|F9jg6
z1%PWe07$$GKo14LdmR99y8xK4?706}0{}$}oBXw{@z>u!>+Nc-om2epw{BZobZz<Q
z-y4?h=@?yRaaHWCxU04Lnex$dReL*TJ)G!TarpSWQ04ZyC4X($KXPg2+IbImtPYNp
zR(xf!eh&K>+qU??!Ptvi9hLDn4!!pHPi~w%aXohb6B}&bUL);4_1hU8>%Mu$`H|;=
zHy`T0cyw{(#dl*Rk1lv&&gS*YF8pWBg;V#IyhSJeS2k;Y_nl*|UmRUux3r3%_jurM
z+N!I|-??q1Y&f|6<6lu9+_CZN``9gq<ISrMd@B^_e0BBK;rp(>vFX`jl?@(sFFLYe
ztgF~IR@A#~^X<dq*S7X~j;;7pJw34L*i-$L)ju98-f{l)w(;lo%=*E`=jQ6s!Ogbv
z5pqq*m1W~Q|1o;G>h+!byN3__aOiqHW4kcpN4=j6gr82la(CI;-5)jASM0cS;pMx|
zghrp)J#b=Hge$jo6fLQB-E(Q^e0yR8TmH%;57stsxjJ<2^n=^azqCJm5-h5%neF$k
zsC@s}(t(oq9(cY2%pT{%JH;m#eo}PevGA3@$akDA*&~m?J<>im@#Kj^^Y@*7>E1u|
zA8FXOtKu@)wfguAV;}#wboLVuogDPLAN^(V@$ssy2M_<V=JdsPE`9ZnM^@D@`w+wv
zD;~LSJvSZ>erMATX;^=I;|6j0zW$m!6R%wyJM;6G<)NoOY!1%;+3)&dhZmf3e(g8T
zS1(6?U$eG*p>I&QviQ)LGPCx^`SK6GKm6;;m63s6``n2eGr``uQv0)ehPRnt2shO?
L`=7qA<9q)H#YG)p

diff --git a/scripts/system/html/img/twitter_icon.svg b/scripts/system/html/img/twitter_icon.svg
new file mode 100644
index 0000000000..0393d963f2
--- /dev/null
+++ b/scripts/system/html/img/twitter_icon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M13.1,43.9c4.5,0,8.2-0.9,11.8-3.6c-3.7-0.7-6.2-2.3-7.6-5.5c0.9-0.2,1.7-0.3,2.9-0.6c-3.6-1.7-5.8-4-6.2-7.9
+	c1.1,0.2,2,0.4,3.6,0.8c-3.3-3.5-4.5-6.9-2.5-11.1c4.8,4.9,10.2,8.2,16.6,8.5c0.7-2.3,1-4.6,2-6.4c2.2-3.9,7.4-5.2,11-2.6
+	c2,1.4,3.6,1.2,5.5,0.4c0.4-0.2,0.7-0.2,1.7-0.5c-1.1,1.5-1.8,2.5-2.7,3.8c1.1-0.1,2-0.3,2.9-0.4c0,0.2,0.1,0.3,0,0.4
+	c-2.6,3.4-2.9,4-3.8,8.9c-3.1,15.7-19.7,23.9-34,16.7C14.2,44.6,13.9,44.4,13.1,43.9z"/>
+</svg>
diff --git a/scripts/system/html/img/twitter_logo.png b/scripts/system/html/img/twitter_logo.png
deleted file mode 100644
index 59fd027c2a59cffb4c4f353dbc0ddce2cc3e92d4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 552
zcmV+@0@wYCP)<h;3K|Lk000e1NJLTq0012T0012b0ssI2+41mL00009a7bBm001QE
z001QE0Z=68_y7O_+DSw~R7i<qlwJ6Vfd+ty7KV<RJ7mpe!4%?VW&Ha4KUURZoQ$Q0
z?DkSD3=9nWpZ@7S|MT<j|1L5t+aLY;hpGdMxlLy5=U)F^dh0iuI6oWXIu9;6UZ@u%
zRasqSS=gBwCS3f*&dm7z4~oH9!a+lTsm+3;)R3J8RWebN6>ca5h;T6e`N!ZW%_7Fh
zh-L^Db6<Y{&&a@#tIM|4o7+v6g&C&BNQ4<v@$Y{OO=o^Q{QM7197{MXyY<^ehJ}HF
zK~s=vjw9#G@Ba@y`*Z#MKQT@$j=1su?~V89hGI8YnV;$OtG}jVP}hlbGKMO%Vk(1x
zcR#VmFcv3h2{OSAB?xYQz~Wf!=1#rx>)RjfuD}F`pZz7)+*=?1MeO>1_Vr(aX5V=K
z@A6xs&1GO<5aVQ2;b%fmI~ZW%B^;rP%iP^h{_K772fv|vpZwYO5T_dK=KlZBP<Z4=
z^8W7!o?_Q|`{TdDqd)Kj6wY!-ikneah}i^N!Z`ctZ}`q{A8>{N0|RFI72{;g)@5^-
zWs&5@629+${-1W`*WByB{$NjC2*8N7-ZT_pc9Uh%6JeI*Vq|7y`0(@p?T`PCJpa4v
q@gE|SAa-*p2ScsC7&Vu+<^lkzl%{SoyW=zf0000<MNUMnLSTZ3BNPSz

diff --git a/scripts/system/html/img/twitter_logo72.png b/scripts/system/html/img/twitter_logo72.png
deleted file mode 100644
index 862f2452285534cc699d9b8cd50ede0e92c2c083..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1394
zcmV-&1&#WNP)<h;3K|Lk000e1NJLTq002k;002k`0ssI2+K(g<00009a7bBm001QE
z001QE0Z=68_y7O}BuPX;RA_<inp;d9RTzN(GiP@8M!P@@%d+jZnsTdcV@y#g5}{R#
zmqbl8+C(Ka=!*%_#0OJN`e0IxrbcVjib_Ik3^tmyO=?UuMG+d1N@+`>3WXL}mU6Q!
zd!4HfH9!}ZopW{;GGxBDo$Sm%-<)&)^UuGFHrD%LHNvd)4WtS~Om7%sdczRY8-|$P
zFvRqRA*MGBF}<;B#n_b%@8D2=I+I~RVFCL6vNtGeb>)>2!w4!p?EWHdXBKAA-0=aw
z+|Va{`?nAfl$cZQ&BpzHc_I>fJRXR&HBgqzwvLKI5>M7?Lm!t~OI<kL7ra5`_2zKf
z4G91^4CT3ORUwyQh9^#kWVK#|BWA{M<N?bsL*iSl5%n?Vv%$_ZJYw~%S!!*&?daG;
zwl6R9o7XaBE}UUTvI6_hgoz@OiS5c^*ICf>d8ViY2iu9=EEsAl5?I~BjG<-+H~aDH
z9=_2l0ssO~8Ivq4?#%vw{!|s3J}j|tggLc(E4M9^>>LH4u7^L|8NJVm4;Gv6bf`U@
zEKII#ZlyoF#dPdpn{(cgr7>fuF5(h@?{>TaxgZ_?`ApjJy|&??a&=nm;wBSAw_Dur
z#6LZ5-@8%Od@jjhGc9VL!Ymuom{J#ZaHy__uj}U3pGYP)8j79aSyohAVLe)I-IQqM
z+`XQ%7*GI?UgqCD7bRNJWXYp*LRxqb0X*hm_qg%#KC!l&zdp10Y{|CLhzT;h-4^-2
zcfr1v2(n;JBhoa#cnC8_FBX`7f689J$NJ<QCI=Tg>!@}I2nb38xfPI(SV&aruL$!K
zaSRNC3O8HfX2T+MPDtm*rLIY--!FTE%6M3_a!C!uCDrF$e5HrYPfsw^Ru)Qfa7oTw
zc_C7H1!+bLfOINu%fy1LRR0$Cg@|vHrOF-ulBJ9}$fDKk;F_McR~K;&y#n>KB*Gh{
zj6yaQug}Pp9`>bz<$H_kRlOs}Kz55~M;A%=DWz+YG9sB+vrinMof{O0GIWeDi<lt8
zM;D@Wktn!wQyvR1OY#7KAFc|guL*R)Ncnk?K0y(S$qKyD68Uvlq>ZQ+MS&9o^igQ?
zTSS6a8pH2(L>G1@G^EKV4#p`v)j*lJIR?Jz;dh@59`1}zs&25TM**nqPHMtacBzV;
z>{sPhURKgf2ot|#C8qs`)Z$BOwo{H+i%<OLrsUvKVkIkZs3S_(ESiN<Oj6*TwkV&P
z?Yf~)px(Y_p)ZauOiFK_jnLKXOE5SiANos!tum>q@5F#m-56HiolOWYK}~bSALm_`
zh-AyzGhT7`$>67#_~hH}vH}O%BFRs}TM)On<H0hpc@6X27SpSDE$9lUKmqvReDt$R
z1bwIk_oLN?>@0dA-&9pdWu?IT=c8YAX=VkQh^@DveR-yri@0^<Z9@PEi*TSd@?*co
z^(Up6i2+X<Q|!ch-0XvH))M!ZlLYil%Qejr>X)u1P%D;gMXzn=wq{@x0}eBC*^re*
z$!yM13F><IPcBA7sVS!kk_Sfc=q9#iySXqUsaz_`aO#?H<RahiPhmrjI4d#;%3SQe
zJX5(F+gP$O8w$v$2E^}rg`q&odyMqy-oc?#7v7b_-jjv%9Sj#|nT>^&?kTB#O!~to
zbxlc{S1R$)W*@@{Tz1B3MQb@^#vm#X5@0GKkAxIW$_NUy*~cUWh6D0&K$DAU!>awC
zhasjn3^Bc7i0KVOOm7%sdczRY8-|$PShZsR0V1^GX^jP^B>(^b07*qoM6N<$f{Z<n
AZ2$lO

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 5045f1a5e9..117e0d568f 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -90,7 +90,7 @@ function selectImageToShare(selectedID, isSelected) {
         imageContainer.style.outline = "4px solid #00b4ef";
         imageContainer.style.outlineOffset = "-4px";
 
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
 
         shareButtonsDiv.style.visibility = "visible";
         shareBarHelp.style.visibility = "visible";
@@ -136,11 +136,11 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
         '</div>' +
         '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
     if (canBlast) {
-        shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
+        shareBarInnerHTML += '<div class="shareButton blastToConnections' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')"><img src="img/blast_icon.svg"></div>';
     }
-    shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
-            '<a class="facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
-            '<a class="twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
+    shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')"><img src="img/hifi_icon.svg"></div>' +
+            '<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
+            '<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
         '</div>';
 
     shareBar.innerHTML = shareBarInnerHTML;
@@ -214,16 +214,16 @@ function showUploadingMessage(selectedID, destination) {
     var socialIcon = document.createElement("img");
     switch (destination) {
         case 'blast':
-            socialIcon.src = "img/shareIcon.png";
+            socialIcon.src = "img/blast_icon.svg";
             break;
         case 'hifi':
-            socialIcon.src = "img/shareToFeed.png";
+            socialIcon.src = "img/hifi_icon.svg";
             break;
         case 'facebook':
-            socialIcon.src = "img/fb_logo72.png";
+            socialIcon.src = "img/fb_icon.svg";
             break;
         case 'twitter':
-            socialIcon.src = "img/twitter_logo72.png";
+            socialIcon.src = "img/twitter_icon.svg";
             break;
     }
     uploadingMessage.appendChild(socialIcon);
@@ -330,20 +330,34 @@ function shareButtonHovered(destination, selectedID) {
     if (selectedID.id) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
-    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
+    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
+        shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes,
+        itr;
+
+    for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
+        shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
+    }
 
     switch (destination) {
         case 'blast':
             shareBarHelp.style.backgroundColor = "#EA4C5F";
+            shareBarHelp.innerHTML = "Blast to my connections";
+            document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F";
             break;
         case 'hifi':
             shareBarHelp.style.backgroundColor = "#1FC6A6";
+            shareBarHelp.innerHTML = "Share in Snapshots Feed";
+            document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6";
             break;
         case 'facebook':
             shareBarHelp.style.backgroundColor = "#3C58A0";
+            shareBarHelp.innerHTML = "Share on Facebook";
+            document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
             break;
         case 'twitter':
             shareBarHelp.style.backgroundColor = "#00B4EE";
+            shareBarHelp.innerHTML = "Share on Twitter";
+            document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
             break;
     }
 }

From 5d38cd543d8f48f3bc71f37aec5844dd22484d7e Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 16:06:13 -0700
Subject: [PATCH 07/19] Yet another checkpoint

---
 scripts/system/html/js/SnapshotReview.js | 59 +++++++++---------------
 1 file changed, 23 insertions(+), 36 deletions(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 117e0d568f..beae7d0884 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -15,6 +15,10 @@
 var paths = [];
 var idCounter = 0;
 var imageCount = 0;
+var blastShareText = "Blast to my Connections",
+    hifiShareText = "Share to Snaps Feed",
+    facebookShareText = "Share to Facebook",
+    twitterShareText = "Share to Twitter";
 function showSetupInstructions() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
     snapshotImagesDiv.className = "snapshotInstructions";
@@ -206,59 +210,42 @@ function showUploadingMessage(selectedID, destination) {
         selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    var uploadingMessage = document.createElement("div");
-    uploadingMessage.id = selectedID + "uploadingMessage";
-    uploadingMessage.className = "uploadingMessage";
-    uploadingMessage.setAttribute("data-destination", destination);
+    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
 
-    var socialIcon = document.createElement("img");
-    switch (destination) {
-        case 'blast':
-            socialIcon.src = "img/blast_icon.svg";
-            break;
-        case 'hifi':
-            socialIcon.src = "img/hifi_icon.svg";
-            break;
-        case 'facebook':
-            socialIcon.src = "img/fb_icon.svg";
-            break;
-        case 'twitter':
-            socialIcon.src = "img/twitter_icon.svg";
-            break;
-    }
-    uploadingMessage.appendChild(socialIcon);
-
-    uploadingMessage.innerHTML += '<span>Preparing Snapshot for Sharing...</span>';
-
-    document.getElementById(selectedID).appendChild(uploadingMessage);
+    shareBarHelp.innerHTML = "...Preparing to Share";
+    shareBarHelp.setAttribute("data-destination", destination);
 }
-function hideUploadingMessage(selectedID, storyID) {
+function hideUploadingMessageAndShare(selectedID, storyID) {
     if (selectedID.id) {
         selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    var uploadingMessage = document.getElementById(selectedID + "uploadingMessage");
-    if (uploadingMessage) {
-        uploadingMessage.remove();
-        var destination = uploadingMessage.getAttribute("data-destination");
-
-        switch (destination) {
+    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
+        shareBarHelpDestination = shareBarHelp.getAttribute("data-destination");
+    if (shareBarHelpDestination) {
+        switch (shareBarHelpDestination) {
             case 'blast':
                 blastToConnections(selectedID, selectedID === "p1");
+                shareBarHelp.innerHTML = blastShareText;
                 break;
             case 'hifi':
                 shareWithEveryone(selectedID, selectedID === "p1");
+                shareBarHelp.innerHTML = hifiShareText;
                 break;
             case 'facebook':
                 var facebookButton = document.getElementById(selectedID + "facebookButton");
                 window.open(facebookButton.getAttribute("href"), "_blank");
+                shareBarHelp.innerHTML = facebookShareText;
                 break;
             case 'twitter':
                 var twitterButton = document.getElementById(selectedID + "twitterButton");
                 window.open(twitterButton.getAttribute("href"), "_blank");
+                shareBarHelp.innerHTML = twitterShareText;
                 break;
         }
 
+        shareBarHelp.setAttribute("data-destination", "");
+
         EventBridge.emitWebEvent(JSON.stringify({
             type: "snapshot",
             action: "removeFromStoryIDsToMaybeDelete",
@@ -284,7 +271,7 @@ function updateShareInfo(containerID, storyID) {
     twitterButton.setAttribute("target", "_blank");
     twitterButton.setAttribute("href", 'https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelity&hashtags=VR,HiFi');
 
-    hideUploadingMessage(containerID, storyID);
+    hideUploadingMessageAndShare(containerID, storyID);
 }
 function blastToConnections(selectedID, isGif) {
     if (selectedID.id) {
@@ -341,22 +328,22 @@ function shareButtonHovered(destination, selectedID) {
     switch (destination) {
         case 'blast':
             shareBarHelp.style.backgroundColor = "#EA4C5F";
-            shareBarHelp.innerHTML = "Blast to my connections";
+            shareBarHelp.innerHTML = blastShareText;
             document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F";
             break;
         case 'hifi':
             shareBarHelp.style.backgroundColor = "#1FC6A6";
-            shareBarHelp.innerHTML = "Share in Snapshots Feed";
+            shareBarHelp.innerHTML = hifiShareText;
             document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6";
             break;
         case 'facebook':
             shareBarHelp.style.backgroundColor = "#3C58A0";
-            shareBarHelp.innerHTML = "Share on Facebook";
+            shareBarHelp.innerHTML = facebookShareText;
             document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
             break;
         case 'twitter':
             shareBarHelp.style.backgroundColor = "#00B4EE";
-            shareBarHelp.innerHTML = "Share on Twitter";
+            shareBarHelp.innerHTML = twitterShareText;
             document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
             break;
     }

From 68fa8e06ef9eca7e47ebc1642003c34fb9b9f90b Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 16:38:16 -0700
Subject: [PATCH 08/19] Super amped about this. Only need to add disabled
 state?

---
 scripts/system/html/css/SnapshotReview.css | 26 +++++-----
 scripts/system/html/js/SnapshotReview.js   | 55 +++++++++++++++++++---
 2 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index c0d5991e0b..b03b748082 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -170,12 +170,6 @@ input[type=button].naked:active {
     height: 40px;
     display: inline-block;
 }
-.blastToConnections {
-    background-image: url(../img/fb_logo.png);
-}
-.shareWithEveryone {
-    background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center;
-}
 .shareControlsHelp {
     height: 25px;
     line-height: 25px;
@@ -193,22 +187,32 @@ input[type=button].naked:active {
 */
 
 /*
-// START styling of uploading message
+// START styling of confirmation message
 */
-.uploadingMessage {
+.confirmationMessageContainer {
     width: 100%;
     height: 100%;
     position: absolute;
+    background-color: rgba(0, 0, 0, 0.45);
     text-align: center;
-    background-color: rgba(0, 0, 0, 0.8);
     left: 0;
     top: 0;
+    pointer-events: none;
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
 }
-.uploadingMessage > img {
+.confirmationMessage {
+    width: 130px;
+    height: 130px;
+    margin: 50px auto 0 auto;
+}
+.confirmationMessage > img {
     width: 72px;
     height: 72px;
     display: block;
-    margin: 60px auto 10px auto;
+    margin: 0 auto;
+    padding: 10px 0 0 0;
 }
 /*
 // END styling of uploading message
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index beae7d0884..c2577bb8c0 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -140,9 +140,9 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
         '</div>' +
         '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
     if (canBlast) {
-        shareBarInnerHTML += '<div class="shareButton blastToConnections' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')"><img src="img/blast_icon.svg"></div>';
+        shareBarInnerHTML += '<div class="shareButton blastToConnections" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
     }
-    shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')"><img src="img/hifi_icon.svg"></div>' +
+    shareBarInnerHTML += '<div class="shareButton shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg"></div>' +
             '<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
             '<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
         '</div>';
@@ -205,6 +205,45 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
         updateShareInfo(id, image_data.story_id);
     }
 }
+function showConfirmationMessage(selectedID, destination) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+
+    var opacity = 2.0,
+        confirmationMessageContainer = document.createElement("div"),
+        confirmationMessage = document.createElement("div");
+    confirmationMessageContainer.className = "confirmationMessageContainer";
+
+    confirmationMessage.className = "confirmationMessage";
+
+    var socialIcon = document.createElement("img");
+    switch (destination) {
+        case 'blast':
+            socialIcon.src = "img/blast_icon.svg";
+            confirmationMessage.appendChild(socialIcon);
+            confirmationMessage.innerHTML += '<span>Blast Sent!</span>';
+            confirmationMessage.style.backgroundColor = "#EA4C5F";
+            break;
+        case 'hifi':
+            socialIcon.src = "img/hifi_icon.svg";
+            confirmationMessage.appendChild(socialIcon);
+            confirmationMessage.innerHTML += '<span>Snap Shared!</span>';
+            confirmationMessage.style.backgroundColor = "#1FC6A6";
+            break;
+    }
+
+    confirmationMessageContainer.appendChild(confirmationMessage);
+    document.getElementById(selectedID).appendChild(confirmationMessageContainer);
+
+    setInterval(function () {
+        if (opacity <= 0.05) {
+            confirmationMessageContainer.remove();
+        }
+        opacity -= 0.05;
+        confirmationMessageContainer.style.opacity = opacity;
+    }, 50);
+}
 function showUploadingMessage(selectedID, destination) {
     if (selectedID.id) {
         selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
@@ -278,7 +317,7 @@ function blastToConnections(selectedID, isGif) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    document.getElementById(selectedID + "blastToConnectionsButton").disabled = true;
+    document.getElementById(selectedID + "blastToConnectionsButton").onclick = function () { };
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -289,6 +328,7 @@ function blastToConnections(selectedID, isGif) {
             story_id: storyID,
             isGif: isGif
         }));
+        showConfirmationMessage(selectedID, 'blast');
     } else {
         showUploadingMessage(selectedID, 'blast');
     }
@@ -298,7 +338,7 @@ function shareWithEveryone(selectedID, isGif) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    document.getElementById(selectedID + "shareWithEveryoneButton").disabled = true;
+    document.getElementById(selectedID + "shareWithEveryoneButton").onclick = function () { };
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -309,6 +349,7 @@ function shareWithEveryone(selectedID, isGif) {
             story_id: storyID,
             isGif: isGif
         }));
+        showConfirmationMessage(selectedID, 'hifi');
     } else {
         showUploadingMessage(selectedID, 'hifi');
     }
@@ -384,7 +425,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    testInBrowser(1);
+    //testInBrowser(2);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -492,7 +533,7 @@ function testInBrowser(test) {
     } else if (test === 2) {
         addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
         addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
-        showUploadingMessage("p0", 'facebook');
-        showUploadingMessage("p1", 'twitter');
+        showConfirmationMessage("p0", 'blast');
+        showConfirmationMessage("p1", 'hifi');
     }
 }

From 964e79ce14c728263e5840680e2c7e5f422f59b8 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 16:58:33 -0700
Subject: [PATCH 09/19] It's working!

---
 scripts/system/html/js/SnapshotReview.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index c2577bb8c0..11502c3d81 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -142,7 +142,7 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
     if (canBlast) {
         shareBarInnerHTML += '<div class="shareButton blastToConnections" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
     }
-    shareBarInnerHTML += '<div class="shareButton shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg"></div>' +
+    shareBarInnerHTML += '<div class="shareButton shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
             '<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
             '<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
         '</div>';
@@ -163,6 +163,11 @@ function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, c
     document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled, canBlast));
     if (divID === "p0") {
         selectImageToShare(divID, true);
+        if (canBlast) {
+            shareButtonHovered('blast', divID);
+        } else {
+            shareButtonHovered('hifi', divID);
+        }
     }
 }
 function shareForUrl(selectedID) {
@@ -179,7 +184,7 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
     var id = "p" + (idCounter++),
         imageContainer = document.createElement("DIV"),
         img = document.createElement("IMG"),
-        isGif = img.src.split('.').pop().toLowerCase() === "gif";
+        isGif;
     imageContainer.id = id;
     imageContainer.style.width = "95%";
     imageContainer.style.height = "240px";
@@ -190,6 +195,7 @@ function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, b
     imageContainer.style.position = "relative";
     img.id = id + "img";
     img.src = image_data.localPath;
+    isGif = img.src.split('.').pop().toLowerCase() === "gif";
     imageContainer.appendChild(img);
     document.getElementById("snapshot-images").appendChild(imageContainer);
     paths.push(image_data.localPath);
@@ -425,7 +431,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(2);
+    testInBrowser(1);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {

From ad8d3e549045846d10e0cf17048ca0eaf2fb82f7 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zmp@umich.edu>
Date: Tue, 2 May 2017 19:57:09 -0400
Subject: [PATCH 10/19] continue idling while minimized

---
 interface/src/Application.cpp | 17 +++++++++++++++++
 interface/src/Application.h   |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp
index 1e3df955ba..64b18ec522 100644
--- a/interface/src/Application.cpp
+++ b/interface/src/Application.cpp
@@ -2526,6 +2526,11 @@ bool Application::event(QEvent* event) {
 
         isPaintingThrottled = false;
 
+        return true;
+    } else if ((int)event->type() == (int)Idle) {
+        float nsecsElapsed = (float)_lastTimeUpdated.nsecsElapsed();
+        idle(nsecsElapsed);
+
         return true;
     }
 
@@ -6491,10 +6496,22 @@ void Application::activeChanged(Qt::ApplicationState state) {
 }
 
 void Application::windowMinimizedChanged(bool minimized) {
+    // initialize the _minimizedWindowTimer
+    static std::once_flag once;
+    std::call_once(once, [&] {
+        connect(&_minimizedWindowTimer, &QTimer::timeout, this, [] {
+            QCoreApplication::postEvent(QCoreApplication::instance(), new QEvent(static_cast<QEvent::Type>(Idle)), Qt::HighEventPriority);
+        });
+    });
+
+    // avoid rendering to the display plugin but continue posting Idle events,
+    // so that physics continues to simulate and the deadlock watchdog knows we're alive
     if (!minimized && !getActiveDisplayPlugin()->isActive()) {
+        _minimizedWindowTimer.stop();
         getActiveDisplayPlugin()->activate();
     } else if (minimized && getActiveDisplayPlugin()->isActive()) {
         getActiveDisplayPlugin()->deactivate();
+        _minimizedWindowTimer.start(THROTTLED_SIM_FRAME_PERIOD_MS);
     }
 }
 
diff --git a/interface/src/Application.h b/interface/src/Application.h
index 041f1f8930..86b2335e62 100644
--- a/interface/src/Application.h
+++ b/interface/src/Application.h
@@ -138,6 +138,7 @@ public:
     enum Event {
         Present = DisplayPlugin::Present,
         Paint = Present + 1,
+        Idle = Paint + 1,
         Lambda = Paint + 1
     };
 
@@ -536,6 +537,7 @@ private:
     RateCounter<> _avatarSimCounter;
     RateCounter<> _simCounter;
 
+    QTimer _minimizedWindowTimer;
     QElapsedTimer _timerStart;
     QElapsedTimer _lastTimeUpdated;
 

From aa46534b6075f265c733d33c981586dd6454bde9 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 17:10:57 -0700
Subject: [PATCH 11/19] Whoops.

---
 scripts/system/html/js/SnapshotReview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 11502c3d81..e3632b5105 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -431,7 +431,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    testInBrowser(1);
+    //testInBrowser(1);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {

From 653dda70003353711c2c745e75bfafcbc7f7ae09 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 17:21:50 -0700
Subject: [PATCH 12/19] Fix pausing after snapshot in HMD

---
 scripts/system/snapshot.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js
index 966f43cc55..b93595f0b4 100644
--- a/scripts/system/snapshot.js
+++ b/scripts/system/snapshot.js
@@ -393,7 +393,9 @@ function takeSnapshot() {
     resetOverlays = Menu.isOptionChecked("Overlays"); // For completeness. Certainly true if the button is visible to be clicked.
     reticleVisible = Reticle.visible;
     Reticle.visible = false;
-    Reticle.allowMouseCapture = false;
+    if (!HMD.active) {
+        Reticle.allowMouseCapture = false;
+    }
     
     var includeAnimated = Settings.getValue("alsoTakeAnimatedSnapshot", true);
     if (includeAnimated) {

From ff3a76f7162b115df97eac1a6b216e1f4010e401 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 18:23:15 -0700
Subject: [PATCH 13/19] No magic numbers!

---
 scripts/system/html/js/SnapshotReview.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index e3632b5105..99364169f1 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -217,6 +217,8 @@ function showConfirmationMessage(selectedID, destination) {
     }
 
     var opacity = 2.0,
+        fadeRate = 0.05,
+        timeBetweenFadesMS = 50,
         confirmationMessageContainer = document.createElement("div"),
         confirmationMessage = document.createElement("div");
     confirmationMessageContainer.className = "confirmationMessageContainer";
@@ -243,12 +245,12 @@ function showConfirmationMessage(selectedID, destination) {
     document.getElementById(selectedID).appendChild(confirmationMessageContainer);
 
     setInterval(function () {
-        if (opacity <= 0.05) {
+        if (opacity <= fadeRate) {
             confirmationMessageContainer.remove();
         }
-        opacity -= 0.05;
+        opacity -= fadeRate;
         confirmationMessageContainer.style.opacity = opacity;
-    }, 50);
+    }, timeBetweenFadesMS);
 }
 function showUploadingMessage(selectedID, destination) {
     if (selectedID.id) {

From 15db80c8ba7420aff0eb2f9c51c6fdc86455bf33 Mon Sep 17 00:00:00 2001
From: CFresquet <CFresquet@yahoo.com>
Date: Wed, 3 May 2017 07:32:23 -0700
Subject: [PATCH 14/19] request module updates

---
 scripts/modules/request.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/scripts/modules/request.js b/scripts/modules/request.js
index a5c419892e..c7bf98d815 100644
--- a/scripts/modules/request.js
+++ b/scripts/modules/request.js
@@ -17,11 +17,6 @@
 // ===========================================================================================
 module.exports = {
 
-    // ------------------------------------------------------------------
-    test: function () {
-        debug("Test completed.");
-    },
-
     // ------------------------------------------------------------------
     request: function (options, callback) { // cb(error, responseOfCorrectContentType) of url. A subset of npm request.
             var httpRequest = new XMLHttpRequest(), key;

From b54ea63af7dfbe082afd3dd550dd2d95ed978658 Mon Sep 17 00:00:00 2001
From: CFresquet <CFresquet@yahoo.com>
Date: Wed, 3 May 2017 07:35:30 -0700
Subject: [PATCH 15/19] incremental request module fixes

---
 scripts/system/makeUserConnection.js |  3 +-
 scripts/system/pal.js                |  3 +-
 scripts/system/tablet-goto.js        | 54 ++++------------------------
 3 files changed, 10 insertions(+), 50 deletions(-)

diff --git a/scripts/system/makeUserConnection.js b/scripts/system/makeUserConnection.js
index 4426ce5c24..beee766d5c 100644
--- a/scripts/system/makeUserConnection.js
+++ b/scripts/system/makeUserConnection.js
@@ -14,7 +14,8 @@
 
 (function() { // BEGIN LOCAL_SCOPE
 
-    var request = Script.require('../modules/request.js').request;
+    var REQUEST_URL = Script.resolvePath('request.js');
+    var request = Script.require(REQUEST_URL).request;
 
     var LABEL = "makeUserConnection";
     var MAX_AVATAR_DISTANCE = 0.2; // m
diff --git a/scripts/system/pal.js b/scripts/system/pal.js
index ffde058cfc..d81946562b 100644
--- a/scripts/system/pal.js
+++ b/scripts/system/pal.js
@@ -14,7 +14,8 @@
 
 (function() { // BEGIN LOCAL_SCOPE
 
-    var request = Script.require('../modules/request.js').request;
+    var REQUEST_URL = Script.resolvePath('request.js');
+    var request = Script.require(REQUEST_URL).request;
 
 var populateNearbyUserList, color, textures, removeOverlays,
     controllerComputePickRay, onTabletButtonClicked, onTabletScreenChanged,
diff --git a/scripts/system/tablet-goto.js b/scripts/system/tablet-goto.js
index fec7a6de90..68706ffb68 100644
--- a/scripts/system/tablet-goto.js
+++ b/scripts/system/tablet-goto.js
@@ -14,6 +14,10 @@
 //
 
 (function () { // BEGIN LOCAL_SCOPE
+
+    var REQUEST_URL = Script.resolvePath('request.js');
+    var request = Script.require(REQUEST_URL).request;
+
     var gotoQmlSource = "TabletAddressDialog.qml";
     var buttonName = "GOTO";
     var onGotoScreen = false;
@@ -30,54 +34,7 @@
         text: buttonName,
         sortOrder: 8
     });
-    function request(options, callback) { // cb(error, responseOfCorrectContentType) of url. A subset of npm request.
-        var httpRequest = new XMLHttpRequest(), key;
-        // QT bug: apparently doesn't handle onload. Workaround using readyState.
-        httpRequest.onreadystatechange = function () {
-            var READY_STATE_DONE = 4;
-            var HTTP_OK = 200;
-            if (httpRequest.readyState >= READY_STATE_DONE) {
-                var error = (httpRequest.status !== HTTP_OK) && httpRequest.status.toString() + ':' + httpRequest.statusText,
-                    response = !error && httpRequest.responseText,
-                    contentType = !error && httpRequest.getResponseHeader('content-type');
-                if (!error && contentType.indexOf('application/json') === 0) { // ignoring charset, etc.
-                    try {
-                        response = JSON.parse(response);
-                    } catch (e) {
-                        error = e;
-                    }
-                }
-                callback(error, response);
-            }
-        };
-        if (typeof options === 'string') {
-            options = {uri: options};
-        }
-        if (options.url) {
-            options.uri = options.url;
-        }
-        if (!options.method) {
-            options.method = 'GET';
-        }
-        if (options.body && (options.method === 'GET')) { // add query parameters
-            var params = [], appender = (-1 === options.uri.search('?')) ? '?' : '&';
-            for (key in options.body) {
-                params.push(key + '=' + options.body[key]);
-            }
-            options.uri += appender + params.join('&');
-            delete options.body;
-        }
-        if (options.json) {
-            options.headers = options.headers || {};
-            options.headers["Content-type"] = "application/json";
-            options.body = JSON.stringify(options.body);
-        }
-        for (key in options.headers || {}) {
-            httpRequest.setRequestHeader(key, options.headers[key]);
-        }
-        httpRequest.open(options.method, options.uri, true);
-        httpRequest.send(options.body);
-    }
+    
     function fromQml(message) {
         var response = {id: message.id, jsonrpc: "2.0"};
         switch (message.method) {
@@ -99,6 +56,7 @@
             // No need for a different activeIcon, because we issue messagesWaiting(false) when the button goes active anyway.
         });
     }
+
     var hasEventBridge = false;
     function wireEventBridge(on) {
         if (on) {

From 28b166c51fd74201502a1af0622795817bd95331 Mon Sep 17 00:00:00 2001
From: CFresquet <CFresquet@yahoo.com>
Date: Wed, 3 May 2017 07:51:49 -0700
Subject: [PATCH 16/19] further request fiddling

---
 scripts/system/makeUserConnection.js | 3 +--
 scripts/system/pal.js                | 3 +--
 scripts/system/tablet-goto.js        | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/scripts/system/makeUserConnection.js b/scripts/system/makeUserConnection.js
index beee766d5c..34100806b5 100644
--- a/scripts/system/makeUserConnection.js
+++ b/scripts/system/makeUserConnection.js
@@ -14,8 +14,7 @@
 
 (function() { // BEGIN LOCAL_SCOPE
 
-    var REQUEST_URL = Script.resolvePath('request.js');
-    var request = Script.require(REQUEST_URL).request;
+    var request = Script.require('request').request;
 
     var LABEL = "makeUserConnection";
     var MAX_AVATAR_DISTANCE = 0.2; // m
diff --git a/scripts/system/pal.js b/scripts/system/pal.js
index d81946562b..9229ec772a 100644
--- a/scripts/system/pal.js
+++ b/scripts/system/pal.js
@@ -14,8 +14,7 @@
 
 (function() { // BEGIN LOCAL_SCOPE
 
-    var REQUEST_URL = Script.resolvePath('request.js');
-    var request = Script.require(REQUEST_URL).request;
+    var request = Script.require('request').request;
 
 var populateNearbyUserList, color, textures, removeOverlays,
     controllerComputePickRay, onTabletButtonClicked, onTabletScreenChanged,
diff --git a/scripts/system/tablet-goto.js b/scripts/system/tablet-goto.js
index 68706ffb68..4e023f5460 100644
--- a/scripts/system/tablet-goto.js
+++ b/scripts/system/tablet-goto.js
@@ -15,8 +15,7 @@
 
 (function () { // BEGIN LOCAL_SCOPE
 
-    var REQUEST_URL = Script.resolvePath('request.js');
-    var request = Script.require(REQUEST_URL).request;
+    var request = Script.require('request').request;
 
     var gotoQmlSource = "TabletAddressDialog.qml";
     var buttonName = "GOTO";

From afa72210e0bb594700323393d5d0d8ddf9d3f8d8 Mon Sep 17 00:00:00 2001
From: CFresquet <CFresquet@yahoo.com>
Date: Wed, 3 May 2017 10:28:44 -0700
Subject: [PATCH 17/19] requested tweaks to makeUserConnection.js

---
 scripts/system/makeUserConnection.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/scripts/system/makeUserConnection.js b/scripts/system/makeUserConnection.js
index 34100806b5..60e289d2cf 100644
--- a/scripts/system/makeUserConnection.js
+++ b/scripts/system/makeUserConnection.js
@@ -12,7 +12,7 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-(function() { // BEGIN LOCAL_SCOPE
+(function () { // BEGIN LOCAL_SCOPE
 
     var request = Script.require('request').request;
 
@@ -126,10 +126,6 @@
             [].map.call(arguments, JSON.stringify)));
     }
 
-    function debugPrint() {
-        print( [].slice.call(arguments).join(' ') );
-    }
-
     function cleanId(guidWithCurlyBraces) {
         return guidWithCurlyBraces.slice(1, -1);
     }

From 09488c49873290acf818060d76f3fafaa5532262 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 3 May 2017 11:02:44 -0700
Subject: [PATCH 18/19] Disabled state for share butotns

---
 scripts/system/html/css/SnapshotReview.css |   4 ++
 scripts/system/html/img/loader.gif         | Bin 0 -> 21466 bytes
 scripts/system/html/js/SnapshotReview.js   |  67 +++++++++++++++++----
 3 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 scripts/system/html/img/loader.gif

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index b03b748082..e327ab75e9 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -170,6 +170,10 @@ input[type=button].naked:active {
     height: 40px;
     display: inline-block;
 }
+.shareButton.disabled {
+    background-color: #000000;
+    opacity: 0.5;
+}
 .shareControlsHelp {
     height: 25px;
     line-height: 25px;
diff --git a/scripts/system/html/img/loader.gif b/scripts/system/html/img/loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c464703c848bb5b00f67d5105653f6681385c2b8
GIT binary patch
literal 21466
zcmeI4_fyk%7{|kuB|`*}p)5i6h#*ry_LRN1Ajnii?mW-JRjDUEMQ9lj3JA7L!O#$i
zfDj|dQcyqy!%&8tavTQ;;z}>U&~H`Rp4O5(p4VTHUtW2Cp7-bZd@ZdlbaaCxQIe=7
z6cr{WCT3=478Vv(R#rAPHg<OQO`A4xaBy&Pa&mETadUI?@bGNjyqTAmmyeH+pPyeq
zKw!(3ErNoATeof%5)u*?7T&gPn}~?W_U+q6MMcHL#KgtLB_t$v?AWn$=T1pUNhv8Q
zX=!O085vnw*<HJK$;rvd%ggWHy<0&+K~YgrNl8grSy@FzMO9T*O-)T*U0p*%LsL@|
zjYjX;vqwuyOIure@7}#SIy$<#x_Wwg`uh3?1_p+PhWqyIGcqzVHa0dfG1<R=zp1II
znVFfnxw(afg{7sXm6esXwY80njjgS%ot>S%y}g5j!+`?_9335<oSdAUon2g9TwPt=
z+}zyV-90=!JUu<Vyu7@<y?uOqe0_cW{QUg={R0950s{ksf`WpBgAX1&7!nc^8X9`&
z(4nxfu<-Ek!-o$?L_|bJMn*+NMMp=+#KgqL#vVCx<ml0(adC0Sjvb4Sk55QQIC0`c
zVq#))a&k&a%7qIT($dn>)6;+YYJUDwGBPr<va&E3OioTtUS3{7K|x_*VG)fhbbh7r
z8=d0f;u0FArKM$MW##4N6%`egm6cUhRah*xy1E*N!{PCG0)bFhSJ%+c(A3mKB9U5J
zTH4#&J32Z#J3H^*y?gK8y{@jV?(XjU_wPS=@Svxsr?<Daudnan!-xI-{f}r24h}wk
z{FqE84-E|s4-b!wjEs(sK6&zFY;0_Da&l^F>cxu}Gcz-@v$Jz^bMy1_3kwS`U%p&i
zTwGdOdiCnn^78WQ*RS8adGnUWJ38;zfI^{2QMet<U0qB~9L+UV)mfNOD3sJPD<>-|
z7o|*<gQ^LN<2Xu}Q{3uW0r514prUW<wacWl{4zGVR@lPkA4Sj+<W`Mfd?MwM5W1FU
z+$faq7YwV{wMXrVBpsq?7ViM@;*`Je^rEJie6(C_bq66XtSjF{piJ4Od!juX9jW+M
zBrb%QF6op&Zm%ituL>lkNZ8^lZY6#COU{C>-&)s`Cr>6NC7n5Q=G?h+=g*%{O-=oJ
zW4}~YDj5heGc&WYva++YFI~EnpPye;R8(ACTv1U`RaJ$<;c9DZSM<Ai^JZgXV^dQT
zkx0BngGA#ton{0rf8`FHRvK+IKGk@|;ojcf6?+E<2gzjes;*C;J{=nyo0yoGnwon4
z{Q30sG*a5n8vBv7pB0uup>TZnPbOk7D@V3^3S4QP8EK4R55l0WXEIE@<tP}LTD8f>
zD7LNv*)aZG`|q_WHA*520bThlr+L{#7eYHRERij@tsTSc^4N`j5cir3Y0sc|Cy3kP
zD+YcK?<w=^z+WZOmCXC|&jFO&a7rRsP1D@m+=7CFqN1Xbl9KZB^2*9eEEbEy;c9AX
z@Ob?7>(^^*YY7CxjT<-W>gww2>l+$A_LM}T8rs}URr1aqs(@{6pHUB)pvd?fps|{u
zt09Wa(ed%|XV0EZPfyRz&d$$MO+*IgN_PGm6IY=sc?xCt_u-f(r4mnhf8587-<@!A
zB2dV;PeoSGn{_Ce$NK7M8)kybIcK>`!X(d-oB5rGqg+?M!6|7&QNi#Yj27pxSt(k9
zm?~wNS&xYe?MPJ9r-kDOB{Kt!KZGP0`G1~i87(A{fRSM2#+x$1$hD?S$VhrdB1T#`
zwSMzcEA&2V8OaE}4^%oEr-5a(Y(z9VQ0YLWvk@;v7)?neFhIfp2?OMM-+LedBf&^8
z5{#rT4nU;?l@6@(&~^i0m1hO&MI>zLY?!4wMw=g@(pd$zbT;OmE2Ali1O`YLAYp)n
z0TKqtl~q>Qn_Hi^Adr!3?F2xj1C<U`I#B5#fJ$dWy_00LY=lZ@6{vKe(qV+RkVv4?
tfl3D|9jJ7m(t%26JwNZkXvbD0kdf=1k@~bR>;M1&00000008{g`~jd&y@&t+

literal 0
HcmV?d00001

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 99364169f1..e3417893dd 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -16,7 +16,9 @@ var paths = [];
 var idCounter = 0;
 var imageCount = 0;
 var blastShareText = "Blast to my Connections",
+    blastAlreadySharedText = "Already Blasted to Connections",
     hifiShareText = "Share to Snaps Feed",
+    hifiAlreadySharedText = "Already Shared to Snaps Feed",
     facebookShareText = "Share to Facebook",
     twitterShareText = "Share to Twitter";
 function showSetupInstructions() {
@@ -140,16 +142,16 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
         '</div>' +
         '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
     if (canBlast) {
-        shareBarInnerHTML += '<div class="shareButton blastToConnections" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
+        shareBarInnerHTML += '<div class="shareButton blastToConnections' + (blastButtonDisabled ? ' disabled' : '') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="' + (blastButtonDisabled ? '' : 'blastToConnections(' + parentID + ', ' + isGif + ')') + '"><img src="img/blast_icon.svg"></div>';
     }
-    shareBarInnerHTML += '<div class="shareButton shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
+    shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : '') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="' + (hifiButtonDisabled ? '' : 'shareWithEveryone(' + parentID + ', ' + isGif + ')') + '"><img src="img/hifi_icon.svg" style="width:35px;height:35px;margin:2px 0 0 2px;"></div>' +
             '<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
             '<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
         '</div>';
 
     shareBar.innerHTML = shareBarInnerHTML;
 
-    shareBar.innerHTML += '<div class="shareControlsHelp" id="' + shareBarHelpID + '"></div>';
+    shareBar.innerHTML += '<div class="shareControlsHelp" id="' + shareBarHelpID + '" style="visibility:hidden;' + ((canBlast && blastButtonDisabled || !canBlast && hifiButtonDisabled) ? "background-color:#000;opacity:0.5;" : "") + '"></div>';
 
     // Add onclick handler to parent DIV's img to toggle share buttons
     document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
@@ -273,11 +275,11 @@ function hideUploadingMessageAndShare(selectedID, storyID) {
         switch (shareBarHelpDestination) {
             case 'blast':
                 blastToConnections(selectedID, selectedID === "p1");
-                shareBarHelp.innerHTML = blastShareText;
+                shareBarHelp.innerHTML = blastAlreadySharedText;
                 break;
             case 'hifi':
                 shareWithEveryone(selectedID, selectedID === "p1");
-                shareBarHelp.innerHTML = hifiShareText;
+                shareBarHelp.innerHTML = hifiAlreadySharedText;
                 break;
             case 'facebook':
                 var facebookButton = document.getElementById(selectedID + "facebookButton");
@@ -325,7 +327,15 @@ function blastToConnections(selectedID, isGif) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    document.getElementById(selectedID + "blastToConnectionsButton").onclick = function () { };
+    var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton"),
+        shareBar = document.getElementById(selectedID + "shareBar"),
+        shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
+    blastToConnectionsButton.onclick = function () { };
+    blastToConnectionsButton.classList.add("disabled");
+    blastToConnectionsButton.style.backgroundColor = "#000000";
+    blastToConnectionsButton.style.opacity = "0.5";
+    shareBarHelp.style.backgroundColor = "#000000";
+    shareBarHelp.style.opacity = "0.5";
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -346,7 +356,15 @@ function shareWithEveryone(selectedID, isGif) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
 
-    document.getElementById(selectedID + "shareWithEveryoneButton").onclick = function () { };
+    var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton"),
+        shareBar = document.getElementById(selectedID + "shareBar"),
+        shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
+    shareWithEveryoneButton.onclick = function () { };
+    shareWithEveryoneButton.classList.add("disabled");
+    shareWithEveryoneButton.style.backgroundColor = "#000000";
+    shareWithEveryoneButton.style.opacity = "0.5";
+    shareBarHelp.style.backgroundColor = "#000000";
+    shareBarHelp.style.opacity = "0.5";
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -373,17 +391,40 @@ function shareButtonHovered(destination, selectedID) {
     for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
         shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
     }
+    shareBarHelp.style.opacity = "1.0";
 
     switch (destination) {
         case 'blast':
-            shareBarHelp.style.backgroundColor = "#EA4C5F";
-            shareBarHelp.innerHTML = blastShareText;
-            document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F";
+            var blastToConnectionsButton = document.getElementById(selectedID + "blastToConnectionsButton");
+            if (!blastToConnectionsButton.classList.contains("disabled")) {
+                shareBarHelp.style.backgroundColor = "#EA4C5F";
+                shareBarHelp.style.opacity = "1.0";
+                blastToConnectionsButton.style.backgroundColor = "#EA4C5F";
+                blastToConnectionsButton.style.opacity = "1.0";
+                shareBarHelp.innerHTML = blastShareText;
+            } else {
+                shareBarHelp.style.backgroundColor = "#000000";
+                shareBarHelp.style.opacity = "0.5";
+                blastToConnectionsButton.style.backgroundColor = "#000000";
+                blastToConnectionsButton.style.opacity = "0.5";
+                shareBarHelp.innerHTML = blastAlreadySharedText;
+            }
             break;
         case 'hifi':
-            shareBarHelp.style.backgroundColor = "#1FC6A6";
-            shareBarHelp.innerHTML = hifiShareText;
-            document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6";
+            var shareWithEveryoneButton = document.getElementById(selectedID + "shareWithEveryoneButton");
+            if (!shareWithEveryoneButton.classList.contains("disabled")) {
+                shareBarHelp.style.backgroundColor = "#1FC6A6";
+                shareBarHelp.style.opacity = "1.0";
+                shareWithEveryoneButton.style.backgroundColor = "#1FC6A6";
+                shareWithEveryoneButton.style.opacity = "1.0";
+                shareBarHelp.innerHTML = hifiShareText;
+            } else {
+                shareBarHelp.style.backgroundColor = "#000000";
+                shareBarHelp.style.opacity = "0.5";
+                shareWithEveryoneButton.style.backgroundColor = "#000000";
+                shareWithEveryoneButton.style.opacity = "0.5";
+                shareBarHelp.innerHTML = hifiAlreadySharedText;
+            }
             break;
         case 'facebook':
             shareBarHelp.style.backgroundColor = "#3C58A0";

From c82a07016d903d949b444f321b8f97c213aa9554 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 3 May 2017 11:30:44 -0700
Subject: [PATCH 19/19] New Preparing text; Better disabled behavior

---
 scripts/system/html/css/SnapshotReview.css |  1 +
 scripts/system/html/js/SnapshotReview.js   | 30 +++++++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index e327ab75e9..29c5f465d7 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -183,6 +183,7 @@ input[type=button].naked:active {
     right: 0;
     font-family: Raleway-Regular;
     font-weight: 500;
+    font-size: 16px;
     padding-left: 8px;
     color: white;
 }
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index e3417893dd..6365c2be18 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -261,7 +261,7 @@ function showUploadingMessage(selectedID, destination) {
 
     var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
 
-    shareBarHelp.innerHTML = "...Preparing to Share";
+    shareBarHelp.innerHTML = '<img style="display:inline;width:25px;height:25px;" src="./img/loader.gif"></img><span style="position:relative;margin-left:5px;bottom:7px;">Preparing to Share</span>';
     shareBarHelp.setAttribute("data-destination", destination);
 }
 function hideUploadingMessageAndShare(selectedID, storyID) {
@@ -331,11 +331,6 @@ function blastToConnections(selectedID, isGif) {
         shareBar = document.getElementById(selectedID + "shareBar"),
         shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
     blastToConnectionsButton.onclick = function () { };
-    blastToConnectionsButton.classList.add("disabled");
-    blastToConnectionsButton.style.backgroundColor = "#000000";
-    blastToConnectionsButton.style.opacity = "0.5";
-    shareBarHelp.style.backgroundColor = "#000000";
-    shareBarHelp.style.opacity = "0.5";
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -347,6 +342,11 @@ function blastToConnections(selectedID, isGif) {
             isGif: isGif
         }));
         showConfirmationMessage(selectedID, 'blast');
+        blastToConnectionsButton.classList.add("disabled");
+        blastToConnectionsButton.style.backgroundColor = "#000000";
+        blastToConnectionsButton.style.opacity = "0.5";
+        shareBarHelp.style.backgroundColor = "#000000";
+        shareBarHelp.style.opacity = "0.5";
     } else {
         showUploadingMessage(selectedID, 'blast');
     }
@@ -360,11 +360,6 @@ function shareWithEveryone(selectedID, isGif) {
         shareBar = document.getElementById(selectedID + "shareBar"),
         shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
     shareWithEveryoneButton.onclick = function () { };
-    shareWithEveryoneButton.classList.add("disabled");
-    shareWithEveryoneButton.style.backgroundColor = "#000000";
-    shareWithEveryoneButton.style.opacity = "0.5";
-    shareBarHelp.style.backgroundColor = "#000000";
-    shareBarHelp.style.opacity = "0.5";
 
     var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
@@ -376,6 +371,11 @@ function shareWithEveryone(selectedID, isGif) {
             isGif: isGif
         }));
         showConfirmationMessage(selectedID, 'hifi');
+        shareWithEveryoneButton.classList.add("disabled");
+        shareWithEveryoneButton.style.backgroundColor = "#000000";
+        shareWithEveryoneButton.style.opacity = "0.5";
+        shareBarHelp.style.backgroundColor = "#000000";
+        shareBarHelp.style.opacity = "0.5";
     } else {
         showUploadingMessage(selectedID, 'hifi');
     }
@@ -474,7 +474,7 @@ function handleCaptureSetting(setting) {
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(1);
+    //testInBrowser(3);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -584,5 +584,11 @@ function testInBrowser(test) {
         addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
         showConfirmationMessage("p0", 'blast');
         showConfirmationMessage("p1", 'hifi');
+    } else if (test === 3) {
+        imageCount = 2;
+        //addImage({ localPath: 'http://lorempixel.com/553/255' });
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg', story_id: 1338 }, false, true, true, false, false, true);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif', story_id: 1337 }, false, true, true, false, false, true);
+        showUploadingMessage("p0", 'hifi');
     }
 }