From 4e3cdf6569f682ca32e8fb9082682983cc4761f8 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 7 Apr 2016 12:32:27 +1200
Subject: [PATCH 01/31] Update Running Scripts' search to have rounded ends and
 a search icon

---
 .../resources/qml/controls-uit/TextField.qml      | 15 ++++++++++++++-
 .../resources/qml/hifi/dialogs/RunningScripts.qml |  3 ++-
 .../resources/qml/styles-uit/HifiConstants.qml    |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/interface/resources/qml/controls-uit/TextField.qml b/interface/resources/qml/controls-uit/TextField.qml
index b0d657652e..c260449428 100644
--- a/interface/resources/qml/controls-uit/TextField.qml
+++ b/interface/resources/qml/controls-uit/TextField.qml
@@ -20,6 +20,7 @@ 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)
 
@@ -28,6 +29,7 @@ TextField {
     FontLoader { id: firaSansSemiBold; source: "../../fonts/FiraSans-SemiBold.ttf"; }
     font.family: firaSansSemiBold.name
     font.pixelSize: hifi.fontSizes.textFieldInput
+    font.italic: textField.text == ""
     height: implicitHeight + 4  // 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
+                visible: isSearchField
+            }
         }
         placeholderTextColor: hifi.colors.lightGray
         selectedTextColor: hifi.colors.black
         selectionColor: hifi.colors.primaryHighlight
-        padding.left: hifi.dimensions.textPadding
+        padding.left: (isSearchField ? textField.height : 0) + hifi.dimensions.textPadding
         padding.right: hifi.dimensions.textPadding
     }
 
diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
index 215710cc81..b9fc7f37ab 100644
--- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml
+++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
@@ -175,11 +175,12 @@ 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")
             }
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index 02be3b93d1..c1ba92ed31 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -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

From 3f62702ff02c0ab69ee2c6417bd8ff9b4f96e845 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 7 Apr 2016 13:38:00 +1200
Subject: [PATCH 02/31] Add search icon to entity list filter

---
 examples/html/edit-style.css                     | 16 ++++++++++++++++
 examples/html/entityList.html                    |  2 +-
 .../resources/qml/controls-uit/TextField.qml     |  4 ++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 02a3ba3cab..c8ed9fe7da 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -360,6 +360,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;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 532b18bb97..ebb9d3bad5 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -286,7 +286,7 @@
 
     <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>
         <div id="entity-table-scroll">
diff --git a/interface/resources/qml/controls-uit/TextField.qml b/interface/resources/qml/controls-uit/TextField.qml
index c260449428..6cf88c43c3 100644
--- a/interface/resources/qml/controls-uit/TextField.qml
+++ b/interface/resources/qml/controls-uit/TextField.qml
@@ -52,14 +52,14 @@ TextField {
                 size: hifi.fontSizes.textFieldSearchIcon
                 anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
-                anchors.leftMargin: hifi.dimensions.textPadding
+                anchors.leftMargin: hifi.dimensions.textPadding - 2
                 visible: isSearchField
             }
         }
         placeholderTextColor: hifi.colors.lightGray
         selectedTextColor: hifi.colors.black
         selectionColor: hifi.colors.primaryHighlight
-        padding.left: (isSearchField ? textField.height : 0) + hifi.dimensions.textPadding
+        padding.left: (isSearchField ? textField.height - 2 : 0) + hifi.dimensions.textPadding
         padding.right: hifi.dimensions.textPadding
     }
 

From 9c9da1cab96458ccac7f038a8041bef4a630f269 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 7 Apr 2016 13:38:12 +1200
Subject: [PATCH 03/31] Make entity list filter have rounded focus highlight

---
 examples/html/edit-style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index c8ed9fe7da..c9650120fa 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -218,6 +218,12 @@ input.search {
     border-radius: 14px;
 }
 
+input.search:focus {
+    outline: none;
+    box-sizing: border-box;
+    box-shadow: 0 0 0px 1px #00b4ef;
+}
+
 input:disabled, textarea:disabled {
     background-color: #383838;
     color: #afafaf;

From 8bfd028906ee45e0246a67c7b7cfbccafe1eccc4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 7 Apr 2016 15:28:19 +1200
Subject: [PATCH 04/31] Add units to field labels

---
 examples/html/edit-style.css        | 21 +++++++--------
 examples/html/entityProperties.html | 40 ++++++++++++++---------------
 examples/html/gridControls.html     | 18 +++++--------
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index c9650120fa..e96e8f9630 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -474,12 +474,17 @@ input[type=checkbox]:checked + label:hover {
     min-height: 29px;
 }
 
-.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;
@@ -512,7 +517,8 @@ input[type=checkbox]:checked + label:hover {
 
 .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;
 }
 
 .number > input {
@@ -527,13 +533,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;
@@ -768,7 +767,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 
 
 #entity-list-header {
-    margin-bottom: 24px;
+    margin-bottom: 36px;
 }
 
 #delete {
@@ -793,6 +792,8 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 #radius-and-unit {
     float: right;
     margin-right: -148px;
+    position: relative;
+    top: -20px;
 }
 
 
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index bd8abb9a91..2302dde055 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1336,7 +1336,7 @@
             <label>Spatial</label><span>M</span>
         </div>
         <div class="spatial-group property xyz">
-            <label>Position</label>
+            <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>
@@ -1357,7 +1357,7 @@
             <input type="number" id="property-parent-joint-index">
         </div>
         <div class="spatial-group property xyz">
-            <label>Registration</label>
+            <label>Registration <span class="unit">0.0&ndash;1.0</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>
@@ -1365,7 +1365,7 @@
             </div>
         </div>
         <div class="spatial-group property xyz">
-            <label>Dimensions</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>
@@ -1373,7 +1373,7 @@
             </div>
         </div>
         <div class="spatial-group property gen">
-            <label>Scale</label>
+            <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">
@@ -1381,7 +1381,7 @@
             </div>
         </div>
         <div class="spatial-group poly-vox-section property XYZ">
-            <label>Voxel volume size</label>
+            <label>Voxel volume size <span class="unit">m</span></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>
@@ -1413,7 +1413,7 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
         <div class="spatial-group property pyr">
-            <label>Rotation</label>
+            <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>
@@ -1426,7 +1426,7 @@
             <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>
@@ -1438,7 +1438,7 @@
             <input type="number" id="property-ldamping">
         </div>
         <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>
@@ -1457,7 +1457,7 @@
             </div>
         </div>
         <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>
@@ -1465,7 +1465,7 @@
             </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>
@@ -1551,7 +1551,7 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </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>
         <div class="behavior-group property url refresh">
@@ -1635,7 +1635,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">
@@ -1684,8 +1684,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 azimuth</label><input type="number" id="property-zone-key-light-direction-y"></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 <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-y"></div>
                 <div></div>
             </div>
         </div>
@@ -1704,9 +1704,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>Stage longitude</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>Latitude <span class="unit">deg</span></label><input type="number" id="property-zone-stage-latitude" min="-90" max="90" 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>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">
@@ -1716,8 +1716,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>Stage hour</label><input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5"></div>
+                <div><label>Day of year</label><input type="number" id="property-zone-stage-day" min="0" max="365" step="1"></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>
@@ -1777,7 +1777,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>
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 7b1be72bdc..cb71f49ef2 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -146,24 +146,18 @@
 
         <div class="property">
             <div class="number">
-                <label>Major grid size</label>
-                <span>
-                    <input type="number" id="major-spacing" min="1" step="1" /><span class="unit">m</span>
-                </span>
+                <label for="major-spacing">Major grid size <span class="unit">m</span></label>
+                <input type="number" id="major-spacing" min="1" step="1" />
             </div>
             <div class="number">
-                <label>Minor grid size</label>
-                <span>
-                    <input type="number" id="minor-spacing" min="0.2" step="0.2" /><span class="unit">m</span>
-                </span>
+                <label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
+                <input type="number" id="minor-spacing" min="0.2" step="0.2" />
             </div>
         </div>
 
         <div class="property number">
-            <label>Position (Y axis)</label>
-            <span>
-                <input type="number" id="horiz-y" step="0.1" /><span class="unit">m</span>
-            </span>
+            <label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
+            <input type="number" id="horiz-y" step="0.1" />
         </div>
 
         <div class="property color-set">

From 353292413342f89261ea5bd13769fdecf87380a9 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 7 Apr 2016 15:28:38 +1200
Subject: [PATCH 05/31] Add search radius label

---
 examples/html/entityList.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index ebb9d3bad5..04ba309cb0 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -287,7 +287,10 @@
     <div id="entity-list">
         <div id="search-area">
             <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">

From abdc994f073746755f8310986b92878f7c3f54a9 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 8 Apr 2016 12:46:06 +1200
Subject: [PATCH 06/31] Replace grid color presets with color picker plus RGB
 fields

---
 examples/html/edit-style.css    |  8 ---
 examples/html/gridControls.html | 86 +++++++++++++++++++++------------
 examples/libraries/gridTool.js  | 23 ++-------
 3 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index e96e8f9630..d4f7f7b16a 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -896,11 +896,3 @@ input#dimension-rescale-button {
     min-width: 50px;
     margin-left: 6px;
 }
-
-
-.color-set label, .color-set span {
-    display: block;
-}
-.color-set span {
-    padding-top: 2px;
-}
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index cb71f49ef2..f56be6400e 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -11,21 +11,14 @@
 <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>
         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 +30,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 +66,6 @@
                             minorGridEvery: elMinorSpacing.value,
                             majorGridEvery: elMajorSpacing.value,
                             gridColor: gridColor,
-                            colorIndex: gridColorIndex,
                             snapToGrid: elSnapToGrid.checked,
                             visible: elHorizontalGridVisible.checked,
                         }));
@@ -100,22 +92,49 @@
                     }));
                 });
     
-                var gridColorBox = document.getElementById('grid-color');
-    
-                for (var i = 0; i < gridColors.length; i++) {
-                    var colors = gridColors[i];
-                    var box = document.createElement('div');
-                    box.setAttribute('class', 'color-box');
-                    box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
-                    document.getElementById("grid-colors").appendChild(box);
-                    box.addEventListener("click", function(color, index) {
-                        return function() {
-                            gridColor = color;
-                            gridColorIndex = index;
-                            emitUpdate();
-                        }
-                    }({ red: colors.red, green: colors.green, blue: colors.blue }, i));
+                var gridColor = { red: 255, green: 255, blue: 255 };
+                var elColor = document.getElementById("grid-color");
+                var elColorRed = document.getElementById("grid-color-red");
+                var elColorGreen = document.getElementById("grid-color-green");
+                var elColorBlue = document.getElementById("grid-color-blue");
+                elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
+                elColorRed.value = gridColor.red;
+                elColorGreen.value = gridColor.green;
+                elColorBlue.value = gridColor.blue;
+
+                var colorChangeFunction = function () {
+                    gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value };
+                    elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
+                    emitUpdate();
+                };
+
+                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);
+                    }
+                })
     
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
@@ -160,9 +179,14 @@
             <input type="number" id="horiz-y" step="0.1" />
         </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">
diff --git a/examples/libraries/gridTool.js b/examples/libraries/gridTool.js
index c002aec3b1..bebad84e1e 100644
--- a/examples/libraries/gridTool.js
+++ b/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 = [
-        { 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 gridColor = { red: 255, green: 255, blue: 255 };
     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) {
-            colorIndex = data.colorIndex;
+        if (data.gridColor !== undefined) {
+            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,
         });
 

From da7d4d33b0868329728aaaea379479d6274b248c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 11:35:25 +1200
Subject: [PATCH 07/31] Add icon for entity type; move locked & visible
 checkboxes to first row

---
 examples/html/edit-style.css        | 39 ++++++++++++++++-
 examples/html/entityProperties.html | 66 ++++++++++++++++++++---------
 2 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 0ab9ad406e..61b153068c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -908,8 +908,45 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     background-color: #00b4ef;
 }
 
-
 input#dimension-rescale-button {
     min-width: 50px;
     margin-left: 6px;
 }
+
+
+#properties-header {
+    display: table-row;
+    height: 28px;
+}
+
+#properties-header .property {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+#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;
+}
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 2302dde055..a72ef96b26 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -21,6 +21,18 @@
         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: "",
+            Web: "q",
+            Text: "l",
+            Light: "p",
+            Zone: "o",
+            PolyVox: "&#xe005;",
+            Multiple: "&#xe000;"
+        }
 
         debugPrint = function(message) {
             EventBridge.emitWebEvent(
@@ -297,6 +309,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");
@@ -505,7 +518,8 @@
                         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');
                             } else if (data.selections.length > 1) {
@@ -513,23 +527,30 @@
     
                                 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 typeStrs = [];
-                                for (type in types) {
-                                    typeStrs.push(type + " (" + types[type] + ")");
+
+                                var type;
+                                if (numTypes === 1) {
+                                    type = selections[0].properties.type;
+                                } else {
+                                    type = "Multiple";
                                 }
-                                elType.innerHTML = typeStrs.join(", ");
-    
+                                elType.innerHTML = type + " (" + data.selections.length + ")";
+                                elTypeIcon.innerHTML = ICON_FOR_TYPE[type];
+                                elTypeIcon.style.display = "inline-block";
+
+                                elID.innerHTML = ids.join("<br>");
+
                                 disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
                             } else {
                                 var activeElement = document.activeElement;
@@ -547,7 +568,9 @@
                                 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) {
@@ -1169,7 +1192,7 @@
             };
 
 
-            // Textarea scollbars
+            // Textarea scrollbars
             var elTextareas = document.getElementsByTagName("TEXTAREA");
 
             var textareaOnChangeEvent = function (event) {
@@ -1293,9 +1316,18 @@
 
 <body onload='loaded();'>
     <div id="properties-list">
-        <div id="type" class="property value">
-            <label>Type:</label>
-            <span id="property-type"></span>
+        <div id="properties-header">
+            <div id="type" class="property value">
+                <span id="type-icon"></span><label id="property-type"><i>No selection</i></label>
+            </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>
         <div id="id" class="property value">
             <label>ID:</label>
@@ -1305,14 +1337,6 @@
             <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>

From 37bd4247da2c82657c636671f25b6febc5ba4cc2 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 12:32:26 +1200
Subject: [PATCH 08/31] Add horizontal rules

---
 examples/html/edit-style.css        | 13 +++++++++++--
 examples/html/entityProperties.html | 24 ++++++++++++++++++++----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 61b153068c..485312eb79 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -418,7 +418,7 @@ 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;
@@ -436,7 +436,7 @@ 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;
 }
 
@@ -464,6 +464,11 @@ input[type=checkbox]:checked + label:hover {
     margin-bottom: -22px;
 }
 
+hr {
+    border: none;
+    padding-top: 2px;
+}
+
 .text-group[collapsed="true"] ~ .text-group,
 .zone-group[collapsed="true"] ~ .zone-group,
 .web-group[collapsed="true"] ~ .web-group,
@@ -950,3 +955,7 @@ input#dimension-rescale-button {
 #properties-header .checkbox label {
     background-position-y: 1px;
 }
+
+#properties-header + hr {
+    margin-top: 12px;
+}
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index a72ef96b26..ed60411b57 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -381,7 +381,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");
@@ -678,13 +678,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") {
@@ -1329,6 +1333,7 @@
                 <label for="property-visible">Visible</label>
             </div>
         </div>
+        <hr />
         <div id="id" class="property value">
             <label>ID:</label>
             <span id="property-id" class="selectable"></span>
@@ -1388,6 +1393,7 @@
                 <div><input type="number" class="z" id="property-reg-z" step="0.1"><label for="property-reg-z">Z:</label></div>
             </div>
         </div>
+        <hr class="spatial-group" />
         <div class="spatial-group property xyz">
             <label>Dimensions <span class="unit">m</span></label>
             <div class="tuple">
@@ -1404,6 +1410,7 @@
                 <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
             </div>
         </div>
+        <hr class="spatial-group poly-vox-section" />
         <div class="spatial-group poly-vox-section property XYZ">
             <label>Voxel volume size <span class="unit">m</span></label>
             <div class="tuple">
@@ -1436,6 +1443,7 @@
             <input type="text" id="property-z-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
+        <hr class="spatial-group" />
         <div class="spatial-group property pyr">
             <label>Rotation <span class="unit">deg</span></label>
             <div class="tuple">
@@ -1461,6 +1469,7 @@
             <label>Linear damping</label>
             <input type="number" id="property-ldamping">
         </div>
+        <hr class="physical-group"  />
         <div class="physical-group property pyr">
             <label>Angular velocity <span class="unit">deg/s</span></label>
             <div class="tuple">
@@ -1473,6 +1482,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>
@@ -1480,6 +1490,7 @@
                 <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 <span class="unit">m/s<sup>2</sup></span></label>
             <div class="tuple">
@@ -1496,7 +1507,8 @@
                 <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">
@@ -1569,6 +1581,7 @@
             </div>
         </div>
 
+        <hr class="behavior-group" />
         <div class="behavior-group property url refresh">
             <label for="property-collision-sound-url">Collision sound URL</label>
             <input type="text" id="property-collision-sound-url">
@@ -1578,6 +1591,7 @@
             <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 refresh">
             <!--
             FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated
@@ -1613,6 +1627,7 @@
             <input type="text" id="property-compound-shape-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
+        <hr class="model-group model-section" />
         <div class="model-group model-section property url refresh">
             <label for="property-model-animation-url">Animation URL</label>
             <input type="text" id="property-model-animation-url">
@@ -1641,6 +1656,7 @@
             <input type="checkbox" id="property-model-animation-hold">
             <label for="property-model-animation-hold">Animation hold</label>
         </div>
+        <hr class="model-group model-section" />
         <div class="model-group model-section property textarea">
             <label for="property-model-textures">Textures</label>
             <textarea id="property-model-textures"></textarea>

From 88067fd89f7b4cb32dffa9ff07254cc175165c20 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 14:37:24 +1200
Subject: [PATCH 09/31] Move ID field to after user data and display multiple
 IDs nicely

---
 examples/html/edit-style.css        | 7 +++++++
 examples/html/entityProperties.html | 8 ++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 485312eb79..a403b6bed7 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -908,6 +908,13 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     margin-top: 0;
 }
 
+#id label {
+    width: 24px;
+}
+#property-id {
+    display: inline-block;
+}
+
 #property-id::selection {
     color: #000000;
     background-color: #00b4ef;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index ed60411b57..63fa163dd3 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1334,10 +1334,6 @@
             </div>
         </div>
         <hr />
-        <div id="id" class="property value">
-            <label>ID:</label>
-            <span id="property-id" class="selectable"></span>
-        </div>
         <div class="property text">
             <label for="property-name">Name</label>
             <input type="text" id="property-name">
@@ -1346,6 +1342,10 @@
             <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">

From 88c3c343fbba04d395682a21a1028a1a3d79243b Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 16:47:28 +1200
Subject: [PATCH 10/31] Display Parent ID and joint index on same line when
 able

---
 examples/html/edit-style.css        | 58 +++++++++++++++--------------
 examples/html/entityProperties.html | 21 +++++++----
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index a403b6bed7..97f6ad0134 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -745,14 +745,19 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     white-space: nowrap;
 }
 
-.row input {
-    float: left;
+.row .property {
+    width: auto;
+    display: inline-block;
+
+    margin-right: 12px;
 }
-.row input[type=button] {
-    margin-left: 8px;
+.row .property:last-child {
     margin-right: 0;
 }
-
+.row .property input {
+    clear: both;
+    float: left;
+}
 
 ::-webkit-scrollbar {
     width: 10px;
@@ -904,28 +909,6 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 }
 
 
-#properties-list .property:first-child {
-    margin-top: 0;
-}
-
-#id label {
-    width: 24px;
-}
-#property-id {
-    display: inline-block;
-}
-
-#property-id::selection {
-    color: #000000;
-    background-color: #00b4ef;
-}
-
-input#dimension-rescale-button {
-    min-width: 50px;
-    margin-left: 6px;
-}
-
-
 #properties-header {
     display: table-row;
     height: 28px;
@@ -966,3 +949,24 @@ input#dimension-rescale-button {
 #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;
+}
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 63fa163dd3..191983b170 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1377,14 +1377,19 @@
                 <input type="button" id="preview-camera-button" value="Preview Camera">
             </div>
         </div>
-        <div class="spatial-group property text">
-            <label for="property-parent-id">Parent ID</label>
-            <input type="text" id="property-parent-id">
-        </div>
-        <div class="spatial-group property number">
-            <label for="property-parent-joint-index">Parent joint index</label>
-            <input type="number" id="property-parent-joint-index">
+
+        <div class="spatial-group row">
+            <div class="property text">
+                <label for="property-parent-id">Parent ID</label>
+                <input type="text" id="property-parent-id">
+            </div>
+            <div class="property number">
+                <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 <span class="unit">0.0&ndash;1.0</span></label>
             <div class="tuple">
@@ -1411,7 +1416,7 @@
             </div>
         </div>
         <hr class="spatial-group poly-vox-section" />
-        <div class="spatial-group poly-vox-section property XYZ">
+        <div class="spatial-group poly-vox-section property xyz">
             <label>Voxel volume size <span class="unit">m</span></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>

From e5d65fb1592ad0cdc76d41c65c0d4de38cf09f75 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 17:10:27 +1200
Subject: [PATCH 11/31] Display collision and grabbing checkbox groups
 side-by-side

---
 examples/html/edit-style.css        | 11 +++-
 examples/html/entityProperties.html | 98 +++++++++++++++--------------
 2 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 97f6ad0134..ad70fa2600 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -759,15 +759,22 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     float: left;
 }
 
+.two-column {
+    display: table;
+    width: 100%;
+}
+.two-column > div {
+    display: table-cell;
+    width: 50%;
+}
+
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
- 
 ::-webkit-scrollbar-track {
     background-color: #2e2e2e;
 }
- 
 ::-webkit-scrollbar-thumb {
     background-color: #696969;
     border: 2px solid #2e2e2e;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 191983b170..e5c06daf8c 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1536,54 +1536,60 @@
             <label for="property-dynamic">Dynamic</label>
         </div>
 
-        <div class="behavior-group sub-section-header">
-            <span>Collides With</span>
-        </div>
-        <div class="behavior-group checkbox-sub-props">
-            <div class="property checkbox">
-                <input type="checkbox" id="property-collide-static">
-                <label for="property-collide-static">Static entities</label>
+        <div class="behavior-group two-column">
+            <div class="column-1">
+                <div class="sub-section-header">
+                    <span>Collides With</span>
+                </div>
+                <div class="checkbox-sub-props">
+                    <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-2">
+                <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" />

From 7d068a31a67e5b38a219ea8a53429b3ea4a2d0ef Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 9 Apr 2016 17:39:31 +1200
Subject: [PATCH 12/31] Rearrange animation checkboxes and spinners to be in
 two columns

---
 examples/html/edit-style.css        | 11 ++++++
 examples/html/entityProperties.html | 58 +++++++++++++++++------------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index ad70fa2600..daf903ea96 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -767,6 +767,13 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     display: table-cell;
     width: 50%;
 }
+.column {
+    vertical-align: top;
+}
+
+.indent {
+    margin-left: 24px;
+}
 
 ::-webkit-scrollbar {
     width: 10px;
@@ -977,3 +984,7 @@ input#dimension-rescale-button {
     min-width: 50px;
     margin-left: 6px;
 }
+
+#animation-fps {
+    margin-top: 51px;
+}
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index e5c06daf8c..1363debf4c 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1537,7 +1537,7 @@
         </div>
 
         <div class="behavior-group two-column">
-            <div class="column-1">
+            <div class="column">
                 <div class="sub-section-header">
                     <span>Collides With</span>
                 </div>
@@ -1568,7 +1568,7 @@
                     </div>
                 </div>
             </div>
-            <div class="column-2">
+            <div class="column">
                 <div class="sub-section-header">
                     <span>Grabbing</span>
                 </div>
@@ -1644,28 +1644,40 @@
             <input type="text" id="property-model-animation-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-        <div class="model-group model-section property checkbox">
-            <input type="checkbox" id="property-model-animation-playing">
-            <label for="property-model-animation-playing">Animation playing</label>
-        </div>
-        <div class="model-group model-section property number">
-            <label>Animation FPS</label>
-            <input type="number" id="property-model-animation-fps">
-        </div>
-        <div class="model-group model-section property number">
-            <div class="tuple">
-                <div><label>Animation frame</label><input type="number" id="property-model-animation-frame"></div>
-                <div><label>First frame</label><input type="number" id="property-model-animation-first-frame"></div>
-                <div><label>Last frame</label><input type="number" id="property-model-animation-last-frame"></div>
+
+        <div class="model-group model-section two-column">
+            <div class="column">
+                <div class="property checkbox">
+                    <input type="checkbox" id="property-model-animation-playing">
+                    <label for="property-model-animation-playing">Animation playing</label>
+                </div>
+                <div class="property checkbox indent">
+                    <input type="checkbox" id="property-model-animation-loop">
+                    <label for="property-model-animation-loop">Animation loop</label>
+                </div>
+                <div class="property checkbox indent">
+                    <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">
-            <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>
         <hr class="model-group model-section" />
         <div class="model-group model-section property textarea">

From 43de32e7ce11cfbdd89de20270e7a7e24b7d4ea0 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 12 Apr 2016 08:57:36 +1200
Subject: [PATCH 13/31] Increasing left/right padding of button text

---
 examples/html/edit-style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index daf903ea96..68fa9673b1 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -300,7 +300,7 @@ input[type=button] {
     vertical-align: top;
     height: 28px;
     min-width: 120px;
-    padding: 0px 12px;
+    padding: 0px 18px;
     margin-right: 8px;
     border-radius: 5px;
     border: none;

From d6fcbd2dacf1fa41ff2f53cf6a22279c5a5a422e Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 12 Apr 2016 15:07:30 +1200
Subject: [PATCH 14/31] Revisit margins and spacing

---
 examples/html/edit-style.css           | 44 ++++++++++++++++----------
 examples/html/entityList.html          |  2 +-
 interface/resources/qml/ToolWindow.qml |  2 +-
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 68fa9673b1..0ccbbb90be 100644
--- a/examples/html/edit-style.css
+++ b/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;
@@ -301,7 +301,7 @@ input[type=button] {
     height: 28px;
     min-width: 120px;
     padding: 0px 18px;
-    margin-right: 8px;
+    margin-right: 7px;
     border-radius: 5px;
     border: none;
     color: #fff;
@@ -421,8 +421,8 @@ input[type=checkbox]:checked + label:hover {
 .section-header, .sub-section-header, hr {
     display: table;
     width: 100%;
-    margin: 22px -12px 0 -12px;
-    padding: 14px 12px 0 12px;
+    margin: 21px -21px 0 -21px;
+    padding: 14px 21px 0 21px;
     font-family: Raleway-Regular;
     font-size: 12px;
     color: #afafaf;
@@ -457,11 +457,11 @@ 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 {
@@ -485,8 +485,8 @@ hr {
 .property {
     display: table;
     width: 100%;
-    margin-top: 22px;
-    min-height: 29px;
+    margin-top: 21px;
+    min-height: 28px;
 }
 
 .property.checkbox {
@@ -531,13 +531,14 @@ hr {
     float: left;
 }
 .property .number + .number {
-    margin-left: 12px;
+    margin-left: 14px;
 }
 
 .text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
     float: left;
     margin-left: 1px;
     margin-bottom: 3px;
+    margin-top: -2px;
 }
 
 .number > input {
@@ -645,7 +646,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;
@@ -665,7 +666,7 @@ div.refresh input[type="button"] {
 .rgb label {
     float: left;
     margin-top: 10px;
-    margin-left: 12px;
+    margin-left: 21px;
 }
 .rgb label + * {
     clear: both;
@@ -678,7 +679,7 @@ div.refresh input[type="button"] {
 .tuple div {
     display: inline-block;
     position: relative;
-    min-width: 120px;
+    min-width: 124px;
     min-height: 1px;
 }
 .tuple div:nth-child(1) {
@@ -690,6 +691,10 @@ div.refresh input[type="button"] {
     float: right;
 }
 
+.tuple label {
+    margin-right: -7px;
+}
+
 .rgb .tuple input {
     padding-left: 65px;
 }
@@ -738,7 +743,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 }
 
 .xyz .buttons input {
-    margin-top: 12px;
+    margin-top: 14px;
 }
 .xyz .buttons span {
     word-wrap: nowrap;
@@ -831,7 +836,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     float: right;
     margin-right: -148px;
     position: relative;
-    top: -20px;
+    top: -17px;
 }
 
 
@@ -932,6 +937,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     display: table-cell;
     vertical-align: middle;
 }
+#properties-header .checkbox {
+    position: relative;
+    top: -1px;
+}
 
 #properties-header #type-icon {
     font-family: hifi-glyphs;
@@ -982,9 +991,12 @@ input#property-parent-id {
 
 input#dimension-rescale-button {
     min-width: 50px;
-    margin-left: 6px;
+    margin-left: 7px;
+}
+input#reset-to-natural-dimensions {
+    margin-right: 0;
 }
 
 #animation-fps {
-    margin-top: 51px;
+    margin-top: 48px;
 }
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 45f91767dc..450d500621 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -254,7 +254,7 @@
 
               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");
diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index ddd314d9ff..da8d49066b 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/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(452, 500)
 
     HifiConstants { id: hifi }
 

From 43f843f731b239e2b34df89f4509b40e2d3ac0ca Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 13 Apr 2016 16:39:52 +1200
Subject: [PATCH 15/31] Retrofit updated margins and spacing to QML dialogs

---
 examples/html/edit-style.css                  |  5 +++-
 interface/resources/qml/AssetServer.qml       | 13 ++++-------
 .../resources/qml/controls-uit/Button.qml     |  2 +-
 .../resources/qml/controls-uit/ComboBox.qml   |  2 +-
 .../qml/controls-uit/ContentSection.qml       |  6 ++---
 .../resources/qml/controls-uit/SpinBox.qml    |  5 ++--
 .../resources/qml/controls-uit/TextField.qml  |  6 ++---
 .../qml/hifi/dialogs/AttachmentsDialog.qml    | 23 ++++++++++++++++---
 .../qml/hifi/dialogs/RunningScripts.qml       | 16 +++++++++----
 .../qml/styles-uit/HifiConstants.qml          |  8 +++----
 .../resources/qml/windows-uit/Window.qml      |  2 +-
 11 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 0ccbbb90be..63d0cdc69c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -230,6 +230,9 @@ input.search {
 input.search:focus {
     outline: none;
     box-sizing: border-box;
+    height: 26px;
+    margin-top: 1px;
+    margin-bottom: 1px;
     box-shadow: 0 0 0px 1px #00b4ef;
 }
 
@@ -441,7 +444,7 @@ input[type=checkbox]:checked + label:hover {
 }
 
 .section-header:first-child {
-    margin-top: 0;
+    margin-top: -2px;
     padding-top: 0;
     background: none;
     height: auto;
diff --git a/interface/resources/qml/AssetServer.qml b/interface/resources/qml/AssetServer.qml
index 86b158c0e9..495d13d118 100644
--- a/interface/resources/qml/AssetServer.qml
+++ b/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: 26
+                    width: hifi.dimensions.controlLineHeight
 
                     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
diff --git a/interface/resources/qml/controls-uit/Button.qml b/interface/resources/qml/controls-uit/Button.qml
index e7c8320ae6..298943b551 100644
--- a/interface/resources/qml/controls-uit/Button.qml
+++ b/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 {
 
diff --git a/interface/resources/qml/controls-uit/ComboBox.qml b/interface/resources/qml/controls-uit/ComboBox.qml
index d25a8c5940..f99e18b12b 100755
--- a/interface/resources/qml/controls-uit/ComboBox.qml
+++ b/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 {
diff --git a/interface/resources/qml/controls-uit/ContentSection.qml b/interface/resources/qml/controls-uit/ContentSection.qml
index 86549afc9f..98350a9333 100644
--- a/interface/resources/qml/controls-uit/ContentSection.qml
+++ b/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
diff --git a/interface/resources/qml/controls-uit/SpinBox.qml b/interface/resources/qml/controls-uit/SpinBox.qml
index ec7821851f..599d94c28d 100755
--- a/interface/resources/qml/controls-uit/SpinBox.qml
+++ b/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
         }
diff --git a/interface/resources/qml/controls-uit/TextField.qml b/interface/resources/qml/controls-uit/TextField.qml
index 6cf88c43c3..79027cdc3b 100644
--- a/interface/resources/qml/controls-uit/TextField.qml
+++ b/interface/resources/qml/controls-uit/TextField.qml
@@ -22,7 +22,7 @@ TextField {
     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
 
@@ -30,7 +30,7 @@ TextField {
     font.family: firaSansSemiBold.name
     font.pixelSize: hifi.fontSizes.textFieldInput
     font.italic: textField.text == ""
-    height: implicitHeight + 4  // Make surrounding box higher so that highlight is vertically centered.
+    height: implicitHeight + 3  // Make surrounding box higher so that highlight is vertically centered.
 
     y: textFieldLabel.visible ? textFieldLabel.height + textFieldLabel.anchors.bottomMargin : 0
 
@@ -69,7 +69,7 @@ TextField {
         colorScheme: textField.colorScheme
         anchors.left: parent.left
         anchors.bottom: parent.top
-        anchors.bottomMargin: 4
+        anchors.bottomMargin: 3
         visible: label != ""
     }
 }
diff --git a/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml b/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml
index 01be4ddbde..437e02e149 100755
--- a/interface/resources/qml/hifi/dialogs/AttachmentsDialog.qml
+++ b/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
diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
index b9fc7f37ab..81520ab3a9 100644
--- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml
+++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
@@ -24,7 +24,7 @@ Window {
     resizable: true
     destroyOnInvisible: true
     x: 40; y: 40
-    implicitWidth: 400; implicitHeight: 695
+    implicitWidth: 400; implicitHeight: 691
     minSize: Qt.vector2d(200, 300)
 
     HifiConstants { id: hifi }
@@ -109,7 +109,9 @@ Window {
                 }
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.Table {
                 tableModel: runningScriptsModel
@@ -120,7 +122,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
             }
         }
 
@@ -185,7 +187,9 @@ Window {
                 Component.onCompleted: scriptsModel.filterRegExp = new RegExp("^.*$", "i")
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.Tree {
                 id: treeView
@@ -196,7 +200,9 @@ Window {
                 anchors.right: parent.right
             }
 
-            HifiControls.VerticalSpacer {}
+            HifiControls.VerticalSpacer {
+                height: hifi.dimensions.controlInterlineHeight + 2  // Add space for border
+            }
 
             HifiControls.TextField {
                 id: selectedScript
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index c1ba92ed31..cb4d2157ca 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/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 contentSpacing: Qt.vector2d(8, 12)
+        readonly property vector2d contentMargin: Qt.vector2d(21, 21)
+        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 controlInterlineHeight: 22  // 75% of controlLineHeight
+        readonly property real controlLineHeight: 28  // Height of spinbox control on 1920 x 1080 monitor
+        readonly property real controlInterlineHeight: 21  // 75% of controlLineHeight
         readonly property vector2d menuPadding: Qt.vector2d(14, 12)
     }
 
diff --git a/interface/resources/qml/windows-uit/Window.qml b/interface/resources/qml/windows-uit/Window.qml
index 32fc816173..7227069a09 100644
--- a/interface/resources/qml/windows-uit/Window.qml
+++ b/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
 

From 9e2c844dc0f2f07047b2c83e6544cb9d7f6e057a Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 13 Apr 2016 16:48:13 +1200
Subject: [PATCH 16/31] Updated the HiFi glyphs font file

Used the new "model" icon in entity properties tab.
---
 examples/html/entityProperties.html       |   2 +-
 interface/resources/fonts/hifi-glyphs.ttf | Bin 23288 -> 23944 bytes
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 550658dc95..41981bc4fe 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -25,7 +25,7 @@
             Box: "V",
             Sphere: "n",
             ParticleEffect: "&#xe004;",
-            Model: "",
+            Model: "&#xe008;",
             Web: "q",
             Text: "l",
             Light: "p",
diff --git a/interface/resources/fonts/hifi-glyphs.ttf b/interface/resources/fonts/hifi-glyphs.ttf
index 876d21d838dbc0935bf77a13366d4c68411b855b..1b0d4f3fe61a60a3cf499f3557dd29bb924bc924 100644
GIT binary patch
delta 1136
zcmYLJTTEP46kYq=H}kl|FmvxPFCJ6w9i=>+*R8=}T0u%1Dz?CYG_($MfI$$H(NJp~
z6ESU4qix635Bp_*s?kItO`6olCqG0#O#4-nCZ;AT=~qn}Kg8UjiF@Z{pL24u_F6k<
z@5eXk!fmR60J!iTIJ`74Fna8b>vwMeQ;Pt?hx=a`z^4#_sUZN(!y{dZ;qQiy0W<+1
zKeJR=S?fE#0k97N);w2OUD@3Q2Tb(?kmnZ9&MI#nY5;_F;P}dXv2aFOFW&)h4?t#q
zzE~;n-E<!yAAo)HOXam-$oo7%-`I~9muCv0t70DDzXEV~sj#+!Ejk6z0h`ckg{9)3
zncI0F{|KPXmF3m)qr$I0024O={<E4m0v`PM#rA3Sxxe9Hu<e&*<IY}WjXPH;OAFOr
znj*P+js8kc;~;D{+>;fqp@4$mYP&Fa{A<gDj6Jw_@5|L&?13<cd6YJ<aVk~6=C@>X
zBaZkjV6!YJ!xe^USoAGjhlVK7mQES5Rxv_uijYt1p+qK2sZL605sIZ#^ub^<HRugC
z`G41%8oxYXp8umadE`j4my0$W)uK`Ds4uc^hO^nQt%Juwlxd4jKt~%4bOUXzW+zJ<
zRxht>x+eK5ZjwY()3s#6%2<YJ#0*LIiLFLDl}TvC@>#cDC&|ned%ADmJBKAn(cQV7
zfSBkXOw>C)?o{98_-|n&95%w`q$B7ir-SoGgFfO;)j7!>bS7Tc#dzH1@zfdY5Z@3A
zHTXgyo16?E_EY5{-NOjRaT2d!7A36V96*LjR>m|`GR#<Ox}7}}^S6_~RV9DSuQJi5
zn`4sLL{YMJ=qlCjGD&MsNf%kV)<agtN_A0=GLo4i$<%bow3?U|CEd_X-88zW;?vDe
z-qfWWqldgQ*&&Fca;N1*A|h6EA_}z#0w*z+hzEH=l7kLackrH0hrr3isH2_}L{3)f
zJwv>}jY&+p(6J$Jzx~wB$ALifWkn4!((9T9|K(>(A2HQU#6&^nxU=0;?E@9Ms4&l<
zEQ#E-quEYoTPiNe0@bsmC@FHpS+6^|tXHg)$*b~$tf<*ZUgu<)A3S-EU$Fcm`4+|L
zbwvy|ygxAN(k}K}6QU6#;y9Pft4KYk-_LpMn!|~!d*2oW2Lhn#rO|(c1UitaemvIB
zB|1{o@5er&h3bj?Pa+j*mgY8_$FFb`{NnP=tI}Jg)zb80QCM0&Q?zFRXm=N^2I&S6
ds3oz_97-VYz>{9E#|gHxpZ{#f|NE?Q=RcNX#_s?C

delta 453
zcmYL`J4jn`6vlt&J~ZNsf`ioz9o$5;CW?dFMI#g?f^r)JDi@8(keE<2L|U{I2f-oW
zbu1l<;99sksKLoa>kA596mjWL8ah=7Iz;|g!2^fyJm5Ru$64K%(vB=6KrNrp84ZQT
zN8Z2t@DHL_fPZLUFvJEG5G??&!ei~7;ll7+kO*MSr0mRSI`;;&RnVH^_ClsyMu+G&
z;EN|0=kDg$PQlDV*q4aevz0wf&4A+XP9$Q>w$ULsAPqoEB9+a(ynJy2@*Vh<OwZUq
zTCXiIHi3(joy%}2Qy@J`(7c_B{pmiiVEiM9n@KNZ_k4r@!Ri3xvu92qxx0TqUEh04
zwT6nHHO2fRYQ_Az^hw<5mq{_5FY@=bTIf&d_ZXBq-K+c<l$14mJW?&)m`*|a?QZFH
z;<(0<yJA*_-CL_x%ph$9oXSY69&8IZU6BomJI9eT_v^&E9`bZZxs2u!*8z>*O!Yc*
U2nIYIQ9t6O@7uY;XYs}S1LjF+djJ3c


From e8f627e3fed5e5c45352cf97bf9ed37b1a0459c9 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 13 Apr 2016 17:09:10 +1200
Subject: [PATCH 17/31] Add "lock" and "visible" icons to checkboxes in entity
 properties tab

---
 examples/html/edit-style.css        | 13 +++++++++++++
 examples/html/entityProperties.html |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 63d0cdc69c..f6c39eade6 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -972,6 +972,19 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     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;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 41981bc4fe..c0b2655749 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1295,11 +1295,11 @@
             </div>
             <div class="property checkbox">
                 <input type="checkbox" id="property-locked">
-                <label for="property-locked">Locked</label>
+                <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">Visible</label>
+                <label for="property-visible"><span>&#xe007;</span>&nbsp;Visible</label>
             </div>
         </div>
         <hr />

From 67b9c766439ad4e156efda06333535787a5ee188 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 14 Apr 2016 09:56:36 +1200
Subject: [PATCH 18/31] Reorder spatial section fields

---
 examples/html/entityProperties.html | 88 ++++++++++++++---------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index c0b2655749..2302bbae36 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1333,41 +1333,6 @@
         <div class="section-header spatial-group">
             <label>Spatial</label><span>M</span>
         </div>
-        <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>
-                <div><input type="number" class="z" id="property-pos-z"><label for="property-pos-z">Z:</label></div>
-            </div>
-            <div class="buttons">
-                <input type="button" id="move-selection-to-grid" value="Selection to Grid">
-                <input type="button" id="move-all-to-grid" value="All to Grid">
-                <input type="button" id="preview-camera-button" value="Preview Camera">
-            </div>
-        </div>
-
-        <div class="spatial-group row">
-            <div class="property text">
-                <label for="property-parent-id">Parent ID</label>
-                <input type="text" id="property-parent-id">
-            </div>
-            <div class="property number">
-                <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 <span class="unit">0.0&ndash;1.0</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>
-        <hr class="spatial-group" />
         <div class="spatial-group property xyz">
             <label>Dimensions <span class="unit">m</span></label>
             <div class="tuple">
@@ -1384,6 +1349,50 @@
                 <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>
+                <div><input type="number" class="z" id="property-pos-z"><label for="property-pos-z">Z:</label></div>
+            </div>
+            <div class="buttons">
+                <input type="button" id="move-selection-to-grid" value="Selection to Grid">
+                <input type="button" id="move-all-to-grid" value="All to Grid">
+                <input type="button" id="preview-camera-button" value="Preview Camera">
+            </div>
+        </div>
+        <div class="spatial-group row">
+            <div class="property text">
+                <label for="property-parent-id">Parent ID</label>
+                <input type="text" id="property-parent-id">
+            </div>
+            <div class="property number">
+                <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 <span class="unit">0.0&ndash;1.0</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>
+
         <hr class="spatial-group poly-vox-section" />
         <div class="spatial-group poly-vox-section property xyz">
             <label>Voxel volume size <span class="unit">m</span></label>
@@ -1414,15 +1423,6 @@
             <label for="property-z-texture-url">Z-axis texture URL</label>
             <input type="text" id="property-z-texture-url">
         </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>
 
 
         <div class="section-header physical-group">

From 33d99096849e01e05b85f0a42f41959bb5da4e7e Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 14 Apr 2016 13:21:25 +1200
Subject: [PATCH 19/31] Disable drop-downs and color pickers when other
 controls are disabled

---
 examples/html/edit-style.css        | 23 +++++++++-
 examples/html/entityProperties.html | 65 ++++++++++++++++++-----------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index f6c39eade6..aeb111bbf3 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -574,10 +574,8 @@ hr {
     width: 172px;
     height: 28px;
     padding: 0 28px 0 12px;
-
     color: #afafaf;
     background: linear-gradient(#7d7d7d 20%, #686a68 100%);
-
     position: relative;
 }
 .dropdown dl[dropped="true"] {
@@ -636,6 +634,17 @@ hr {
     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;
@@ -666,6 +675,16 @@ 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;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 2302bbae36..99296d5671 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -34,6 +34,8 @@
             Multiple: "&#xe000;"
         }
 
+        var colorPickers = [];
+
         debugPrint = function(message) {
             EventBridge.emitWebEvent(
                 JSON.stringify({
@@ -56,6 +58,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';
@@ -490,7 +505,7 @@
                                 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;
     
@@ -520,7 +535,7 @@
 
                                 elID.innerHTML = ids.join("<br>");
 
-                                disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
+                                disableProperties();
                             } else {
                                 var activeElement = document.activeElement;
     
@@ -543,10 +558,10 @@
                                 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();
                                 }
 
     
@@ -889,10 +904,10 @@
                 elColorRed.addEventListener('change', colorChangeFunction);
                 elColorGreen.addEventListener('change', colorChangeFunction);
                 elColorBlue.addEventListener('change', colorChangeFunction);
-                $('#property-color').colpick({
-                    colorScheme:'dark',
-                    layout:'hex',
-                    color:'000000',
+                colorPickers.push($('#property-color').colpick({
+                    colorScheme: 'dark',
+                    layout: 'hex',
+                    color: '000000',
                     onShow: function (colpick) {
                         $('#property-color').attr('active', 'true');
                     },
@@ -900,12 +915,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(
@@ -913,10 +928,10 @@
                 elLightColorRed.addEventListener('change', lightColorChangeFunction);
                 elLightColorGreen.addEventListener('change', lightColorChangeFunction);
                 elLightColorBlue.addEventListener('change', lightColorChangeFunction);
-                $('#property-light-color').colpick({
-                    colorScheme:'dark',
-                    layout:'hex',
-                    color:'000000',
+                colorPickers.push($('#property-light-color').colpick({
+                    colorScheme: 'dark',
+                    layout: 'hex',
+                    color: '000000',
                     onShow: function (colpick) {
                         $('#property-light-color').attr('active', 'true');
                     },
@@ -924,11 +939,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));
@@ -960,7 +975,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',
@@ -976,14 +991,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',
@@ -998,10 +1013,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',
@@ -1016,7 +1031,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);
@@ -1042,7 +1057,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',
@@ -1057,7 +1072,7 @@
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
                     }
-                });
+                }));
     
                 elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url'));
     

From 6e4c1a5a4374c1e45b8a47b548b0ae54d4fc7adb Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 14 Apr 2016 15:28:51 +1200
Subject: [PATCH 20/31] Left align number fields in rows

---
 examples/html/edit-style.css | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index aeb111bbf3..e1b797e6d8 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -694,23 +694,13 @@ div.refresh input[type="button"] {
     clear: both;
 }
 
-.tuple {
-    width: 100%;
-    text-align: center;
-}
 .tuple div {
     display: inline-block;
     position: relative;
-    min-width: 124px;
-    min-height: 1px;
+    margin-right: 7px;
 }
-.tuple div:nth-child(1) {
-    float: left;
-}
-.tuple div:nth-child(2) {
-}
-.tuple div:nth-child(3) {
-    float: right;
+.tuple div:last-child {
+    margin-right: 0;
 }
 
 .tuple label {
@@ -775,8 +765,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 .row .property {
     width: auto;
     display: inline-block;
-
-    margin-right: 12px;
+    margin-right: 7px;
 }
 .row .property:last-child {
     margin-right: 0;

From 08dd5c54c156467d7ceb1b880d1a305159efe7ce Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 14 Apr 2016 15:47:11 +1200
Subject: [PATCH 21/31] Keep entity list headings stationary over sort column
 changes

---
 examples/html/edit-style.css  |  6 ++++++
 examples/html/entityList.html | 16 ++++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index e1b797e6d8..425e8f7799 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -834,6 +834,12 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
+#entity-list .sort-order {
+    display: inline-block;
+    width: 6px;
+    text-align: right;
+}
+
 #search-area {
     padding-right: 148px;
     padding-bottom: 24px;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 450d500621..6d41c5ea9a 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -18,11 +18,11 @@
         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 DESCENDING_STRING = '&nbsp;&#x25B4;';
+        const ASCENDING_STRING = '&#x25BE;';
+        const DESCENDING_STRING = '&#x25B4;';
         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.
 
@@ -146,14 +146,14 @@
                   if (currentSortColumn == column) {
                       currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
                   } else {
-                      elSortOrder[currentSortColumn].style.display = 'none';
-                      elSortOrder[column].style.display = 'inline';
+                      elSortOrder[currentSortColumn].innerHTML = "";
                       currentSortColumn = column;
                       currentSortOrder = "asc";
                   }
                   elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
                   entityList.sort(currentSortColumn, { order: currentSortOrder });
               }
+              setSortColumn('type');
               
               function refreshEntities() {
                   clearEntities();
@@ -301,9 +301,9 @@
                 </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-name" data-sort="type">Name <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
-                        <th id="entity-url" data-sort="url">File <span class="sort-order" style="display: none">&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"></span></th>
+                        <th id="entity-url" data-sort="url">File <span class="sort-order"></span></th>
                     </tr>
                 </thead>
                 <tbody class="list" id="entity-table-body">

From 58f1bde752830790317dcc5137cabeac0b266702 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 11:00:55 +1200
Subject: [PATCH 22/31] Add "locked" and "visible" columns to entity list

---
 examples/html/edit-style.css     | 104 +++++++++++++++++++------------
 examples/html/entityList.html    |  47 ++++++++++----
 examples/libraries/entityList.js |   2 +
 3 files changed, 101 insertions(+), 52 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 425e8f7799..c5ca3dc831 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -834,10 +834,9 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
-#entity-list .sort-order {
-    display: inline-block;
-    width: 6px;
-    text-align: right;
+#entity-list .glyph {
+    font-family: HiFi-Glyphs;
+    font-size: 14px;
 }
 
 #search-area {
@@ -867,17 +866,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 {
@@ -886,6 +907,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 {
@@ -894,39 +951,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;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 6d41c5ea9a..e63a2f824f 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -23,12 +23,18 @@
         var refreshEntityListTimer = null;
         const ASCENDING_STRING = '&#x25BE;';
         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");
@@ -50,6 +56,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 +113,20 @@
                   }));
               }
               
-              function addEntity(id, name, type, url) {
+              function addEntity(id, name, type, url, locked, visible) {
                   if (entities[id] === undefined) {
                       var urlParts = url.split('/');
                       var filename = urlParts[urlParts.length - 1];
               
-                      entityList.add([{ id: id, name: name, type: type, url: filename }], function(items) {
+                      entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
+                          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 +141,7 @@
                       refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
                   } else {
                       var item = entities[id].item;
-                      item.values({ name: name, url: url });
+                      item.values({ name: name, url: url, locked: locked, visible: visible });
                   }
               }
               
@@ -141,6 +154,8 @@
                   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) {
@@ -242,7 +257,9 @@
                               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();
@@ -261,7 +278,7 @@
                   var ths = document.querySelectorAll("#entity-table thead th");
                   if (tds.length >= ths.length) {
                       for (var i = 0; i < ths.length; i++) {
-                          ths[i].style.width = tds[i].offsetWidth;
+                          ths[i].width = tds[i].offsetWidth;
                       }
                   }
               };
@@ -298,12 +315,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"></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"></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"></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">
@@ -311,12 +332,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">Footer text</td>
                     </tr>
                 </tfoot>
             </table>
diff --git a/examples/libraries/entityList.js b/examples/libraries/entityList.js
index 00120ab4c2..970dc6afbd 100644
--- a/examples/libraries/entityList.js
+++ b/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
             });
         }
 

From f28b37481f1b54198fddb62980bff61a547eb387 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 13:24:49 +1200
Subject: [PATCH 23/31] Fix only entity name being updated in entity list after
 an edit

---
 examples/edit.js              | 3 ++-
 examples/html/entityList.html | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/edit.js b/examples/edit.js
index e3bea2e954..57b50b27af 100644
--- a/examples/edit.js
+++ b/examples/edit.js
@@ -1522,7 +1522,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();
                 }
             }
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index e63a2f824f..c0f41be7b0 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -114,10 +114,10 @@
               }
               
               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('/');
-                      var filename = urlParts[urlParts.length - 1];
-              
                       entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
                           function (items) {
                               var currentElement = items[0].elm;
@@ -141,7 +141,7 @@
                       refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
                   } else {
                       var item = entities[id].item;
-                      item.values({ name: name, url: url, locked: locked, visible: visible });
+                      item.values({ name: name, url: filename, locked: locked, visible: visible });
                   }
               }
               

From bda2f455e5c65a8a1d8b6b5871f6e8c7154217d4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 16:26:34 +1200
Subject: [PATCH 24/31] Add buttons to entities list that toggle locked and
 visible

---
 examples/edit.js                       | 24 +++++++++++++++++
 examples/html/edit-style.css           | 37 +++++++++++++++++++++-----
 examples/html/entityList.html          | 14 +++++++++-
 examples/libraries/entityList.js       |  4 +++
 interface/resources/qml/ToolWindow.qml |  2 +-
 5 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/examples/edit.js b/examples/edit.js
index 57b50b27af..0d5e9c09d8 100644
--- a/examples/edit.js
+++ b/examples/edit.js
@@ -1194,6 +1194,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");
diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index c5ca3dc831..ca17ba0a49 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -304,7 +304,7 @@ input[type=button] {
     height: 28px;
     min-width: 120px;
     padding: 0px 18px;
-    margin-right: 7px;
+    margin-right: 6px;
     border-radius: 5px;
     border: none;
     color: #fff;
@@ -534,7 +534,7 @@ hr {
     float: left;
 }
 .property .number + .number {
-    margin-left: 14px;
+    margin-left: 10px;
 }
 
 .text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
@@ -697,14 +697,14 @@ div.refresh input[type="button"] {
 .tuple div {
     display: inline-block;
     position: relative;
-    margin-right: 7px;
+    margin-right: 6px;
 }
 .tuple div:last-child {
     margin-right: 0;
 }
 
 .tuple label {
-    margin-right: -7px;
+    margin-right: -6px;
 }
 
 .rgb .tuple input {
@@ -765,7 +765,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 .row .property {
     width: auto;
     display: inline-block;
-    margin-right: 7px;
+    margin-right: 6px;
 }
 .row .property:last-child {
     margin-right: 0;
@@ -824,6 +824,27 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     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 {
     float: right;
     margin-right: 0;
@@ -1045,11 +1066,15 @@ input#property-parent-id {
 
 input#dimension-rescale-button {
     min-width: 50px;
-    margin-left: 7px;
+    margin-left: 6px;
 }
 input#reset-to-natural-dimensions {
     margin-right: 0;
 }
+input#preview-camera-button {
+    margin-left: 1px;
+    margin-right: 0;
+}
 
 #animation-fps {
     margin-top: 48px;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index c0f41be7b0..0487e6585d 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -39,6 +39,8 @@
               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");
@@ -212,7 +214,13 @@
               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() {
@@ -297,6 +305,10 @@
 <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>
diff --git a/examples/libraries/entityList.js b/examples/libraries/entityList.js
index 970dc6afbd..78a8aa5a6a 100644
--- a/examples/libraries/entityList.js
+++ b/examples/libraries/entityList.js
@@ -101,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();
diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index da8d49066b..aaff43b146 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -30,7 +30,7 @@ Window {
     title: "Edit"
     property alias tabView: tabView
     implicitWidth: 520; implicitHeight: 695
-    minSize: Qt.vector2d(452, 500)
+    minSize: Qt.vector2d(456, 500)
 
     HifiConstants { id: hifi }
 

From b5ec53f94ef52c13374def7c0edd5e27024900d1 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 16:52:21 +1200
Subject: [PATCH 25/31] Fix entity list column widths when no entities listed

---
 examples/html/entityList.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 0487e6585d..b92cb02ea8 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -281,13 +281,21 @@
                   // Take up available window space
                   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].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;
                   }
               };
 

From f9a442264eeb11f99d643f8deb47f01e197123e6 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 16:58:26 +1200
Subject: [PATCH 26/31] Fix count of entities found when delete all entities in
 search radius

---
 examples/html/entityList.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index b92cb02ea8..091de3d366 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -261,6 +261,7 @@
                           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++) {
@@ -359,7 +360,7 @@
                 </tbody>
                 <tfoot>
                     <tr>
-                        <td id="footer-text" colspan="5">Footer text</td>
+                        <td id="footer-text" colspan="5"> </td>
                     </tr>
                 </tfoot>
             </table>

From c7f5b356bb522b47886d90eb9b389076902c6f97 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 15 Apr 2016 17:18:04 +1200
Subject: [PATCH 27/31] Fix entity not being highlighted in list when created

---
 examples/edit.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/examples/edit.js b/examples/edit.js
index 0d5e9c09d8..f51c8716ac 100644
--- a/examples/edit.js
+++ b/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;
     }
 

From 99d9378ffd406a028098a1166a0b5628842850de Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 19 Apr 2016 12:51:13 +1200
Subject: [PATCH 28/31] Fix entity list header and footer text sometimes
 disappearing

---
 examples/html/entityList.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 091de3d366..eb68016030 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -208,6 +208,11 @@
                       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;
               }
               

From 203bcd58864d10c7072c37adddbf09bf561b1125 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 20 Apr 2016 16:23:13 +1200
Subject: [PATCH 29/31] Hover spin buttons individually

---
 examples/html/edit-style.css        |  4 ++-
 examples/html/entityList.html       |  3 ++
 examples/html/entityProperties.html |  3 ++
 examples/html/gridControls.html     |  7 ++--
 examples/html/spinButtons.js        | 51 +++++++++++++++++++++++++++++
 5 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 examples/html/spinButtons.js

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index ca17ba0a49..579fc50682 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -284,7 +284,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;
 }
 
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index eb68016030..e5fa2ce839 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -14,6 +14,7 @@
     <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 = [];
@@ -309,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();
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 99296d5671..301a7627e2 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -17,6 +17,7 @@
     <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;
@@ -1294,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();
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index f56be6400e..4b18a8555b 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -16,6 +16,7 @@
     <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() {
@@ -134,8 +135,10 @@
                         $(el).colpickHide();
                         colorPickFunction(rgb.r, rgb.g, rgb.b);
                     }
-                })
-    
+                });
+
+                augmentSpinButtons();
+
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
 
diff --git a/examples/html/spinButtons.js b/examples/html/spinButtons.js
new file mode 100644
index 0000000000..fa2d18552f
--- /dev/null
+++ b/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);
+        }
+    }
+}

From 032b8a94a4dad3e6e7e570b8c35c340753f926cc Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 22 Apr 2016 13:22:57 +1200
Subject: [PATCH 30/31] Change registration property's label

---
 examples/html/entityProperties.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 301a7627e2..ae5684d6c8 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1403,7 +1403,7 @@
             </div>
         </div>
         <div class="spatial-group property xyz">
-            <label>Registration <span class="unit">0.0&ndash;1.0</span></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>

From 545d373a90e44c0c8001b21bc4204faada4eb150 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 22 Apr 2016 13:29:53 +1200
Subject: [PATCH 31/31] Display gap between consecutive selected entities

---
 examples/html/edit-style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 579fc50682..de6f6a670d 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -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;