From fe8fe816f4aa0b83e76d4f967e58fcb16798e83b Mon Sep 17 00:00:00 2001
From: howard-stearns <howard.stearns@gmail.com>
Date: Mon, 30 Jan 2017 16:14:40 -0800
Subject: [PATCH 01/28] accept forced physics results from entity server (e.g.,
 when filtered)

---
 libraries/entities/src/EntityItem.cpp | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/libraries/entities/src/EntityItem.cpp b/libraries/entities/src/EntityItem.cpp
index 64bc9fbd5a..cd5558823f 100644
--- a/libraries/entities/src/EntityItem.cpp
+++ b/libraries/entities/src/EntityItem.cpp
@@ -651,6 +651,7 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
     // NOTE: the server is authoritative for changes to simOwnerID so we always unpack ownership data
     // even when we would otherwise ignore the rest of the packet.
 
+    bool filterRejection = false;
     if (propertyFlags.getHasProperty(PROP_SIMULATION_OWNER)) {
 
         QByteArray simOwnerData;
@@ -663,6 +664,7 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
         if (wantTerseEditLogging() && _simulationOwner != newSimOwner) {
             qCDebug(entities) << "sim ownership for" << getDebugName() << "is now" << newSimOwner;
         }
+        filterRejection = newSimOwner.getID().isNull();
         if (weOwnSimulation) {
             if (newSimOwner.getID().isNull() && !_simulationOwner.pendingRelease(lastEditedFromBufferAdjusted)) {
                 // entity-server is trying to clear our ownership (probably at our own request)
@@ -708,10 +710,10 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
         // Note: duplicate packets are expected and not wrong. They may be sent for any number of 
         // reasons and the contract is that the client handles them in an idempotent manner.
         auto lastEdited = lastEditedFromBufferAdjusted;
-        auto customUpdatePositionFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation](glm::vec3 value){
+        auto customUpdatePositionFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
             bool simulationChanged = lastEdited > _lastUpdatedPositionTimestamp;
             bool valueChanged = value != _lastUpdatedPositionValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && valueChanged;
+            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
             if (shouldUpdate) {
                 updatePositionFromNetwork(value);
                 _lastUpdatedPositionTimestamp = lastEdited;
@@ -719,10 +721,10 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
             }
         };
 
-        auto customUpdateRotationFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation](glm::quat value){
+        auto customUpdateRotationFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::quat value){
             bool simulationChanged = lastEdited > _lastUpdatedRotationTimestamp;
             bool valueChanged = value != _lastUpdatedRotationValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && valueChanged;
+            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
             if (shouldUpdate) {
                 updateRotationFromNetwork(value);
                 _lastUpdatedRotationTimestamp = lastEdited;
@@ -730,10 +732,10 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
             }
         };
 
-        auto customUpdateVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation](glm::vec3 value){
+        auto customUpdateVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
             bool simulationChanged = lastEdited > _lastUpdatedVelocityTimestamp;
             bool valueChanged = value != _lastUpdatedVelocityValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && valueChanged;
+            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
             if (shouldUpdate) {
                 updateVelocityFromNetwork(value);
                 _lastUpdatedVelocityTimestamp = lastEdited;
@@ -741,10 +743,10 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
             }
         };
 
-        auto customUpdateAngularVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation](glm::vec3 value){
+        auto customUpdateAngularVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
             bool simulationChanged = lastEdited > _lastUpdatedAngularVelocityTimestamp;
             bool valueChanged = value != _lastUpdatedAngularVelocityValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && valueChanged;
+            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
             if (shouldUpdate) {
                 updateAngularVelocityFromNetwork(value);
                 _lastUpdatedAngularVelocityTimestamp = lastEdited;
@@ -752,10 +754,10 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
             }
         };
 
-        auto customSetAcceleration = [this, lastEdited, overwriteLocalData, weOwnSimulation](glm::vec3 value){
+        auto customSetAcceleration = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
             bool simulationChanged = lastEdited > _lastUpdatedAccelerationTimestamp;
             bool valueChanged = value != _lastUpdatedAccelerationValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && valueChanged;
+            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
             if (shouldUpdate) {
                 setAcceleration(value);
                 _lastUpdatedAccelerationTimestamp = lastEdited;

From 0b139c906ca27ff81434152c1d5b8225ebdabde5 Mon Sep 17 00:00:00 2001
From: samcake <samuel.gateau@gmail.com>
Date: Tue, 31 Jan 2017 10:56:30 -0800
Subject: [PATCH 02/28] Assigniing default textures that make sense

---
 libraries/render-utils/src/MeshPartPayload.cpp | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/libraries/render-utils/src/MeshPartPayload.cpp b/libraries/render-utils/src/MeshPartPayload.cpp
index 5e47ed8b0f..1bce710d3a 100644
--- a/libraries/render-utils/src/MeshPartPayload.cpp
+++ b/libraries/render-utils/src/MeshPartPayload.cpp
@@ -150,11 +150,11 @@ void MeshPartPayload::bindMaterial(gpu::Batch& batch, const ShapePipeline::Locat
     if (!enableTextures) {
         batch.setResourceTexture(ShapePipeline::Slot::ALBEDO, textureCache->getWhiteTexture());
         batch.setResourceTexture(ShapePipeline::Slot::MAP::ROUGHNESS, textureCache->getWhiteTexture());
-        batch.setResourceTexture(ShapePipeline::Slot::MAP::NORMAL, nullptr);
-        batch.setResourceTexture(ShapePipeline::Slot::MAP::METALLIC, nullptr);
-        batch.setResourceTexture(ShapePipeline::Slot::MAP::OCCLUSION, nullptr);
-        batch.setResourceTexture(ShapePipeline::Slot::MAP::SCATTERING, nullptr);
-        batch.setResourceTexture(ShapePipeline::Slot::MAP::EMISSIVE_LIGHTMAP, nullptr);
+        batch.setResourceTexture(ShapePipeline::Slot::MAP::NORMAL, textureCache->getBlueTexture());
+        batch.setResourceTexture(ShapePipeline::Slot::MAP::METALLIC, textureCache->getBlackTexture());
+        batch.setResourceTexture(ShapePipeline::Slot::MAP::OCCLUSION, textureCache->getWhiteTexture());
+        batch.setResourceTexture(ShapePipeline::Slot::MAP::SCATTERING, textureCache->getWhiteTexture());
+        batch.setResourceTexture(ShapePipeline::Slot::MAP::EMISSIVE_LIGHTMAP, textureCache->getBlackTexture());
         return;
     }
 

From 8d8b338c66b0634befe5a03c3d8c5e80474fcafb Mon Sep 17 00:00:00 2001
From: howard-stearns <howard.stearns@gmail.com>
Date: Tue, 31 Jan 2017 12:07:48 -0800
Subject: [PATCH 03/28] dry up custom setters, per code review

---
 libraries/entities/src/EntityItem.cpp | 40 ++++++++++-----------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/libraries/entities/src/EntityItem.cpp b/libraries/entities/src/EntityItem.cpp
index f5d883eb92..a73420c587 100644
--- a/libraries/entities/src/EntityItem.cpp
+++ b/libraries/entities/src/EntityItem.cpp
@@ -710,55 +710,45 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
         // Note: duplicate packets are expected and not wrong. They may be sent for any number of 
         // reasons and the contract is that the client handles them in an idempotent manner.
         auto lastEdited = lastEditedFromBufferAdjusted;
-        auto customUpdatePositionFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
-            bool simulationChanged = lastEdited > _lastUpdatedPositionTimestamp;
-            bool valueChanged = value != _lastUpdatedPositionValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
-            if (shouldUpdate) {
+        bool otherOverwrites = overwriteLocalData && !weOwnSimulation;
+        auto shouldUpdate = [lastEdited, otherOverwrites, filterRejection](quint64 updatedTimestamp, bool valueChanged) {
+            bool simulationChanged = lastEdited > updatedTimestamp;
+            return otherOverwrites && simulationChanged && (valueChanged || filterRejection);
+        };
+        auto customUpdatePositionFromNetwork = [this, shouldUpdate, lastEdited](glm::vec3 value){
+            if (shouldUpdate(_lastUpdatedPositionTimestamp, value != _lastUpdatedPositionValue)) {
                 updatePositionFromNetwork(value);
                 _lastUpdatedPositionTimestamp = lastEdited;
                 _lastUpdatedPositionValue = value;
             }
         };
 
-        auto customUpdateRotationFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::quat value){
-            bool simulationChanged = lastEdited > _lastUpdatedRotationTimestamp;
-            bool valueChanged = value != _lastUpdatedRotationValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
-            if (shouldUpdate) {
+        auto customUpdateRotationFromNetwork = [this, shouldUpdate, lastEdited](glm::quat value){
+            if (shouldUpdate(_lastUpdatedRotationTimestamp, value != _lastUpdatedRotationValue)) {
                 updateRotationFromNetwork(value);
                 _lastUpdatedRotationTimestamp = lastEdited;
                 _lastUpdatedRotationValue = value;
             }
         };
 
-        auto customUpdateVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
-            bool simulationChanged = lastEdited > _lastUpdatedVelocityTimestamp;
-            bool valueChanged = value != _lastUpdatedVelocityValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
-            if (shouldUpdate) {
+        auto customUpdateVelocityFromNetwork = [this, shouldUpdate, lastEdited](glm::vec3 value){
+             if (shouldUpdate(_lastUpdatedVelocityTimestamp, value != _lastUpdatedVelocityValue)) {
                 updateVelocityFromNetwork(value);
                 _lastUpdatedVelocityTimestamp = lastEdited;
                 _lastUpdatedVelocityValue = value;
             }
         };
 
-        auto customUpdateAngularVelocityFromNetwork = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
-            bool simulationChanged = lastEdited > _lastUpdatedAngularVelocityTimestamp;
-            bool valueChanged = value != _lastUpdatedAngularVelocityValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
-            if (shouldUpdate) {
+        auto customUpdateAngularVelocityFromNetwork = [this, shouldUpdate, lastEdited](glm::vec3 value){
+            if (shouldUpdate(_lastUpdatedAngularVelocityTimestamp, value != _lastUpdatedAngularVelocityValue)) {
                 updateAngularVelocityFromNetwork(value);
                 _lastUpdatedAngularVelocityTimestamp = lastEdited;
                 _lastUpdatedAngularVelocityValue = value;
             }
         };
 
-        auto customSetAcceleration = [this, lastEdited, overwriteLocalData, weOwnSimulation, filterRejection](glm::vec3 value){
-            bool simulationChanged = lastEdited > _lastUpdatedAccelerationTimestamp;
-            bool valueChanged = value != _lastUpdatedAccelerationValue;
-            bool shouldUpdate = overwriteLocalData && !weOwnSimulation && simulationChanged && (valueChanged || filterRejection);
-            if (shouldUpdate) {
+        auto customSetAcceleration = [this, shouldUpdate, lastEdited](glm::vec3 value){
+            if (shouldUpdate(_lastUpdatedAccelerationTimestamp, value != _lastUpdatedAccelerationValue)) {
                 setAcceleration(value);
                 _lastUpdatedAccelerationTimestamp = lastEdited;
                 _lastUpdatedAccelerationValue = value;

From 18f8c2b866e3aaa4d640cd450f7ac67967d2d7f8 Mon Sep 17 00:00:00 2001
From: howard-stearns <howard.stearns@gmail.com>
Date: Tue, 31 Jan 2017 13:31:33 -0800
Subject: [PATCH 04/28] comment

---
 libraries/entities/src/EntityItem.cpp | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libraries/entities/src/EntityItem.cpp b/libraries/entities/src/EntityItem.cpp
index a73420c587..7f3c273772 100644
--- a/libraries/entities/src/EntityItem.cpp
+++ b/libraries/entities/src/EntityItem.cpp
@@ -664,6 +664,9 @@ int EntityItem::readEntityDataFromBuffer(const unsigned char* data, int bytesLef
         if (wantTerseEditLogging() && _simulationOwner != newSimOwner) {
             qCDebug(entities) << "sim ownership for" << getDebugName() << "is now" << newSimOwner;
         }
+        // This is used in the custom physics setters, below. When an entity-server filter alters
+        // or rejects a set of properties, it clears this. In such cases, we don't want those custom
+        // setters to ignore what the server says.
         filterRejection = newSimOwner.getID().isNull();
         if (weOwnSimulation) {
             if (newSimOwner.getID().isNull() && !_simulationOwner.pendingRelease(lastEditedFromBufferAdjusted)) {

From 06d797bb3b04217452cf13d8ed12b9544a0a527c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 14:27:17 -0800
Subject: [PATCH 05/28] load bootstrao

---
 scripts/system/html/users.html | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 23de9cf0b0..dd52af0620 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -13,6 +13,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
         <style>
             body {
                 margin: 0;
@@ -114,6 +115,21 @@
                 background: linear-gradient(#1080b8, #1080b8);
             }
 
+            input[type=button].white {
+                color: #121212;
+                background-color: #afafaf;
+                background: linear-gradient(#fff 20%, #afafaf 100%);
+            }
+
+            input[type=button].white:hover {
+                background: linear-gradient(#fff, #fff);
+                border: none;
+            }
+
+            input[type=button].white:active {
+                background: linear-gradient(#afafaf, #afafaf);
+            }
+
             #friends-button {
                 margin: 0px 0px 15px 10px;
             }
@@ -128,6 +144,7 @@
             </div>
         </div>
         <div class="main">
+            <input type="button" class="white" id="visibility-toggle" value="Online">
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -141,10 +158,12 @@
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
         <script>
             var METAVERSE_API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online";
             var FRIENDS_FILTER = "&filter=friends";
             var myUsername = null;
+            var myVisibility = null;
 
             function displayUsers(data, element) {
                 element.empty();
@@ -201,10 +220,12 @@
                     // Parse the string into an object
                     event = JSON.parse(event);
                 }
-                if (event.type === "sendUsername") {
+                if (event.type === "user-info") {
                     myUsername = event.data.username;
+                    myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
-                    consoloe.log("myUsername is " + myUsername);
+                    $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
+                    $("#visibility-toggle").prop("value", myVisibility);
                 }
             }
 

From fda20694b3afe067a274d01991f1bbce21e51dd0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 15:47:51 -0800
Subject: [PATCH 06/28] jump to user confimation modal

---
 scripts/system/html/users.html | 96 ++++++++++++++++++++++++++++------
 1 file changed, 81 insertions(+), 15 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index dd52af0620..0b55490aed 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -30,7 +30,7 @@
                 font-weight: bold;
             }
 
-            .top-bar .container {
+            .top-bar .myContainer {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -100,51 +100,97 @@
                 cursor: pointer;
             }
 
+            input[type=button].red {
+                color: #fff;
+                background-color: #94132e;
+                background: linear-gradient(#d42043 20%, #94132e 100%);
+            }
             input[type=button].blue {
                 color: #fff;
                 background-color: #1080b8;
                 background: linear-gradient(#00b4ef 20%, #1080b8 100%);
             }
-
-            input[type=button].blue:hover {
-                background: linear-gradient(#00b4ef, #00b4ef);
-                border: none;
-            }
-
-            input[type=button].blue:active {
-                background: linear-gradient(#1080b8, #1080b8);
-            }
-
             input[type=button].white {
                 color: #121212;
                 background-color: #afafaf;
                 background: linear-gradient(#fff 20%, #afafaf 100%);
             }
 
-            input[type=button].white:hover {
+            input[type=button]:enabled:hover {
+                background: linear-gradient(#000, #000);
+                border: none;
+            }
+            input[type=button].red:enabled:hover {
+                background: linear-gradient(#d42043, #d42043);
+                border: none;
+            }
+            input[type=button].blue:enabled:hover {
+                background: linear-gradient(#00b4ef, #00b4ef);
+                border: none;
+            }
+            input[type=button].white:enabled:hover {
                 background: linear-gradient(#fff, #fff);
                 border: none;
             }
 
+            input[type=button]:active {
+                background: linear-gradient(#343434, #343434);
+            }
+            input[type=button].red:active {
+                background: linear-gradient(#94132e, #94132e);
+            }
+            input[type=button].blue:active {
+                background: linear-gradient(#1080b8, #1080b8);
+            }
             input[type=button].white:active {
                 background: linear-gradient(#afafaf, #afafaf);
             }
 
+            input[type=button]:disabled {
+                color: #252525;
+                background: linear-gradient(#575757 20%, #252525 100%);
+            }
+
+            input[type=button][pressed=pressed] {
+                color: #00b4ef;
+            }
+
             #friends-button {
                 margin: 0px 0px 15px 10px;
             }
 
+            /*Vertically Center Modal*/
+            .modal {
+              color: black;
+              text-align: center;
+              padding: 0!important;
+            }
+
+            .modal:before {
+              content: '';
+              display: inline-block;
+              height: 100%;
+              vertical-align: middle;
+              margin-right: -4px;
+            }
+
+            .modal-dialog {
+              display: inline-block;
+              text-align: left;
+              vertical-align: middle;
+            }
+
         </style>
     </head>
     <body>
         <div class="top-bar">
-            <div class="container">
+            <div class="myContainer">
                 <div>Users Online</div>
                 <img id="refresh-button" onclick="pollUsers()" src="https://hifi-content.s3.amazonaws.com/faye/tablet-dev/refresh-icon.svg"></img>
             </div>
         </div>
         <div class="main">
-            <input type="button" class="white" id="visibility-toggle" value="Online">
+<!--             <input type="button" class="white" id="visibility-toggle" value="Online"> -->
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -157,6 +203,26 @@
                 <input type="button" class="blue" id="friends-button" value="Add/Remove Friends">
             </div>
         </div>
+
+        <!-- Modal -->
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">Jump to username @ Placename</h4>
+              </div>
+              <div class="modal-body">
+                This will teleport you to new location and possibly another domain. Are you sure?
+              </div>
+              <div class="modal-footer">
+                <input type="button" data-dismiss="modal" value="Cancel">
+                <input type="button" data-dismiss="modal" value="OK">
+              </div>
+            </div>
+          </div>
+        </div>
+
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
         <script>
@@ -177,7 +243,7 @@
                         // Don't display yourself
                         if (data.users[i].username !== myUsername) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            element.append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
+                            element.append("<li data-toggle='modal' data-target='#myModal'>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
                         }
                     }
                 }

From 59aea60be0c7c8c8b6cf02f7057a7cb0b665d47c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmail.com>
Date: Tue, 31 Jan 2017 16:16:40 -0800
Subject: [PATCH 07/28] fill confirmation modal with data of the selected user

---
 scripts/system/html/users.html | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 0b55490aed..98c3db38c7 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -243,7 +243,14 @@
                         // Don't display yourself
                         if (data.users[i].username !== myUsername) {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
-                            element.append("<li data-toggle='modal' data-target='#myModal'>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
+                            // Create a list item and put user info in data-* attributes, also make it trigger the jump to confirmation modal
+                            $("<li></li>", {
+                                "data-toggle": "modal",
+                                "data-target": "#myModal",
+                                "data-username": data.users[i].username,
+                                "data-placename": data.users[i].location.root.name,
+                                text: data.users[i].username + " @ " + data.users[i].location.root.name
+                            }).appendTo(element);
                         }
                     }
                 }
@@ -309,6 +316,18 @@
                     $(this).addClass("current");
                 });
 
+                // Jump to user: Fill confirmation modal with data of the selected user
+                $("#myModal").on("show.bs.modal", function (event) {
+                    // Get the element that triggered the modal
+                    var li = $(event.relatedTarget); 
+                    // Extract info from data-* attributes
+                    var username = li.data("username");
+                    var placename = li.data("placename");
+                    // Write info to the modal
+                    var modal = $(this);
+                    modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
+                })
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
@@ -316,7 +335,7 @@
                 var eventObject = {"type": "ready"};
                 EventBridge.emitWebEvent(JSON.stringify(eventObject));
 
-                // Click listener mangage friends button
+                // Click listener for add/remove friends button
                 $("#friends-button").click(function() {
                     // Send a manage friends event to hifi
                     eventObject = {"type": "manage-friends"};

From 5bd8e465108f3ee386b4716ecc9b85718366e783 Mon Sep 17 00:00:00 2001
From: Stephen Birarda <commit@birarda.com>
Date: Wed, 1 Feb 2017 10:33:29 -0800
Subject: [PATCH 08/28] only check if keys are empty, not all fields

---
 .../resources/web/settings/js/settings.js     | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index b04d55b9eb..3ed7d02364 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/domain-server/resources/web/settings/js/settings.js
@@ -908,31 +908,11 @@ function validateInputs() {
   }
 
   _.each(tables, function(table) {
-    var inputs = $(table).find('tr.' + Settings.NEW_ROW_CLASS + ':not([data-category]) input[data-changed="true"]');
-
-    var empty = false;
-
-    _.each(inputs, function(input){
-      var inputVal = $(input).val();
-
-      if (inputVal.length === 0) {
-        empty = true
-
-        markParentRowInvalid(input);
-        return;
-      }
-    });
-
-    if (empty) {
-      showErrorMessage("Error", "Empty field(s)");
-      inputsValid = false;
-      return
-    }
-
     // validate keys specificially for spaces and equality to an existing key
     var newKeys = $(table).find('tr.' + Settings.NEW_ROW_CLASS + ' td.key');
 
     var keyWithSpaces = false;
+    var empty = false;
     var duplicateKey = false;
 
     _.each(newKeys, function(keyCell) {
@@ -944,6 +924,14 @@ function validateInputs() {
         return;
       }
 
+      // make sure the key isn't empty
+      if (keyVal.length === 0) {
+        empty = true
+
+        markParentRowInvalid(input);
+        return;
+      }
+
       // make sure we don't have duplicate keys in the table
       var otherKeys = $(table).find('td.key').not(keyCell);
       _.each(otherKeys, function(otherKeyCell) {
@@ -971,6 +959,12 @@ function validateInputs() {
       return
     }
 
+    if (empty) {
+      showErrorMessage("Error", "Empty field(s)");
+      inputsValid = false;
+      return
+    }
+
     if (duplicateKey) {
       showErrorMessage("Error", "Two keys cannot be identical");
       inputsValid = false;

From fc1e5885888a84525613f50899446d456f5dfb71 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:34:54 -0800
Subject: [PATCH 09/28] sending and recieving jump to event

---
 scripts/system/html/users.html | 12 +++++++++++-
 scripts/system/users.js        | 31 ++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 98c3db38c7..f3e1a96309 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -217,7 +217,7 @@
               </div>
               <div class="modal-footer">
                 <input type="button" data-dismiss="modal" value="Cancel">
-                <input type="button" data-dismiss="modal" value="OK">
+                <input type="button" data-dismiss="modal" id="jump-to-confirm-button" value="OK">
               </div>
             </div>
           </div>
@@ -328,6 +328,16 @@
                     modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
                 })
 
+                $("#jump-to-confirm-button").click(function() {
+                    var jumpToObject = {
+                        "type": "jump-to",
+                        "data": {
+                            "username": "Alan_"
+                        }
+                    }
+                    EventBridge.emitWebEvent(JSON.stringify(jumpToObject));
+                });
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 7930892395..b952795570 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -12,10 +12,26 @@
 
 (function() { // BEGIN LOCAL_SCOPE
     var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+
     var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
     var FRIENDS_WINDOW_WIDTH = 290;
     var FRIENDS_WINDOW_HEIGHT = 500;
     var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
+    }
+
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     var button = tablet.addButton({
         icon: "icons/tablet-icons/people-i.svg",
@@ -35,10 +51,13 @@
             // send username to html
             var myUsername = GlobalServices.username;
             var object = {
-                "type": "sendUsername",
-                "data": {"username": myUsername}
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
+                }
             };
-            print("sending username: " + myUsername);
+            print("sending user info: " + JSON.stringify(object));
             tablet.emitScriptEvent(JSON.stringify(object));
         }
         if (event.type === "manage-friends") {
@@ -53,6 +72,12 @@
             friendsWindow.setVisible(true);
             friendsWindow.raise();
         }
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
+            }
+        }
     }
 
     button.clicked.connect(onClicked);

From 3f84e5778cb418f3465d1429d788e0b97bf179dd Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:45:18 -0800
Subject: [PATCH 10/28] jump to the selected user

---
 scripts/system/html/users.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index f3e1a96309..1d5ce88233 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -190,7 +190,6 @@
             </div>
         </div>
         <div class="main">
-<!--             <input type="button" class="white" id="visibility-toggle" value="Online"> -->
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -326,13 +325,14 @@
                     // Write info to the modal
                     var modal = $(this);
                     modal.find(".modal-title").text("Jump to " + username + " @ " + placename);
+                    $("#jump-to-confirm-button").data("username", username);
                 })
 
                 $("#jump-to-confirm-button").click(function() {
                     var jumpToObject = {
                         "type": "jump-to",
                         "data": {
-                            "username": "Alan_"
+                            "username": $(this).data("username")
                         }
                     }
                     EventBridge.emitWebEvent(JSON.stringify(jumpToObject));

From 594633978207fa797e5626562b6c8683271d4611 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:52:37 -0800
Subject: [PATCH 11/28] move my changes to a different file

---
 scripts/system/{users.js => tablet-users.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename scripts/system/{users.js => tablet-users.js} (100%)

diff --git a/scripts/system/users.js b/scripts/system/tablet-users.js
similarity index 100%
rename from scripts/system/users.js
rename to scripts/system/tablet-users.js

From 4e209399da80b2656343287f547c2a387489f8d0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 10:58:03 -0800
Subject: [PATCH 12/28] fix conflict

---
 scripts/system/users.js | 1280 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 1280 insertions(+)
 create mode 100644 scripts/system/users.js

diff --git a/scripts/system/users.js b/scripts/system/users.js
new file mode 100644
index 0000000000..009c446ff3
--- /dev/null
+++ b/scripts/system/users.js
@@ -0,0 +1,1280 @@
+"use strict";
+
+//
+//  users.js
+//  examples
+//
+//  Created by David Rowe on 9 Mar 2015.
+//  Copyright 2015 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
+//
+/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
+
+(function() { // BEGIN LOCAL_SCOPE
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
+
+var MENU_ITEM = "Users Online";
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/users-i.svg",
+        text: "USERS",
+        isActive: Menu.isOptionChecked(MENU_ITEM)
+    });
+}
+
+
+function onClicked() {
+    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
+    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
+}
+button.clicked.connect(onClicked);
+
+// resolve these paths immediately
+var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
+var BASE_URL = Script.resolvePath("assets/images/tools/");
+
+var PopUpMenu = function (properties) {
+    var value = properties.value,
+        promptOverlay,
+        valueOverlay,
+        buttonOverlay,
+        optionOverlays = [],
+        isDisplayingOptions = false,
+        OPTION_MARGIN = 4,
+
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
+
+    function positionDisplayOptions() {
+        var y,
+            i;
+
+        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            Overlays.editOverlay(optionOverlays[i], {
+                y: y
+            });
+            y += properties.lineHeight;
+        }
+    }
+
+    function showDisplayOptions() {
+        var i,
+            yOffScreen = Controller.getViewportDimensions().y;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            optionOverlays[i] = Overlays.addOverlay("text", {
+                x: properties.x + properties.promptWidth,
+                y: yOffScreen,
+                width: properties.width - properties.promptWidth,
+                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+                topMargin: OPTION_MARGIN,
+                leftMargin: OPTION_MARGIN,
+                color: properties.optionColor,
+                alpha: properties.optionAlpha,
+                backgroundColor: properties.popupBackgroundColor,
+                backgroundAlpha: properties.popupBackgroundAlpha,
+                text: properties.displayValues[i],
+                font: properties.font,
+                visible: true
+            });
+        }
+
+        positionDisplayOptions();
+
+        isDisplayingOptions = true;
+    }
+
+    function deleteDisplayOptions() {
+        var i;
+
+        for (i = 0; i < optionOverlays.length; i += 1) {
+            Overlays.deleteOverlay(optionOverlays[i]);
+        }
+
+        isDisplayingOptions = false;
+    }
+
+    function handleClick(overlay) {
+        var clicked = false,
+            i;
+
+        if (overlay === valueOverlay || overlay === buttonOverlay) {
+            showDisplayOptions();
+            return true;
+        }
+
+        if (isDisplayingOptions) {
+            for (i = 0; i < optionOverlays.length; i += 1) {
+                if (overlay === optionOverlays[i]) {
+                    value = properties.values[i];
+                    Overlays.editOverlay(valueOverlay, {
+                        text: properties.displayValues[i]
+                    });
+                    clicked = true;
+                }
+            }
+
+            deleteDisplayOptions();
+        }
+
+        return clicked;
+    }
+
+    function updatePosition(x, y) {
+        properties.x = x;
+        properties.y = y;
+        Overlays.editOverlay(promptOverlay, {
+            x: x,
+            y: y
+        });
+        Overlays.editOverlay(valueOverlay, {
+            x: x + properties.promptWidth,
+            y: y - OPTION_MARGIN
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+            y: y - OPTION_MARGIN + 1
+        });
+        if (isDisplayingOptions) {
+            positionDisplayOptions();
+        }
+    }
+
+    function setVisible(visible) {
+        Overlays.editOverlay(promptOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(valueOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            visible: visible
+        });
+    }
+
+    function tearDown() {
+        Overlays.deleteOverlay(promptOverlay);
+        Overlays.deleteOverlay(valueOverlay);
+        Overlays.deleteOverlay(buttonOverlay);
+        if (isDisplayingOptions) {
+            deleteDisplayOptions();
+        }
+    }
+
+    function getValue() {
+        return value;
+    }
+
+    function setValue(newValue) {
+        var index;
+
+        index = properties.values.indexOf(newValue);
+        if (index !== -1) {
+            value = newValue;
+            Overlays.editOverlay(valueOverlay, {
+                text: properties.displayValues[index]
+            });
+        }
+    }
+
+    promptOverlay = Overlays.addOverlay("text", {
+        x: properties.x,
+        y: properties.y,
+        width: properties.promptWidth,
+        height: properties.textHeight,
+        topMargin: 0,
+        leftMargin: 0,
+        color: properties.promptColor,
+        alpha: properties.promptAlpha,
+        backgroundColor: properties.promptBackgroundColor,
+        backgroundAlpha: properties.promptBackgroundAlpha,
+        text: properties.prompt,
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    valueOverlay = Overlays.addOverlay("text", {
+        x: properties.x + properties.promptWidth,
+        y: properties.y,
+        width: properties.width - properties.promptWidth,
+        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+        topMargin: OPTION_MARGIN,
+        leftMargin: OPTION_MARGIN,
+        color: properties.optionColor,
+        alpha: properties.optionAlpha,
+        backgroundColor: properties.optionBackgroundColor,
+        backgroundAlpha: properties.optionBackgroundAlpha,
+        text: properties.displayValues[properties.values.indexOf(value)],
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    buttonOverlay = Overlays.addOverlay("image", {
+        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+        y: properties.y,
+        width: MIN_MAX_BUTTON_WIDTH,
+        height: MIN_MAX_BUTTON_HEIGHT,
+        imageURL: MIN_MAX_BUTTON_SVG,
+        subImage: {
+            x: 0,
+            y: 0,
+            width: MIN_MAX_BUTTON_SVG_WIDTH,
+            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+        },
+        //color: properties.buttonColor,
+        alpha: properties.buttonAlpha,
+        visible: properties.visible
+    });
+
+    return {
+        updatePosition: updatePosition,
+        setVisible: setVisible,
+        handleClick: handleClick,
+        tearDown: tearDown,
+        getValue: getValue,
+        setValue: setValue
+    };
+};
+
+var usersWindow = (function () {
+
+    var WINDOW_WIDTH = 260,
+        WINDOW_MARGIN = 12,
+        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
+        WINDOW_FONT = {
+            size: 12
+        },
+        WINDOW_FOREGROUND_COLOR = {
+            red: 240,
+            green: 240,
+            blue: 240
+        },
+        WINDOW_FOREGROUND_ALPHA = 0.95,
+        WINDOW_HEADING_COLOR = {
+            red: 180,
+            green: 180,
+            blue: 180
+        },
+        WINDOW_HEADING_ALPHA = 0.95,
+        WINDOW_BACKGROUND_COLOR = {
+            red: 80,
+            green: 80,
+            blue: 80
+        },
+        WINDOW_BACKGROUND_ALPHA = 0.8,
+        windowPane,
+        windowHeading,
+
+        // Margin on the left and right side of the window to keep
+        // it from getting too close to the edge of the screen which
+        // is unclickable.
+        WINDOW_MARGIN_X = 20,
+
+        // Window border is similar to that of edit.js.
+        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
+        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_RADIUS = 4,
+        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
+        WINDOW_BORDER_ALPHA = 0.5,
+        windowBorder,
+
+        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
+        MIN_MAX_BUTTON_COLOR = {
+            red: 255,
+            green: 255,
+            blue: 255
+        },
+        MIN_MAX_BUTTON_ALPHA = 0.9,
+        minimizeButton,
+        SCROLLBAR_BACKGROUND_WIDTH = 12,
+        SCROLLBAR_BACKGROUND_COLOR = {
+            red: 70,
+            green: 70,
+            blue: 70
+        },
+        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
+        scrollbarBackground,
+        SCROLLBAR_BAR_MIN_HEIGHT = 5,
+        SCROLLBAR_BAR_COLOR = {
+            red: 170,
+            green: 170,
+            blue: 170
+        },
+        SCROLLBAR_BAR_ALPHA = 0.8,
+        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
+        scrollbarBar,
+        scrollbarBackgroundHeight,
+        scrollbarBarHeight,
+        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
+        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
+        FRIENDS_BUTTON_SVG_WIDTH = 107,
+        FRIENDS_BUTTON_SVG_HEIGHT = 27,
+        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
+        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
+        FRIENDS_BUTTON_COLOR = {
+            red: 225,
+            green: 225,
+            blue: 225
+        },
+        FRIENDS_BUTTON_ALPHA = 0.95,
+        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
+        FRIENDS_WINDOW_WIDTH = 290,
+        FRIENDS_WINDOW_HEIGHT = 500,
+        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
+        friendsButton,
+        friendsWindow,
+
+        OPTION_BACKGROUND_COLOR = {
+            red: 60,
+            green: 60,
+            blue: 60
+        },
+        OPTION_BACKGROUND_ALPHA = 0.1,
+
+        DISPLAY_SPACER = 12, // Space before display control
+        DISPLAY_PROMPT = "Show me:",
+        DISPLAY_PROMPT_WIDTH = 60,
+        DISPLAY_EVERYONE = "everyone",
+        DISPLAY_FRIENDS = "friends",
+        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
+        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
+        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
+            red: 120,
+            green: 120,
+            blue: 120
+        },
+        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
+        displayControl,
+
+        VISIBILITY_SPACER = 6, // Space before visibility control
+        VISIBILITY_PROMPT = "Visible to:",
+        VISIBILITY_PROMPT_WIDTH = 60,
+        VISIBILITY_ALL = "all",
+        VISIBILITY_FRIENDS = "friends",
+        VISIBILITY_NONE = "none",
+        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
+        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
+        visibilityControl,
+
+        windowHeight,
+        windowBorderHeight,
+        windowTextHeight,
+        windowLineSpacing,
+        windowLineHeight, // = windowTextHeight + windowLineSpacing
+        windowMinimumHeight,
+
+        usersOnline, // Raw users data
+        linesOfUsers = [], // Array of indexes pointing into usersOnline
+        numUsersToDisplay = 0,
+        firstUserToDisplay = 0,
+
+        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
+        API_FRIENDS_FILTER = "&filter=friends",
+        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
+        usersRequest,
+        processUsers,
+        pollUsersTimedOut,
+        usersTimer = null,
+        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
+
+        showMe,
+        myVisibility,
+
+        MENU_NAME = "View",
+        MENU_ITEM = "Users Online",
+        MENU_ITEM_OVERLAYS = "Overlays",
+        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
+
+        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
+        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
+        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
+        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
+        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
+
+        isLoggedIn = false,
+        isVisible = true,
+        isMinimized = false,
+        isBorderVisible = false,
+
+        viewport,
+        isMirrorDisplay = false,
+        isFullscreenMirror = false,
+
+        windowPosition = {},  // Bottom left corner of window pane.
+        isMovingWindow = false,
+        movingClickOffset = { x: 0, y: 0 },
+
+        isUsingScrollbars = false,
+        isMovingScrollbar = false,
+        scrollbarBackgroundPosition = {},
+        scrollbarBarPosition = {},
+        scrollbarBarClickedAt, // 0.0 .. 1.0
+        scrollbarValue = 0.0; // 0.0 .. 1.0
+
+    function isWindowDisabled() {
+        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
+    }
+
+    function isValueTrue(value) {
+        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
+        // Being written if refresh script.
+        return value === true || value === "true";
+    }
+
+    function calculateWindowHeight() {
+        var AUDIO_METER_HEIGHT = 52,
+            MIRROR_HEIGHT = 220,
+            nonUsersHeight,
+            maxWindowHeight;
+
+        if (isMinimized) {
+            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+            return;
+        }
+
+        // Reserve space for title, friends button, and option controls
+        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
+            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
+            DISPLAY_SPACER +
+            windowLineHeight + VISIBILITY_SPACER +
+            windowLineHeight + WINDOW_BASE_MARGIN;
+
+        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
+        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
+        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
+        if (isMirrorDisplay && !isFullscreenMirror) {
+            maxWindowHeight -= MIRROR_HEIGHT;
+        }
+        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
+        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+
+        // Corresponding number of users to actually display
+        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
+        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
+        if (isUsingScrollbars) {
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+        } else {
+            firstUserToDisplay = 0;
+            scrollbarValue = 0.0;
+        }
+    }
+
+    function saturateWindowPosition() {
+        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
+        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
+    }
+
+    function updateOverlayPositions() {
+        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
+        var windowLeft = windowPosition.x,
+            windowTop = windowPosition.y - windowHeight,
+            x,
+            y;
+
+        Overlays.editOverlay(windowBorder, {
+            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
+            y: windowTop - WINDOW_BORDER_TOP_MARGIN
+        });
+        Overlays.editOverlay(windowPane, {
+            x: windowLeft,
+            y: windowTop
+        });
+        Overlays.editOverlay(windowHeading, {
+            x: windowLeft + WINDOW_MARGIN,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        Overlays.editOverlay(minimizeButton, {
+            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
+        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
+        Overlays.editOverlay(scrollbarBackground, {
+            x: scrollbarBackgroundPosition.x,
+            y: scrollbarBackgroundPosition.y
+        });
+        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
+            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+        Overlays.editOverlay(scrollbarBar, {
+            x: scrollbarBackgroundPosition.x + 1,
+            y: scrollbarBarPosition.y
+        });
+
+
+        x = windowLeft + WINDOW_MARGIN;
+        y = windowPosition.y -
+            DISPLAY_SPACER -
+            windowLineHeight - VISIBILITY_SPACER -
+            windowLineHeight - WINDOW_BASE_MARGIN;
+        if (shouldShowFriendsButton()) {
+            y -= FRIENDS_BUTTON_HEIGHT;
+            Overlays.editOverlay(friendsButton, {
+                x: x,
+                y: y
+            });
+            y += FRIENDS_BUTTON_HEIGHT;
+        }
+
+        y += DISPLAY_SPACER;
+        displayControl.updatePosition(x, y);
+
+        y += windowLineHeight + VISIBILITY_SPACER;
+        visibilityControl.updatePosition(x, y);
+    }
+
+    function updateUsersDisplay() {
+        var displayText = "",
+            user,
+            userText,
+            textWidth,
+            maxTextWidth,
+            ellipsisWidth,
+            reducedTextWidth,
+            i;
+
+        if (!isMinimized) {
+            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
+            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
+            reducedTextWidth = maxTextWidth - ellipsisWidth;
+
+            for (i = 0; i < numUsersToDisplay; i += 1) {
+                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
+                userText = user.text;
+                textWidth = user.textWidth;
+
+                if (textWidth > maxTextWidth) {
+                    // Trim and append "..." to fit window width
+                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
+                    while (textWidth > reducedTextWidth) {
+                        userText = userText.slice(0, -1);
+                        textWidth = Overlays.textSize(windowPane, userText).width;
+                    }
+                    userText += "...";
+                }
+
+                displayText += "\n" + userText;
+            }
+
+            displayText = displayText.slice(1); // Remove leading "\n".
+
+            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
+            Overlays.editOverlay(scrollbarBackground, {
+                height: scrollbarBackgroundHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
+                SCROLLBAR_BAR_MIN_HEIGHT);
+            Overlays.editOverlay(scrollbarBar, {
+                height: scrollbarBarHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+        }
+
+        Overlays.editOverlay(windowBorder, {
+            height: windowBorderHeight
+        });
+
+        Overlays.editOverlay(windowPane, {
+            height: windowHeight,
+            text: displayText
+        });
+
+        Overlays.editOverlay(windowHeading, {
+            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
+        });
+    }
+
+    function shouldShowFriendsButton() {
+        return isVisible && isLoggedIn && !isMinimized;
+    }
+
+    function updateOverlayVisibility() {
+        Overlays.editOverlay(windowBorder, {
+            visible: isVisible && isBorderVisible
+        });
+        Overlays.editOverlay(windowPane, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(windowHeading, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(minimizeButton, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(scrollbarBackground, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(scrollbarBar, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(friendsButton, {
+            visible: shouldShowFriendsButton()
+        });
+        displayControl.setVisible(isVisible && !isMinimized);
+        visibilityControl.setVisible(isVisible && !isMinimized);
+    }
+
+    function checkLoggedIn() {
+        var wasLoggedIn = isLoggedIn;
+
+        isLoggedIn = Account.isLoggedIn();
+        if (isLoggedIn !== wasLoggedIn) {
+            if (wasLoggedIn) {
+                setMinimized(true);
+                calculateWindowHeight();
+                updateOverlayPositions();
+                updateUsersDisplay();
+            }
+
+            updateOverlayVisibility();
+        }
+    }
+
+    function pollUsers() {
+        var url = API_URL;
+
+        if (showMe === DISPLAY_FRIENDS) {
+            url += API_FRIENDS_FILTER;
+        }
+
+        usersRequest = new XMLHttpRequest();
+        usersRequest.open("GET", url, true);
+        usersRequest.timeout = HTTP_GET_TIMEOUT;
+        usersRequest.ontimeout = pollUsersTimedOut;
+        usersRequest.onreadystatechange = processUsers;
+        usersRequest.send();
+    }
+
+    processUsers = function () {
+        var response,
+            myUsername,
+            user,
+            userText,
+            i;
+
+        if (usersRequest.readyState === usersRequest.DONE) {
+            if (usersRequest.status === 200) {
+                response = JSON.parse(usersRequest.responseText);
+                if (response.status !== "success") {
+                    print("Error: Request for users status returned status = " + response.status);
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
+                    print("Error: Request for users status returned invalid data");
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+
+                usersOnline = response.data.users;
+                myUsername = GlobalServices.username;
+                linesOfUsers = [];
+                for (i = 0; i < usersOnline.length; i += 1) {
+                    user = usersOnline[i];
+                    if (user.username !== myUsername && user.online) {
+                        userText = user.username;
+                        if (user.location.root) {
+                            userText += " @ " + user.location.root.name;
+                        }
+
+                        usersOnline[i].text = userText;
+                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
+
+                        linesOfUsers.push(i);
+                    }
+                }
+
+                checkLoggedIn();
+                calculateWindowHeight();
+                updateUsersDisplay();
+                updateOverlayPositions();
+
+            } else {
+                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
+                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                return;
+            }
+
+            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
+        }
+    };
+
+    pollUsersTimedOut = function () {
+        print("Error: Request for users status timed out");
+        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+    };
+
+    function setVisible(visible) {
+        isVisible = visible;
+
+        if (isVisible) {
+            if (usersTimer === null) {
+                pollUsers();
+            }
+        } else {
+            Script.clearTimeout(usersTimer);
+            usersTimer = null;
+        }
+
+        updateOverlayVisibility();
+    }
+
+    function setMinimized(minimized) {
+        isMinimized = minimized;
+        Overlays.editOverlay(minimizeButton, {
+            subImage: {
+                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
+            }
+        });
+        updateOverlayVisibility();
+        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
+    }
+
+    function onMenuItemEvent(event) {
+        if (event === MENU_ITEM) {
+            setVisible(Menu.isOptionChecked(MENU_ITEM));
+        }
+    }
+
+    function onFindableByChanged(event) {
+        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
+            myVisibility = event;
+            visibilityControl.setValue(event);
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+        } else {
+            print("Error: Unrecognized onFindableByChanged value: " + event);
+        }
+    }
+
+    function onMousePressEvent(event) {
+        var clickedOverlay,
+            numLinesBefore,
+            overlayX,
+            overlayY,
+            minY,
+            maxY,
+            lineClicked,
+            userClicked,
+            delta;
+
+        if (!isVisible || isWindowDisabled()) {
+            return;
+        }
+
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
+
+        if (displayControl.handleClick(clickedOverlay)) {
+            if (usersTimer !== null) {
+                Script.clearTimeout(usersTimer);
+                usersTimer = null;
+            }
+            pollUsers();
+            showMe = displayControl.getValue();
+            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
+            return;
+        }
+
+        if (visibilityControl.handleClick(clickedOverlay)) {
+            myVisibility = visibilityControl.getValue();
+            GlobalServices.findableBy = myVisibility;
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+            return;
+        }
+
+        if (clickedOverlay === windowPane) {
+
+            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
+            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
+
+            numLinesBefore = Math.round(overlayY / windowLineHeight);
+            minY = numLinesBefore * windowLineHeight;
+            maxY = minY + windowTextHeight;
+
+            lineClicked = -1;
+            if (minY <= overlayY && overlayY <= maxY) {
+                lineClicked = numLinesBefore;
+            }
+
+            userClicked = firstUserToDisplay + lineClicked;
+
+            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
+                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
+                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
+                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
+            }
+
+            return;
+        }
+
+        if (clickedOverlay === minimizeButton) {
+            setMinimized(!isMinimized);
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBar) {
+            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
+            });
+            isMovingScrollbar = true;
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBackground) {
+            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
+
+            if (event.y < scrollbarBarPosition.y) {
+                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
+            } else {
+                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
+            }
+
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === friendsButton) {
+            if (!friendsWindow) {
+                friendsWindow = new OverlayWebWindow({
+                    title: FRIENDS_WINDOW_TITLE,
+                    width: FRIENDS_WINDOW_WIDTH,
+                    height: FRIENDS_WINDOW_HEIGHT,
+                    visible: false
+                });
+            }
+            friendsWindow.setURL(FRIENDS_WINDOW_URL);
+            friendsWindow.setVisible(true);
+            friendsWindow.raise();
+            return;
+        }
+
+        if (clickedOverlay === windowBorder) {
+            movingClickOffset = {
+                x: event.x - windowPosition.x,
+                y: event.y - windowPosition.y
+            };
+
+            isMovingWindow = true;
+        }
+    }
+
+    function onMouseMoveEvent(event) {
+        var isVisible;
+
+        if (!isLoggedIn || isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
+                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
+                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
+                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
+                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
+                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
+                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+                updateOverlayPositions();
+                updateUsersDisplay();
+            } else {
+                Overlays.editOverlay(scrollbarBar, {
+                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
+                });
+                isMovingScrollbar = false;
+            }
+        }
+
+        if (isMovingWindow) {
+            windowPosition = {
+                x: event.x - movingClickOffset.x,
+                y: event.y - movingClickOffset.y
+            };
+
+            saturateWindowPosition();
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+
+        } else {
+
+            isVisible = isBorderVisible;
+            if (isVisible) {
+                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
+                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
+                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
+                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
+            } else {
+                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
+                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
+            }
+            if (isVisible !== isBorderVisible) {
+                isBorderVisible = isVisible;
+                Overlays.editOverlay(windowBorder, {
+                    visible: isBorderVisible
+                });
+            }
+        }
+    }
+
+    function onMouseReleaseEvent() {
+        var offset = {};
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_ALPHA
+            });
+            isMovingScrollbar = false;
+        }
+
+        if (isMovingWindow) {
+            // Save offset of bottom of window to nearest edge of the window.
+            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
+                windowPosition.x : windowPosition.x - viewport.x;
+            offset.y = (windowPosition.y < viewport.y / 2) ?
+                windowPosition.y : windowPosition.y - viewport.y;
+            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
+            isMovingWindow = false;
+        }
+    }
+
+    function onScriptUpdate() {
+        var oldViewport = viewport,
+            oldIsMirrorDisplay = isMirrorDisplay,
+            oldIsFullscreenMirror = isFullscreenMirror,
+            MIRROR_MENU_ITEM = "Mirror",
+            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        viewport = Controller.getViewportDimensions();
+        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
+        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
+
+        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
+            isFullscreenMirror !== oldIsFullscreenMirror) {
+            calculateWindowHeight();
+            updateUsersDisplay();
+        }
+
+        if (viewport.y !== oldViewport.y) {
+            if (windowPosition.y > oldViewport.y / 2) {
+                // Maintain position w.r.t. bottom of window.
+                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
+            }
+        }
+
+        if (viewport.x !== oldViewport.x) {
+            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
+                // Maintain position w.r.t. right of window.
+                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
+            }
+        }
+
+        updateOverlayPositions();
+    }
+
+    function setUp() {
+        var textSizeOverlay,
+            offsetSetting,
+            offset = {},
+            hmdViewport;
+
+        textSizeOverlay = Overlays.addOverlay("text", {
+            font: WINDOW_FONT,
+            visible: false
+        });
+        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
+        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
+        windowLineHeight = windowTextHeight + windowLineSpacing;
+        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+        Overlays.deleteOverlay(textSizeOverlay);
+
+        viewport = Controller.getViewportDimensions();
+
+        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
+        if (offsetSetting !== "") {
+            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
+        }
+        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
+            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
+            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
+        } else {
+            hmdViewport = Controller.getRecommendedOverlayRect();
+            windowPosition = {
+                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
+                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
+            };
+        }
+
+        saturateWindowPosition();
+        calculateWindowHeight();
+
+        windowBorder = Overlays.addOverlay("rectangle", {
+            x: 0,
+            y: viewport.y,   // Start up off-screen
+            width: WINDOW_BORDER_WIDTH,
+            height: windowBorderHeight,
+            radius: WINDOW_BORDER_RADIUS,
+            color: WINDOW_BORDER_COLOR,
+            alpha: WINDOW_BORDER_ALPHA,
+            visible: false
+        });
+
+        windowPane = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH,
+            height: windowHeight,
+            topMargin: WINDOW_MARGIN + windowLineHeight,
+            leftMargin: WINDOW_MARGIN,
+            color: WINDOW_FOREGROUND_COLOR,
+            alpha: WINDOW_FOREGROUND_ALPHA,
+            backgroundColor: WINDOW_BACKGROUND_COLOR,
+            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
+            text: "",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        windowHeading = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
+            height: windowTextHeight,
+            topMargin: 0,
+            leftMargin: 0,
+            color: WINDOW_HEADING_COLOR,
+            alpha: WINDOW_HEADING_ALPHA,
+            backgroundAlpha: 0.0,
+            text: "Users online",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        minimizeButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: MIN_MAX_BUTTON_WIDTH,
+            height: MIN_MAX_BUTTON_HEIGHT,
+            imageURL: MIN_MAX_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: MIN_MAX_BUTTON_SVG_WIDTH,
+                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+            },
+            color: MIN_MAX_BUTTON_COLOR,
+            alpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        scrollbarBackgroundPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBackground = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBackgroundPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
+            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        scrollbarBarPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBar = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBarPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BAR_COLOR,
+            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        friendsButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: FRIENDS_BUTTON_WIDTH,
+            height: FRIENDS_BUTTON_HEIGHT,
+            imageURL: FRIENDS_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: FRIENDS_BUTTON_SVG_WIDTH,
+                height: FRIENDS_BUTTON_SVG_HEIGHT
+            },
+            color: FRIENDS_BUTTON_COLOR,
+            alpha: FRIENDS_BUTTON_ALPHA,
+            visible: false
+        });
+
+        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
+        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
+            showMe = DISPLAY_EVERYONE;
+        }
+
+        displayControl = new PopUpMenu({
+            prompt: DISPLAY_PROMPT,
+            value: showMe,
+            values: DISPLAY_VALUES,
+            displayValues: DISPLAY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: DISPLAY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
+        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
+            myVisibility = VISIBILITY_FRIENDS;
+        }
+        GlobalServices.findableBy = myVisibility;
+
+        visibilityControl = new PopUpMenu({
+            prompt: VISIBILITY_PROMPT,
+            value: myVisibility,
+            values: VISIBILITY_VALUES,
+            displayValues: VISIBILITY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: VISIBILITY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        Controller.mousePressEvent.connect(onMousePressEvent);
+        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
+        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
+
+        Menu.addMenuItem({
+            menuName: MENU_NAME,
+            menuItemName: MENU_ITEM,
+            afterItem: MENU_ITEM_AFTER,
+            isCheckable: true,
+            isChecked: isVisible
+        });
+        Menu.menuItemEvent.connect(onMenuItemEvent);
+
+        GlobalServices.findableByChanged.connect(onFindableByChanged);
+
+        Script.update.connect(onScriptUpdate);
+
+        pollUsers();
+
+        // Set minimized at end - setup code does not handle `minimized == false` correctly
+        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
+    }
+
+    function tearDown() {
+        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
+
+        Script.clearTimeout(usersTimer);
+        Overlays.deleteOverlay(windowBorder);
+        Overlays.deleteOverlay(windowPane);
+        Overlays.deleteOverlay(windowHeading);
+        Overlays.deleteOverlay(minimizeButton);
+        Overlays.deleteOverlay(scrollbarBackground);
+        Overlays.deleteOverlay(scrollbarBar);
+        Overlays.deleteOverlay(friendsButton);
+        displayControl.tearDown();
+        visibilityControl.tearDown();
+    }
+
+    setUp();
+    Script.scriptEnding.connect(tearDown);
+}());
+
+function cleanup () {
+    //remove tablet button
+    button.clicked.disconnect(onClicked);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
+}
+Script.scriptEnding.connect(cleanup);
+
+}()); // END LOCAL_SCOPE

From ca79397ee8335e0a140de5c1e851a9a0a7178781 Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Wed, 1 Feb 2017 11:22:17 -0800
Subject: [PATCH 13/28] tablet-ui: Fix for keyboard focus

Don't allow clicks on non-web entities from stealing focus away from web overlays.
---
 interface/src/Application.cpp | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp
index 0217136a0c..bb5528e427 100644
--- a/interface/src/Application.cpp
+++ b/interface/src/Application.cpp
@@ -1202,8 +1202,11 @@ Application::Application(int& argc, char** argv, QElapsedTimer& startupTimer, bo
     auto entityScriptingInterface = DependencyManager::get<EntityScriptingInterface>();
     connect(entityScriptingInterface.data(), &EntityScriptingInterface::clickDownOnEntity,
             [this](const EntityItemID& entityItemID, const PointerEvent& event) {
-        setKeyboardFocusOverlay(UNKNOWN_OVERLAY_ID);
-        setKeyboardFocusEntity(entityItemID);
+        auto entity = getEntities()->getTree()->findEntityByID(entityItemID);
+        if (entity && entity->wantsKeyboardFocus()) {
+            setKeyboardFocusOverlay(UNKNOWN_OVERLAY_ID);
+            setKeyboardFocusEntity(entityItemID);
+        }
     });
 
     connect(entityScriptingInterface.data(), &EntityScriptingInterface::deletingEntity, [=](const EntityItemID& entityItemID) {

From 378fdaec8b01e393b940e9369bceda18b5aaee2a Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 11:27:44 -0800
Subject: [PATCH 14/28] the missing commit - fix typo and added user info

---
 scripts/system/html/users.html | 46 ++++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 1d5ce88233..2a5372fa7b 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -48,6 +48,44 @@
                 padding: 30px;
             }
 
+            #user-info-div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding-bottom: 40px;
+            }
+
+            #visibility-toggle-button {
+                font-family: 'Raleway';
+                font-weight: bold;
+                font-size: 13px;
+                text-transform: uppercase;
+                vertical-align: top;
+                height: 28px;
+                min-width: 120px;
+                padding: 0px 18px;
+                margin-right: 0px;
+                border-radius: 5px;
+                border: none;
+                color: #121212;
+                background-color: #afafaf;
+                background: linear-gradient(#fff 20%, #afafaf 100%);
+                cursor: pointer;
+            }
+
+            #visibility-toggle-button:enabled:hover {
+                background: linear-gradient(#fff, #fff);
+                border: none;
+            }
+
+            #visibility-toggle-button:active {
+                background: linear-gradient(#afafaf, #afafaf);
+            }
+
+            #visibility-toggle-button span {
+                padding-left: 10px;
+            }
+
             .tabs {
                 list-style: none;
                 padding: 0;
@@ -190,6 +228,10 @@
             </div>
         </div>
         <div class="main">
+            <div id="user-info-div">
+                <h4>faye @ dev-welcome</h4>
+                <button id="visibility-toggle-button">Online<span class="glyphicon glyphicon-menu-down"></span></button>
+            </div>
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>
                 <li tab-id="tab-2">Friends (0)</li>
@@ -212,7 +254,7 @@
                 <h4 class="modal-title" id="myModalLabel">Jump to username @ Placename</h4>
               </div>
               <div class="modal-body">
-                This will teleport you to new location and possibly another domain. Are you sure?
+                This will teleport you to a new location and possibly another domain. Are you sure?
               </div>
               <div class="modal-footer">
                 <input type="button" data-dismiss="modal" value="Cancel">
@@ -297,7 +339,7 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    $("#visibility-toggle").prop("value", myVisibility);
+                    //$("#visibility-toggle").prop("value", myVisibility);
                 }
             }
 

From 8b1161b0b027a3a7bcca9dd3d8401c9a91eb1970 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Wed, 1 Feb 2017 12:32:30 -0800
Subject: [PATCH 15/28] Fix it

---
 interface/resources/qml/hifi/NameCard.qml |  4 ++++
 interface/resources/qml/hifi/Pal.qml      | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml
index 7478ca9c2b..b55b9c517d 100644
--- a/interface/resources/qml/hifi/NameCard.qml
+++ b/interface/resources/qml/hifi/NameCard.qml
@@ -34,6 +34,7 @@ Item {
     property bool isMyCard: false
     property bool selected: false
     property bool isAdmin: false
+    property bool currentlyEditingDisplayName: false
 
     /* User image commented out for now - will probably be re-introduced later.
     Column {
@@ -104,6 +105,7 @@ Item {
                     focus = false
                     myDisplayName.border.width = 0
                     color = hifi.colors.darkGray
+                    currentlyEditingDisplayName = false
                 }
             }
             MouseArea {
@@ -115,10 +117,12 @@ Item {
                     myDisplayNameText.focus ? myDisplayNameText.cursorPosition = myDisplayNameText.positionAt(mouseX, mouseY, TextInput.CursorOnCharacter) : myDisplayNameText.selectAll();
                     myDisplayNameText.focus = true
                     myDisplayNameText.color = "black"
+                    currentlyEditingDisplayName = true
                 }
                 onDoubleClicked: {
                     myDisplayNameText.selectAll();
                     myDisplayNameText.focus = true;
+                    currentlyEditingDisplayName = true
                 }
                 onEntered: myDisplayName.color = hifi.colors.lightGrayText
                 onExited: myDisplayName.color = hifi.colors.textFieldLightBackground
diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml
index f3554727dd..923b09b9ef 100644
--- a/interface/resources/qml/hifi/Pal.qml
+++ b/interface/resources/qml/hifi/Pal.qml
@@ -51,6 +51,7 @@ Rectangle {
 
     // This is the container for the PAL
     Rectangle {
+        property bool punctuationMode: false
         id: palContainer
         // Size
         width: pal.width - 50
@@ -421,6 +422,16 @@ Rectangle {
             onExited: adminHelpText.color = hifi.colors.redHighlight
         }
     }
+    HifiControls.Keyboard {
+        id: keyboard
+        raised: myCard.currentlyEditingDisplayName && HMD.active
+        numeric: parent.punctuationMode
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+    }
     }
     // Timer used when selecting table rows that aren't yet present in the model
     // (i.e. when selecting avatars using edit.js or sphere overlays)

From 9be6fe2192def4a995c971878a199fb96ee732c2 Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Wed, 1 Feb 2017 13:43:44 -0800
Subject: [PATCH 16/28] tablet-ui: Fix for keyboard focus box still being
 visible sometimes

---
 interface/src/Application.cpp | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp
index bb5528e427..fcef0f0f50 100644
--- a/interface/src/Application.cpp
+++ b/interface/src/Application.cpp
@@ -4168,6 +4168,8 @@ void Application::setKeyboardFocusOverlay(unsigned int overlayID) {
                 auto size = overlay->getSize() * FOCUS_HIGHLIGHT_EXPANSION_FACTOR;
                 const float OVERLAY_DEPTH = 0.0105f;
                 setKeyboardFocusHighlight(overlay->getPosition(), overlay->getRotation(), glm::vec3(size.x, size.y, OVERLAY_DEPTH));
+            } else {
+                _keyboardFocusHighlight->setVisible(false);
             }
         }
     }

From 6d55b3c82d83fbdf2e50dcb135850b6d091fedf6 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 13:45:17 -0800
Subject: [PATCH 17/28] visibility toggle drop down

---
 scripts/system/html/users.html | 56 +++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 2a5372fa7b..4b4d625242 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -55,7 +55,7 @@
                 padding-bottom: 40px;
             }
 
-            #visibility-toggle-button {
+            #visibility-toggle {
                 font-family: 'Raleway';
                 font-weight: bold;
                 font-size: 13px;
@@ -73,16 +73,16 @@
                 cursor: pointer;
             }
 
-            #visibility-toggle-button:enabled:hover {
+            #visibility-toggle:enabled:hover {
                 background: linear-gradient(#fff, #fff);
                 border: none;
             }
 
-            #visibility-toggle-button:active {
+            #visibility-toggle:active {
                 background: linear-gradient(#afafaf, #afafaf);
             }
 
-            #visibility-toggle-button span {
+            #visibility-toggle span {
                 padding-left: 10px;
             }
 
@@ -218,6 +218,31 @@
               vertical-align: middle;
             }
 
+            .dropdown-menu {
+                width: 280px;
+            }
+
+            .dropdown-menu li {
+                color: #333;
+                padding: 10px;
+            }
+
+            .dropdown-menu .divider {
+                padding: 0px;
+            }
+
+            .dropdown-menu li:hover {
+                background: #dcdcdc;
+            }
+
+            .dropdown-menu li h6 {
+                font-weight: bold;
+            }
+
+            .dropdown-menu li p {
+                font-size: 11px;
+            }
+
         </style>
     </head>
     <body>
@@ -230,7 +255,28 @@
         <div class="main">
             <div id="user-info-div">
                 <h4>faye @ dev-welcome</h4>
-                <button id="visibility-toggle-button">Online<span class="glyphicon glyphicon-menu-down"></span></button>
+                <div class="dropdown">
+                    <button id="visibility-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Online
+                        <span class="glyphicon glyphicon-menu-down"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="visibility-toggle">
+                        <li>
+                            <h6>Online</h6>
+                            <p>You will be shown online to everyone else. Anybody will be able to find you from the users online list and jump to your current location.</p>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        <li>
+                            <h6>Available to Friends Only</h6>
+                            <p>You will be shown online only to users you have added as friends. Other users may still interact with you in the same domain, but they won't be able to find you from the users online list.</p>
+                        </li>
+                        <li role="separator" class="divider"></li>
+                        <li>
+                            <h6>Appear Offline</h6>
+                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
+                        </li>
+                    </ul>
+                </div>
             </div>
             <ul class="tabs">
                 <li tab-id="tab-1" class="current">Everyone (0)</li>

From 2760065ee160c27214809bebda650e4c6fe18cae Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Wed, 1 Feb 2017 13:51:31 -0800
Subject: [PATCH 18/28] Bug fix for previous commit

---
 interface/src/Application.cpp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/src/Application.cpp b/interface/src/Application.cpp
index fcef0f0f50..af3a449114 100644
--- a/interface/src/Application.cpp
+++ b/interface/src/Application.cpp
@@ -4168,7 +4168,7 @@ void Application::setKeyboardFocusOverlay(unsigned int overlayID) {
                 auto size = overlay->getSize() * FOCUS_HIGHLIGHT_EXPANSION_FACTOR;
                 const float OVERLAY_DEPTH = 0.0105f;
                 setKeyboardFocusHighlight(overlay->getPosition(), overlay->getRotation(), glm::vec3(size.x, size.y, OVERLAY_DEPTH));
-            } else {
+            } else if (_keyboardFocusHighlight) {
                 _keyboardFocusHighlight->setVisible(false);
             }
         }

From 3c3ff908b4abb8ec88ccd242ccd1ca491d6654de Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:22:13 -0800
Subject: [PATCH 19/28] handling the visibility toggle event

---
 scripts/system/html/users.html | 21 +++++++++++++++++----
 scripts/system/tablet-users.js |  7 +++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 4b4d625242..0444437958 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -261,17 +261,17 @@
                         <span class="glyphicon glyphicon-menu-down"></span>
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="visibility-toggle">
-                        <li>
+                        <li class="visibility-option" data-visibility="all">
                             <h6>Online</h6>
                             <p>You will be shown online to everyone else. Anybody will be able to find you from the users online list and jump to your current location.</p>
                         </li>
                         <li role="separator" class="divider"></li>
-                        <li>
+                        <li class="visibility-option" data-visibility="friends">
                             <h6>Available to Friends Only</h6>
                             <p>You will be shown online only to users you have added as friends. Other users may still interact with you in the same domain, but they won't be able to find you from the users online list.</p>
                         </li>
                         <li role="separator" class="divider"></li>
-                        <li>
+                        <li class="visibility-option" data-visibility="none">
                             <h6>Appear Offline</h6>
                             <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
                         </li>
@@ -385,7 +385,7 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    //$("#visibility-toggle").prop("value", myVisibility);
+                    $("#visibility-toggle").html(myVisibility + "<span class='glyphicon glyphicon-menu-down'></span>")
                 }
             }
 
@@ -426,6 +426,19 @@
                     EventBridge.emitWebEvent(JSON.stringify(jumpToObject));
                 });
 
+                // Click listener for toggling who can see me
+                $(".visibility-option").click(function() {
+                    var newButtonText = $(this).find("h6").text();
+                    $("#visibility-toggle").html(newButtonText + "<span class='glyphicon glyphicon-menu-down'></span>");
+                    var visibilityObject = {
+                        "type": "toggle-visibility",
+                        "data": {
+                            "visibility": $(this).data("visibility")
+                        }
+                    }
+                    EventBridge.emitWebEvent(JSON.stringify(visibilityObject));
+                });
+
                 // Listen for events from hifi
                 EventBridge.scriptEventReceived.connect(onScriptEventReceived);
                 
diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
index 5e3b018a53..0fad0c56f3 100644
--- a/scripts/system/tablet-users.js
+++ b/scripts/system/tablet-users.js
@@ -77,6 +77,13 @@
                 location.goToUser(event.data.username);
             }
         }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
+        }
     }
 
     button.clicked.connect(onClicked);

From 9a22055c27cb0b15f506e8f85ab58646a5f0f6ca Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:30:16 -0800
Subject: [PATCH 20/28] initialise the toggle button with correct info

---
 scripts/system/html/users.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 0444437958..7d171110b9 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -385,7 +385,13 @@
                     myVisibility = event.data.visibility;
                     $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
                     $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
-                    $("#visibility-toggle").html(myVisibility + "<span class='glyphicon glyphicon-menu-down'></span>")
+                    var buttonText = "Online";
+                    if (myVisibility === "none") {
+                        buttonText = "Appear Offline";
+                    } else if (myVisibility === "friends") {
+                        buttonText = "Available To Friends Only";
+                    }
+                    $("#visibility-toggle").html(buttonText + "<span class='glyphicon glyphicon-menu-down'></span>")
                 }
             }
 
@@ -428,12 +434,13 @@
 
                 // Click listener for toggling who can see me
                 $(".visibility-option").click(function() {
+                    myVisibility = $(this).data("visibility");
                     var newButtonText = $(this).find("h6").text();
                     $("#visibility-toggle").html(newButtonText + "<span class='glyphicon glyphicon-menu-down'></span>");
                     var visibilityObject = {
                         "type": "toggle-visibility",
                         "data": {
-                            "visibility": $(this).data("visibility")
+                            "visibility": myVisibility
                         }
                     }
                     EventBridge.emitWebEvent(JSON.stringify(visibilityObject));

From ffaf7a10e877b8196e2d8cec500c9e024e19c20d Mon Sep 17 00:00:00 2001
From: "Anthony J. Thibault" <tony@highfidelity.io>
Date: Wed, 1 Feb 2017 14:44:14 -0800
Subject: [PATCH 21/28] tablet-ui: Added 6 pixel deadspot for bringing up the
 tablet in desktop mode.

---
 .../src/input-plugins/KeyboardMouseDevice.cpp      | 14 ++++++++++++--
 .../src/input-plugins/KeyboardMouseDevice.h        |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.cpp b/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.cpp
index 39371cc3e3..3308ba36ab 100755
--- a/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.cpp
+++ b/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.cpp
@@ -73,6 +73,9 @@ void KeyboardMouseDevice::mousePressEvent(QMouseEvent* event) {
     _mousePressTime = usecTimestampNow();
     _mouseMoved = false;
 
+    _mousePressPos = event->pos();
+    _clickDeadspotActive = true;
+
     eraseMouseClicked();
 }
 
@@ -84,9 +87,11 @@ void KeyboardMouseDevice::mouseReleaseEvent(QMouseEvent* event) {
     // input for this button we might want to add some small tolerance to this so if you do a small drag it 
     // still counts as a click.
     static const int CLICK_TIME = USECS_PER_MSEC * 500; // 500 ms to click
-    if (!_mouseMoved && (usecTimestampNow() - _mousePressTime < CLICK_TIME)) {
+    if (_clickDeadspotActive && (usecTimestampNow() - _mousePressTime < CLICK_TIME)) {
         _inputDevice->_buttonPressedMap.insert(_inputDevice->makeInput((Qt::MouseButton) event->button(), true).getChannel());
     }
+
+    _clickDeadspotActive = false;
 }
 
 void KeyboardMouseDevice::eraseMouseClicked() {
@@ -109,9 +114,14 @@ void KeyboardMouseDevice::mouseMoveEvent(QMouseEvent* event) {
     // outside of the application window, because we don't get MouseEvents when the cursor is outside
     // of the application window.
     _lastCursor = currentPos;
+
     _mouseMoved = true;
 
-    eraseMouseClicked();
+    const int CLICK_EVENT_DEADSPOT = 6; // pixels
+    if (_clickDeadspotActive && (_mousePressPos - currentPos).manhattanLength() > CLICK_EVENT_DEADSPOT) {
+        eraseMouseClicked();
+        _clickDeadspotActive = false;
+    }
 }
 
 void KeyboardMouseDevice::wheelEvent(QWheelEvent* event) {
diff --git a/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.h b/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.h
index 399ca4e93d..f38b43c107 100644
--- a/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.h
+++ b/libraries/input-plugins/src/input-plugins/KeyboardMouseDevice.h
@@ -118,8 +118,10 @@ public:
 
 protected:
     QPoint _lastCursor;
+    QPoint _mousePressPos;
     quint64 _mousePressTime;
     bool _mouseMoved;
+    bool _clickDeadspotActive;
     glm::vec2 _lastTouch;
     std::shared_ptr<InputDevice> _inputDevice { std::make_shared<InputDevice>() };
 

From c16a9a955e307dd52133dfcbc3cbd4a28e5d8809 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 14:53:03 -0800
Subject: [PATCH 22/28] display correct username

---
 scripts/system/html/users.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 7d171110b9..94292e1905 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -254,7 +254,7 @@
         </div>
         <div class="main">
             <div id="user-info-div">
-                <h4>faye @ dev-welcome</h4>
+                <h4></h4>
                 <div class="dropdown">
                     <button id="visibility-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         Online
@@ -327,8 +327,9 @@
                         $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
                     } else {
                         $("#dev-div").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
-                        // Don't display yourself
-                        if (data.users[i].username !== myUsername) {
+                        if (data.users[i].username === myUsername) {
+                            $("#user-info-div h4").text(data.users[i].username + " @ " + data.users[i].location.root.name);
+                        } else {
                             console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
                             // Create a list item and put user info in data-* attributes, also make it trigger the jump to confirmation modal
                             $("<li></li>", {
@@ -383,8 +384,7 @@
                 if (event.type === "user-info") {
                     myUsername = event.data.username;
                     myVisibility = event.data.visibility;
-                    $("#dev-div").append("<p>myUsername is " + myUsername + "</p>");
-                    $("#dev-div").append("<p>myVisibility is " + myVisibility + "</p>");
+                    $("#user-info-div h4").text(myUsername);
                     var buttonText = "Online";
                     if (myVisibility === "none") {
                         buttonText = "Appear Offline";

From c24b6e5e5e5e971c8aa8fcfb4e709ccc5569c6c2 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:13:52 -0800
Subject: [PATCH 23/28] missing words

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

diff --git a/scripts/system/html/users.html b/scripts/system/html/users.html
index 94292e1905..c18162ff8a 100644
--- a/scripts/system/html/users.html
+++ b/scripts/system/html/users.html
@@ -273,7 +273,7 @@
                         <li role="separator" class="divider"></li>
                         <li class="visibility-option" data-visibility="none">
                             <h6>Appear Offline</h6>
-                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to your own private domain and set allow entering to no one.</p>
+                            <p>No one will be able to find you from the users online list. However, this does not prevent other users in the same domain from interacting with you. For a complete "Do not disturb" mode, you may want to go to your own private domain and set allow entering to no one.</p>
                         </li>
                     </ul>
                 </div>

From 6bdf50f2dbebaeaae5aa169e45461b46800c6ccb Mon Sep 17 00:00:00 2001
From: samcake <samuel.gateau@gmail.com>
Date: Wed, 1 Feb 2017 15:16:37 -0800
Subject: [PATCH 24/28] moving mip map gen to cpu

---
 libraries/model/src/model/TextureMap.cpp | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/libraries/model/src/model/TextureMap.cpp b/libraries/model/src/model/TextureMap.cpp
index ab96a04f31..1b7f661eb3 100755
--- a/libraries/model/src/model/TextureMap.cpp
+++ b/libraries/model/src/model/TextureMap.cpp
@@ -52,6 +52,7 @@ std::atomic<size_t> DECIMATED_TEXTURE_COUNT { 0 };
 std::atomic<size_t> RECTIFIED_TEXTURE_COUNT { 0 };
 
 QImage processSourceImage(const QImage& srcImage, bool cubemap) {
+    PROFILE_RANGE(resource_parse, "processSourceImage");
     const uvec2 srcImageSize = toGlm(srcImage.size());
     uvec2 targetSize = srcImageSize;
 
@@ -109,6 +110,7 @@ void TextureMap::setLightmapOffsetScale(float offset, float scale) {
 }
 
 const QImage TextureUsage::process2DImageColor(const QImage& srcImage, bool& validAlpha, bool& alphaAsMask) {
+    PROFILE_RANGE(resource_parse, "process2DImageColor");
     QImage image = processSourceImage(srcImage, false);
     validAlpha = false;
     alphaAsMask = true;
@@ -197,10 +199,11 @@ const QImage& image, bool isLinear, bool doCompress) {
     }
 }
 
-#define CPU_MIPMAPS 0
+#define CPU_MIPMAPS 1
 
 void generateMips(gpu::Texture* texture, QImage& image, gpu::Element formatMip) {
 #if CPU_MIPMAPS
+    PROFILE_RANGE(resource_parse, "generateMips");
     auto numMips = texture->evalNumMips();
     for (uint16 level = 1; level < numMips; ++level) {
         QSize mipSize(texture->evalMipWidth(level), texture->evalMipHeight(level));
@@ -214,6 +217,7 @@ void generateMips(gpu::Texture* texture, QImage& image, gpu::Element formatMip)
 
 void generateFaceMips(gpu::Texture* texture, QImage& image, gpu::Element formatMip, uint8 face) {
 #if CPU_MIPMAPS
+    PROFILE_RANGE(resource_parse, "generateFaceMips");
     auto numMips = texture->evalNumMips();
     for (uint16 level = 1; level < numMips; ++level) {
         QSize mipSize(texture->evalMipWidth(level), texture->evalMipHeight(level));
@@ -226,6 +230,7 @@ void generateFaceMips(gpu::Texture* texture, QImage& image, gpu::Element formatM
 }
 
 gpu::Texture* TextureUsage::process2DTextureColorFromImage(const QImage& srcImage, const std::string& srcImageName, bool isLinear, bool doCompress, bool generateMips) {
+    PROFILE_RANGE(resource_parse, "process2DTextureColorFromImage");
     bool validAlpha = false;
     bool alphaAsMask = true;
     QImage image = process2DImageColor(srcImage, validAlpha, alphaAsMask);

From 2340f56b5308ff553de4597fc0d0100f7c54e308 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:26:40 -0800
Subject: [PATCH 25/28] replace old user.js

---
 scripts/system/tablet-users.js |   98 ---
 scripts/system/users.js        | 1306 ++------------------------------
 2 files changed, 62 insertions(+), 1342 deletions(-)
 delete mode 100644 scripts/system/tablet-users.js

diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
deleted file mode 100644
index 0fad0c56f3..0000000000
--- a/scripts/system/tablet-users.js
+++ /dev/null
@@ -1,98 +0,0 @@
-"use strict";
-
-//
-//  users.js
-//
-//  Created by Faye Li on 18 Jan 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
-//
-
-(function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
-
-    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
-    var FRIENDS_WINDOW_WIDTH = 290;
-    var FRIENDS_WINDOW_HEIGHT = 500;
-    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
-
-    // Initialise visibility based on global service
-    var VISIBILITY_VALUES_SET = {};
-    VISIBILITY_VALUES_SET["all"] = true;
-    VISIBILITY_VALUES_SET["friends"] = true;
-    VISIBILITY_VALUES_SET["none"] = true;
-    var myVisibility;
-    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
-        myVisibility = GlobalServices.findableBy;
-    } else {
-        // default to friends if it can't be determined
-        myVisibility = "friends";
-        GlobalServices.findableBy = myVisibilty;
-    }
-
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
-    });
-
-    function onClicked() {
-        tablet.gotoWebScreen(USERS_URL);
-    }
-
-    function onWebEventReceived(event) {
-        print("Script received a web event, its type is " + typeof event);
-        if (typeof event === "string") {
-            event = JSON.parse(event);
-        }
-        if (event.type === "ready") {
-            // send username to html
-            var myUsername = GlobalServices.username;
-            var object = {
-                "type": "user-info",
-                "data": {
-                    "username": myUsername,
-                    "visibility": myVisibility
-                }
-            };
-            tablet.emitScriptEvent(JSON.stringify(object));
-        }
-        if (event.type === "manage-friends") {
-            // open a web overlay to metaverse friends page
-            var friendsWindow = new OverlayWebWindow({
-                title: FRIENDS_WINDOW_TITLE,
-                width: FRIENDS_WINDOW_WIDTH,
-                height: FRIENDS_WINDOW_HEIGHT,
-                visible: false
-            });
-            friendsWindow.setURL(FRIENDS_WINDOW_URL);
-            friendsWindow.setVisible(true);
-            friendsWindow.raise();
-        }
-        if (event.type === "jump-to") {
-            if (typeof event.data.username !== undefined) {
-                // teleport to selected user from the online users list
-                location.goToUser(event.data.username);
-            }
-        }
-        if (event.type === "toggle-visibility") {
-            if (typeof event.data.visibility !== undefined) {
-                // update your visibility (all, friends, or none)
-                myVisibility = event.data.visibility;
-                GlobalServices.findableBy = myVisibility;
-            } 
-        }
-    }
-
-    button.clicked.connect(onClicked);
-    tablet.webEventReceived.connect(onWebEventReceived);
-
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
-    }
-
-    Script.scriptEnding.connect(cleanup);
-}()); // END LOCAL_SCOPE
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 009c446ff3..0fad0c56f3 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,1279 +2,97 @@
 
 //
 //  users.js
-//  examples
 //
-//  Created by David Rowe on 9 Mar 2015.
-//  Copyright 2015 High Fidelity, Inc.
+//  Created by Faye Li on 18 Jan 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
 //
-/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
 
 (function() { // BEGIN LOCAL_SCOPE
-var button;
-var buttonName = "USERS";
-var toolBar = null;
-var tablet = null;
+    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
 
-var MENU_ITEM = "Users Online";
+    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
+    var FRIENDS_WINDOW_WIDTH = 290;
+    var FRIENDS_WINDOW_HEIGHT = 500;
+    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
 
-if (Settings.getValue("HUDUIEnabled")) {
-    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
-    button = toolBar.addButton({
-        objectName: buttonName,
-        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
-        visible: true,
-        alpha: 0.9
-    });
-} else {
-    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    button = tablet.addButton({
-        icon: "icons/tablet-icons/users-i.svg",
-        text: "USERS",
-        isActive: Menu.isOptionChecked(MENU_ITEM)
-    });
-}
-
-
-function onClicked() {
-    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
-    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
-}
-button.clicked.connect(onClicked);
-
-// resolve these paths immediately
-var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
-var BASE_URL = Script.resolvePath("assets/images/tools/");
-
-var PopUpMenu = function (properties) {
-    var value = properties.value,
-        promptOverlay,
-        valueOverlay,
-        buttonOverlay,
-        optionOverlays = [],
-        isDisplayingOptions = false,
-        OPTION_MARGIN = 4,
-
-        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
-        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
-        MIN_MAX_BUTTON_WIDTH = 14,
-        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
-
-    function positionDisplayOptions() {
-        var y,
-            i;
-
-        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
-
-        for (i = 0; i < properties.values.length; i += 1) {
-            Overlays.editOverlay(optionOverlays[i], {
-                y: y
-            });
-            y += properties.lineHeight;
-        }
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
     }
 
-    function showDisplayOptions() {
-        var i,
-            yOffScreen = Controller.getViewportDimensions().y;
-
-        for (i = 0; i < properties.values.length; i += 1) {
-            optionOverlays[i] = Overlays.addOverlay("text", {
-                x: properties.x + properties.promptWidth,
-                y: yOffScreen,
-                width: properties.width - properties.promptWidth,
-                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
-                topMargin: OPTION_MARGIN,
-                leftMargin: OPTION_MARGIN,
-                color: properties.optionColor,
-                alpha: properties.optionAlpha,
-                backgroundColor: properties.popupBackgroundColor,
-                backgroundAlpha: properties.popupBackgroundAlpha,
-                text: properties.displayValues[i],
-                font: properties.font,
-                visible: true
-            });
-        }
-
-        positionDisplayOptions();
-
-        isDisplayingOptions = true;
-    }
-
-    function deleteDisplayOptions() {
-        var i;
-
-        for (i = 0; i < optionOverlays.length; i += 1) {
-            Overlays.deleteOverlay(optionOverlays[i]);
-        }
-
-        isDisplayingOptions = false;
-    }
-
-    function handleClick(overlay) {
-        var clicked = false,
-            i;
-
-        if (overlay === valueOverlay || overlay === buttonOverlay) {
-            showDisplayOptions();
-            return true;
-        }
-
-        if (isDisplayingOptions) {
-            for (i = 0; i < optionOverlays.length; i += 1) {
-                if (overlay === optionOverlays[i]) {
-                    value = properties.values[i];
-                    Overlays.editOverlay(valueOverlay, {
-                        text: properties.displayValues[i]
-                    });
-                    clicked = true;
-                }
-            }
-
-            deleteDisplayOptions();
-        }
-
-        return clicked;
-    }
-
-    function updatePosition(x, y) {
-        properties.x = x;
-        properties.y = y;
-        Overlays.editOverlay(promptOverlay, {
-            x: x,
-            y: y
-        });
-        Overlays.editOverlay(valueOverlay, {
-            x: x + properties.promptWidth,
-            y: y - OPTION_MARGIN
-        });
-        Overlays.editOverlay(buttonOverlay, {
-            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
-            y: y - OPTION_MARGIN + 1
-        });
-        if (isDisplayingOptions) {
-            positionDisplayOptions();
-        }
-    }
-
-    function setVisible(visible) {
-        Overlays.editOverlay(promptOverlay, {
-            visible: visible
-        });
-        Overlays.editOverlay(valueOverlay, {
-            visible: visible
-        });
-        Overlays.editOverlay(buttonOverlay, {
-            visible: visible
-        });
-    }
-
-    function tearDown() {
-        Overlays.deleteOverlay(promptOverlay);
-        Overlays.deleteOverlay(valueOverlay);
-        Overlays.deleteOverlay(buttonOverlay);
-        if (isDisplayingOptions) {
-            deleteDisplayOptions();
-        }
-    }
-
-    function getValue() {
-        return value;
-    }
-
-    function setValue(newValue) {
-        var index;
-
-        index = properties.values.indexOf(newValue);
-        if (index !== -1) {
-            value = newValue;
-            Overlays.editOverlay(valueOverlay, {
-                text: properties.displayValues[index]
-            });
-        }
-    }
-
-    promptOverlay = Overlays.addOverlay("text", {
-        x: properties.x,
-        y: properties.y,
-        width: properties.promptWidth,
-        height: properties.textHeight,
-        topMargin: 0,
-        leftMargin: 0,
-        color: properties.promptColor,
-        alpha: properties.promptAlpha,
-        backgroundColor: properties.promptBackgroundColor,
-        backgroundAlpha: properties.promptBackgroundAlpha,
-        text: properties.prompt,
-        font: properties.font,
-        visible: properties.visible
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        icon: "icons/tablet-icons/people-i.svg",
+        text: "Users"
     });
 
-    valueOverlay = Overlays.addOverlay("text", {
-        x: properties.x + properties.promptWidth,
-        y: properties.y,
-        width: properties.width - properties.promptWidth,
-        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
-        topMargin: OPTION_MARGIN,
-        leftMargin: OPTION_MARGIN,
-        color: properties.optionColor,
-        alpha: properties.optionAlpha,
-        backgroundColor: properties.optionBackgroundColor,
-        backgroundAlpha: properties.optionBackgroundAlpha,
-        text: properties.displayValues[properties.values.indexOf(value)],
-        font: properties.font,
-        visible: properties.visible
-    });
-
-    buttonOverlay = Overlays.addOverlay("image", {
-        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
-        y: properties.y,
-        width: MIN_MAX_BUTTON_WIDTH,
-        height: MIN_MAX_BUTTON_HEIGHT,
-        imageURL: MIN_MAX_BUTTON_SVG,
-        subImage: {
-            x: 0,
-            y: 0,
-            width: MIN_MAX_BUTTON_SVG_WIDTH,
-            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
-        },
-        //color: properties.buttonColor,
-        alpha: properties.buttonAlpha,
-        visible: properties.visible
-    });
-
-    return {
-        updatePosition: updatePosition,
-        setVisible: setVisible,
-        handleClick: handleClick,
-        tearDown: tearDown,
-        getValue: getValue,
-        setValue: setValue
-    };
-};
-
-var usersWindow = (function () {
-
-    var WINDOW_WIDTH = 260,
-        WINDOW_MARGIN = 12,
-        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
-        WINDOW_FONT = {
-            size: 12
-        },
-        WINDOW_FOREGROUND_COLOR = {
-            red: 240,
-            green: 240,
-            blue: 240
-        },
-        WINDOW_FOREGROUND_ALPHA = 0.95,
-        WINDOW_HEADING_COLOR = {
-            red: 180,
-            green: 180,
-            blue: 180
-        },
-        WINDOW_HEADING_ALPHA = 0.95,
-        WINDOW_BACKGROUND_COLOR = {
-            red: 80,
-            green: 80,
-            blue: 80
-        },
-        WINDOW_BACKGROUND_ALPHA = 0.8,
-        windowPane,
-        windowHeading,
-
-        // Margin on the left and right side of the window to keep
-        // it from getting too close to the edge of the screen which
-        // is unclickable.
-        WINDOW_MARGIN_X = 20,
-
-        // Window border is similar to that of edit.js.
-        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
-        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
-        WINDOW_BORDER_RADIUS = 4,
-        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
-        WINDOW_BORDER_ALPHA = 0.5,
-        windowBorder,
-
-        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
-        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
-        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
-        MIN_MAX_BUTTON_WIDTH = 14,
-        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
-        MIN_MAX_BUTTON_COLOR = {
-            red: 255,
-            green: 255,
-            blue: 255
-        },
-        MIN_MAX_BUTTON_ALPHA = 0.9,
-        minimizeButton,
-        SCROLLBAR_BACKGROUND_WIDTH = 12,
-        SCROLLBAR_BACKGROUND_COLOR = {
-            red: 70,
-            green: 70,
-            blue: 70
-        },
-        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
-        scrollbarBackground,
-        SCROLLBAR_BAR_MIN_HEIGHT = 5,
-        SCROLLBAR_BAR_COLOR = {
-            red: 170,
-            green: 170,
-            blue: 170
-        },
-        SCROLLBAR_BAR_ALPHA = 0.8,
-        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
-        scrollbarBar,
-        scrollbarBackgroundHeight,
-        scrollbarBarHeight,
-        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
-        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
-        FRIENDS_BUTTON_SVG_WIDTH = 107,
-        FRIENDS_BUTTON_SVG_HEIGHT = 27,
-        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
-        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
-        FRIENDS_BUTTON_COLOR = {
-            red: 225,
-            green: 225,
-            blue: 225
-        },
-        FRIENDS_BUTTON_ALPHA = 0.95,
-        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
-        FRIENDS_WINDOW_WIDTH = 290,
-        FRIENDS_WINDOW_HEIGHT = 500,
-        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
-        friendsButton,
-        friendsWindow,
-
-        OPTION_BACKGROUND_COLOR = {
-            red: 60,
-            green: 60,
-            blue: 60
-        },
-        OPTION_BACKGROUND_ALPHA = 0.1,
-
-        DISPLAY_SPACER = 12, // Space before display control
-        DISPLAY_PROMPT = "Show me:",
-        DISPLAY_PROMPT_WIDTH = 60,
-        DISPLAY_EVERYONE = "everyone",
-        DISPLAY_FRIENDS = "friends",
-        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
-        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
-        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
-            red: 120,
-            green: 120,
-            blue: 120
-        },
-        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
-        displayControl,
-
-        VISIBILITY_SPACER = 6, // Space before visibility control
-        VISIBILITY_PROMPT = "Visible to:",
-        VISIBILITY_PROMPT_WIDTH = 60,
-        VISIBILITY_ALL = "all",
-        VISIBILITY_FRIENDS = "friends",
-        VISIBILITY_NONE = "none",
-        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
-        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
-        visibilityControl,
-
-        windowHeight,
-        windowBorderHeight,
-        windowTextHeight,
-        windowLineSpacing,
-        windowLineHeight, // = windowTextHeight + windowLineSpacing
-        windowMinimumHeight,
-
-        usersOnline, // Raw users data
-        linesOfUsers = [], // Array of indexes pointing into usersOnline
-        numUsersToDisplay = 0,
-        firstUserToDisplay = 0,
-
-        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
-        API_FRIENDS_FILTER = "&filter=friends",
-        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
-        usersRequest,
-        processUsers,
-        pollUsersTimedOut,
-        usersTimer = null,
-        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
-
-        showMe,
-        myVisibility,
-
-        MENU_NAME = "View",
-        MENU_ITEM = "Users Online",
-        MENU_ITEM_OVERLAYS = "Overlays",
-        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
-
-        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
-        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
-        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
-        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
-        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
-
-        isLoggedIn = false,
-        isVisible = true,
-        isMinimized = false,
-        isBorderVisible = false,
-
-        viewport,
-        isMirrorDisplay = false,
-        isFullscreenMirror = false,
-
-        windowPosition = {},  // Bottom left corner of window pane.
-        isMovingWindow = false,
-        movingClickOffset = { x: 0, y: 0 },
-
-        isUsingScrollbars = false,
-        isMovingScrollbar = false,
-        scrollbarBackgroundPosition = {},
-        scrollbarBarPosition = {},
-        scrollbarBarClickedAt, // 0.0 .. 1.0
-        scrollbarValue = 0.0; // 0.0 .. 1.0
-
-    function isWindowDisabled() {
-        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
+    function onClicked() {
+        tablet.gotoWebScreen(USERS_URL);
     }
 
-    function isValueTrue(value) {
-        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
-        // Being written if refresh script.
-        return value === true || value === "true";
-    }
-
-    function calculateWindowHeight() {
-        var AUDIO_METER_HEIGHT = 52,
-            MIRROR_HEIGHT = 220,
-            nonUsersHeight,
-            maxWindowHeight;
-
-        if (isMinimized) {
-            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
-            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
-            return;
+    function onWebEventReceived(event) {
+        print("Script received a web event, its type is " + typeof event);
+        if (typeof event === "string") {
+            event = JSON.parse(event);
         }
-
-        // Reserve space for title, friends button, and option controls
-        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
-            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
-            DISPLAY_SPACER +
-            windowLineHeight + VISIBILITY_SPACER +
-            windowLineHeight + WINDOW_BASE_MARGIN;
-
-        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
-        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
-        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
-        if (isMirrorDisplay && !isFullscreenMirror) {
-            maxWindowHeight -= MIRROR_HEIGHT;
-        }
-        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
-        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
-
-        // Corresponding number of users to actually display
-        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
-        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
-        if (isUsingScrollbars) {
-            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-        } else {
-            firstUserToDisplay = 0;
-            scrollbarValue = 0.0;
-        }
-    }
-
-    function saturateWindowPosition() {
-        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
-        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
-    }
-
-    function updateOverlayPositions() {
-        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
-        var windowLeft = windowPosition.x,
-            windowTop = windowPosition.y - windowHeight,
-            x,
-            y;
-
-        Overlays.editOverlay(windowBorder, {
-            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
-            y: windowTop - WINDOW_BORDER_TOP_MARGIN
-        });
-        Overlays.editOverlay(windowPane, {
-            x: windowLeft,
-            y: windowTop
-        });
-        Overlays.editOverlay(windowHeading, {
-            x: windowLeft + WINDOW_MARGIN,
-            y: windowTop + WINDOW_MARGIN
-        });
-
-        Overlays.editOverlay(minimizeButton, {
-            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
-            y: windowTop + WINDOW_MARGIN
-        });
-
-        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
-        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
-        Overlays.editOverlay(scrollbarBackground, {
-            x: scrollbarBackgroundPosition.x,
-            y: scrollbarBackgroundPosition.y
-        });
-        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
-            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
-        Overlays.editOverlay(scrollbarBar, {
-            x: scrollbarBackgroundPosition.x + 1,
-            y: scrollbarBarPosition.y
-        });
-
-
-        x = windowLeft + WINDOW_MARGIN;
-        y = windowPosition.y -
-            DISPLAY_SPACER -
-            windowLineHeight - VISIBILITY_SPACER -
-            windowLineHeight - WINDOW_BASE_MARGIN;
-        if (shouldShowFriendsButton()) {
-            y -= FRIENDS_BUTTON_HEIGHT;
-            Overlays.editOverlay(friendsButton, {
-                x: x,
-                y: y
-            });
-            y += FRIENDS_BUTTON_HEIGHT;
-        }
-
-        y += DISPLAY_SPACER;
-        displayControl.updatePosition(x, y);
-
-        y += windowLineHeight + VISIBILITY_SPACER;
-        visibilityControl.updatePosition(x, y);
-    }
-
-    function updateUsersDisplay() {
-        var displayText = "",
-            user,
-            userText,
-            textWidth,
-            maxTextWidth,
-            ellipsisWidth,
-            reducedTextWidth,
-            i;
-
-        if (!isMinimized) {
-            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
-            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
-            reducedTextWidth = maxTextWidth - ellipsisWidth;
-
-            for (i = 0; i < numUsersToDisplay; i += 1) {
-                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
-                userText = user.text;
-                textWidth = user.textWidth;
-
-                if (textWidth > maxTextWidth) {
-                    // Trim and append "..." to fit window width
-                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
-                    while (textWidth > reducedTextWidth) {
-                        userText = userText.slice(0, -1);
-                        textWidth = Overlays.textSize(windowPane, userText).width;
-                    }
-                    userText += "...";
+        if (event.type === "ready") {
+            // send username to html
+            var myUsername = GlobalServices.username;
+            var object = {
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
                 }
-
-                displayText += "\n" + userText;
-            }
-
-            displayText = displayText.slice(1); // Remove leading "\n".
-
-            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
-            Overlays.editOverlay(scrollbarBackground, {
-                height: scrollbarBackgroundHeight,
-                visible: isLoggedIn && isUsingScrollbars
+            };
+            tablet.emitScriptEvent(JSON.stringify(object));
+        }
+        if (event.type === "manage-friends") {
+            // open a web overlay to metaverse friends page
+            var friendsWindow = new OverlayWebWindow({
+                title: FRIENDS_WINDOW_TITLE,
+                width: FRIENDS_WINDOW_WIDTH,
+                height: FRIENDS_WINDOW_HEIGHT,
+                visible: false
             });
-            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
-                SCROLLBAR_BAR_MIN_HEIGHT);
-            Overlays.editOverlay(scrollbarBar, {
-                height: scrollbarBarHeight,
-                visible: isLoggedIn && isUsingScrollbars
-            });
-        }
-
-        Overlays.editOverlay(windowBorder, {
-            height: windowBorderHeight
-        });
-
-        Overlays.editOverlay(windowPane, {
-            height: windowHeight,
-            text: displayText
-        });
-
-        Overlays.editOverlay(windowHeading, {
-            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
-        });
-    }
-
-    function shouldShowFriendsButton() {
-        return isVisible && isLoggedIn && !isMinimized;
-    }
-
-    function updateOverlayVisibility() {
-        Overlays.editOverlay(windowBorder, {
-            visible: isVisible && isBorderVisible
-        });
-        Overlays.editOverlay(windowPane, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(windowHeading, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(minimizeButton, {
-            visible: isVisible
-        });
-        Overlays.editOverlay(scrollbarBackground, {
-            visible: isVisible && isUsingScrollbars && !isMinimized
-        });
-        Overlays.editOverlay(scrollbarBar, {
-            visible: isVisible && isUsingScrollbars && !isMinimized
-        });
-        Overlays.editOverlay(friendsButton, {
-            visible: shouldShowFriendsButton()
-        });
-        displayControl.setVisible(isVisible && !isMinimized);
-        visibilityControl.setVisible(isVisible && !isMinimized);
-    }
-
-    function checkLoggedIn() {
-        var wasLoggedIn = isLoggedIn;
-
-        isLoggedIn = Account.isLoggedIn();
-        if (isLoggedIn !== wasLoggedIn) {
-            if (wasLoggedIn) {
-                setMinimized(true);
-                calculateWindowHeight();
-                updateOverlayPositions();
-                updateUsersDisplay();
-            }
-
-            updateOverlayVisibility();
-        }
-    }
-
-    function pollUsers() {
-        var url = API_URL;
-
-        if (showMe === DISPLAY_FRIENDS) {
-            url += API_FRIENDS_FILTER;
-        }
-
-        usersRequest = new XMLHttpRequest();
-        usersRequest.open("GET", url, true);
-        usersRequest.timeout = HTTP_GET_TIMEOUT;
-        usersRequest.ontimeout = pollUsersTimedOut;
-        usersRequest.onreadystatechange = processUsers;
-        usersRequest.send();
-    }
-
-    processUsers = function () {
-        var response,
-            myUsername,
-            user,
-            userText,
-            i;
-
-        if (usersRequest.readyState === usersRequest.DONE) {
-            if (usersRequest.status === 200) {
-                response = JSON.parse(usersRequest.responseText);
-                if (response.status !== "success") {
-                    print("Error: Request for users status returned status = " + response.status);
-                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                    return;
-                }
-                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
-                    print("Error: Request for users status returned invalid data");
-                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                    return;
-                }
-
-                usersOnline = response.data.users;
-                myUsername = GlobalServices.username;
-                linesOfUsers = [];
-                for (i = 0; i < usersOnline.length; i += 1) {
-                    user = usersOnline[i];
-                    if (user.username !== myUsername && user.online) {
-                        userText = user.username;
-                        if (user.location.root) {
-                            userText += " @ " + user.location.root.name;
-                        }
-
-                        usersOnline[i].text = userText;
-                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
-
-                        linesOfUsers.push(i);
-                    }
-                }
-
-                checkLoggedIn();
-                calculateWindowHeight();
-                updateUsersDisplay();
-                updateOverlayPositions();
-
-            } else {
-                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
-                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-                return;
-            }
-
-            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
-        }
-    };
-
-    pollUsersTimedOut = function () {
-        print("Error: Request for users status timed out");
-        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
-    };
-
-    function setVisible(visible) {
-        isVisible = visible;
-
-        if (isVisible) {
-            if (usersTimer === null) {
-                pollUsers();
-            }
-        } else {
-            Script.clearTimeout(usersTimer);
-            usersTimer = null;
-        }
-
-        updateOverlayVisibility();
-    }
-
-    function setMinimized(minimized) {
-        isMinimized = minimized;
-        Overlays.editOverlay(minimizeButton, {
-            subImage: {
-                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
-            }
-        });
-        updateOverlayVisibility();
-        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
-    }
-
-    function onMenuItemEvent(event) {
-        if (event === MENU_ITEM) {
-            setVisible(Menu.isOptionChecked(MENU_ITEM));
-        }
-    }
-
-    function onFindableByChanged(event) {
-        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
-            myVisibility = event;
-            visibilityControl.setValue(event);
-            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
-        } else {
-            print("Error: Unrecognized onFindableByChanged value: " + event);
-        }
-    }
-
-    function onMousePressEvent(event) {
-        var clickedOverlay,
-            numLinesBefore,
-            overlayX,
-            overlayY,
-            minY,
-            maxY,
-            lineClicked,
-            userClicked,
-            delta;
-
-        if (!isVisible || isWindowDisabled()) {
-            return;
-        }
-
-        clickedOverlay = Overlays.getOverlayAtPoint({
-            x: event.x,
-            y: event.y
-        });
-
-        if (displayControl.handleClick(clickedOverlay)) {
-            if (usersTimer !== null) {
-                Script.clearTimeout(usersTimer);
-                usersTimer = null;
-            }
-            pollUsers();
-            showMe = displayControl.getValue();
-            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
-            return;
-        }
-
-        if (visibilityControl.handleClick(clickedOverlay)) {
-            myVisibility = visibilityControl.getValue();
-            GlobalServices.findableBy = myVisibility;
-            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
-            return;
-        }
-
-        if (clickedOverlay === windowPane) {
-
-            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
-            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
-
-            numLinesBefore = Math.round(overlayY / windowLineHeight);
-            minY = numLinesBefore * windowLineHeight;
-            maxY = minY + windowTextHeight;
-
-            lineClicked = -1;
-            if (minY <= overlayY && overlayY <= maxY) {
-                lineClicked = numLinesBefore;
-            }
-
-            userClicked = firstUserToDisplay + lineClicked;
-
-            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
-                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
-                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
-                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
-            }
-
-            return;
-        }
-
-        if (clickedOverlay === minimizeButton) {
-            setMinimized(!isMinimized);
-            calculateWindowHeight();
-            updateOverlayPositions();
-            updateUsersDisplay();
-            return;
-        }
-
-        if (clickedOverlay === scrollbarBar) {
-            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
-            Overlays.editOverlay(scrollbarBar, {
-                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
-            });
-            isMovingScrollbar = true;
-            return;
-        }
-
-        if (clickedOverlay === scrollbarBackground) {
-            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
-
-            if (event.y < scrollbarBarPosition.y) {
-                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
-            } else {
-                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
-            }
-
-            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-            updateOverlayPositions();
-            updateUsersDisplay();
-            return;
-        }
-
-        if (clickedOverlay === friendsButton) {
-            if (!friendsWindow) {
-                friendsWindow = new OverlayWebWindow({
-                    title: FRIENDS_WINDOW_TITLE,
-                    width: FRIENDS_WINDOW_WIDTH,
-                    height: FRIENDS_WINDOW_HEIGHT,
-                    visible: false
-                });
-            }
             friendsWindow.setURL(FRIENDS_WINDOW_URL);
             friendsWindow.setVisible(true);
             friendsWindow.raise();
-            return;
         }
-
-        if (clickedOverlay === windowBorder) {
-            movingClickOffset = {
-                x: event.x - windowPosition.x,
-                y: event.y - windowPosition.y
-            };
-
-            isMovingWindow = true;
-        }
-    }
-
-    function onMouseMoveEvent(event) {
-        var isVisible;
-
-        if (!isLoggedIn || isWindowDisabled()) {
-            return;
-        }
-
-        if (isMovingScrollbar) {
-            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
-                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
-                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
-                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
-                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
-                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
-                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
-                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
-                updateOverlayPositions();
-                updateUsersDisplay();
-            } else {
-                Overlays.editOverlay(scrollbarBar, {
-                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
-                });
-                isMovingScrollbar = false;
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
             }
         }
-
-        if (isMovingWindow) {
-            windowPosition = {
-                x: event.x - movingClickOffset.x,
-                y: event.y - movingClickOffset.y
-            };
-
-            saturateWindowPosition();
-            calculateWindowHeight();
-            updateOverlayPositions();
-            updateUsersDisplay();
-
-        } else {
-
-            isVisible = isBorderVisible;
-            if (isVisible) {
-                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
-                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
-                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
-                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
-            } else {
-                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
-                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
-            }
-            if (isVisible !== isBorderVisible) {
-                isBorderVisible = isVisible;
-                Overlays.editOverlay(windowBorder, {
-                    visible: isBorderVisible
-                });
-            }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
         }
     }
 
-    function onMouseReleaseEvent() {
-        var offset = {};
+    button.clicked.connect(onClicked);
+    tablet.webEventReceived.connect(onWebEventReceived);
 
-        if (isWindowDisabled()) {
-            return;
-        }
-
-        if (isMovingScrollbar) {
-            Overlays.editOverlay(scrollbarBar, {
-                backgroundAlpha: SCROLLBAR_BAR_ALPHA
-            });
-            isMovingScrollbar = false;
-        }
-
-        if (isMovingWindow) {
-            // Save offset of bottom of window to nearest edge of the window.
-            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
-                windowPosition.x : windowPosition.x - viewport.x;
-            offset.y = (windowPosition.y < viewport.y / 2) ?
-                windowPosition.y : windowPosition.y - viewport.y;
-            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
-            isMovingWindow = false;
-        }
-    }
-
-    function onScriptUpdate() {
-        var oldViewport = viewport,
-            oldIsMirrorDisplay = isMirrorDisplay,
-            oldIsFullscreenMirror = isFullscreenMirror,
-            MIRROR_MENU_ITEM = "Mirror",
-            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
-
-        if (isWindowDisabled()) {
-            return;
-        }
-
-        viewport = Controller.getViewportDimensions();
-        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
-        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
-
-        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
-            isFullscreenMirror !== oldIsFullscreenMirror) {
-            calculateWindowHeight();
-            updateUsersDisplay();
-        }
-
-        if (viewport.y !== oldViewport.y) {
-            if (windowPosition.y > oldViewport.y / 2) {
-                // Maintain position w.r.t. bottom of window.
-                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
-            }
-        }
-
-        if (viewport.x !== oldViewport.x) {
-            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
-                // Maintain position w.r.t. right of window.
-                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
-            }
-        }
-
-        updateOverlayPositions();
-    }
-
-    function setUp() {
-        var textSizeOverlay,
-            offsetSetting,
-            offset = {},
-            hmdViewport;
-
-        textSizeOverlay = Overlays.addOverlay("text", {
-            font: WINDOW_FONT,
-            visible: false
-        });
-        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
-        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
-        windowLineHeight = windowTextHeight + windowLineSpacing;
-        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
-        Overlays.deleteOverlay(textSizeOverlay);
-
-        viewport = Controller.getViewportDimensions();
-
-        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
-        if (offsetSetting !== "") {
-            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
-        }
-        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
-            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
-            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
-        } else {
-            hmdViewport = Controller.getRecommendedOverlayRect();
-            windowPosition = {
-                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
-                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
-            };
-        }
-
-        saturateWindowPosition();
-        calculateWindowHeight();
-
-        windowBorder = Overlays.addOverlay("rectangle", {
-            x: 0,
-            y: viewport.y,   // Start up off-screen
-            width: WINDOW_BORDER_WIDTH,
-            height: windowBorderHeight,
-            radius: WINDOW_BORDER_RADIUS,
-            color: WINDOW_BORDER_COLOR,
-            alpha: WINDOW_BORDER_ALPHA,
-            visible: false
-        });
-
-        windowPane = Overlays.addOverlay("text", {
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH,
-            height: windowHeight,
-            topMargin: WINDOW_MARGIN + windowLineHeight,
-            leftMargin: WINDOW_MARGIN,
-            color: WINDOW_FOREGROUND_COLOR,
-            alpha: WINDOW_FOREGROUND_ALPHA,
-            backgroundColor: WINDOW_BACKGROUND_COLOR,
-            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
-            text: "",
-            font: WINDOW_FONT,
-            visible: false
-        });
-
-        windowHeading = Overlays.addOverlay("text", {
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
-            height: windowTextHeight,
-            topMargin: 0,
-            leftMargin: 0,
-            color: WINDOW_HEADING_COLOR,
-            alpha: WINDOW_HEADING_ALPHA,
-            backgroundAlpha: 0.0,
-            text: "Users online",
-            font: WINDOW_FONT,
-            visible: false
-        });
-
-        minimizeButton = Overlays.addOverlay("image", {
-            x: 0,
-            y: viewport.y,
-            width: MIN_MAX_BUTTON_WIDTH,
-            height: MIN_MAX_BUTTON_HEIGHT,
-            imageURL: MIN_MAX_BUTTON_SVG,
-            subImage: {
-                x: 0,
-                y: 0,
-                width: MIN_MAX_BUTTON_SVG_WIDTH,
-                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
-            },
-            color: MIN_MAX_BUTTON_COLOR,
-            alpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        scrollbarBackgroundPosition = {
-            x: 0,
-            y: viewport.y
-        };
-        scrollbarBackground = Overlays.addOverlay("text", {
-            x: 0,
-            y: scrollbarBackgroundPosition.y,
-            width: SCROLLBAR_BACKGROUND_WIDTH,
-            height: windowTextHeight,
-            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
-            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
-            text: "",
-            visible: false
-        });
-
-        scrollbarBarPosition = {
-            x: 0,
-            y: viewport.y
-        };
-        scrollbarBar = Overlays.addOverlay("text", {
-            x: 0,
-            y: scrollbarBarPosition.y,
-            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
-            height: windowTextHeight,
-            backgroundColor: SCROLLBAR_BAR_COLOR,
-            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
-            text: "",
-            visible: false
-        });
-
-        friendsButton = Overlays.addOverlay("image", {
-            x: 0,
-            y: viewport.y,
-            width: FRIENDS_BUTTON_WIDTH,
-            height: FRIENDS_BUTTON_HEIGHT,
-            imageURL: FRIENDS_BUTTON_SVG,
-            subImage: {
-                x: 0,
-                y: 0,
-                width: FRIENDS_BUTTON_SVG_WIDTH,
-                height: FRIENDS_BUTTON_SVG_HEIGHT
-            },
-            color: FRIENDS_BUTTON_COLOR,
-            alpha: FRIENDS_BUTTON_ALPHA,
-            visible: false
-        });
-
-        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
-        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
-            showMe = DISPLAY_EVERYONE;
-        }
-
-        displayControl = new PopUpMenu({
-            prompt: DISPLAY_PROMPT,
-            value: showMe,
-            values: DISPLAY_VALUES,
-            displayValues: DISPLAY_DISPLAY_VALUES,
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
-            promptWidth: DISPLAY_PROMPT_WIDTH,
-            lineHeight: windowLineHeight,
-            textHeight: windowTextHeight,
-            font: WINDOW_FONT,
-            promptColor: WINDOW_HEADING_COLOR,
-            promptAlpha: WINDOW_HEADING_ALPHA,
-            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
-            promptBackgroundAlpha: 0.0,
-            optionColor: WINDOW_FOREGROUND_COLOR,
-            optionAlpha: WINDOW_FOREGROUND_ALPHA,
-            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
-            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
-            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
-            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
-            buttonColor: MIN_MAX_BUTTON_COLOR,
-            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
-        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
-            myVisibility = VISIBILITY_FRIENDS;
-        }
-        GlobalServices.findableBy = myVisibility;
-
-        visibilityControl = new PopUpMenu({
-            prompt: VISIBILITY_PROMPT,
-            value: myVisibility,
-            values: VISIBILITY_VALUES,
-            displayValues: VISIBILITY_DISPLAY_VALUES,
-            x: 0,
-            y: viewport.y,
-            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
-            promptWidth: VISIBILITY_PROMPT_WIDTH,
-            lineHeight: windowLineHeight,
-            textHeight: windowTextHeight,
-            font: WINDOW_FONT,
-            promptColor: WINDOW_HEADING_COLOR,
-            promptAlpha: WINDOW_HEADING_ALPHA,
-            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
-            promptBackgroundAlpha: 0.0,
-            optionColor: WINDOW_FOREGROUND_COLOR,
-            optionAlpha: WINDOW_FOREGROUND_ALPHA,
-            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
-            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
-            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
-            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
-            buttonColor: MIN_MAX_BUTTON_COLOR,
-            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
-            visible: false
-        });
-
-        Controller.mousePressEvent.connect(onMousePressEvent);
-        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
-        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
-
-        Menu.addMenuItem({
-            menuName: MENU_NAME,
-            menuItemName: MENU_ITEM,
-            afterItem: MENU_ITEM_AFTER,
-            isCheckable: true,
-            isChecked: isVisible
-        });
-        Menu.menuItemEvent.connect(onMenuItemEvent);
-
-        GlobalServices.findableByChanged.connect(onFindableByChanged);
-
-        Script.update.connect(onScriptUpdate);
-
-        pollUsers();
-
-        // Set minimized at end - setup code does not handle `minimized == false` correctly
-        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
-    }
-
-    function tearDown() {
-        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
-
-        Script.clearTimeout(usersTimer);
-        Overlays.deleteOverlay(windowBorder);
-        Overlays.deleteOverlay(windowPane);
-        Overlays.deleteOverlay(windowHeading);
-        Overlays.deleteOverlay(minimizeButton);
-        Overlays.deleteOverlay(scrollbarBackground);
-        Overlays.deleteOverlay(scrollbarBar);
-        Overlays.deleteOverlay(friendsButton);
-        displayControl.tearDown();
-        visibilityControl.tearDown();
-    }
-
-    setUp();
-    Script.scriptEnding.connect(tearDown);
-}());
-
-function cleanup () {
-    //remove tablet button
-    button.clicked.disconnect(onClicked);
-    if (tablet) {
+    function cleanup() {
+        button.clicked.disconnect(onClicked);
         tablet.removeButton(button);
     }
-    if (toolBar) {
-        toolBar.removeButton(buttonName);
-    }
-}
-Script.scriptEnding.connect(cleanup);
 
+    Script.scriptEnding.connect(cleanup);
 }()); // END LOCAL_SCOPE

From 80c8748046aa5bc0ea1128c181ca7ccafaae7410 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:37:01 -0800
Subject: [PATCH 26/28] Revert "replace old user.js"

This reverts commit 2340f56b5308ff553de4597fc0d0100f7c54e308.
---
 scripts/system/tablet-users.js |   98 +++
 scripts/system/users.js        | 1308 ++++++++++++++++++++++++++++++--
 2 files changed, 1343 insertions(+), 63 deletions(-)
 create mode 100644 scripts/system/tablet-users.js

diff --git a/scripts/system/tablet-users.js b/scripts/system/tablet-users.js
new file mode 100644
index 0000000000..0fad0c56f3
--- /dev/null
+++ b/scripts/system/tablet-users.js
@@ -0,0 +1,98 @@
+"use strict";
+
+//
+//  users.js
+//
+//  Created by Faye Li on 18 Jan 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
+//
+
+(function() { // BEGIN LOCAL_SCOPE
+    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+
+    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
+    var FRIENDS_WINDOW_WIDTH = 290;
+    var FRIENDS_WINDOW_HEIGHT = 500;
+    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+
+    // Initialise visibility based on global service
+    var VISIBILITY_VALUES_SET = {};
+    VISIBILITY_VALUES_SET["all"] = true;
+    VISIBILITY_VALUES_SET["friends"] = true;
+    VISIBILITY_VALUES_SET["none"] = true;
+    var myVisibility;
+    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
+        myVisibility = GlobalServices.findableBy;
+    } else {
+        // default to friends if it can't be determined
+        myVisibility = "friends";
+        GlobalServices.findableBy = myVisibilty;
+    }
+
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        icon: "icons/tablet-icons/people-i.svg",
+        text: "Users"
+    });
+
+    function onClicked() {
+        tablet.gotoWebScreen(USERS_URL);
+    }
+
+    function onWebEventReceived(event) {
+        print("Script received a web event, its type is " + typeof event);
+        if (typeof event === "string") {
+            event = JSON.parse(event);
+        }
+        if (event.type === "ready") {
+            // send username to html
+            var myUsername = GlobalServices.username;
+            var object = {
+                "type": "user-info",
+                "data": {
+                    "username": myUsername,
+                    "visibility": myVisibility
+                }
+            };
+            tablet.emitScriptEvent(JSON.stringify(object));
+        }
+        if (event.type === "manage-friends") {
+            // open a web overlay to metaverse friends page
+            var friendsWindow = new OverlayWebWindow({
+                title: FRIENDS_WINDOW_TITLE,
+                width: FRIENDS_WINDOW_WIDTH,
+                height: FRIENDS_WINDOW_HEIGHT,
+                visible: false
+            });
+            friendsWindow.setURL(FRIENDS_WINDOW_URL);
+            friendsWindow.setVisible(true);
+            friendsWindow.raise();
+        }
+        if (event.type === "jump-to") {
+            if (typeof event.data.username !== undefined) {
+                // teleport to selected user from the online users list
+                location.goToUser(event.data.username);
+            }
+        }
+        if (event.type === "toggle-visibility") {
+            if (typeof event.data.visibility !== undefined) {
+                // update your visibility (all, friends, or none)
+                myVisibility = event.data.visibility;
+                GlobalServices.findableBy = myVisibility;
+            } 
+        }
+    }
+
+    button.clicked.connect(onClicked);
+    tablet.webEventReceived.connect(onWebEventReceived);
+
+    function cleanup() {
+        button.clicked.disconnect(onClicked);
+        tablet.removeButton(button);
+    }
+
+    Script.scriptEnding.connect(cleanup);
+}()); // END LOCAL_SCOPE
diff --git a/scripts/system/users.js b/scripts/system/users.js
index 0fad0c56f3..009c446ff3 100644
--- a/scripts/system/users.js
+++ b/scripts/system/users.js
@@ -2,97 +2,1279 @@
 
 //
 //  users.js
+//  examples
 //
-//  Created by Faye Li on 18 Jan 2017.
-//  Copyright 2017 High Fidelity, Inc.
+//  Created by David Rowe on 9 Mar 2015.
+//  Copyright 2015 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
 //
+/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
 
 (function() { // BEGIN LOCAL_SCOPE
-    var USERS_URL = "https://hifi-content.s3.amazonaws.com/faye/tablet-dev/users.html";
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
 
-    var FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends";
-    var FRIENDS_WINDOW_WIDTH = 290;
-    var FRIENDS_WINDOW_HEIGHT = 500;
-    var FRIENDS_WINDOW_TITLE = "Add/Remove Friends";
+var MENU_ITEM = "Users Online";
 
-    // Initialise visibility based on global service
-    var VISIBILITY_VALUES_SET = {};
-    VISIBILITY_VALUES_SET["all"] = true;
-    VISIBILITY_VALUES_SET["friends"] = true;
-    VISIBILITY_VALUES_SET["none"] = true;
-    var myVisibility;
-    if (GlobalServices.findableBy in VISIBILITY_VALUES_SET) {
-        myVisibility = GlobalServices.findableBy;
-    } else {
-        // default to friends if it can't be determined
-        myVisibility = "friends";
-        GlobalServices.findableBy = myVisibilty;
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/users-i.svg",
+        text: "USERS",
+        isActive: Menu.isOptionChecked(MENU_ITEM)
+    });
+}
+
+
+function onClicked() {
+    Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
+    button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
+}
+button.clicked.connect(onClicked);
+
+// resolve these paths immediately
+var MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg");
+var BASE_URL = Script.resolvePath("assets/images/tools/");
+
+var PopUpMenu = function (properties) {
+    var value = properties.value,
+        promptOverlay,
+        valueOverlay,
+        buttonOverlay,
+        optionOverlays = [],
+        isDisplayingOptions = false,
+        OPTION_MARGIN = 4,
+
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH;
+
+    function positionDisplayOptions() {
+        var y,
+            i;
+
+        y = properties.y - (properties.values.length - 1) * properties.lineHeight - OPTION_MARGIN;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            Overlays.editOverlay(optionOverlays[i], {
+                y: y
+            });
+            y += properties.lineHeight;
+        }
     }
 
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var button = tablet.addButton({
-        icon: "icons/tablet-icons/people-i.svg",
-        text: "Users"
+    function showDisplayOptions() {
+        var i,
+            yOffScreen = Controller.getViewportDimensions().y;
+
+        for (i = 0; i < properties.values.length; i += 1) {
+            optionOverlays[i] = Overlays.addOverlay("text", {
+                x: properties.x + properties.promptWidth,
+                y: yOffScreen,
+                width: properties.width - properties.promptWidth,
+                height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+                topMargin: OPTION_MARGIN,
+                leftMargin: OPTION_MARGIN,
+                color: properties.optionColor,
+                alpha: properties.optionAlpha,
+                backgroundColor: properties.popupBackgroundColor,
+                backgroundAlpha: properties.popupBackgroundAlpha,
+                text: properties.displayValues[i],
+                font: properties.font,
+                visible: true
+            });
+        }
+
+        positionDisplayOptions();
+
+        isDisplayingOptions = true;
+    }
+
+    function deleteDisplayOptions() {
+        var i;
+
+        for (i = 0; i < optionOverlays.length; i += 1) {
+            Overlays.deleteOverlay(optionOverlays[i]);
+        }
+
+        isDisplayingOptions = false;
+    }
+
+    function handleClick(overlay) {
+        var clicked = false,
+            i;
+
+        if (overlay === valueOverlay || overlay === buttonOverlay) {
+            showDisplayOptions();
+            return true;
+        }
+
+        if (isDisplayingOptions) {
+            for (i = 0; i < optionOverlays.length; i += 1) {
+                if (overlay === optionOverlays[i]) {
+                    value = properties.values[i];
+                    Overlays.editOverlay(valueOverlay, {
+                        text: properties.displayValues[i]
+                    });
+                    clicked = true;
+                }
+            }
+
+            deleteDisplayOptions();
+        }
+
+        return clicked;
+    }
+
+    function updatePosition(x, y) {
+        properties.x = x;
+        properties.y = y;
+        Overlays.editOverlay(promptOverlay, {
+            x: x,
+            y: y
+        });
+        Overlays.editOverlay(valueOverlay, {
+            x: x + properties.promptWidth,
+            y: y - OPTION_MARGIN
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            x: x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+            y: y - OPTION_MARGIN + 1
+        });
+        if (isDisplayingOptions) {
+            positionDisplayOptions();
+        }
+    }
+
+    function setVisible(visible) {
+        Overlays.editOverlay(promptOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(valueOverlay, {
+            visible: visible
+        });
+        Overlays.editOverlay(buttonOverlay, {
+            visible: visible
+        });
+    }
+
+    function tearDown() {
+        Overlays.deleteOverlay(promptOverlay);
+        Overlays.deleteOverlay(valueOverlay);
+        Overlays.deleteOverlay(buttonOverlay);
+        if (isDisplayingOptions) {
+            deleteDisplayOptions();
+        }
+    }
+
+    function getValue() {
+        return value;
+    }
+
+    function setValue(newValue) {
+        var index;
+
+        index = properties.values.indexOf(newValue);
+        if (index !== -1) {
+            value = newValue;
+            Overlays.editOverlay(valueOverlay, {
+                text: properties.displayValues[index]
+            });
+        }
+    }
+
+    promptOverlay = Overlays.addOverlay("text", {
+        x: properties.x,
+        y: properties.y,
+        width: properties.promptWidth,
+        height: properties.textHeight,
+        topMargin: 0,
+        leftMargin: 0,
+        color: properties.promptColor,
+        alpha: properties.promptAlpha,
+        backgroundColor: properties.promptBackgroundColor,
+        backgroundAlpha: properties.promptBackgroundAlpha,
+        text: properties.prompt,
+        font: properties.font,
+        visible: properties.visible
     });
 
-    function onClicked() {
-        tablet.gotoWebScreen(USERS_URL);
+    valueOverlay = Overlays.addOverlay("text", {
+        x: properties.x + properties.promptWidth,
+        y: properties.y,
+        width: properties.width - properties.promptWidth,
+        height: properties.textHeight + OPTION_MARGIN, // Only need to add margin at top to balance descenders
+        topMargin: OPTION_MARGIN,
+        leftMargin: OPTION_MARGIN,
+        color: properties.optionColor,
+        alpha: properties.optionAlpha,
+        backgroundColor: properties.optionBackgroundColor,
+        backgroundAlpha: properties.optionBackgroundAlpha,
+        text: properties.displayValues[properties.values.indexOf(value)],
+        font: properties.font,
+        visible: properties.visible
+    });
+
+    buttonOverlay = Overlays.addOverlay("image", {
+        x: properties.x + properties.width - MIN_MAX_BUTTON_WIDTH - 1,
+        y: properties.y,
+        width: MIN_MAX_BUTTON_WIDTH,
+        height: MIN_MAX_BUTTON_HEIGHT,
+        imageURL: MIN_MAX_BUTTON_SVG,
+        subImage: {
+            x: 0,
+            y: 0,
+            width: MIN_MAX_BUTTON_SVG_WIDTH,
+            height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+        },
+        //color: properties.buttonColor,
+        alpha: properties.buttonAlpha,
+        visible: properties.visible
+    });
+
+    return {
+        updatePosition: updatePosition,
+        setVisible: setVisible,
+        handleClick: handleClick,
+        tearDown: tearDown,
+        getValue: getValue,
+        setValue: setValue
+    };
+};
+
+var usersWindow = (function () {
+
+    var WINDOW_WIDTH = 260,
+        WINDOW_MARGIN = 12,
+        WINDOW_BASE_MARGIN = 24, // A little less is needed in order look correct
+        WINDOW_FONT = {
+            size: 12
+        },
+        WINDOW_FOREGROUND_COLOR = {
+            red: 240,
+            green: 240,
+            blue: 240
+        },
+        WINDOW_FOREGROUND_ALPHA = 0.95,
+        WINDOW_HEADING_COLOR = {
+            red: 180,
+            green: 180,
+            blue: 180
+        },
+        WINDOW_HEADING_ALPHA = 0.95,
+        WINDOW_BACKGROUND_COLOR = {
+            red: 80,
+            green: 80,
+            blue: 80
+        },
+        WINDOW_BACKGROUND_ALPHA = 0.8,
+        windowPane,
+        windowHeading,
+
+        // Margin on the left and right side of the window to keep
+        // it from getting too close to the edge of the screen which
+        // is unclickable.
+        WINDOW_MARGIN_X = 20,
+
+        // Window border is similar to that of edit.js.
+        WINDOW_MARGIN_HALF = WINDOW_MARGIN / 2,
+        WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_LEFT_MARGIN = WINDOW_MARGIN_HALF,
+        WINDOW_BORDER_RADIUS = 4,
+        WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 },
+        WINDOW_BORDER_ALPHA = 0.5,
+        windowBorder,
+
+        MIN_MAX_BUTTON_SVG = BASE_URL + "min-max-toggle.svg",
+        MIN_MAX_BUTTON_SVG_WIDTH = 17.1,
+        MIN_MAX_BUTTON_SVG_HEIGHT = 32.5,
+        MIN_MAX_BUTTON_WIDTH = 14,
+        MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH,
+        MIN_MAX_BUTTON_COLOR = {
+            red: 255,
+            green: 255,
+            blue: 255
+        },
+        MIN_MAX_BUTTON_ALPHA = 0.9,
+        minimizeButton,
+        SCROLLBAR_BACKGROUND_WIDTH = 12,
+        SCROLLBAR_BACKGROUND_COLOR = {
+            red: 70,
+            green: 70,
+            blue: 70
+        },
+        SCROLLBAR_BACKGROUND_ALPHA = 0.8,
+        scrollbarBackground,
+        SCROLLBAR_BAR_MIN_HEIGHT = 5,
+        SCROLLBAR_BAR_COLOR = {
+            red: 170,
+            green: 170,
+            blue: 170
+        },
+        SCROLLBAR_BAR_ALPHA = 0.8,
+        SCROLLBAR_BAR_SELECTED_ALPHA = 0.95,
+        scrollbarBar,
+        scrollbarBackgroundHeight,
+        scrollbarBarHeight,
+        FRIENDS_BUTTON_SPACER = 6, // Space before add/remove friends button
+        FRIENDS_BUTTON_SVG = BASE_URL + "add-remove-friends.svg",
+        FRIENDS_BUTTON_SVG_WIDTH = 107,
+        FRIENDS_BUTTON_SVG_HEIGHT = 27,
+        FRIENDS_BUTTON_WIDTH = FRIENDS_BUTTON_SVG_WIDTH,
+        FRIENDS_BUTTON_HEIGHT = FRIENDS_BUTTON_SVG_HEIGHT,
+        FRIENDS_BUTTON_COLOR = {
+            red: 225,
+            green: 225,
+            blue: 225
+        },
+        FRIENDS_BUTTON_ALPHA = 0.95,
+        FRIENDS_WINDOW_URL = "https://metaverse.highfidelity.com/user/friends",
+        FRIENDS_WINDOW_WIDTH = 290,
+        FRIENDS_WINDOW_HEIGHT = 500,
+        FRIENDS_WINDOW_TITLE = "Add/Remove Friends",
+        friendsButton,
+        friendsWindow,
+
+        OPTION_BACKGROUND_COLOR = {
+            red: 60,
+            green: 60,
+            blue: 60
+        },
+        OPTION_BACKGROUND_ALPHA = 0.1,
+
+        DISPLAY_SPACER = 12, // Space before display control
+        DISPLAY_PROMPT = "Show me:",
+        DISPLAY_PROMPT_WIDTH = 60,
+        DISPLAY_EVERYONE = "everyone",
+        DISPLAY_FRIENDS = "friends",
+        DISPLAY_VALUES = [DISPLAY_EVERYONE, DISPLAY_FRIENDS],
+        DISPLAY_DISPLAY_VALUES = DISPLAY_VALUES,
+        DISPLAY_OPTIONS_BACKGROUND_COLOR = {
+            red: 120,
+            green: 120,
+            blue: 120
+        },
+        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.9,
+        displayControl,
+
+        VISIBILITY_SPACER = 6, // Space before visibility control
+        VISIBILITY_PROMPT = "Visible to:",
+        VISIBILITY_PROMPT_WIDTH = 60,
+        VISIBILITY_ALL = "all",
+        VISIBILITY_FRIENDS = "friends",
+        VISIBILITY_NONE = "none",
+        VISIBILITY_VALUES = [VISIBILITY_ALL, VISIBILITY_FRIENDS, VISIBILITY_NONE],
+        VISIBILITY_DISPLAY_VALUES = ["everyone", "friends", "no one"],
+        visibilityControl,
+
+        windowHeight,
+        windowBorderHeight,
+        windowTextHeight,
+        windowLineSpacing,
+        windowLineHeight, // = windowTextHeight + windowLineSpacing
+        windowMinimumHeight,
+
+        usersOnline, // Raw users data
+        linesOfUsers = [], // Array of indexes pointing into usersOnline
+        numUsersToDisplay = 0,
+        firstUserToDisplay = 0,
+
+        API_URL = "https://metaverse.highfidelity.com/api/v1/users?status=online",
+        API_FRIENDS_FILTER = "&filter=friends",
+        HTTP_GET_TIMEOUT = 60000, // ms = 1 minute
+        usersRequest,
+        processUsers,
+        pollUsersTimedOut,
+        usersTimer = null,
+        USERS_UPDATE_TIMEOUT = 5000, // ms = 5s
+
+        showMe,
+        myVisibility,
+
+        MENU_NAME = "View",
+        MENU_ITEM = "Users Online",
+        MENU_ITEM_OVERLAYS = "Overlays",
+        MENU_ITEM_AFTER = MENU_ITEM_OVERLAYS,
+
+        SETTING_USERS_SHOW_ME = "UsersWindow.ShowMe",
+        SETTING_USERS_VISIBLE_TO = "UsersWindow.VisibleTo",
+        SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized",
+        SETTING_USERS_WINDOW_OFFSET = "UsersWindow.Offset",
+        // +ve x, y values are offset from left, top of screen; -ve from right, bottom.
+
+        isLoggedIn = false,
+        isVisible = true,
+        isMinimized = false,
+        isBorderVisible = false,
+
+        viewport,
+        isMirrorDisplay = false,
+        isFullscreenMirror = false,
+
+        windowPosition = {},  // Bottom left corner of window pane.
+        isMovingWindow = false,
+        movingClickOffset = { x: 0, y: 0 },
+
+        isUsingScrollbars = false,
+        isMovingScrollbar = false,
+        scrollbarBackgroundPosition = {},
+        scrollbarBarPosition = {},
+        scrollbarBarClickedAt, // 0.0 .. 1.0
+        scrollbarValue = 0.0; // 0.0 .. 1.0
+
+    function isWindowDisabled() {
+        return !Menu.isOptionChecked(MENU_ITEM) || !Menu.isOptionChecked(MENU_ITEM_OVERLAYS);
     }
 
-    function onWebEventReceived(event) {
-        print("Script received a web event, its type is " + typeof event);
-        if (typeof event === "string") {
-            event = JSON.parse(event);
+    function isValueTrue(value) {
+        // Work around Boolean Settings values being read as string when Interface starts up but as Booleans when re-read after
+        // Being written if refresh script.
+        return value === true || value === "true";
+    }
+
+    function calculateWindowHeight() {
+        var AUDIO_METER_HEIGHT = 52,
+            MIRROR_HEIGHT = 220,
+            nonUsersHeight,
+            maxWindowHeight;
+
+        if (isMinimized) {
+            windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+            windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+            return;
         }
-        if (event.type === "ready") {
-            // send username to html
-            var myUsername = GlobalServices.username;
-            var object = {
-                "type": "user-info",
-                "data": {
-                    "username": myUsername,
-                    "visibility": myVisibility
-                }
-            };
-            tablet.emitScriptEvent(JSON.stringify(object));
+
+        // Reserve space for title, friends button, and option controls
+        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
+            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
+            DISPLAY_SPACER +
+            windowLineHeight + VISIBILITY_SPACER +
+            windowLineHeight + WINDOW_BASE_MARGIN;
+
+        // Limit window to height of viewport above window position minus VU meter and mirror if displayed
+        windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
+        maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT;
+        if (isMirrorDisplay && !isFullscreenMirror) {
+            maxWindowHeight -= MIRROR_HEIGHT;
         }
-        if (event.type === "manage-friends") {
-            // open a web overlay to metaverse friends page
-            var friendsWindow = new OverlayWebWindow({
-                title: FRIENDS_WINDOW_TITLE,
-                width: FRIENDS_WINDOW_WIDTH,
-                height: FRIENDS_WINDOW_HEIGHT,
-                visible: false
+        windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
+        windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN;
+
+        // Corresponding number of users to actually display
+        numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
+        isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
+        if (isUsingScrollbars) {
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+        } else {
+            firstUserToDisplay = 0;
+            scrollbarValue = 0.0;
+        }
+    }
+
+    function saturateWindowPosition() {
+        windowPosition.x = Math.max(WINDOW_MARGIN_X, Math.min(viewport.x - WINDOW_WIDTH - WINDOW_MARGIN_X, windowPosition.x));
+        windowPosition.y = Math.max(windowMinimumHeight, Math.min(viewport.y, windowPosition.y));
+    }
+
+    function updateOverlayPositions() {
+        // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay.
+        var windowLeft = windowPosition.x,
+            windowTop = windowPosition.y - windowHeight,
+            x,
+            y;
+
+        Overlays.editOverlay(windowBorder, {
+            x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN,
+            y: windowTop - WINDOW_BORDER_TOP_MARGIN
+        });
+        Overlays.editOverlay(windowPane, {
+            x: windowLeft,
+            y: windowTop
+        });
+        Overlays.editOverlay(windowHeading, {
+            x: windowLeft + WINDOW_MARGIN,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        Overlays.editOverlay(minimizeButton, {
+            x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH,
+            y: windowTop + WINDOW_MARGIN
+        });
+
+        scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH;
+        scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight;
+        Overlays.editOverlay(scrollbarBackground, {
+            x: scrollbarBackgroundPosition.x,
+            y: scrollbarBackgroundPosition.y
+        });
+        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
+            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+        Overlays.editOverlay(scrollbarBar, {
+            x: scrollbarBackgroundPosition.x + 1,
+            y: scrollbarBarPosition.y
+        });
+
+
+        x = windowLeft + WINDOW_MARGIN;
+        y = windowPosition.y -
+            DISPLAY_SPACER -
+            windowLineHeight - VISIBILITY_SPACER -
+            windowLineHeight - WINDOW_BASE_MARGIN;
+        if (shouldShowFriendsButton()) {
+            y -= FRIENDS_BUTTON_HEIGHT;
+            Overlays.editOverlay(friendsButton, {
+                x: x,
+                y: y
             });
+            y += FRIENDS_BUTTON_HEIGHT;
+        }
+
+        y += DISPLAY_SPACER;
+        displayControl.updatePosition(x, y);
+
+        y += windowLineHeight + VISIBILITY_SPACER;
+        visibilityControl.updatePosition(x, y);
+    }
+
+    function updateUsersDisplay() {
+        var displayText = "",
+            user,
+            userText,
+            textWidth,
+            maxTextWidth,
+            ellipsisWidth,
+            reducedTextWidth,
+            i;
+
+        if (!isMinimized) {
+            maxTextWidth = WINDOW_WIDTH - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH : 0) - 2 * WINDOW_MARGIN;
+            ellipsisWidth = Overlays.textSize(windowPane, "...").width;
+            reducedTextWidth = maxTextWidth - ellipsisWidth;
+
+            for (i = 0; i < numUsersToDisplay; i += 1) {
+                user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
+                userText = user.text;
+                textWidth = user.textWidth;
+
+                if (textWidth > maxTextWidth) {
+                    // Trim and append "..." to fit window width
+                    maxTextWidth = maxTextWidth - Overlays.textSize(windowPane, "...").width;
+                    while (textWidth > reducedTextWidth) {
+                        userText = userText.slice(0, -1);
+                        textWidth = Overlays.textSize(windowPane, userText).width;
+                    }
+                    userText += "...";
+                }
+
+                displayText += "\n" + userText;
+            }
+
+            displayText = displayText.slice(1); // Remove leading "\n".
+
+            scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
+            Overlays.editOverlay(scrollbarBackground, {
+                height: scrollbarBackgroundHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+            scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
+                SCROLLBAR_BAR_MIN_HEIGHT);
+            Overlays.editOverlay(scrollbarBar, {
+                height: scrollbarBarHeight,
+                visible: isLoggedIn && isUsingScrollbars
+            });
+        }
+
+        Overlays.editOverlay(windowBorder, {
+            height: windowBorderHeight
+        });
+
+        Overlays.editOverlay(windowPane, {
+            height: windowHeight,
+            text: displayText
+        });
+
+        Overlays.editOverlay(windowHeading, {
+            text: isLoggedIn ? (linesOfUsers.length > 0 ? "Users online" : "No users online") : "Users online - log in to view"
+        });
+    }
+
+    function shouldShowFriendsButton() {
+        return isVisible && isLoggedIn && !isMinimized;
+    }
+
+    function updateOverlayVisibility() {
+        Overlays.editOverlay(windowBorder, {
+            visible: isVisible && isBorderVisible
+        });
+        Overlays.editOverlay(windowPane, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(windowHeading, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(minimizeButton, {
+            visible: isVisible
+        });
+        Overlays.editOverlay(scrollbarBackground, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(scrollbarBar, {
+            visible: isVisible && isUsingScrollbars && !isMinimized
+        });
+        Overlays.editOverlay(friendsButton, {
+            visible: shouldShowFriendsButton()
+        });
+        displayControl.setVisible(isVisible && !isMinimized);
+        visibilityControl.setVisible(isVisible && !isMinimized);
+    }
+
+    function checkLoggedIn() {
+        var wasLoggedIn = isLoggedIn;
+
+        isLoggedIn = Account.isLoggedIn();
+        if (isLoggedIn !== wasLoggedIn) {
+            if (wasLoggedIn) {
+                setMinimized(true);
+                calculateWindowHeight();
+                updateOverlayPositions();
+                updateUsersDisplay();
+            }
+
+            updateOverlayVisibility();
+        }
+    }
+
+    function pollUsers() {
+        var url = API_URL;
+
+        if (showMe === DISPLAY_FRIENDS) {
+            url += API_FRIENDS_FILTER;
+        }
+
+        usersRequest = new XMLHttpRequest();
+        usersRequest.open("GET", url, true);
+        usersRequest.timeout = HTTP_GET_TIMEOUT;
+        usersRequest.ontimeout = pollUsersTimedOut;
+        usersRequest.onreadystatechange = processUsers;
+        usersRequest.send();
+    }
+
+    processUsers = function () {
+        var response,
+            myUsername,
+            user,
+            userText,
+            i;
+
+        if (usersRequest.readyState === usersRequest.DONE) {
+            if (usersRequest.status === 200) {
+                response = JSON.parse(usersRequest.responseText);
+                if (response.status !== "success") {
+                    print("Error: Request for users status returned status = " + response.status);
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+                if (!response.hasOwnProperty("data") || !response.data.hasOwnProperty("users")) {
+                    print("Error: Request for users status returned invalid data");
+                    usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                    return;
+                }
+
+                usersOnline = response.data.users;
+                myUsername = GlobalServices.username;
+                linesOfUsers = [];
+                for (i = 0; i < usersOnline.length; i += 1) {
+                    user = usersOnline[i];
+                    if (user.username !== myUsername && user.online) {
+                        userText = user.username;
+                        if (user.location.root) {
+                            userText += " @ " + user.location.root.name;
+                        }
+
+                        usersOnline[i].text = userText;
+                        usersOnline[i].textWidth = Overlays.textSize(windowPane, userText).width;
+
+                        linesOfUsers.push(i);
+                    }
+                }
+
+                checkLoggedIn();
+                calculateWindowHeight();
+                updateUsersDisplay();
+                updateOverlayPositions();
+
+            } else {
+                print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
+                usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+                return;
+            }
+
+            usersTimer = Script.setTimeout(pollUsers, USERS_UPDATE_TIMEOUT); // Update after finished processing.
+        }
+    };
+
+    pollUsersTimedOut = function () {
+        print("Error: Request for users status timed out");
+        usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay.
+    };
+
+    function setVisible(visible) {
+        isVisible = visible;
+
+        if (isVisible) {
+            if (usersTimer === null) {
+                pollUsers();
+            }
+        } else {
+            Script.clearTimeout(usersTimer);
+            usersTimer = null;
+        }
+
+        updateOverlayVisibility();
+    }
+
+    function setMinimized(minimized) {
+        isMinimized = minimized;
+        Overlays.editOverlay(minimizeButton, {
+            subImage: {
+                y: isMinimized ? MIN_MAX_BUTTON_SVG_HEIGHT / 2 : 0
+            }
+        });
+        updateOverlayVisibility();
+        Settings.setValue(SETTING_USERS_WINDOW_MINIMIZED, isMinimized);
+    }
+
+    function onMenuItemEvent(event) {
+        if (event === MENU_ITEM) {
+            setVisible(Menu.isOptionChecked(MENU_ITEM));
+        }
+    }
+
+    function onFindableByChanged(event) {
+        if (VISIBILITY_VALUES.indexOf(event) !== -1) {
+            myVisibility = event;
+            visibilityControl.setValue(event);
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+        } else {
+            print("Error: Unrecognized onFindableByChanged value: " + event);
+        }
+    }
+
+    function onMousePressEvent(event) {
+        var clickedOverlay,
+            numLinesBefore,
+            overlayX,
+            overlayY,
+            minY,
+            maxY,
+            lineClicked,
+            userClicked,
+            delta;
+
+        if (!isVisible || isWindowDisabled()) {
+            return;
+        }
+
+        clickedOverlay = Overlays.getOverlayAtPoint({
+            x: event.x,
+            y: event.y
+        });
+
+        if (displayControl.handleClick(clickedOverlay)) {
+            if (usersTimer !== null) {
+                Script.clearTimeout(usersTimer);
+                usersTimer = null;
+            }
+            pollUsers();
+            showMe = displayControl.getValue();
+            Settings.setValue(SETTING_USERS_SHOW_ME, showMe);
+            return;
+        }
+
+        if (visibilityControl.handleClick(clickedOverlay)) {
+            myVisibility = visibilityControl.getValue();
+            GlobalServices.findableBy = myVisibility;
+            Settings.setValue(SETTING_USERS_VISIBLE_TO, myVisibility);
+            return;
+        }
+
+        if (clickedOverlay === windowPane) {
+
+            overlayX = event.x - windowPosition.x - WINDOW_MARGIN;
+            overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight;
+
+            numLinesBefore = Math.round(overlayY / windowLineHeight);
+            minY = numLinesBefore * windowLineHeight;
+            maxY = minY + windowTextHeight;
+
+            lineClicked = -1;
+            if (minY <= overlayY && overlayY <= maxY) {
+                lineClicked = numLinesBefore;
+            }
+
+            userClicked = firstUserToDisplay + lineClicked;
+
+            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
+                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
+                //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
+                location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
+            }
+
+            return;
+        }
+
+        if (clickedOverlay === minimizeButton) {
+            setMinimized(!isMinimized);
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBar) {
+            scrollbarBarClickedAt = (event.y - scrollbarBarPosition.y) / scrollbarBarHeight;
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA
+            });
+            isMovingScrollbar = true;
+            return;
+        }
+
+        if (clickedOverlay === scrollbarBackground) {
+            delta = scrollbarBarHeight / (scrollbarBackgroundHeight - scrollbarBarHeight);
+
+            if (event.y < scrollbarBarPosition.y) {
+                scrollbarValue = Math.max(scrollbarValue - delta, 0.0);
+            } else {
+                scrollbarValue = Math.min(scrollbarValue + delta, 1.0);
+            }
+
+            firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+            updateOverlayPositions();
+            updateUsersDisplay();
+            return;
+        }
+
+        if (clickedOverlay === friendsButton) {
+            if (!friendsWindow) {
+                friendsWindow = new OverlayWebWindow({
+                    title: FRIENDS_WINDOW_TITLE,
+                    width: FRIENDS_WINDOW_WIDTH,
+                    height: FRIENDS_WINDOW_HEIGHT,
+                    visible: false
+                });
+            }
             friendsWindow.setURL(FRIENDS_WINDOW_URL);
             friendsWindow.setVisible(true);
             friendsWindow.raise();
+            return;
         }
-        if (event.type === "jump-to") {
-            if (typeof event.data.username !== undefined) {
-                // teleport to selected user from the online users list
-                location.goToUser(event.data.username);
+
+        if (clickedOverlay === windowBorder) {
+            movingClickOffset = {
+                x: event.x - windowPosition.x,
+                y: event.y - windowPosition.y
+            };
+
+            isMovingWindow = true;
+        }
+    }
+
+    function onMouseMoveEvent(event) {
+        var isVisible;
+
+        if (!isLoggedIn || isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
+                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
+                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
+                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
+                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
+                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+                scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
+                firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
+                updateOverlayPositions();
+                updateUsersDisplay();
+            } else {
+                Overlays.editOverlay(scrollbarBar, {
+                    backgroundAlpha: SCROLLBAR_BAR_ALPHA
+                });
+                isMovingScrollbar = false;
             }
         }
-        if (event.type === "toggle-visibility") {
-            if (typeof event.data.visibility !== undefined) {
-                // update your visibility (all, friends, or none)
-                myVisibility = event.data.visibility;
-                GlobalServices.findableBy = myVisibility;
-            } 
+
+        if (isMovingWindow) {
+            windowPosition = {
+                x: event.x - movingClickOffset.x,
+                y: event.y - movingClickOffset.y
+            };
+
+            saturateWindowPosition();
+            calculateWindowHeight();
+            updateOverlayPositions();
+            updateUsersDisplay();
+
+        } else {
+
+            isVisible = isBorderVisible;
+            if (isVisible) {
+                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
+                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
+                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
+                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
+            } else {
+                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
+                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
+            }
+            if (isVisible !== isBorderVisible) {
+                isBorderVisible = isVisible;
+                Overlays.editOverlay(windowBorder, {
+                    visible: isBorderVisible
+                });
+            }
         }
     }
 
-    button.clicked.connect(onClicked);
-    tablet.webEventReceived.connect(onWebEventReceived);
+    function onMouseReleaseEvent() {
+        var offset = {};
 
-    function cleanup() {
-        button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        if (isMovingScrollbar) {
+            Overlays.editOverlay(scrollbarBar, {
+                backgroundAlpha: SCROLLBAR_BAR_ALPHA
+            });
+            isMovingScrollbar = false;
+        }
+
+        if (isMovingWindow) {
+            // Save offset of bottom of window to nearest edge of the window.
+            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
+                windowPosition.x : windowPosition.x - viewport.x;
+            offset.y = (windowPosition.y < viewport.y / 2) ?
+                windowPosition.y : windowPosition.y - viewport.y;
+            Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
+            isMovingWindow = false;
+        }
     }
 
-    Script.scriptEnding.connect(cleanup);
+    function onScriptUpdate() {
+        var oldViewport = viewport,
+            oldIsMirrorDisplay = isMirrorDisplay,
+            oldIsFullscreenMirror = isFullscreenMirror,
+            MIRROR_MENU_ITEM = "Mirror",
+            FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror";
+
+        if (isWindowDisabled()) {
+            return;
+        }
+
+        viewport = Controller.getViewportDimensions();
+        isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
+        isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
+
+        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
+            isFullscreenMirror !== oldIsFullscreenMirror) {
+            calculateWindowHeight();
+            updateUsersDisplay();
+        }
+
+        if (viewport.y !== oldViewport.y) {
+            if (windowPosition.y > oldViewport.y / 2) {
+                // Maintain position w.r.t. bottom of window.
+                windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y);
+            }
+        }
+
+        if (viewport.x !== oldViewport.x) {
+            if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) {
+                // Maintain position w.r.t. right of window.
+                windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x);
+            }
+        }
+
+        updateOverlayPositions();
+    }
+
+    function setUp() {
+        var textSizeOverlay,
+            offsetSetting,
+            offset = {},
+            hmdViewport;
+
+        textSizeOverlay = Overlays.addOverlay("text", {
+            font: WINDOW_FONT,
+            visible: false
+        });
+        windowTextHeight = Math.floor(Overlays.textSize(textSizeOverlay, "1").height);
+        windowLineSpacing = Math.floor(Overlays.textSize(textSizeOverlay, "1\n2").height - 2 * windowTextHeight);
+        windowLineHeight = windowTextHeight + windowLineSpacing;
+        windowMinimumHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN;
+        Overlays.deleteOverlay(textSizeOverlay);
+
+        viewport = Controller.getViewportDimensions();
+
+        offsetSetting = Settings.getValue(SETTING_USERS_WINDOW_OFFSET);
+        if (offsetSetting !== "") {
+            offset = JSON.parse(Settings.getValue(SETTING_USERS_WINDOW_OFFSET));
+        }
+        if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) {
+            windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x;
+            windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y;
+        } else {
+            hmdViewport = Controller.getRecommendedOverlayRect();
+            windowPosition = {
+                x: (viewport.x - hmdViewport.width) / 2,  // HMD viewport is narrower than screen.
+                y: hmdViewport.height  // HMD viewport starts at top of screen but only extends down so far.
+            };
+        }
+
+        saturateWindowPosition();
+        calculateWindowHeight();
+
+        windowBorder = Overlays.addOverlay("rectangle", {
+            x: 0,
+            y: viewport.y,   // Start up off-screen
+            width: WINDOW_BORDER_WIDTH,
+            height: windowBorderHeight,
+            radius: WINDOW_BORDER_RADIUS,
+            color: WINDOW_BORDER_COLOR,
+            alpha: WINDOW_BORDER_ALPHA,
+            visible: false
+        });
+
+        windowPane = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH,
+            height: windowHeight,
+            topMargin: WINDOW_MARGIN + windowLineHeight,
+            leftMargin: WINDOW_MARGIN,
+            color: WINDOW_FOREGROUND_COLOR,
+            alpha: WINDOW_FOREGROUND_ALPHA,
+            backgroundColor: WINDOW_BACKGROUND_COLOR,
+            backgroundAlpha: WINDOW_BACKGROUND_ALPHA,
+            text: "",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        windowHeading = Overlays.addOverlay("text", {
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 2 * WINDOW_MARGIN,
+            height: windowTextHeight,
+            topMargin: 0,
+            leftMargin: 0,
+            color: WINDOW_HEADING_COLOR,
+            alpha: WINDOW_HEADING_ALPHA,
+            backgroundAlpha: 0.0,
+            text: "Users online",
+            font: WINDOW_FONT,
+            visible: false
+        });
+
+        minimizeButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: MIN_MAX_BUTTON_WIDTH,
+            height: MIN_MAX_BUTTON_HEIGHT,
+            imageURL: MIN_MAX_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: MIN_MAX_BUTTON_SVG_WIDTH,
+                height: MIN_MAX_BUTTON_SVG_HEIGHT / 2
+            },
+            color: MIN_MAX_BUTTON_COLOR,
+            alpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        scrollbarBackgroundPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBackground = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBackgroundPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BACKGROUND_COLOR,
+            backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        scrollbarBarPosition = {
+            x: 0,
+            y: viewport.y
+        };
+        scrollbarBar = Overlays.addOverlay("text", {
+            x: 0,
+            y: scrollbarBarPosition.y,
+            width: SCROLLBAR_BACKGROUND_WIDTH - 2,
+            height: windowTextHeight,
+            backgroundColor: SCROLLBAR_BAR_COLOR,
+            backgroundAlpha: SCROLLBAR_BAR_ALPHA,
+            text: "",
+            visible: false
+        });
+
+        friendsButton = Overlays.addOverlay("image", {
+            x: 0,
+            y: viewport.y,
+            width: FRIENDS_BUTTON_WIDTH,
+            height: FRIENDS_BUTTON_HEIGHT,
+            imageURL: FRIENDS_BUTTON_SVG,
+            subImage: {
+                x: 0,
+                y: 0,
+                width: FRIENDS_BUTTON_SVG_WIDTH,
+                height: FRIENDS_BUTTON_SVG_HEIGHT
+            },
+            color: FRIENDS_BUTTON_COLOR,
+            alpha: FRIENDS_BUTTON_ALPHA,
+            visible: false
+        });
+
+        showMe = Settings.getValue(SETTING_USERS_SHOW_ME, "");
+        if (DISPLAY_VALUES.indexOf(showMe) === -1) {
+            showMe = DISPLAY_EVERYONE;
+        }
+
+        displayControl = new PopUpMenu({
+            prompt: DISPLAY_PROMPT,
+            value: showMe,
+            values: DISPLAY_VALUES,
+            displayValues: DISPLAY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: DISPLAY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        myVisibility = Settings.getValue(SETTING_USERS_VISIBLE_TO, "");
+        if (VISIBILITY_VALUES.indexOf(myVisibility) === -1) {
+            myVisibility = VISIBILITY_FRIENDS;
+        }
+        GlobalServices.findableBy = myVisibility;
+
+        visibilityControl = new PopUpMenu({
+            prompt: VISIBILITY_PROMPT,
+            value: myVisibility,
+            values: VISIBILITY_VALUES,
+            displayValues: VISIBILITY_DISPLAY_VALUES,
+            x: 0,
+            y: viewport.y,
+            width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN,
+            promptWidth: VISIBILITY_PROMPT_WIDTH,
+            lineHeight: windowLineHeight,
+            textHeight: windowTextHeight,
+            font: WINDOW_FONT,
+            promptColor: WINDOW_HEADING_COLOR,
+            promptAlpha: WINDOW_HEADING_ALPHA,
+            promptBackgroundColor: WINDOW_BACKGROUND_COLOR,
+            promptBackgroundAlpha: 0.0,
+            optionColor: WINDOW_FOREGROUND_COLOR,
+            optionAlpha: WINDOW_FOREGROUND_ALPHA,
+            optionBackgroundColor: OPTION_BACKGROUND_COLOR,
+            optionBackgroundAlpha: OPTION_BACKGROUND_ALPHA,
+            popupBackgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+            popupBackgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+            buttonColor: MIN_MAX_BUTTON_COLOR,
+            buttonAlpha: MIN_MAX_BUTTON_ALPHA,
+            visible: false
+        });
+
+        Controller.mousePressEvent.connect(onMousePressEvent);
+        Controller.mouseMoveEvent.connect(onMouseMoveEvent);
+        Controller.mouseReleaseEvent.connect(onMouseReleaseEvent);
+
+        Menu.addMenuItem({
+            menuName: MENU_NAME,
+            menuItemName: MENU_ITEM,
+            afterItem: MENU_ITEM_AFTER,
+            isCheckable: true,
+            isChecked: isVisible
+        });
+        Menu.menuItemEvent.connect(onMenuItemEvent);
+
+        GlobalServices.findableByChanged.connect(onFindableByChanged);
+
+        Script.update.connect(onScriptUpdate);
+
+        pollUsers();
+
+        // Set minimized at end - setup code does not handle `minimized == false` correctly
+        setMinimized(isValueTrue(Settings.getValue(SETTING_USERS_WINDOW_MINIMIZED, true)));
+    }
+
+    function tearDown() {
+        Menu.removeMenuItem(MENU_NAME, MENU_ITEM);
+
+        Script.clearTimeout(usersTimer);
+        Overlays.deleteOverlay(windowBorder);
+        Overlays.deleteOverlay(windowPane);
+        Overlays.deleteOverlay(windowHeading);
+        Overlays.deleteOverlay(minimizeButton);
+        Overlays.deleteOverlay(scrollbarBackground);
+        Overlays.deleteOverlay(scrollbarBar);
+        Overlays.deleteOverlay(friendsButton);
+        displayControl.tearDown();
+        visibilityControl.tearDown();
+    }
+
+    setUp();
+    Script.scriptEnding.connect(tearDown);
+}());
+
+function cleanup () {
+    //remove tablet button
+    button.clicked.disconnect(onClicked);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
+}
+Script.scriptEnding.connect(cleanup);
+
 }()); // END LOCAL_SCOPE

From 4f04865963ec08a0df59fab638bdade8ae46222e Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Wed, 1 Feb 2017 15:37:54 -0800
Subject: [PATCH 27/28] load tablet users in default scripts

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

diff --git a/scripts/defaultScripts.js b/scripts/defaultScripts.js
index bb96fe96cf..36b0ddde85 100644
--- a/scripts/defaultScripts.js
+++ b/scripts/defaultScripts.js
@@ -24,7 +24,7 @@ var DEFAULT_SCRIPTS = [
     "system/goto.js",
     "system/marketplaces/marketplaces.js",
     "system/edit.js",
-    "system/users.js",
+    "system/tablet-users.js",
     "system/selectAudioDevice.js",
     "system/notifications.js",
     "system/controllers/controllerDisplayManager.js",

From 3aa239b004861008c8dbe0d9fec99544ab5e30bf Mon Sep 17 00:00:00 2001
From: sam <sam>
Date: Wed, 1 Feb 2017 22:00:03 -0800
Subject: [PATCH 28/28] More instrumentation during texture load

---
 libraries/model/src/model/TextureMap.cpp | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/libraries/model/src/model/TextureMap.cpp b/libraries/model/src/model/TextureMap.cpp
index 1b7f661eb3..3c5fc004af 100755
--- a/libraries/model/src/model/TextureMap.cpp
+++ b/libraries/model/src/model/TextureMap.cpp
@@ -73,7 +73,8 @@ QImage processSourceImage(const QImage& srcImage, bool cubemap) {
     }
 
     if (targetSize != srcImageSize) {
-        qDebug(modelLog) << "Resizing texture from " << srcImageSize.x << "x" << srcImageSize.y << " to " << targetSize.x << "x" << targetSize.y;
+         PROFILE_RANGE(resource_parse, "processSourceImage Rectify");
+         qDebug(modelLog) << "Resizing texture from " << srcImageSize.x << "x" << srcImageSize.y << " to " << targetSize.x << "x" << targetSize.y;
         return srcImage.scaled(fromGlm(targetSize));
     }
 
@@ -282,6 +283,7 @@ gpu::Texture* TextureUsage::createLightmapTextureFromImage(const QImage& srcImag
 
 
 gpu::Texture* TextureUsage::createNormalTextureFromNormalImage(const QImage& srcImage, const std::string& srcImageName) {
+    PROFILE_RANGE(resource_parse, "createNormalTextureFromNormalImage");
     QImage image = processSourceImage(srcImage, false);
 
     if (image.format() != QImage::Format_RGB888) {
@@ -316,6 +318,7 @@ double mapComponent(double sobelValue) {
 }
 
 gpu::Texture* TextureUsage::createNormalTextureFromBumpImage(const QImage& srcImage, const std::string& srcImageName) {
+    PROFILE_RANGE(resource_parse, "createNormalTextureFromBumpImage");
     QImage image = processSourceImage(srcImage, false);
 
     if (image.format() != QImage::Format_RGB888) {
@@ -388,6 +391,7 @@ gpu::Texture* TextureUsage::createNormalTextureFromBumpImage(const QImage& srcIm
 }
 
 gpu::Texture* TextureUsage::createRoughnessTextureFromImage(const QImage& srcImage, const std::string& srcImageName) {
+    PROFILE_RANGE(resource_parse, "createRoughnessTextureFromImage");
     QImage image = processSourceImage(srcImage, false);
     if (!image.hasAlphaChannel()) {
         if (image.format() != QImage::Format_RGB888) {
@@ -422,6 +426,7 @@ gpu::Texture* TextureUsage::createRoughnessTextureFromImage(const QImage& srcIma
 }
 
 gpu::Texture* TextureUsage::createRoughnessTextureFromGlossImage(const QImage& srcImage, const std::string& srcImageName) {
+    PROFILE_RANGE(resource_parse, "createRoughnessTextureFromGlossImage");
     QImage image = processSourceImage(srcImage, false);
     if (!image.hasAlphaChannel()) {
         if (image.format() != QImage::Format_RGB888) {
@@ -460,6 +465,7 @@ gpu::Texture* TextureUsage::createRoughnessTextureFromGlossImage(const QImage& s
 }
 
 gpu::Texture* TextureUsage::createMetallicTextureFromImage(const QImage& srcImage, const std::string& srcImageName) {
+    PROFILE_RANGE(resource_parse, "createMetallicTextureFromImage");
     QImage image = processSourceImage(srcImage, false);
     if (!image.hasAlphaChannel()) {
         if (image.format() != QImage::Format_RGB888) {