Merge pull request #7642 from ctrlaltdavid/20872

Further restyling of edit.js

examples/edit.js

@@ -404,6 +404,10 @@ var toolBar = (function() {
             Window.alert("Can't create " + properties.type + ": " + properties.type + " would be out of bounds.");
         }
 
+        selectionManager.clearSelections();
+        entityListTool.sendUpdate();
+        selectionManager.setSelections([entityID]);
+
         return entityID;
     }
 
@@ -1194,6 +1198,30 @@ function deleteSelectedEntities() {
     }
 }
 
+function toggleSelectedEntitiesLocked() {
+    if (SelectionManager.hasSelection()) {
+        var locked = !Entities.getEntityProperties(SelectionManager.selections[0], ["locked"]).locked;
+        for (var i = 0; i < selectionManager.selections.length; i++) {
+            var entityID = SelectionManager.selections[i];
+            Entities.editEntity(entityID, { locked: locked });
+        }
+        entityListTool.sendUpdate();
+        selectionManager._update();
+    }
+}
+
+function toggleSelectedEntitiesVisible() {
+    if (SelectionManager.hasSelection()) {
+        var visible = !Entities.getEntityProperties(SelectionManager.selections[0], ["visible"]).visible;
+        for (var i = 0; i < selectionManager.selections.length; i++) {
+            var entityID = SelectionManager.selections[i];
+            Entities.editEntity(entityID, { visible: visible });
+        }
+        entityListTool.sendUpdate();
+        selectionManager._update();
+    }
+}
+
 function handeMenuEvent(menuItem) {
     if (menuItem == "Allow Selecting of Small Models") {
         allowSmallModels = Menu.isOptionChecked("Allow Selecting of Small Models");
@@ -1522,7 +1550,8 @@ PropertiesTool = function(opts) {
                         data.properties.keyLight.direction.x * DEGREES_TO_RADIANS, data.properties.keyLight.direction.y * DEGREES_TO_RADIANS);
                 }
                 Entities.editEntity(selectionManager.selections[0], data.properties);
-                if (data.properties.name != undefined) {
+                if (data.properties.name !== undefined || data.properties.modelURL !== undefined
+                    || data.properties.visible !== undefined || data.properties.locked !== undefined) {
                     entityListTool.sendUpdate();
                 }
             }

examples/html/edit-style.css

@@ -63,7 +63,7 @@
 }
 
 body {
-    padding: 24px 12px 24px 12px;
+    padding: 21px 21px 21px 21px;
 
     color: #afafaf;
     background-color: #404040;
@@ -164,6 +164,10 @@ tr.selected {
     background-color: #00b4ef;
 }
 
+tr.selected + tr.selected {
+    border-top: 1px solid #2e2e2e;
+}
+
 th {
     text-align: center;
     word-wrap: nowrap;
@@ -227,6 +231,15 @@ input.search {
     border-radius: 14px;
 }
 
+input.search:focus {
+    outline: none;
+    box-sizing: border-box;
+    height: 26px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+    box-shadow: 0 0 0px 1px #00b4ef;
+}
+
 input:disabled, textarea:disabled {
     background-color: #383838;
     color: #afafaf;
@@ -275,7 +288,9 @@ input[type=number]::-webkit-inner-spin-button:after {
     content: "5";
     bottom: 6px;
 }
-input[type="number"]::-webkit-inner-spin-button:hover {
+
+input[type=number].hover-up::-webkit-inner-spin-button:before, 
+input[type=number].hover-down::-webkit-inner-spin-button:after {
     color: #ffffff;
 }
 
@@ -294,8 +309,8 @@ input[type=button] {
     vertical-align: top;
     height: 28px;
     min-width: 120px;
-    padding: 0px 12px;
+    padding: 0px 18px;
-    margin-right: 8px;
+    margin-right: 6px;
     border-radius: 5px;
     border: none;
     color: #fff;
@@ -370,6 +385,22 @@ input[type=checkbox]:checked + label:hover {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEySURBVDhPnZLPSsNAEMa/XVPBCE0RhNy0OarP4Av4AD6JB0GwVBA8efBBxHsgh4CQswcRoUIpiIpVAm3zZ5M4szFSbQPBH3xkJvNNZskOer2eLIriKM/ze1JOcS1UHmdZduF5ngEKjr/fN4Z6+oKerwA2gxC4HAFPEWVLsAzgZAvYt3Q6Enw6jg7uBAaTFMNwhpnKdbXCkAJdy8ROu4XrXW2HTJIErHcFDD6nC02Mom8PwymeE2gvS0ZRBBaTlsOXEmdlrfLLOI7Bakrl/zWxCT8T/904f9QW/b06qtrCUdtFCqdjYs2Q2jAPX8c2XQd7Kr/wfV8vwIPs4Ga1ixe5Xrr/YFLTYfKIvWzM6ZtwXZdX7lxXG0L+sxXHcW5t254opRzawQ0S72+dPmjTroIgOP0CQSMt5LDn1T8AAAAASUVORK5CYII=);
 }
 
+.icon-input input {
+    position: relative;
+    padding-left: 36px;
+}
+.icon-input span {
+    position: absolute;
+    left: 6px;
+    top: -2px;
+    font-family: hifi-glyphs;
+    font-size: 30px;
+    color: #afafaf;
+}
+.icon-input input:focus + span {
+    color: #ffffff;
+}
+
 .selectable {
     -webkit-touch-callout: text;
     -webkit-user-select: text;
@@ -396,11 +427,11 @@ input[type=checkbox]:checked + label:hover {
 }
 
 
-.section-header, .sub-section-header {
+.section-header, .sub-section-header, hr {
     display: table;
     width: 100%;
-    margin: 22px -12px 0 -12px;
+    margin: 21px -21px 0 -21px;
-    padding: 14px 12px 0 12px;
+    padding: 14px 21px 0 21px;
     font-family: Raleway-Regular;
     font-size: 12px;
     color: #afafaf;
@@ -414,12 +445,12 @@ input[type=checkbox]:checked + label:hover {
     background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
 }
 
-.sub-section-header, .no-collapse {
+.sub-section-header, .no-collapse, hr {
     background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
 }
 
 .section-header:first-child {
-    margin-top: 0;
+    margin-top: -2px;
     padding-top: 0;
     background: none;
     height: auto;
@@ -435,11 +466,16 @@ input[type=checkbox]:checked + label:hover {
     float: right;
     position: absolute;
     top: 4px;
-    right: 6px;
+    right: 13px;
 }
 
 .section-header[collapsed="true"] {
-    margin-bottom: -22px;
+    margin-bottom: -21px;
+}
+
+hr {
+    border: none;
+    padding-top: 2px;
 }
 
 .text-group[collapsed="true"] ~ .text-group,
@@ -458,20 +494,25 @@ input[type=checkbox]:checked + label:hover {
 .property {
     display: table;
     width: 100%;
-    margin-top: 22px;
+    margin-top: 21px;
-    min-height: 29px;
+    min-height: 28px;
 }
 
 .property.checkbox {
     width: auto;
 }
 
-.property label {
+.property label, .number label {
     display: table-cell;
     vertical-align: middle;
     font-family: Raleway-SemiBold;
     font-size: 14px;
 }
+.property label .unit, .number label .unit {
+    margin-left: 8px;
+    font-family: Raleway-Light;
+    font-size: 13px;
+}
 
 .value {
     display: block;
@@ -499,12 +540,14 @@ input[type=checkbox]:checked + label:hover {
     float: left;
 }
 .property .number + .number {
-    margin-left: 12px;
+    margin-left: 10px;
 }
 
 .text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
     float: left;
-    margin-bottom: 4px;
+    margin-left: 1px;
+    margin-bottom: 3px;
+    margin-top: -2px;
 }
 
 .number > input {
@@ -519,13 +562,6 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
 }
 
-.unit {
-    padding-left: 4px;
-    vertical-align: top;
-    position: relative;
-    top: 5px;
-}
-
 .dropdown {
     position: relative;
     margin-bottom: -17px;
@@ -544,10 +580,8 @@ input[type=checkbox]:checked + label:hover {
     width: 172px;
     height: 28px;
     padding: 0 28px 0 12px;
-
     color: #afafaf;
     background: linear-gradient(#7d7d7d 20%, #686a68 100%);
-
     position: relative;
 }
 .dropdown dl[dropped="true"] {
@@ -606,6 +640,17 @@ input[type=checkbox]:checked + label:hover {
     background-color: #00b4ef;
 }
 
+.dropdown dl[disabled="disabled"], .dropdown dl[disabled="disabled"][dropped="true"] {
+    color: #252525;
+    background: linear-gradient(#575757 20%, #252525 100%);
+}
+.dropdown dl[disabled="disabled"] dd {
+    display: none;
+}
+.dropdown dl[disabled="disabled"] dt:hover {
+    color: #252525;
+}
+
 
 div.refresh {
     box-sizing: border-box;
@@ -619,7 +664,7 @@ div.refresh input[type="button"] {
 .color-picker {
     box-sizing: border-box;
     float: left;
-    margin-bottom: 12px;
+    margin-bottom: 21px;
     width: 36px;
     height: 36px;
     border: 4px solid #afafaf;
@@ -636,32 +681,36 @@ div.refresh input[type="button"] {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
 }
 
+.color-picker[disabled="disabled"] {
+    border-color: #afafaf;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
+}
+
+.colpick[disabled="disabled"] {
+    display: none !important;
+}
+
+
 .rgb label {
     float: left;
     margin-top: 10px;
-    margin-left: 12px;
+    margin-left: 21px;
 }
 .rgb label + * {
     clear: both;
 }
 
-.tuple {
-    width: 100%;
-    text-align: center;
-}
 .tuple div {
     display: inline-block;
     position: relative;
-    min-width: 120px;
+    margin-right: 6px;
-    min-height: 1px;
 }
-.tuple div:nth-child(1) {
+.tuple div:last-child {
-    float: left;
+    margin-right: 0;
 }
-.tuple div:nth-child(2) {
+
-}
+.tuple label {
-.tuple div:nth-child(3) {
+    margin-right: -6px;
-    float: right;
 }
 
 .rgb .tuple input {
@@ -712,31 +761,49 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 }
 
 .xyz .buttons input {
-    margin-top: 12px;
+    margin-top: 14px;
 }
 .xyz .buttons span {
     word-wrap: nowrap;
     white-space: nowrap;
 }
 
-.row input {
+.row .property {
-    float: left;
+    width: auto;
+    display: inline-block;
+    margin-right: 6px;
 }
-.row input[type=button] {
+.row .property:last-child {
-    margin-left: 8px;
     margin-right: 0;
 }
+.row .property input {
+    clear: both;
+    float: left;
+}
 
+.two-column {
+    display: table;
+    width: 100%;
+}
+.two-column > div {
+    display: table-cell;
+    width: 50%;
+}
+.column {
+    vertical-align: top;
+}
+
+.indent {
+    margin-left: 24px;
+}
 
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
- 
 ::-webkit-scrollbar-track {
     background-color: #2e2e2e;
 }
- 
 ::-webkit-scrollbar-thumb {
     background-color: #696969;
     border: 2px solid #2e2e2e;
@@ -760,7 +827,28 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 
 
 #entity-list-header {
-    margin-bottom: 24px;
+    margin-bottom: 36px;
+}
+
+#entity-list-header div {
+    display: inline-block;
+    width: 65px;
+    margin-right: 6px;
+}
+
+#entity-list-header div input:first-child {
+    margin-right: 0;
+    float: left;
+    width: 33px;
+    border-right: 1px solid #808080;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+#entity-list-header div input:last-child {
+    margin-right: 0;
+    float: right;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
 #delete {
@@ -773,6 +861,11 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
+#entity-list .glyph {
+    font-family: HiFi-Glyphs;
+    font-size: 14px;
+}
+
 #search-area {
     padding-right: 148px;
     padding-bottom: 24px;
@@ -785,6 +878,8 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 #radius-and-unit {
     float: right;
     margin-right: -148px;
+    position: relative;
+    top: -17px;
 }
 
 
@@ -798,17 +893,39 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     margin-top: 28px;
     border-left: 2px solid #575757;
     border-right: 2px solid #575757;
-}
-
-#entity-table-scroll, #entity-table {
     background-color: #1c1c1c;
 }
 
+
 #entity-table {
     margin-top: -28px;
     margin-bottom: -18px;
     table-layout: fixed;
     border: none;
+    background-color: #1c1c1c;
+}
+
+#col-type {
+    width: 16%;
+}
+#col-name {
+    width: 34%;
+}
+#col-url {
+    width: 34%;
+}
+#col-locked, #col-visible {
+    width: 8%;
+}
+
+#entity-table thead tr, #entity-table thead tr th,
+#entity-table tfoot tr, #entity-table tfoot tr td {
+    background: none;
+}
+
+#entity-table .glyph {
+    margin: 0 -2px 0 -2px;
+    vertical-align: middle;
 }
 
 #entity-table thead {
@@ -817,6 +934,42 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
     border-bottom: 1px solid #575757;
+    position: absolute;
+    top: 49px;
+    left: 0;
+    width: 100%;
+}
+
+#entity-table thead th {
+    box-sizing: border-box;
+    padding: 0 0 0 8px;
+    vertical-align: middle;
+}
+
+#entity-table th:focus {
+    outline: none;
+}
+
+#entity-table th .glyph {
+    position: relative;
+    left: 0;
+}
+
+#entity-table thead .sort-order {
+    display: inline-block;
+    width: 8px;
+    margin: -5px 0 -3px 0;
+    text-align: right;
+    vertical-align: middle;
+}
+
+#entity-table td {
+    box-sizing: border-box;
+}
+
+#entity-table td.glyph {
+    text-align: center;
+    padding: 0;
 }
 
 #entity-table tfoot {
@@ -825,39 +978,6 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     border-top: 1px solid #575757;
-}
-
-#entity-table thead tr, #entity-table thead tr th,
-#entity-table tfoot tr, #entity-table tfoot tr td {
-    background: none;
-}
-
-#entity-table th:focus {
-    outline: none;
-}
-
-#col-type {
-    width: 16%;
-}
-#col-name {
-    width: 42%;
-}
-#col-url {
-    width: 42%;
-}
-
-#entity-table thead {
-    position: absolute;
-    top: 49px;
-    left: 0;
-    width: 100%;
-}
-
-#entity-table thead th {
-    padding: 0;
-}
-
-#entity-table tfoot {
     position: absolute;
     bottom: -21px;
     left: 0;
@@ -876,25 +996,92 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 }
 
 
-#properties-list .property:first-child {
+#properties-header {
-    margin-top: 0;
+    display: table-row;
+    height: 28px;
 }
 
+#properties-header .property {
+    display: table-cell;
+    vertical-align: middle;
+}
+#properties-header .checkbox {
+    position: relative;
+    top: -1px;
+}
+
+#properties-header #type-icon {
+    font-family: hifi-glyphs;
+    font-size: 31px;
+    color: #00b4ef;
+    margin: -4px 12px -4px -2px;
+    width: auto;
+    display: none;
+    vertical-align: middle;
+}
+
+#properties-header #property-type {
+    padding: 5px 24px 5px 0;
+    border-right: 1px solid #808080;
+    height: 100%;
+    width: auto;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#properties-header .checkbox:last-child {
+    padding-left: 24px;
+}
+
+#properties-header .checkbox label {
+    background-position-y: 1px;
+}
+
+#properties-header .checkbox label span {
+    font-family: HiFi-Glyphs;
+    font-size: 20px;
+    padding-right: 6px;
+    vertical-align: top;
+    position: relative;
+    top: -4px;
+}
+
+#properties-header input[type=checkbox]:checked + label span {
+    color: #ffffff;
+}
+
+#properties-header + hr {
+    margin-top: 12px;
+}
+
+
+#id label {
+    width: 24px;
+}
+#property-id {
+    display: inline-block;
+}
 #property-id::selection {
     color: #000000;
     background-color: #00b4ef;
 }
 
+input#property-parent-id {
+    width: 340px;
+}
 
 input#dimension-rescale-button {
     min-width: 50px;
     margin-left: 6px;
 }
-
+input#reset-to-natural-dimensions {
-
+    margin-right: 0;
-.color-set label, .color-set span {
-    display: block;
 }
-.color-set span {
+input#preview-camera-button {
-    padding-top: 2px;
+    margin-left: 1px;
+    margin-right: 0;
+}
+
+#animation-fps {
+    margin-top: 48px;
 }

examples/html/entityList.html

@@ -14,25 +14,34 @@
     <script src="list.min.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         var entities = {};
         var selectedEntities = [];
         var currentSortColumn = 'type';
-        var currentSortOrder = 'asc';
+        var currentSortOrder = 'des';
         var entityList = null;
         var refreshEntityListTimer = null;
-        const ASCENDING_STRING = '&nbsp;&#x25BE;';
+        const ASCENDING_STRING = '&#x25BE;';
-        const DESCENDING_STRING = '&nbsp;&#x25B4;';
+        const DESCENDING_STRING = '&#x25B4;';
+        const LOCKED_GLYPH = "&#xe006;";
+        const VISIBLE_GLYPH = "&#xe007;";
         const DELETE = 46; // Key code for the delete key.
         const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
 
+        debugPrint = function (message) {
+            console.log(message);
+        };
+
         function loaded() {
           openEventBridge(function() { 
-              entityList = new List('entity-list', { valueNames: ['name', 'type', 'url'], page: MAX_ITEMS});
+              entityList = new List('entity-list', { valueNames: ['name', 'type', 'url', 'locked', 'visible'], page: MAX_ITEMS});
               entityList.clear();
               elEntityTable = document.getElementById("entity-table");
               elEntityTableBody = document.getElementById("entity-table-body");
               elRefresh = document.getElementById("refresh");
+              elToggleLocked = document.getElementById("locked");
+              elToggleVisible = document.getElementById("visible");
               elDelete = document.getElementById("delete");
               elTeleport = document.getElementById("teleport");
               elRadius = document.getElementById("radius");
@@ -50,6 +59,12 @@
               document.getElementById("entity-url").onclick = function() {
                   setSortColumn('url');
               };
+              document.getElementById("entity-locked").onclick = function () {
+                  setSortColumn('locked');
+              };
+              document.getElementById("entity-visible").onclick = function () {
+                  setSortColumn('visible');
+              };
               
               function onRowClicked(clickEvent) {
                   var id = this.dataset.entityId;
@@ -101,19 +116,20 @@
                   }));
               }
               
-              function addEntity(id, name, type, url) {
+              function addEntity(id, name, type, url, locked, visible) {
+                  var urlParts = url.split('/');
+                  var filename = urlParts[urlParts.length - 1];
+
                   if (entities[id] === undefined) {
-                      var urlParts = url.split('/');
+                      entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
-                      var filename = urlParts[urlParts.length - 1];
+                          function (items) {
-              
-                      entityList.add([{ id: id, name: name, type: type, url: filename }], function(items) {
                               var currentElement = items[0].elm;
                               var id = items[0]._values.id;
                               entities[id] = {
                                   id: id,
                                   name: name,
                                   el: currentElement,
-                                  item: items[0],
+                                  item: items[0]
                               };
                               currentElement.setAttribute('id', 'entity_' + id);
                               currentElement.setAttribute('title', url);
@@ -128,7 +144,7 @@
                       refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
                   } else {
                       var item = entities[id].item;
-                      item.values({ name: name, url: url });
+                      item.values({ name: name, url: filename, locked: locked, visible: visible });
                   }
               }
               
@@ -141,19 +157,21 @@
                   name: document.querySelector('#entity-name .sort-order'),
                   type: document.querySelector('#entity-type .sort-order'),
                   url: document.querySelector('#entity-url .sort-order'),
+                  locked: document.querySelector('#entity-locked .sort-order'),
+                  visible: document.querySelector('#entity-visible .sort-order')
               }
               function setSortColumn(column) {
                   if (currentSortColumn == column) {
                       currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
                   } else {
-                      elSortOrder[currentSortColumn].style.display = 'none';
+                      elSortOrder[currentSortColumn].innerHTML = "";
-                      elSortOrder[column].style.display = 'inline';
                       currentSortColumn = column;
                       currentSortOrder = "asc";
                   }
                   elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
                   entityList.sort(currentSortColumn, { order: currentSortOrder });
               }
+              setSortColumn('type');
               
               function refreshEntities() {
                   clearEntities();
@@ -191,13 +209,24 @@
                       elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
                   }
 
+                  // HACK: Fixes the footer and header text sometimes not displaying after adding or deleting entities.
+                  // The problem appears to be a bug in the Qt HTML/CSS rendering (Qt 5.5).
+                  document.getElementById("radius").focus();
+                  document.getElementById("radius").blur();
+
                   return notFound;
               }
               
               elRefresh.onclick = function() {
                   refreshEntities();
               }
-              elTeleport.onclick = function() {
+              elToggleLocked.onclick = function () {
+                  EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
+              }
+              elToggleVisible.onclick = function () {
+                  EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
+              }
+              elTeleport.onclick = function () {
                   EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' }));
               }
               elDelete.onclick = function() {
@@ -238,11 +267,14 @@
                           var newEntities = data.entities;
                           if (newEntities.length == 0) {
                               elNoEntitiesMessage.style.display = "block";
+                              elFooter.firstChild.nodeValue = "0 entities found";
                           } else {
                               elNoEntitiesMessage.style.display = "none";
                               for (var i = 0; i < newEntities.length; i++) {
                                   var id = newEntities[i].id;
-                                  addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url);
+                                  addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url,
+                                      newEntities[i].locked ? LOCKED_GLYPH : null,
+                                      newEntities[i].visible ? VISIBLE_GLYPH : null);
                               }
                               updateSelectedEntities(data.selectedIDs);
                               resize();
@@ -254,15 +286,23 @@
 
               function resize() {
                   // Take up available window space
-                  elEntityTableScroll.style.height = window.innerHeight - 200;
+                  elEntityTableScroll.style.height = window.innerHeight - 207;
 
-                  // Update the widths of the header cells to match the body
                   var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
                   var ths = document.querySelectorAll("#entity-table thead th");
                   if (tds.length >= ths.length) {
+                      // Update the widths of the header cells to match the body
                       for (var i = 0; i < ths.length; i++) {
-                          ths[i].style.width = tds[i].offsetWidth;
+                          ths[i].width = tds[i].offsetWidth;
                       }
+                  } else {
+                      // Reasonable widths if nothing is displayed
+                      var tableWidth = document.getElementById("entity-table").offsetWidth;
+                      ths[0].width = 0.16 * tableWidth;
+                      ths[1].width = 0.34 * tableWidth;
+                      ths[2].width = 0.34 * tableWidth;
+                      ths[3].width = 0.08 * tableWidth;
+                      ths[4].width = 0.08 * tableWidth;
                   }
               };
 
@@ -270,6 +310,8 @@
               resize();
           });
 
+          augmentSpinButtons();
+
           // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
           document.addEventListener("contextmenu", function (event) {
               event.preventDefault();
@@ -280,14 +322,21 @@
 <body onload='loaded();'>
     <div id="entity-list-header">
         <input type="button" class="glyph" id="refresh" value="F" />
+        <div>
+            <input type="button" id="locked" class="glyph" value="&#xe006;" />
+            <input type="button" id="visible" class="glyph" value="&#xe007;" />
+        </div>
         <input type="button" id="teleport" value="Jump To Selection" />
         <input type="button" class="red" id="delete" value="Delete" />
     </div>
 
     <div id="entity-list">
         <div id="search-area">
-            <input type="text" class="search" id="filter" placeholder="Filter" />
+            <span class="icon-input"><input type="text" class="search" id="filter" placeholder="Filter" /><span>Y</span></span>
-            <span id="radius-and-unit"><input type="number" id="radius" value="100" /><span class="unit">m</span></span> 
+            <div id="radius-and-unit" class="number">
+                <label for="radius">Search radius <span class="unit">m</span></label>
+                <input type="number" id="radius" value="100" />
+            </div>
         </div>
         <div id="entity-table-scroll">
             <table id="entity-table">
@@ -295,12 +344,16 @@
                     <col span="1" id="col-type" />
                     <col span="1" id="col-name" />
                     <col span="1" id="col-url" />
+                    <col span="1" id="col-locked" />
+                    <col span="1" id="col-visible" />
                 </colgroup>
                 <thead>
                     <tr>
-                        <th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-type" data-sort="type">Type<span class="sort-order"></span></th>
-                        <th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-name" data-sort="type">Name<span class="sort-order"></span></th>
-                        <th id="entity-url" data-sort="url">File <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-url" data-sort="url">File<span class="sort-order"></span></th>
+                        <th id="entity-locked" data-sort="locked"><span class="glyph">&#xe006;</span><span class="sort-order"></span></th>
+                        <th colspan="2" id="entity-visible" data-sort="visible"><span class="glyph">&#xe007;</span><span class="sort-order"></span></th>
                     </tr>
                 </thead>
                 <tbody class="list" id="entity-table-body">
@@ -308,12 +361,14 @@
                         <td class="type">Type</td>
                         <td class="name">Name</td>
                         <td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
-                        <td class="id" style="display: none">Type</td>
+                        <td class="locked glyph">?</td>
+                        <td class="visible glyph">?</td>
+                        <td class="id" style="display: none">ID</td>
                     </tr>
                 </tbody>
                 <tfoot>
                     <tr>
-                        <td id="footer-text" colspan="3">Footer text</td>
+                        <td id="footer-text" colspan="5"> </td>
                     </tr>
                 </tfoot>
             </table>

examples/html/entityProperties.html

@@ -17,10 +17,25 @@
     <script src="colpick.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         var PI = 3.14159265358979;
         var DEGREES_TO_RADIANS = PI / 180.0;
         var RADIANS_TO_DEGREES = 180.0 / PI;
+        var ICON_FOR_TYPE = {
+            Box: "V",
+            Sphere: "n",
+            ParticleEffect: "&#xe004;",
+            Model: "&#xe008;",
+            Web: "q",
+            Text: "l",
+            Light: "p",
+            Zone: "o",
+            PolyVox: "&#xe005;",
+            Multiple: "&#xe000;"
+        }
+
+        var colorPickers = [];
 
         debugPrint = function(message) {
             EventBridge.emitWebEvent(
@@ -44,6 +59,19 @@
             }
         }
 
+        function enableProperties() {
+            enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
+            enableChildren(document, ".colpick");
+        }
+
+        function disableProperties() {
+            disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
+            disableChildren(document, ".colpick");
+            for (var i = 0; i < colorPickers.length; i++) {
+                colorPickers[i].colpickHide();
+            }
+        }
+
         function showElements(els, show) {
             for (var i = 0; i < els.length; i++) {
                 els[i].style.display = (show) ? 'table' : 'none';
@@ -297,6 +325,7 @@
                 var allSections = [];
                 var elID = document.getElementById("property-id");
                 var elType = document.getElementById("property-type");
+                var elTypeIcon = document.getElementById("type-icon");
                 var elName = document.getElementById("property-name");
                 var elLocked = document.getElementById("property-locked");
                 var elVisible = document.getElementById("property-visible");
@@ -368,7 +397,7 @@
                 var elReloadScriptButton = document.getElementById("reload-script-button");
                 var elUserData = document.getElementById("property-user-data");
     
-                var elColorSection = document.getElementById("color-section");
+                var elColorSections = document.querySelectorAll(".color-section");
                 var elColor = document.getElementById("property-color");
                 var elColorRed = document.getElementById("property-color-red");
                 var elColorGreen = document.getElementById("property-color-green");
@@ -474,32 +503,40 @@
                         data = JSON.parse(data);
                         if (data.type == "update") {
                             if (data.selections.length == 0) {
-                                elType.innerHTML = "<i>No Selection</i>";
+                                elTypeIcon.style.display = "none";
+                                elType.innerHTML = "<i>No selection</i>";
                                 elID.innerHTML = "";
-                                disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
+                                disableProperties();
                             } else if (data.selections.length > 1) {
                                 var selections = data.selections;
     
                                 var ids = [];
                                 var types = {};
+                                var numTypes = 0;
     
                                 for (var i = 0; i < selections.length; i++) {
                                     ids.push(selections[i].id);
                                     var type = selections[i].properties.type;
                                     if (types[type] === undefined) {
                                         types[type] = 0;
+                                        numTypes += 1;
                                     }
                                     types[type]++;
                                 }
-                                elID.innerHTML = ids.join("<br>");
+
-    
+                                var type;
-                                var typeStrs = [];
+                                if (numTypes === 1) {
-                                for (type in types) {
+                                    type = selections[0].properties.type;
-                                    typeStrs.push(type + " (" + types[type] + ")");
+                                } else {
+                                    type = "Multiple";
                                 }
-                                elType.innerHTML = typeStrs.join(", ");
+                                elType.innerHTML = type + " (" + data.selections.length + ")";
-    
+                                elTypeIcon.innerHTML = ICON_FOR_TYPE[type];
-                                disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
+                                elTypeIcon.style.display = "inline-block";
+
+                                elID.innerHTML = ids.join("<br>");
+
+                                disableProperties();
                             } else {
                                 var activeElement = document.activeElement;
     
@@ -516,14 +553,16 @@
                                 elID.innerHTML = properties.id;
     
                                 elType.innerHTML = properties.type;
-    
+                                elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type];
+                                elTypeIcon.style.display = "inline-block";
+
                                 elLocked.checked = properties.locked;
     
                                 if (properties.locked) {
-                                    disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
+                                    disableProperties();
                                     elLocked.removeAttribute('disabled');
                                 } else {
-                                    enableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
+                                    enableProperties();
                                 }
 
     
@@ -624,13 +663,17 @@
                                 }
 
                                 if (properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") {
-                                    elColorSection.style.display = 'table';
+                                    for (var i = 0; i < elColorSections.length; i++) {
+                                        elColorSections[i].style.display = 'table';
+                                    }
                                     elColorRed.value = properties.color.red;
                                     elColorGreen.value = properties.color.green;
                                     elColorBlue.value = properties.color.blue;
                                     elColor.style.backgroundColor = "rgb(" + properties.color.red  + "," + properties.color.green + "," + properties.color.blue + ")";
                                 } else {
-                                    elColorSection.style.display = 'none';
+                                    for (var i = 0; i < elColorSections.length; i++) {
+                                        elColorSections[i].style.display = 'none';
+                                    }
                                 }
     
                                 if (properties.type == "Model") {
@@ -862,10 +905,10 @@
                 elColorRed.addEventListener('change', colorChangeFunction);
                 elColorGreen.addEventListener('change', colorChangeFunction);
                 elColorBlue.addEventListener('change', colorChangeFunction);
-                $('#property-color').colpick({
+                colorPickers.push($('#property-color').colpick({
-                    colorScheme:'dark',
+                    colorScheme: 'dark',
-                    layout:'hex',
+                    layout: 'hex',
-                    color:'000000',
+                    color: '000000',
                     onShow: function (colpick) {
                         $('#property-color').attr('active', 'true');
                     },
@@ -873,12 +916,12 @@
                         $('#property-color').attr('active', 'false');
                     },
                     onSubmit: function (hsb, hex, rgb, el) {
-                        $(el).css('background-color', '#'+hex);
+                        $(el).css('background-color', '#' + hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
                     }
-                })
+                }));
-    
+
                 elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
     
                 var lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
@@ -886,10 +929,10 @@
                 elLightColorRed.addEventListener('change', lightColorChangeFunction);
                 elLightColorGreen.addEventListener('change', lightColorChangeFunction);
                 elLightColorBlue.addEventListener('change', lightColorChangeFunction);
-                $('#property-light-color').colpick({
+                colorPickers.push($('#property-light-color').colpick({
-                    colorScheme:'dark',
+                    colorScheme: 'dark',
-                    layout:'hex',
+                    layout: 'hex',
-                    color:'000000',
+                    color: '000000',
                     onShow: function (colpick) {
                         $('#property-light-color').attr('active', 'true');
                     },
@@ -897,11 +940,11 @@
                         $('#property-light-color').attr('active', 'false');
                     },
                     onSubmit: function (hsb, hex, rgb, el) {
-                        $(el).css('background-color', '#'+hex);
+                        $(el).css('background-color', '#' + hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
                     }
-                })
+                }));
     
                 elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
                 elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
@@ -933,7 +976,7 @@
                 elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
                 elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
                 elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
-                $('#property-text-text-color').colpick({
+                colorPickers.push($('#property-text-text-color').colpick({
                     colorScheme:'dark',
                     layout:'hex',
                     color: '000000',
@@ -949,14 +992,14 @@
                         $(el).attr('active', 'false');
                         emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
                     }
-                });
+                }));
     
                 var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
                     'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
                 elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
                 elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
                 elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
-                $('#property-text-background-color').colpick({
+                colorPickers.push($('#property-text-background-color').colpick({
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
@@ -971,10 +1014,10 @@
                         $(el).colpickHide();
                         emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
                     }
-                });
+                }));
     
                 elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled'));
-                $('#property-zone-key-light-color').colpick({
+                colorPickers.push($('#property-zone-key-light-color').colpick({
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
@@ -989,7 +1032,7 @@
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
                     }
-                });
+                }));
                 var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
                 elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
                 elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
@@ -1015,7 +1058,7 @@
                 elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
                 elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
                 elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
-                $('#property-zone-skybox-color').colpick({
+                colorPickers.push($('#property-zone-skybox-color').colpick({
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
@@ -1030,7 +1073,7 @@
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
                     }
-                });
+                }));
     
                 elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url'));
     
@@ -1138,7 +1181,7 @@
             };
 
 
-            // Textarea scollbars
+            // Textarea scrollbars
             var elTextareas = document.getElementsByTagName("TEXTAREA");
 
             var textareaOnChangeEvent = function (event) {
@@ -1252,6 +1295,8 @@
                 elDropdowns = document.getElementsByTagName("select");
             }
 
+            augmentSpinButtons();
+
             // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
             document.addEventListener("contextmenu", function (event) {
                 event.preventDefault();
@@ -1262,30 +1307,32 @@
 
 <body onload='loaded();'>
     <div id="properties-list">
-        <div id="type" class="property value">
+        <div id="properties-header">
-            <label>Type:</label>
+            <div id="type" class="property value">
-            <span id="property-type"></span>
+                <span id="type-icon"></span><label id="property-type"><i>No selection</i></label>
-        </div>
+            </div>
-        <div id="id" class="property value">
+            <div class="property checkbox">
-            <label>ID:</label>
+                <input type="checkbox" id="property-locked">
-            <span id="property-id" class="selectable"></span>
+                <label for="property-locked"><span>&#xe006;</span>&nbsp;Locked</label>
+            </div>
+            <div class="property checkbox">
+                <input type="checkbox" id="property-visible">
+                <label for="property-visible"><span>&#xe007;</span>&nbsp;Visible</label>
+            </div>
         </div>
+        <hr />
         <div class="property text">
             <label for="property-name">Name</label>
             <input type="text" id="property-name">
         </div>
-        <div class="property checkbox">
-            <input type="checkbox" id="property-locked">
-            <label for="property-locked">Locked</label>
-        </div>
-        <div class="property checkbox">
-            <input type="checkbox" id="property-visible">
-            <label for="property-visible">Visible</label>
-        </div>
         <div class="property textarea">
             <label for="property-user-data">User data</label>
             <textarea id="property-user-data"></textarea>
         </div>
+        <div id="id" class="property value">
+            <label>ID:</label>
+            <span id="property-id" class="selectable"></span>
+        </div>
 
 
         <div class="section-header hyperlink-group hyperlink-section">
@@ -1305,7 +1352,35 @@
             <label>Spatial</label><span>M</span>
         </div>
         <div class="spatial-group property xyz">
-            <label>Position</label>
+            <label>Dimensions <span class="unit">m</span></label>
+            <div class="tuple">
+                <div><input type="number" class="x" id="property-dim-x" step="0.1"><label for="property-dim-x">X:</label></div>
+                <div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
+            </div>
+        </div>
+        <div class="spatial-group property gen">
+            <label>Scale <span class="unit">%</span></label>
+            <div class="row">
+                <input type="number" id="dimension-rescale-pct" value=100>
+                <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
+                <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
+            </div>
+        </div>
+
+        <hr class="spatial-group" />
+        <div class="spatial-group property pyr">
+            <label>Rotation <span class="unit">deg</span></label>
+            <div class="tuple">
+                <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
+                <div><input type="number" class="yaw" id="property-rot-y" step="0.1"><label for="property-rot-y">Yaw:</label></div>
+                <div><input type="number" class="roll" id="property-rot-z" step="0.1"><label for="property-rot-z">Roll:</label></div>
+            </div>
+        </div>
+
+        <hr class="spatial-group" />
+        <div class="spatial-group property xyz">
+            <label>Position <span class="unit">m</span></label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-pos-x"><label for="property-pos-x">X:</label></div>
                 <div><input type="number" class="y" id="property-pos-y"><label for="property-pos-y">Y:</label></div>
@@ -1317,40 +1392,28 @@
                 <input type="button" id="preview-camera-button" value="Preview Camera">
             </div>
         </div>
-        <div class="spatial-group property text">
+        <div class="spatial-group row">
-            <label for="property-parent-id">Parent ID</label>
+            <div class="property text">
-            <input type="text" id="property-parent-id">
+                <label for="property-parent-id">Parent ID</label>
-        </div>
+                <input type="text" id="property-parent-id">
-        <div class="spatial-group property number">
+            </div>
-            <label for="property-parent-joint-index">Parent joint index</label>
+            <div class="property number">
-            <input type="number" id="property-parent-joint-index">
+                <label for="property-parent-joint-index">Parent joint index</label>
+                <input type="number" id="property-parent-joint-index">
+            </div>
         </div>
         <div class="spatial-group property xyz">
-            <label>Registration</label>
+            <label>Registration <span class="unit">(pivot offset as ratio of dimension)</span></label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-reg-x" step="0.1"><label for="property-reg-x">X:</label></div>
                 <div><input type="number" class="y" id="property-reg-y" step="0.1"><label for="property-reg-y">Y:</label></div>
                 <div><input type="number" class="z" id="property-reg-z" step="0.1"><label for="property-reg-z">Z:</label></div>
             </div>
         </div>
-        <div class="spatial-group property xyz">
+
-            <label>Dimensions</label>
+        <hr class="spatial-group poly-vox-section" />
-            <div class="tuple">
+        <div class="spatial-group poly-vox-section property xyz">
-                <div><input type="number" class="x" id="property-dim-x" step="0.1"><label for="property-dim-x">X:</label></div>
+            <label>Voxel volume size <span class="unit">m</span></label>
-                <div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
-                <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
-            </div>
-        </div>
-        <div class="spatial-group property gen">
-            <label>Scale</label>
-            <div class="row">
-                <input type="number" id="dimension-rescale-pct" value=100>
-                <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
-                <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
-            </div>
-        </div>
-        <div class="spatial-group poly-vox-section property XYZ">
-            <label>Voxel volume size</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
                 <div><input type="number" class="y" id="property-voxel-volume-size-y"><label for="property-voxel-volume-size-y">Y:</label></div>
@@ -1378,21 +1441,13 @@
             <label for="property-z-texture-url">Z-axis texture URL</label>
             <input type="text" id="property-z-texture-url">
         </div>
-        <div class="spatial-group property pyr">
-            <label>Rotation</label>
-            <div class="tuple">
-                <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
-                <div><input type="number" class="yaw" id="property-rot-y" step="0.1"><label for="property-rot-y">Yaw:</label></div>
-                <div><input type="number" class="roll" id="property-rot-z" step="0.1"><label for="property-rot-z">Roll:</label></div>
-            </div>
-        </div>
 
 
         <div class="section-header physical-group">
             <label>Physical</label><span>M</span>
         </div>
         <div class="physical-group property xyz">
-            <label>Linear velocity</label>
+            <label>Linear velocity <span class="unit">m/s</span></label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lvel-x"><label for="property-lvel-x">X:</label></div>
                 <div><input type="number" class="y" id="property-lvel-y"><label for="property-lvel-y">Y:</label></div>
@@ -1403,8 +1458,9 @@
             <label>Linear damping</label>
             <input type="number" id="property-ldamping">
         </div>
+        <hr class="physical-group"  />
         <div class="physical-group property pyr">
-            <label>Angular velocity</label>
+            <label>Angular velocity <span class="unit">deg/s</span></label>
             <div class="tuple">
                 <div><input type="number" class="pitch" id="property-avel-x"><label for="property-avel-x">Pitch:</label></div>
                 <div><input type="number" class="yaw" id="property-avel-y"><label for="property-avel-y">Yaw:</label></div>
@@ -1415,6 +1471,7 @@
             <label>Angular damping</label>
             <input type="number" id="property-adamping">
         </div>
+        <hr class="physical-group" />
         <div class="physical-group property gen">
             <div class="tuple">
                 <div><label>Restitution</label><input type="number" id="property-restitution"></div>
@@ -1422,8 +1479,9 @@
                 <div><label>Density</label><input type="number" id="property-density"></div>
             </div>
         </div>
+        <hr class="physical-group" />
         <div class="physical-group property xyz">
-            <label>Gravity</label>
+            <label>Gravity <span class="unit">m/s<sup>2</sup></span></label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-grav-x"><label for="property-grav-x">X:</label></div>
                 <div><input type="number" class="y" id="property-grav-y"><label for="property-grav-y">Y:</label></div>
@@ -1431,14 +1489,15 @@
             </div>
         </div>
         <div class="physical-group property xyz">
-            <label>Acceleration</label>
+            <label>Acceleration <span class="unit">m/s<sup>2</sup></span></label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
                 <div><input type="number" class="y" id="property-lacc-y"><label for="property-lacc-y">Y:</label></div>
                 <div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
             </div>
         </div>
-        <div id="color-section" class="physical-group property rgb">
+        <hr class="physical-group color-section" />
+        <div class="physical-group color-section property rgb">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
             <div class="tuple">
@@ -1461,64 +1520,72 @@
             <label for="property-dynamic">Dynamic</label>
         </div>
 
-        <div class="behavior-group sub-section-header">
+        <div class="behavior-group two-column">
-            <span>Collides With</span>
+            <div class="column">
-        </div>
+                <div class="sub-section-header">
-        <div class="behavior-group checkbox-sub-props">
+                    <span>Collides With</span>
-            <div class="property checkbox">
+                </div>
-                <input type="checkbox" id="property-collide-static">
+                <div class="checkbox-sub-props">
-                <label for="property-collide-static">Static entities</label>
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-collide-static">
+                        <label for="property-collide-static">Static entities</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-collide-dynamic">
+                        <label for="property-collide-dynamic">Dynamic entities</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-collide-kinematic">
+                        <label for="property-collide-kinematic">Kinematic entities</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-collide-myAvatar">
+                        <label for="property-collide-myAvatar">My avatar</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-collide-otherAvatar">
+                        <label for="property-collide-otherAvatar">Other avatars</label>
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <div class="sub-section-header">
+                    <span>Grabbing</span>
+                </div>
+                <div class="checkbox-sub-props">
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-grabbable">
+                        <label for="property-grabbable">Grabbable</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-wants-trigger">
+                        <label for="property-wants-trigger">Triggerable</label>
+                    </div>
+
+                    <div class="property checkbox">
+                        <input type="checkbox" id="property-ignore-ik">
+                        <label for="property-ignore-ik">Ignore inverse kinematics</label>
+                    </div>
+                </div>
             </div>
 
-            <div class="property checkbox">
-                <input type="checkbox" id="property-collide-dynamic">
-                <label for="property-collide-dynamic">Dynamic entities</label>
-            </div>
-
-            <div class="property checkbox">
-                <input type="checkbox" id="property-collide-kinematic">
-                <label for="property-collide-kinematic">Kinematic entities</label>
-            </div>
-
-            <div class="property checkbox">
-                <input type="checkbox" id="property-collide-myAvatar">
-                <label for="property-collide-myAvatar">My avatar</label>
-            </div>
-
-            <div class="property checkbox">
-                <input type="checkbox" id="property-collide-otherAvatar">
-                <label for="property-collide-otherAvatar">Other avatars</label>
-            </div>
-        </div>
-
-        <div class="behavior-group sub-section-header">
-            <span>Grabbing</span>
-        </div>
-        <div class="behavior-group checkbox-sub-props">
-            <div class="property checkbox">
-                <input type="checkbox" id="property-grabbable">
-                <label for="property-grabbable">Grabbable</label>
-            </div>
-
-            <div class="property checkbox">
-                <input type="checkbox" id="property-wants-trigger">
-                <label for="property-wants-trigger">Triggerable</label>
-            </div>
-
-            <div class="property checkbox">
-                <input type="checkbox" id="property-ignore-ik">
-                <label for="property-ignore-ik">Ignore inverse kinematics</label>
-            </div>
         </div>
 
+        <hr class="behavior-group" />
         <div class="behavior-group property url ">
             <label for="property-collision-sound-url">Collision sound URL</label>
             <input type="text" id="property-collision-sound-url">
         </div>
         <div class="behavior-group property number">
-            <label>Lifetime</label>
+            <label>Lifetime <span class="unit">s</span></label>
             <input type="number" id="property-lifetime">
         </div>
+        <hr class="behavior-group" />
         <div class="behavior-group property url ">
             <!--
             FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated
@@ -1551,33 +1618,47 @@
             <label for="property-compound-shape-url">Compound shape URL</label>
             <input type="text" id="property-compound-shape-url">
         </div>
+        <hr class="model-group model-section" />
         <div class="model-group model-section property url ">
             <label for="property-model-animation-url">Animation URL</label>
             <input type="text" id="property-model-animation-url">
         </div>
-        <div class="model-group model-section property checkbox">
+
-            <input type="checkbox" id="property-model-animation-playing">
+        <div class="model-group model-section two-column">
-            <label for="property-model-animation-playing">Animation playing</label>
+            <div class="column">
-        </div>
+                <div class="property checkbox">
-        <div class="model-group model-section property number">
+                    <input type="checkbox" id="property-model-animation-playing">
-            <label>Animation FPS</label>
+                    <label for="property-model-animation-playing">Animation playing</label>
-            <input type="number" id="property-model-animation-fps">
+                </div>
-        </div>
+                <div class="property checkbox indent">
-        <div class="model-group model-section property number">
+                    <input type="checkbox" id="property-model-animation-loop">
-            <div class="tuple">
+                    <label for="property-model-animation-loop">Animation loop</label>
-                <div><label>Animation frame</label><input type="number" id="property-model-animation-frame"></div>
+                </div>
-                <div><label>First frame</label><input type="number" id="property-model-animation-first-frame"></div>
+                <div class="property checkbox indent">
-                <div><label>Last frame</label><input type="number" id="property-model-animation-last-frame"></div>
+                    <input type="checkbox" id="property-model-animation-hold">
+                    <label for="property-model-animation-hold">Animation hold</label>
+                </div>
+                <div id="animation-fps" class="property number">
+                    <label>Animation FPS</label>
+                    <input type="number" id="property-model-animation-fps">
+                </div>
+            </div>
+            <div class="column">
+                <div class="property number">
+                    <label>Animation frame</label>
+                    <input type="number" id="property-model-animation-frame">
+                </div>
+                <div class="property number">
+                    <label>First frame</label>
+                    <input type="number" id="property-model-animation-first-frame">
+                </div>
+                <div class="property number">
+                    <label>Last frame</label>
+                    <input type="number" id="property-model-animation-last-frame">
+                </div>
             </div>
         </div>
-        <div class="model-group model-section property checkbox">
+        <hr class="model-group model-section" />
-            <input type="checkbox" id="property-model-animation-loop">
-            <label for="property-model-animation-loop">Animation loop</label>
-        </div>
-        <div class="model-group model-section property checkbox">
-            <input type="checkbox" id="property-model-animation-hold">
-            <label for="property-model-animation-hold">Animation hold</label>
-        </div>
         <div class="model-group model-section property textarea">
             <label for="property-model-textures">Textures</label>
             <textarea id="property-model-textures"></textarea>
@@ -1596,7 +1677,7 @@
             <input type="text" id="property-text-text">
         </div>
         <div class="text-group text-section property number">
-            <label>Line height</label>
+            <label>Line height <span class="unit">m</span></label>
             <input type="number" id="property-text-line-height" min="0" step="0.005">
         </div>
         <div class="text-group text-section property rgb">
@@ -1645,8 +1726,8 @@
         </div>
         <div class="zone-group zone-section keylight-section property gen">
             <div class="tuple">
-                <div><label>Light altitude</label><input type="number" id="property-zone-key-light-direction-x"></div>
+                <div><label>Light altitude <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-x"></div>
-                <div><label>Light azimuth</label><input type="number" id="property-zone-key-light-direction-y"></div>
+                <div><label>Light azimuth <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-y"></div>
                 <div></div>
             </div>
         </div>
@@ -1664,9 +1745,9 @@
         </div>
         <div class="zone-group zone-section stage-section property gen">
             <div class="tuple">
-                <div><label>Stage latitude</label><input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1"></div>
+                <div><label>Latitude <span class="unit">deg</span></label><input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1"></div>
-                <div><label>Stage longitude</label><input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1"></div>
+                <div><label>Longitude <span class="unit">deg</span></label><input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1"></div>
-                <div><label>Stage altitude</label><input type="number" id="property-zone-stage-altitude" step="1"></div>
+                <div><label>Altitude <span class="unit">m</span></label><input type="number" id="property-zone-stage-altitude" step="1"></div>
             </div>
         </div>
         <div class="zone-group zone-section stage-section property checkbox">
@@ -1676,8 +1757,8 @@
 
         <div class="zone-group zone-section stage-section property gen">
             <div class="tuple">
-                <div><label>Stage day of year</label><input type="number" id="property-zone-stage-day" min="0" max="365" step="1"></div>
+                <div><label>Day of year</label><input type="number" id="property-zone-stage-day" min="0" max="365" step="1"></div>
-                <div><label>Stage hour</label><input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5"></div>
+                <div><label>Hour</label><input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5"></div>
                 <div></div>
             </div>
         </div>
@@ -1735,7 +1816,7 @@
         <div class="light-group light-section property gen">
             <div class="tuple">
                 <div><label>Intensity</label><input type="number" id="property-light-intensity" min="0" step="0.1"></div>
-                <div><label>Fall-off radius</label><input type="number" id="property-light-falloff-radius" min="0" step="0.1"></div>
+                <div><label>Fall-off radius <span class="unit">m</span></label><input type="number" id="property-light-falloff-radius" min="0" step="0.1"></div>
                 <div></div>
             </div>
         </div>

examples/html/gridControls.html

@@ -11,21 +11,15 @@
 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="edit-style.css">
+    <link rel="stylesheet" type="text/css" href="css/colpick.css">
+    <script src="jquery-2.1.4.min.js"></script>
+    <script src="colpick.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         function loaded() {
             openEventBridge(function() {
-                var gridColor = { red: 0, green: 0, blue: 0 };
-                var gridColors = [
-                    { red: 0, green: 0, blue: 0 },
-                    { red: 255, green: 255, blue: 255 },
-                    { red: 255, green: 0, blue: 0 },
-                    { red: 0, green: 255, blue: 0},
-                    { red: 0, green: 0, blue: 255 },
-                ];
-                var gridColorIndex = 0;
-    
                 elPosY = document.getElementById("horiz-y");
                 elMinorSpacing = document.getElementById("minor-spacing");
                 elMajorSpacing = document.getElementById("major-spacing");
@@ -37,12 +31,12 @@
                 if (window.EventBridge !== undefined) {
                     EventBridge.scriptEventReceived.connect(function(data) {
                         data = JSON.parse(data);
-    
+
                         if (data.origin) {
                             var origin = data.origin;
-                            elPosY.value = origin.y.toFixed(2);
+                            elPosY.value = origin.y;
                         }
-    
+
                         if (data.minorGridEvery !== undefined) {
                             elMinorSpacing.value = data.minorGridEvery;
                         }
@@ -73,7 +67,6 @@
                             minorGridEvery: elMinorSpacing.value,
                             majorGridEvery: elMajorSpacing.value,
                             gridColor: gridColor,
-                            colorIndex: gridColorIndex,
                             snapToGrid: elSnapToGrid.checked,
                             visible: elHorizontalGridVisible.checked,
                         }));
@@ -100,23 +93,52 @@
                     }));
                 });
     
-                var gridColorBox = document.getElementById('grid-color');
+                var gridColor = { red: 255, green: 255, blue: 255 };
-    
+                var elColor = document.getElementById("grid-color");
-                for (var i = 0; i < gridColors.length; i++) {
+                var elColorRed = document.getElementById("grid-color-red");
-                    var colors = gridColors[i];
+                var elColorGreen = document.getElementById("grid-color-green");
-                    var box = document.createElement('div');
+                var elColorBlue = document.getElementById("grid-color-blue");
-                    box.setAttribute('class', 'color-box');
+                elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
-                    box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
+                elColorRed.value = gridColor.red;
-                    document.getElementById("grid-colors").appendChild(box);
+                elColorGreen.value = gridColor.green;
-                    box.addEventListener("click", function(color, index) {
+                elColorBlue.value = gridColor.blue;
-                        return function() {
+
-                            gridColor = color;
+                var colorChangeFunction = function () {
-                            gridColorIndex = index;
+                    gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value };
-                            emitUpdate();
+                    elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
-                        }
+                    emitUpdate();
-                    }({ red: colors.red, green: colors.green, blue: colors.blue }, i));
+                };
+
+                var colorPickFunction = function (red, green, blue) {
+                    elColorRed.value = red;
+                    elColorGreen.value = green;
+                    elColorBlue.value = blue;
+                    gridColor = { red: red, green: green, blue: blue };
+                    emitUpdate();
                 }
-    
+
+                elColorRed.addEventListener('change', colorChangeFunction);
+                elColorGreen.addEventListener('change', colorChangeFunction);
+                elColorBlue.addEventListener('change', colorChangeFunction);
+                $('#grid-color').colpick({
+                    colorScheme: 'dark',
+                    layout: 'hex',
+                    color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue },
+                    onShow: function (colpick) {
+                        $('#grid-color').attr('active', 'true');
+                    },
+                    onHide: function (colpick) {
+                        $('#grid-color').attr('active', 'false');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
+                        $(el).css('background-color', '#' + hex);
+                        $(el).colpickHide();
+                        colorPickFunction(rgb.r, rgb.g, rgb.b);
+                    }
+                });
+
+                augmentSpinButtons();
+
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
 
@@ -146,29 +168,28 @@
 
         <div class="property">
             <div class="number">
-                <label>Major grid size</label>
+                <label for="major-spacing">Major grid size <span class="unit">m</span></label>
-                <span>
+                <input type="number" id="major-spacing" min="1" step="1" />
-                    <input type="number" id="major-spacing" min="1" step="1" /><span class="unit">m</span>
-                </span>
             </div>
             <div class="number">
-                <label>Minor grid size</label>
+                <label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
-                <span>
+                <input type="number" id="minor-spacing" min="0.2" step="0.2" />
-                    <input type="number" id="minor-spacing" min="0.2" step="0.2" /><span class="unit">m</span>
-                </span>
             </div>
         </div>
 
         <div class="property number">
-            <label>Position (Y axis)</label>
+            <label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
-            <span>
+            <input type="number" id="horiz-y" step="0.1" />
-                <input type="number" id="horiz-y" step="0.1" /><span class="unit">m</span>
-            </span>
         </div>
 
-        <div class="property color-set">
+        <div class="property rgb">
+            <div id="grid-color" class="color-picker"></div>
             <label>Grid line color</label>
-            <span id="grid-colors"></span>
+            <div class="tuple">
+                <div><input type="number" class="red" id="grid-color-red"><label for="grid-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="grid-color-green"><label for="grid-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="grid-color-blue"><label for="grid-color-blue">Blue:</label></div>
+            </div>
         </div>
 
         <div class="property">

examples/html/spinButtons.js

@@ -0,0 +1,51 @@
+//
+//  spinButtons.js
+//
+//  Created by David Rowe on 20 Apr 2016
+//  Copyright 2016 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 hoverSpinButtons(event) {
+    var input = event.target,
+        x = event.offsetX,
+        y = event.offsetY,
+        width = input.offsetWidth,
+        height = input.offsetHeight,
+        SPIN_WIDTH = 11,
+        SPIN_MARGIN = 2,
+        maxX = width - SPIN_MARGIN,
+        minX = maxX - SPIN_WIDTH;
+
+    if (minX <= x && x <= maxX) {
+        if (y < height / 2) {
+            input.classList.remove("hover-down");
+            input.classList.add("hover-up");
+        } else {
+            input.classList.remove("hover-up");
+            input.classList.add("hover-down");
+        }
+    } else {
+        input.classList.remove("hover-up");
+        input.classList.remove("hover-down");
+    }
+}
+
+function unhoverSpinButtons(event) {
+    event.target.classList.remove("hover-up");
+    event.target.classList.remove("hover-down");
+}
+
+function augmentSpinButtons() {
+    var inputs, i, length;
+
+    inputs = document.getElementsByTagName("INPUT");
+    for (i = 0, length = inputs.length; i < length; i += 1) {
+        if (inputs[i].type === "number") {
+            inputs[i].addEventListener("mousemove", hoverSpinButtons);
+            inputs[i].addEventListener("mouseout", unhoverSpinButtons);
+        }
+    }
+}

examples/libraries/entityList.js

@@ -59,6 +59,8 @@ EntityListTool = function(opts) {
                 name: properties.name,
                 type: properties.type,
                 url: properties.type == "Model" ? properties.modelURL : "",
+                locked: properties.locked,
+                visible: properties.visible
             });
         }
 
@@ -99,6 +101,10 @@ EntityListTool = function(opts) {
             }
         } else if (data.type == "delete") {
             deleteSelectedEntities();
+        } else if (data.type == "toggleLocked") {
+            toggleSelectedEntitiesLocked();
+        } else if (data.type == "toggleVisible") {
+            toggleSelectedEntitiesVisible();
         } else if (data.type === "radius") {
             searchRadius = data.radius;
             that.sendUpdate();

examples/libraries/gridTool.js

@@ -3,14 +3,7 @@ var GRID_CONTROLS_HTML_URL = Script.resolvePath('../html/gridControls.html');
 Grid = function(opts) {
     var that = {};
 
-    var colors = [
+    var gridColor = { red: 255, green: 255, blue: 255 };
-        { red: 0, green: 0, blue: 0 },
-        { red: 255, green: 255, blue: 255 },
-        { red: 255, green: 0, blue: 0 },
-        { red: 0, green: 255, blue: 0 },
-        { red: 0, green: 0, blue: 255 },
-    ];
-    var colorIndex = 0;
     var gridAlpha = 0.6;
     var origin = { x: 0, y: +MyAvatar.getJointPosition('LeftToeBase').y.toFixed(1) + 0.1, z: 0 };
     var scale = 500;
@@ -28,7 +21,7 @@ Grid = function(opts) {
         position: origin,
         visible: false,
         drawInFront: false,
-        color: colors[0],
+        color: gridColor,
         alpha: gridAlpha,
         minorGridEvery: minorGridEvery,
         majorGridEvery: majorGridEvery,
@@ -52,12 +45,6 @@ Grid = function(opts) {
         updateGrid();
     };
 
-    that.getColorIndex = function() { return colorIndex; };
-    that.setColorIndex = function(value) {
-        colorIndex = value;
-        updateGrid();
-    };
-
     that.getSnapToGrid = function() { return snapToGrid; };
     that.setSnapToGrid = function(value) {
         snapToGrid = value;
@@ -175,8 +162,8 @@ Grid = function(opts) {
             majorGridEvery = data.majorGridEvery;
         }
 
-        if (data.colorIndex !== undefined) {
+        if (data.gridColor !== undefined) {
-            colorIndex = data.colorIndex;
+            gridColor = data.gridColor;
         }
 
         if (data.gridSize) {
@@ -196,7 +183,7 @@ Grid = function(opts) {
             visible: that.visible && that.enabled,
             minorGridEvery: minorGridEvery,
             majorGridEvery: majorGridEvery,
-            color: colors[colorIndex],
+            color: gridColor,
             alpha: gridAlpha,
         });
 

interface/resources/qml/AssetServer.qml

@@ -330,9 +330,10 @@ Window {
         HifiControls.ContentSection {
             id: assetDirectory
             name: "Asset Directory"
-            spacing: hifi.dimensions.contentSpacing.y
             isFirst: true
 
+            HifiControls.VerticalSpacer {}
+
             Row {
                 id: buttonRow
                 anchors.left: parent.left
@@ -343,8 +344,7 @@ Window {
                     glyph: hifi.glyphs.reload
                     color: hifi.buttons.white
                     colorScheme: root.colorScheme
-                    height: 26
+                    width: hifi.dimensions.controlLineHeight
-                    width: 26
 
                     onClicked: root.reload()
                 }
@@ -353,7 +353,6 @@ Window {
                     text: "ADD TO WORLD"
                     color: hifi.buttons.white
                     colorScheme: root.colorScheme
-                    height: 26
                     width: 120
 
                     enabled: canAddToWorld(assetProxyModel.data(treeView.selection.currentIndex, 0x100))
@@ -365,7 +364,6 @@ Window {
                     text: "RENAME"
                     color: hifi.buttons.white
                     colorScheme: root.colorScheme
-                    height: 26
                     width: 80
 
                     onClicked: root.renameFile()
@@ -378,7 +376,6 @@ Window {
                     text: "DELETE"
                     color: hifi.buttons.red
                     colorScheme: root.colorScheme
-                    height: 26
                     width: 80
 
                     onClicked: root.deleteFile()
@@ -419,7 +416,7 @@ Window {
             id: treeView
             anchors.top: assetDirectory.bottom
             anchors.bottom: uploadSection.top
-            anchors.margins: 12
+            anchors.margins: hifi.dimensions.contentMargin.x + 2  // Extra for border
             anchors.left: parent.left
             anchors.right: parent.right
 
@@ -448,7 +445,7 @@ Window {
             name: "Upload A File"
             spacing: hifi.dimensions.contentSpacing.y
             anchors.bottom: parent.bottom
-            height: 92
+            height: 95
 
             Item {
                 height: parent.height

interface/resources/qml/ToolWindow.qml

@@ -30,7 +30,7 @@ Window {
     title: "Edit"
     property alias tabView: tabView
     implicitWidth: 520; implicitHeight: 695
-    minSize: Qt.vector2d(412, 500)
+    minSize: Qt.vector2d(456, 500)
 
     HifiConstants { id: hifi }
 

interface/resources/qml/controls-uit/Button.qml

@@ -19,7 +19,7 @@ Original.Button {
     property int colorScheme: hifi.colorSchemes.light
 
     width: 120
-    height: 28
+    height: hifi.dimensions.controlLineHeight
 
     style: ButtonStyle {
 

interface/resources/qml/controls-uit/ComboBox.qml

@@ -59,7 +59,7 @@ FocusScope {
         id: comboBox
         anchors.fill: parent
         visible: false
-        height: hifi.fontSizes.textFieldInput + 14  // Match height of TextField control.
+        height: hifi.fontSizes.textFieldInput + 13  // Match height of TextField control.
     }
 
     FiraSansSemiBold {

interface/resources/qml/controls-uit/ContentSection.qml

@@ -46,7 +46,7 @@ Column {
         Item {
             id: leadingSpace
             width: 1
-            height: isFirst ? hifi.dimensions.contentSpacing.y : 0
+            height: isFirst ? 7 : 0
             anchors.top: parent.top
         }
 
@@ -80,14 +80,14 @@ Column {
                 right: parent.right
                 top: topBar.bottom
             }
-            height: (isCollapsible ? 3 : 2) * hifi.dimensions.contentSpacing.y
+            height: isCollapsible ? 36 : 28
 
             RalewayRegular {
                 id: title
                 anchors {
                     left: parent.left
                     top: parent.top
-                    topMargin: hifi.dimensions.contentSpacing.y
+                    topMargin: 12
                 }
                 size: hifi.fontSizes.sectionName
                 font.capitalization: Font.AllUppercase

interface/resources/qml/controls-uit/SpinBox.qml

@@ -28,7 +28,7 @@ SpinBox {
     FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
     font.family: firaSansSemiBold.name
     font.pixelSize: hifi.fontSizes.textFieldInput
-    height: hifi.fontSizes.textFieldInput + 14  // Match height of TextField control.
+    height: hifi.fontSizes.textFieldInput + 13  // Match height of TextField control.
 
     y: spinBoxLabel.visible ? spinBoxLabel.height + spinBoxLabel.anchors.bottomMargin : 0
 
@@ -51,12 +51,13 @@ SpinBox {
         horizontalAlignment: Qt.AlignLeft
         padding.left: spinBoxLabelInside.visible ? 30 : hifi.dimensions.textPadding
         padding.right: hifi.dimensions.spinnerSize
+        padding.top: 0
 
         incrementControl: HiFiGlyphs {
             id: incrementButton
             text: hifi.glyphs.caratUp
             x: 6
-            y: 2
+            y: 1
             size: hifi.dimensions.spinnerSize
             color: styleData.upPressed ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
         }

interface/resources/qml/controls-uit/TextField.qml

@@ -20,15 +20,17 @@ TextField {
 
     property int colorScheme: hifi.colorSchemes.light
     readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
+    property bool isSearchField: false
     property string label: ""
-    property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height : 0)
+    property real controlHeight: height + (textFieldLabel.visible ? textFieldLabel.height + 1 : 0)
 
     placeholderText: textField.placeholderText
 
     FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
     font.family: firaSansSemiBold.name
     font.pixelSize: hifi.fontSizes.textFieldInput
-    height: implicitHeight + 4  // Make surrounding box higher so that highlight is vertically centered.
+    font.italic: textField.text == ""
+    height: implicitHeight + 3  // Make surrounding box higher so that highlight is vertically centered.
 
     y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
 
@@ -42,11 +44,22 @@ TextField {
                    : (textField.focus ? hifi.colors.black : hifi.colors.baseGrayShadow)
             border.color: hifi.colors.primaryHighlight
             border.width: textField.focus ? 1 : 0
+            radius: isSearchField ? textField.height / 2 : 0
+
+            HiFiGlyphs {
+                text: hifi.glyphs.search
+                color: textColor
+                size: hifi.fontSizes.textFieldSearchIcon
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: hifi.dimensions.textPadding - 2
+                visible: isSearchField
+            }
         }
         placeholderTextColor: hifi.colors.lightGray
         selectedTextColor: hifi.colors.black
         selectionColor: hifi.colors.primaryHighlight
-        padding.left: hifi.dimensions.textPadding
+        padding.left: (isSearchField ? textField.height - 2 : 0) + hifi.dimensions.textPadding
         padding.right: hifi.dimensions.textPadding
     }
 
@@ -56,7 +69,7 @@ TextField {
         colorScheme: textField.colorScheme
         anchors.left: parent.left
         anchors.bottom: parent.top
-        anchors.bottomMargin: 4
+        anchors.bottomMargin: 3
         visible: label != ""
     }
 }

interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml

@@ -51,7 +51,11 @@ Window {
 
             Rectangle {
                 id: attachmentsBackground
-                anchors { left: parent.left; right: parent.right; top: parent.top; bottom: newAttachmentButton.top; margins: 8 }
+                anchors {
+                    left: parent.left; right: parent.right; top: parent.top; bottom: newAttachmentButton.top;
+                    margins: hifi.dimensions.contentMargin.x
+                    bottomMargin: hifi.dimensions.contentSpacing.y
+                }
                 color: hifi.colors.baseGrayShadow
                 radius: 4
 
@@ -129,7 +133,14 @@ Window {
 
             HifiControls.Button {
                 id: newAttachmentButton
-                anchors { left: parent.left; right: parent.right; bottom: buttonRow.top; margins: 8 }
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    bottom: buttonRow.top
+                    margins: hifi.dimensions.contentMargin.x;
+                    topMargin: hifi.dimensions.contentSpacing.y
+                    bottomMargin: hifi.dimensions.contentSpacing.y
+                }
                 text: "New Attachment"
                 color: hifi.buttons.black
                 colorScheme: hifi.colorSchemes.dark
@@ -151,7 +162,13 @@ Window {
             Row {
                 id: buttonRow
                 spacing: 8
-                anchors { right: parent.right; bottom: parent.bottom; margins: 8 }
+                anchors {
+                    right: parent.right
+                    bottom: parent.bottom
+                    margins: hifi.dimensions.contentMargin.x
+                    topMargin: hifi.dimensions.contentSpacing.y
+                    bottomMargin: hifi.dimensions.contentSpacing.y
+                }
                 HifiControls.Button {
                     action: okAction
                     color: hifi.buttons.black

interface/resources/qml/hifi/dialogs/RunningScripts.qml

@@ -114,7 +114,9 @@ Window {
                 }
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.Table {
                 tableModel: runningScriptsModel
@@ -125,7 +127,7 @@ Window {
             }
 
             HifiControls.VerticalSpacer {
-                height: hifi.dimensions.controlInterlineHeight + 2  // Table view draws a little taller than it's height.
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
             }
         }
 
@@ -180,16 +182,19 @@ Window {
 
             HifiControls.TextField {
                 id: filterEdit
+                isSearchField: true
                 anchors.left: parent.left
                 anchors.right: parent.right
                 focus: true
                 colorScheme: hifi.colorSchemes.dark
-                placeholderText: "filter"
+                placeholderText: "Filter"
                 onTextChanged: scriptsModel.filterRegExp =  new RegExp("^.*" + text + ".*$", "i")
                 Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.Tree {
                 id: treeView
@@ -200,7 +205,9 @@ Window {
                 anchors.right: parent.right
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.TextField {
                 id: selectedScript

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -131,8 +131,8 @@ Item {
         readonly property bool largeScreen: Screen.width >= 1920 && Screen.height >= 1080
         readonly property real borderRadius: largeScreen ? 7.5 : 5.0
         readonly property real borderWidth: largeScreen ? 2 : 1
-        readonly property vector2d contentMargin: Qt.vector2d(12, 24)
+        readonly property vector2d contentMargin: Qt.vector2d(21, 21)
-        readonly property vector2d contentSpacing: Qt.vector2d(8, 12)
+        readonly property vector2d contentSpacing: Qt.vector2d(11, 14)
         readonly property real labelPadding: 40
         readonly property real textPadding: 8
         readonly property real sliderHandleSize: 18
@@ -143,8 +143,8 @@ Item {
         readonly property real tableHeaderHeight: 40
         readonly property vector2d modalDialogMargin: Qt.vector2d(50, 30)
         readonly property real modalDialogTitleHeight: 40
-        readonly property real controlLineHeight: 29  // Height of spinbox control on 1920 x 1080 monitor
+        readonly property real controlLineHeight: 28  // Height of spinbox control on 1920 x 1080 monitor
-        readonly property real controlInterlineHeight: 22  // 75% of controlLineHeight
+        readonly property real controlInterlineHeight: 21  // 75% of controlLineHeight
         readonly property vector2d menuPadding: Qt.vector2d(14, 12)
     }
 
@@ -156,6 +156,7 @@ Item {
         readonly property real inputLabel: dimensions.largeScreen ? 14 : 10
         readonly property real textFieldInput: dimensions.largeScreen ? 15 : 12
         readonly property real textFieldInputLabel: dimensions.largeScreen ? 13 : 9
+        readonly property real textFieldSearchIcon: dimensions.largeScreen ? 30 : 24
         readonly property real tableText: dimensions.largeScreen ? 15 : 12
         readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9
         readonly property real iconButton: dimensions.largeScreen ? 13 : 9

interface/resources/qml/windows-uit/Window.qml

@@ -215,7 +215,7 @@ Fadable {
                 bottom: parent.bottom
             }
             width: parent.contentWidth
-            height: footer.height + 2 * hifi.dimensions.contentSpacing.y
+            height: footer.height + 2 * hifi.dimensions.contentSpacing.y + 3
             color: hifi.colors.baseGray
             visible: footer.height > 0