From 7ed30048a4f0643f9ba8ad61d0665ea7b4b0b730 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 18 Mar 2016 16:27:13 +1300
Subject: [PATCH 01/64] Set up files for restyling tool window frame

---
 interface/resources/qml/ToolWindow.qml        | 11 ++-
 .../resources/qml/controls-uit/WebView.qml    | 72 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 interface/resources/qml/controls-uit/WebView.qml

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 404d1c1e78..c944cac0f4 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -1,7 +1,16 @@
+//
+//  ToolWindow.qml
+//
+//  Created by Bradley Austin Davis on 12 Jan 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
+//
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 import QtWebEngine 1.1
-
 import Qt.labs.settings 1.0
 
 import "windows" as Windows
diff --git a/interface/resources/qml/controls-uit/WebView.qml b/interface/resources/qml/controls-uit/WebView.qml
new file mode 100644
index 0000000000..2b31881a78
--- /dev/null
+++ b/interface/resources/qml/controls-uit/WebView.qml
@@ -0,0 +1,72 @@
+//
+//  WebView.qml
+//
+//  Created by Bradley Austin Davis on 12 Jan 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
+//
+
+import QtQuick 2.5
+import QtWebEngine 1.1
+
+WebEngineView {
+    id: root
+    property var newUrl;
+
+    Component.onCompleted: {
+        console.log("Connecting JS messaging to Hifi Logging")
+        // Ensure the JS from the web-engine makes it to our logging
+        root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+            console.log("Web Window JS message: " + sourceID + " " + lineNumber + " " +  message);
+        });
+    }
+
+    // FIXME hack to get the URL with the auth token included.  Remove when we move to Qt 5.6
+    Timer {
+        id: urlReplacementTimer
+        running: false
+        repeat: false
+        interval: 50
+        onTriggered: url = newUrl;
+    }
+
+    onUrlChanged: {
+        console.log("Url changed to " + url);
+        var originalUrl = url.toString();
+        newUrl = urlHandler.fixupUrl(originalUrl).toString();
+        if (newUrl !== originalUrl) {
+            root.stop();
+            if (urlReplacementTimer.running) {
+                console.warn("Replacement timer already running");
+                return;
+            }
+            urlReplacementTimer.start();
+        }
+    }
+
+    onFeaturePermissionRequested: {
+        grantFeaturePermission(securityOrigin, feature, true);
+    }
+
+    onLoadingChanged: {
+        // Required to support clicking on "hifi://" links
+        if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+            var url = loadRequest.url.toString();
+            if (urlHandler.canHandleUrl(url)) {
+                if (urlHandler.handleUrl(url)) {
+                    root.stop();
+                }
+            }
+        }
+    }
+
+    onNewViewRequested:{
+            var component = Qt.createComponent("../Browser.qml");
+            var newWindow = component.createObject(desktop);
+            request.openIn(newWindow.webView)
+    }
+
+    profile: desktop.browserProfile
+}

From 7eb9420c92748379208811e36d08f5a5e434aa56 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 18 Mar 2016 16:33:55 +1300
Subject: [PATCH 02/64] Update tool window to use restyled frame

---
 interface/resources/qml/ToolWindow.qml | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index c944cac0f4..4ec2bef175 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -13,10 +13,10 @@ import QtQuick.Controls 1.4
 import QtWebEngine 1.1
 import Qt.labs.settings 1.0
 
-import "windows" as Windows
-import "controls" as Controls
+import "windows-uit"
+import "controls-uit"
 
-Windows.Window {
+Window {
     id: toolWindow
     resizable: true
     objectName: "ToolWindow"
@@ -42,7 +42,7 @@ Windows.Window {
     }
 
     property var webTabCreator: Component {
-        Controls.WebView {
+        WebView {
             id: webView
             property string originalUrl;
 
@@ -56,8 +56,9 @@ Windows.Window {
     }
 
     TabView {
-        anchors.fill: parent
         id: tabView;
+        width: pane.contentWidth
+        height: pane.scrollHeight  // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
         onCountChanged: {
             if (0 == count) {
                 toolWindow.visible = false

From 6a2cb393fadd7c17c7fdd8f04d361c4d66afd9aa Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 18 Mar 2016 16:56:08 +1300
Subject: [PATCH 03/64] Make copy of style.css as starting point for restyling
 entities editor

---
 examples/html/edit-style.css        | 377 ++++++++++++++++++++++++++++
 examples/html/entityList.html       |  12 +-
 examples/html/entityProperties.html |  12 +-
 examples/html/gridControls.html     |  12 +-
 4 files changed, 410 insertions(+), 3 deletions(-)
 create mode 100644 examples/html/edit-style.css

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
new file mode 100644
index 0000000000..8d05f5d076
--- /dev/null
+++ b/examples/html/edit-style.css
@@ -0,0 +1,377 @@
+/*
+//  edit-style.css
+//
+//  Created by Ryan Huffman on 13 Nov 2014
+//  Copyright 2014 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
+*/
+
+* {
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    background-color: rgb(76, 76, 76);
+    color: rgb(204, 204, 204);
+    font-family: Arial;
+    font-size: 9.0pt;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.selectable {
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+
+    cursor: text;
+}
+
+.color-box {
+    display: inline-block;
+    width: 15pt;
+    height: 15pt;
+    border: 0.75pt solid black;
+    margin: 1.5pt;
+    cursor: pointer;
+}
+
+.color-box.highlight {
+    width: 13.5pt;
+    height: 13.5pt;
+    border: 1.5pt solid black;
+}
+
+.section-header, .sub-section-header {
+    background: #AAA;
+    border-bottom: 0.75pt solid #CCC;
+    background-color: #333333;
+    color: #999;
+    padding: 3pt;
+    padding-top: 6pt;
+}
+
+.section-header label, .sub-section-header label {
+    font-weight: bold;
+    font-size: 11pt;
+}
+
+.sub-section-header {
+    padding-top: 4px;
+}
+
+.sub-section-header label {
+    font-size: 9pt;
+}
+
+.multi-property-section {
+}
+
+.property-section {
+    display: block;
+    margin: 10 10;
+    height: 22.5pt;
+}
+
+
+.property-section label {
+    font-weight: bold;
+}
+
+.property-section span {
+    float: right;
+}
+
+.grid-section {
+}
+
+input[type=button] {
+    cursor: pointer;
+    background-color: #608e96;
+    border-color: #608e96;
+    border-radius: 3.75pt;
+    padding: 3.75pt 7.5pt;
+    border: 0;
+    color: #fff;
+    font-weight: bold;
+}
+
+#entity-list-header {
+    padding: 0.5em;
+}
+
+#search-area {
+    padding: 0.5em;
+    box-sizing: border-box;
+    padding-right: 6em;
+}
+
+#filter {
+    width: 99%;
+}
+
+#radius-and-unit {
+    width: 6em;
+    float: right;
+    margin-right: -6em;
+}
+
+#radius {
+    width: 4em;
+}
+
+textarea, input {
+    margin: 0;
+    padding: 1.5pt;
+    border: 0.75pt solid #999;
+    background-color: #eee;
+}
+
+textarea {
+    width: 100%;
+    resize: vertical;
+}
+
+input.url {
+    width: 100%;
+}
+
+input.coord {
+    width: 7em;
+    display: block;
+}
+
+input.no-spin::-webkit-outer-spin-button,
+input.no-spin::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+table#entity-table {
+    border-collapse: collapse;
+    font-family: Sans-Serif;
+    font-size: 9pt;
+    width: 100%;
+}
+
+#entity-table tr {
+    cursor: pointer;
+    border-bottom: 0.75pt solid rgb(63, 63, 63)
+}
+
+#entity-table tr.selected {
+    color: rgb(43, 43, 43);
+    background-color: #AAA;
+}
+
+#entity-table th {
+    background-color: #333;
+    color: #fff;
+    border: 0pt black solid;
+    text-align: left;
+    word-wrap: nowrap;
+    white-space: nowrap;
+}
+
+#entity-table td {
+    font-size: 9.0pt;
+    border: 0pt black solid;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+#entity-table td.url {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+th#entity-type {
+    width: 33.75pt;
+}
+
+
+
+div.input-area {
+    display: inline-block;
+    font-size: 9pt;
+}
+
+input {
+}
+
+#type, #id {
+    font-size: 9.0pt;
+}
+
+#type label, #id label {
+    color: rgb(150, 150, 150);
+}
+
+input, textarea {
+    background-color: rgb(63, 63, 63);
+    color: rgb(255, 255, 255);
+    border: none;
+    font-size: 9pt;
+}
+
+input:disabled, textarea:disabled {
+    background-color: rgb(63, 63, 63);
+    color: rgb(160, 160, 160);
+}
+
+#properties-list input[type=checkbox] {
+    vertical-align: bottom;
+}
+
+#properties-list input[type=button] {
+    cursor: pointer;
+    background-color: rgb(51, 102, 102);
+    border-color: #608e96;
+    border-radius: 3.75pt;
+    padding: 3.75pt 7.5pt;
+    border: 0;
+    color: rgb(204, 204, 204);
+}
+
+#properties-list input[type=button]:disabled {
+    background-color: rgb(41, 82, 82);
+    color: rgb(160, 160, 160);
+}
+
+#properties-list .property {
+    padding: 4pt;
+    border-bottom: 0.75pt solid rgb(63, 63, 63);
+    min-height: 12pt;
+}
+
+
+table#properties-list {
+    border: none;
+    border-collapse: collapse;
+    width: 100%;
+    background-color: #efefef;
+    font-family: Arial;
+    table-layout: fixed;
+}
+
+#properties-list {
+    border-bottom: 0.75pt solid #e5e5e5;
+}
+
+.sub-props-checkbox-group {
+    margin-left: 20px;
+}
+
+#properties-list .label {
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    height: 1.2em;
+}
+
+#properties-list .label input[type=button] {
+    float: right;
+    padding: 0 5px 1px;
+}
+
+#properties-list .value > div{
+    padding: 3pt 0;
+}
+
+col#col-label {
+    width: 97.5pt;
+}
+
+div.outer {
+    position: relative;
+}
+div.inner {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    position: absolute;
+    width: 100%;
+}
+
+td {
+    vertical-align: top;
+}
+
+#no-entities {
+    display: none;
+    font-size: 120%;
+    padding: 10pt;
+    font-weight: bold;
+    font-style: italic;
+}
+
+input[type="number"] {
+    position: relative;
+}
+
+/* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
+    width: 0.9em;
+    height: 4px;
+    opacity: 0.5; /* shows Spin Buttons per default (Chrome >= 39) */
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+input[type="number"]::-webkit-inner-spin-button:hover,
+input[type="number"]::-webkit-inner-spin-button:active{
+    opacity: .8;
+}
+
+input#property-name {
+    width: 100%;
+}
+
+.color-picker {
+    width: 50px;
+    height: 10px;
+    margin: 5px;
+    border: 1px solid white;
+}
+
+.prop-x {
+    color:red !important;
+    background: rgba(255, 0, 0, .9);
+    height:2px !important;
+}
+
+.prop-y {
+    color:green !important;
+    background: rgba(0, 255, 0, .9);
+    height:2px !important;
+}
+
+.prop-z{
+    color:blue !important;
+    background: rgba(0, 0, 255, .9);
+    height:2px !important;
+}
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index ad10a50c01..43d5a8347a 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -1,6 +1,16 @@
+<!--
+//  entityList.html
+//
+//  Created by Ryan Huffman on 19 Nov 2014
+//  Copyright 2014 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
+-->
+
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="edit-style.css">
     <script src="list.min.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index e3a64da5d4..d4a44a5bfd 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1,7 +1,17 @@
+<!--
+//  entityProperties.html
+//
+//  Created by Ryan Huffman on 13 Nov 2014
+//  Copyright 2014 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
+-->
+
 <html>
 <head>
     <title>Properties</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <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>
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index dd41125de4..8e1929f817 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -1,6 +1,16 @@
+<!--
+//  gridControls.html
+//
+//  Created by Ryan Huffman on 6 Nov 2014
+//  Copyright 2014 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
+-->
+
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="edit-style.css">
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
     <script>

From 3fa678a65263d615861bb19c988cbbbb407a56c8 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 19 Mar 2016 14:52:40 +1300
Subject: [PATCH 04/64] Style tabs and background

---
 examples/html/edit-style.css                  |  4 +-
 interface/resources/qml/ToolWindow.qml        | 61 +++++++++++++++++++
 .../qml/styles-uit/HifiConstants.qml          |  2 +
 tests/ui/qml/main.qml                         | 18 ++++++
 4 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 8d05f5d076..7e5341e208 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -15,8 +15,8 @@ body {
     margin: 0;
     padding: 0;
 
-    background-color: rgb(76, 76, 76);
-    color: rgb(204, 204, 204);
+    background-color: #404040;
+    color: #afafaf;
     font-family: Arial;
     font-size: 9.0pt;
 
diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 4ec2bef175..aa5109cf45 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -10,11 +10,13 @@
 
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 import QtWebEngine 1.1
 import Qt.labs.settings 1.0
 
 import "windows-uit"
 import "controls-uit"
+import "styles-uit"
 
 Window {
     id: toolWindow
@@ -28,6 +30,9 @@ Window {
     title: "Tools"
     property string newTabSource
     property alias tabView: tabView
+
+    HifiConstants { id: hifi }
+
     onParentChanged: {
         if (parent) {
             x = 120;
@@ -59,11 +64,67 @@ Window {
         id: tabView;
         width: pane.contentWidth
         height: pane.scrollHeight  // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
+
         onCountChanged: {
             if (0 == count) {
                 toolWindow.visible = false
             }
         }
+
+        style: TabViewStyle {
+
+            frame: Rectangle {  // Background shown before content loads.
+                anchors.fill: parent
+                color: hifi.colors.baseGray
+            }
+
+            frameOverlap: 0
+
+            tab: Rectangle {
+                implicitWidth: control.count > 1 ? styleData.availableWidth / control.count : text.contentWidth + 4 * hifi.dimensions.contentMargin.x
+                implicitHeight: 3 * text.height
+                color: styleData.selected ? hifi.colors.black : hifi.colors.tabBackgroundDark
+
+                RalewayRegular {
+                    id: text
+                    text: styleData.title
+                    font.capitalization: Font.AllUppercase
+                    size: hifi.fontSizes.tabName
+                    width: control.count > 1 ? parent.width - 2 * hifi.dimensions.contentSpacing.x : implicitWidth
+                    elide: Text.ElideRight
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.centerIn: parent
+                }
+
+                Rectangle {  // Separator.
+                    width: 1
+                    height: parent.height
+                    color: hifi.colors.black
+                    anchors.left: parent.left
+                    anchors.top: parent.top
+                    visible: styleData.index > 0
+
+                    Rectangle {
+                        width: 1
+                        height: 1
+                        color: hifi.colors.baseGray
+                        anchors.left: parent.left
+                        anchors.bottom: parent.bottom
+                    }
+                }
+
+                Rectangle {  // Active underline.
+                    width: parent.width - (styleData.index > 0 ? 1 : 0)
+                    height: 1
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.baseGray
+                }
+            }
+
+            tabOverlap: 0
+        }
     }
 
     function updateVisiblity() {
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index 46aa3d2cb9..7dd5666f6b 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -114,6 +114,8 @@ Item {
         readonly property color dropDownDarkStart: "#7d7d7d"
         readonly property color dropDownDarkFinish: "#6b6a6b"
         readonly property color textFieldLightBackground: "#d4d4d4"
+        readonly property color tabBackgroundDark: "#252525"
+        readonly property color tabBackgroundLight: "#d4d4d4"
     }
 
     Item {
diff --git a/tests/ui/qml/main.qml b/tests/ui/qml/main.qml
index d8083b7bbd..e45749e1de 100644
--- a/tests/ui/qml/main.qml
+++ b/tests/ui/qml/main.qml
@@ -220,6 +220,24 @@ ApplicationWindow {
                 }
             }
 
+            Button {
+                text: "Add Tab 2"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 2" });
+                    desktop.toolWindow.showTabForUrl("Foo 2", true);
+                }
+            }
+
+            Button {
+                text: "Add Tab 3"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 3" });
+                    desktop.toolWindow.showTabForUrl("Foo 3", true);
+                }
+            }
+
             Button {
                 text: "Destroy Tab"
                 onClicked: {

From 01685b2d44d91f8a5dc7041c256b5df6f637b80c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 19 Mar 2016 14:58:12 +1300
Subject: [PATCH 05/64] Change entity editor tab name

---
 examples/libraries/entityList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/libraries/entityList.js b/examples/libraries/entityList.js
index 6c6c0aaecb..081d8bc81a 100644
--- a/examples/libraries/entityList.js
+++ b/examples/libraries/entityList.js
@@ -5,7 +5,7 @@ EntityListTool = function(opts) {
 
     var url = ENTITY_LIST_HTML_URL;
     var webView = new OverlayWebWindow({
-        title: 'Entities',  source: url,  toolWindow: true   
+        title: 'Entity List',  source: url,  toolWindow: true   
     });
 
 

From 3d2cb6554e5f3335f3eb4ab0237e2ac967aa6511 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 19 Mar 2016 15:50:16 +1300
Subject: [PATCH 06/64] Fix QML binding loop

---
 interface/resources/qml/ToolWindow.qml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index aa5109cf45..939285546d 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -81,7 +81,7 @@ Window {
             frameOverlap: 0
 
             tab: Rectangle {
-                implicitWidth: control.count > 1 ? styleData.availableWidth / control.count : text.contentWidth + 4 * hifi.dimensions.contentMargin.x
+                implicitWidth: text.width
                 implicitHeight: 3 * text.height
                 color: styleData.selected ? hifi.colors.black : hifi.colors.tabBackgroundDark
 
@@ -90,7 +90,7 @@ Window {
                     text: styleData.title
                     font.capitalization: Font.AllUppercase
                     size: hifi.fontSizes.tabName
-                    width: control.count > 1 ? parent.width - 2 * hifi.dimensions.contentSpacing.x : implicitWidth
+                    width: control.count > 1 ? styleData.availableWidth / control.count : implicitWidth + 2 * hifi.dimensions.contentSpacing.x
                     elide: Text.ElideRight
                     color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
                     horizontalAlignment: Text.AlignHCenter

From 02a62766e063aa1fe18aed22d81ce8b4e355ec63 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 22 Mar 2016 18:03:12 +1300
Subject: [PATCH 07/64] Size entities list to dialog and scroll when necessary

Also add a footer.
---
 examples/html/edit-style.css  | 68 +++++++++++++++++++++++++++++------
 examples/html/entityList.html | 66 ++++++++++++++++++++++++----------
 2 files changed, 106 insertions(+), 28 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 7e5341e208..b4a4355c31 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -13,7 +13,7 @@
 
 body {
     margin: 0;
-    padding: 0;
+    padding: 24px 12px 24px 12px;
 
     background-color: #404040;
     color: #afafaf;
@@ -161,14 +161,63 @@ input.no-spin::-webkit-inner-spin-button {
     margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
 }
 
-table#entity-table {
+
+#entity-list {
+    position: relative; /* New positioning context. */
+}
+
+div#entity-table-scroll {
+    /* Height is set by JavaScript. */
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-top: 24px; /* Space for header and footer outside of scroll region. */
+    margin-top: 24px;
+}
+
+#entity-table-scroll, #entity-table {
+    background-color: #2d2d2d;
+}
+
+#entity-table {
     border-collapse: collapse;
+    width: 100%;
+    margin-top: -24px;
+    margin-bottom: -24px;
+    table-layout: fixed;
     font-family: Sans-Serif;
     font-size: 9pt;
+}
+
+#col-type {
+    width: 15%;
+}
+#col-name {
+    width: 30%;
+}
+#col-url {
+    width: 54%;
+}
+#col-id {
+    width: 0;
+}
+
+#entity-table thead {
+    position: absolute;
+    top: 32px;
+    left: 0;
+    width: 100%;
+}
+
+#entity-table tfoot {
+    position: absolute;
+    bottom: -18px;
+    left: 0;
     width: 100%;
 }
 
 #entity-table tr {
+    width: 100%;
     cursor: pointer;
     border-bottom: 0.75pt solid rgb(63, 63, 63)
 }
@@ -178,8 +227,11 @@ table#entity-table {
     background-color: #AAA;
 }
 
-#entity-table th {
+#entity-table th, #entity-table tfoot {
     background-color: #333;
+}
+
+#entity-table th {
     color: #fff;
     border: 0pt black solid;
     text-align: left;
@@ -190,9 +242,10 @@ table#entity-table {
 #entity-table td {
     font-size: 9.0pt;
     border: 0pt black solid;
-    word-wrap: nowrap;
-    white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: nowrap;
 }
 
 #entity-table td.url {
@@ -200,11 +253,6 @@ table#entity-table {
     overflow: hidden;
 }
 
-th#entity-type {
-    width: 33.75pt;
-}
-
-
 
 div.input-area {
     display: inline-block;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 43d5a8347a..0720f6891b 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -240,7 +240,23 @@
                   setTimeout(refreshEntities, 1000);
               }
           });
-        }
+
+          function resize() {
+              // Set the table height to take up available window space
+              var tableHeight = window.innerHeight - 180;
+              document.getElementById("entity-table-scroll").style.height = tableHeight;
+
+              // 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");
+              for (var i = 0; i < ths.length; i++) {
+                  ths[i].style.width = tds[i].offsetWidth;
+              }
+          };
+
+          window.onresize = resize;
+          resize();
+      }
     </script>
 </head>
 <body onload='loaded();'>
@@ -255,23 +271,37 @@
             <input type="text" class="search" id="filter" placeholder="Filter" />
             <span id="radius-and-unit"><input type="number" id="radius" value="100" />&nbsp;m</span>
         </div>
-        <table id="entity-table">
-            <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: inline">&nbsp;&#x25BE;</span></th>
-                    <th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
-                </tr>
-            </thead>
-            <tbody class="list" id="entity-table-body">
-                <tr>
-                    <td class="id" style="display: none">Type</td>
-                    <td class="type">Type</td>
-                    <td class="name">Name</td>
-                    <td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
-                </tr>
-            </tbody>
-        </table>
+        <div id="entity-table-scroll">
+            <table id="entity-table">
+                <colgroup>
+                    <col span="1" id="col-type" />
+                    <col span="1" id="col-name" />
+                    <col span="1" id="col-url" />
+                    <col span="1" id="col-id" />
+                </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: inline">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                        <th style="display: none"></th>
+                    </tr>
+                </thead>
+                <tbody class="list" id="entity-table-body">
+                    <tr>
+                        <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>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td>Footer text</td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
     <div id="no-entities">
         No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.

From 7e7e421efa5f53706b555ea818150f71b947667c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 22 Mar 2016 19:33:57 +1300
Subject: [PATCH 08/64] Tidy some QML

---
 interface/resources/qml/styles-uit/HifiConstants.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index ad9ea4fad3..b2bd3981d6 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -75,12 +75,12 @@ Item {
         readonly property color lightGrayText80: "#ccafafaf"
         readonly property color faintGray80: "#cce3e3e3"
         readonly property color faintGray50: "#80e3e3e3"
-        readonly property color locked: "#252525"
 
         // Other colors
         readonly property color white: "#ffffff"
         readonly property color gray: "#808080"
         readonly property color black: "#000000"
+        readonly property color locked: "#252525"
         // Semitransparent
         readonly property color white50: "#80ffffff"
         readonly property color white30: "#4dffffff"

From 53b86a0b55a489642c3257821309a35931014285 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 22 Mar 2016 20:02:57 +1300
Subject: [PATCH 09/64] Move the "no entities found" message into the entities
 list table

---
 examples/html/edit-style.css  |  2 ++
 examples/html/entityList.html | 15 ++++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index b4a4355c31..587b3ca5c8 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -363,6 +363,8 @@ td {
 
 #no-entities {
     display: none;
+    position: absolute;
+    top: 54px;
     font-size: 120%;
     padding: 10pt;
     font-weight: bold;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 0720f6891b..626e8896ff 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -224,16 +224,15 @@
                       } else if (data.type == "update") {
                           var newEntities = data.entities;
                           if (newEntities.length == 0) {
-                              elEntityTable.style.display = "none";
                               elNoEntitiesMessage.style.display = "block";
                           } else {
-                              elEntityTable.style.display = "table";
                               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);
                               }
                               updateSelectedEntities(data.selectedIDs);
+                              resize();
                           }
                       }
                   });
@@ -249,8 +248,10 @@
               // 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");
-              for (var i = 0; i < ths.length; i++) {
-                  ths[i].style.width = tds[i].offsetWidth;
+              if (tds.length >= ths.length) {
+                  for (var i = 0; i < ths.length; i++) {
+                      ths[i].style.width = tds[i].offsetWidth;
+                  }
               }
           };
 
@@ -301,10 +302,10 @@
                     </tr>
                 </tfoot>
             </table>
+            <div id="no-entities">
+                No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
+            </div>
         </div>
     </div>
-    <div id="no-entities">
-        No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
-    </div>
 </body>
 </html>

From b5d71d1ee12fa11e431282ea645ea16c4a70ba9b Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 10:05:22 +1300
Subject: [PATCH 10/64] Restyle top row of buttons in Entity List tab

---
 examples/html/edit-style.css  | 75 +++++++++++++++++++++++++++++------
 examples/html/entityList.html |  6 +--
 2 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 587b3ca5c8..081680fa42 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -8,6 +8,18 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 */
 
+@font-face {
+    font-family: Raleway-Bold;
+    src: url(../../resources/fonts/Raleway-Bold.ttf),  /* Production */
+         url(../../interface/resources/fonts/Raleway-Bold.ttf);  /* Development */
+}
+
+@font-face {
+    font-family: HiFi-Glyphs;
+    src: url(../../resources/fonts/hifi-glyphs.ttf), 
+         url(../../interface/resources/fonts/hifi-glyphs.ttf);
+}
+
 * {
 }
 
@@ -28,6 +40,7 @@ body {
     user-select: none;
 }
 
+
 .selectable {
     -webkit-touch-callout: text;
     -webkit-user-select: text;
@@ -98,20 +111,61 @@ body {
 }
 
 input[type=button] {
-    cursor: pointer;
-    background-color: #608e96;
-    border-color: #608e96;
-    border-radius: 3.75pt;
-    padding: 3.75pt 7.5pt;
-    border: 0;
+    font-family: Raleway-Bold;
+    font-size: 13px;
+    vertical-align: top;
+    height: 28px;
+    min-width: 120px;
+    padding: 0px 12px;
+    margin-right: 8px;
+    border-radius: 5px;
+    border: none;
     color: #fff;
-    font-weight: bold;
+    background-color: #000;
+    background: linear-gradient(#343434, #000);
+    cursor: pointer;
 }
 
-#entity-list-header {
-    padding: 0.5em;
+input[type=button].glyph {
+    font-family: HiFi-Glyphs;
+    font-size: 20px;
+    min-width: 34px;
+    padding: 0;
 }
 
+input[type=button].red {
+    color: #fff;
+    background-color: #94132e;
+    background: linear-gradient(#d42043, #94132e);
+}
+
+input[type=button]:hover {
+    background: linear-gradient(#000, #000);
+    border: none;
+}
+
+input[type=button].red:hover {
+    background: linear-gradient(#d42043, #d42043);
+    border: none;
+}
+
+
+input[type=button]:active {
+    background: linear-gradient(#343434, #343434);
+}
+
+input[type=button].red:active {
+    background: linear-gradient(#94132e, #94132e);
+}
+
+
+#delete {
+    float: right;
+    margin-right: 0;
+    background-color: #ff0000;
+}
+
+
 #search-area {
     padding: 0.5em;
     box-sizing: border-box;
@@ -259,9 +313,6 @@ div.input-area {
     font-size: 9pt;
 }
 
-input {
-}
-
 #type, #id {
     font-size: 9.0pt;
 }
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 626e8896ff..086d8f7ab3 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -262,9 +262,9 @@
 </head>
 <body onload='loaded();'>
     <div id="entity-list-header">
-        <input type="button" id="refresh" value="Refresh" />
-        <input type="button" id="teleport" value="Teleport" />
-        <input type="button" id="delete" style="background-color: rgb(244, 64, 64); float: right" value="Delete" />
+        <input type="button" class="glyph" id="refresh" value="F" />
+        <input type="button" id="teleport" value="JUMP TO SELECTION" />
+        <input type="button" class="red" id="delete" value="DELETE" />
     </div>
 
     <div id="entity-list">

From 89d4bea73e4fdaf2849eb9185d5e005e33cc3d1f Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 12:22:09 +1300
Subject: [PATCH 11/64] Restyle search filter and radius in Entity List tab

---
 examples/html/edit-style.css  | 279 ++++++++++++++++++----------------
 examples/html/entityList.html |   2 +-
 2 files changed, 153 insertions(+), 128 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 081680fa42..0842357bee 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -14,15 +14,18 @@
          url(../../interface/resources/fonts/Raleway-Bold.ttf);  /* Development */
 }
 
+@font-face {
+    font-family: Raleway-SemiBold;
+    src: url(../../resources/fonts/Raleway-SemiBold.ttf),
+         url(../../interface/resources/fonts/Raleway-SemiBold.ttf);
+}
+
 @font-face {
     font-family: HiFi-Glyphs;
     src: url(../../resources/fonts/hifi-glyphs.ttf), 
          url(../../interface/resources/fonts/hifi-glyphs.ttf);
 }
 
-* {
-}
-
 body {
     margin: 0;
     padding: 24px 12px 24px 12px;
@@ -40,6 +43,10 @@ body {
     user-select: none;
 }
 
+td {
+    vertical-align: top;
+}
+
 
 .selectable {
     -webkit-touch-callout: text;
@@ -110,6 +117,95 @@ body {
 .grid-section {
 }
 
+
+input, textarea {
+    margin: 0;
+    padding: 0 12px;
+    color: #afafaf;
+    background-color: #252525;
+    border: none;
+    font-family: Raleway-SemiBold;
+    font-size: 15px;
+    font-style: normal;
+}
+
+textarea {
+    min-height: 28px;
+    width: 100%;
+    resize: vertical;
+}
+
+input {
+    height: 28px;
+    min-width: 120px;
+}
+
+input::-webkit-input-placeholder {
+    font-style: italic;
+}
+
+input.search {
+    border-radius: 14px;
+}
+
+input.url {
+    width: 100%;
+}
+
+input.coord {
+    width: 7em;
+    display: block;
+}
+
+input.no-spin::-webkit-outer-spin-button,
+input.no-spin::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+input:disabled, textarea:disabled {
+    background-color: rgb(63, 63, 63);
+    color: rgb(160, 160, 160);
+}
+
+input[type="number"] {
+    position: relative;
+}
+
+input:focus {
+    color: #fff;
+    background-color: #000;
+    border: 1px dotted red;
+}
+
+input::selection {
+    background-color: #00b4ef;
+}
+
+/* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
+    width: 0.9em;
+    height: 22px;
+    opacity: 0.5; /* shows Spin Buttons per default (Chrome >= 39) */
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+input[type="number"]::-webkit-inner-spin-button:hover,
+input[type="number"]::-webkit-inner-spin-button:active {
+    opacity: .8;
+}
+
 input[type=button] {
     font-family: Raleway-Bold;
     font-size: 13px;
@@ -149,7 +245,6 @@ input[type=button].red:hover {
     border: none;
 }
 
-
 input[type=button]:active {
     background: linear-gradient(#343434, #343434);
 }
@@ -158,6 +253,35 @@ input[type=button].red:active {
     background: linear-gradient(#94132e, #94132e);
 }
 
+.color-picker {
+    width: 50px;
+    height: 10px;
+    margin: 5px;
+    border: 1px solid white;
+}
+
+.prop-x {
+    color:red !important;
+    background: rgba(255, 0, 0, .9);
+    height:2px !important;
+}
+
+.prop-y {
+    color:green !important;
+    background: rgba(0, 255, 0, .9);
+    height:2px !important;
+}
+
+.prop-z{
+    color:blue !important;
+    background: rgba(0, 0, 255, .9);
+    height:2px !important;
+}
+
+
+#entity-list-header {
+    margin-bottom: 24px;
+}
 
 #delete {
     float: right;
@@ -165,62 +289,30 @@ input[type=button].red:active {
     background-color: #ff0000;
 }
 
+#entity-list {
+    position: relative; /* New positioning context. */
+}
 
 #search-area {
-    padding: 0.5em;
-    box-sizing: border-box;
-    padding-right: 6em;
+    padding-right: 142px;
+    padding-bottom: 24px;
 }
 
 #filter {
-    width: 99%;
+    width: 98%;
 }
 
 #radius-and-unit {
-    width: 6em;
+    width: 142px;
     float: right;
-    margin-right: -6em;
+    margin-right: -152px;
 }
 
 #radius {
     width: 4em;
 }
 
-textarea, input {
-    margin: 0;
-    padding: 1.5pt;
-    border: 0.75pt solid #999;
-    background-color: #eee;
-}
-
-textarea {
-    width: 100%;
-    resize: vertical;
-}
-
-input.url {
-    width: 100%;
-}
-
-input.coord {
-    width: 7em;
-    display: block;
-}
-
-input.no-spin::-webkit-outer-spin-button,
-input.no-spin::-webkit-inner-spin-button {
-    display: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-}
-
-
-#entity-list {
-    position: relative; /* New positioning context. */
-}
-
-div#entity-table-scroll {
+#entity-table-scroll {
     /* Height is set by JavaScript. */
     width: 100%;
     overflow-x: hidden;
@@ -258,7 +350,7 @@ div#entity-table-scroll {
 
 #entity-table thead {
     position: absolute;
-    top: 32px;
+    top: 54px;
     left: 0;
     width: 100%;
 }
@@ -307,6 +399,16 @@ div#entity-table-scroll {
     overflow: hidden;
 }
 
+#no-entities {
+    display: none;
+    position: absolute;
+    top: 54px;
+    font-size: 120%;
+    padding: 10pt;
+    font-weight: bold;
+    font-style: italic;
+}
+
 
 div.input-area {
     display: inline-block;
@@ -321,18 +423,6 @@ div.input-area {
     color: rgb(150, 150, 150);
 }
 
-input, textarea {
-    background-color: rgb(63, 63, 63);
-    color: rgb(255, 255, 255);
-    border: none;
-    font-size: 9pt;
-}
-
-input:disabled, textarea:disabled {
-    background-color: rgb(63, 63, 63);
-    color: rgb(160, 160, 160);
-}
-
 #properties-list input[type=checkbox] {
     vertical-align: bottom;
 }
@@ -397,6 +487,10 @@ col#col-label {
     width: 97.5pt;
 }
 
+input#property-name {
+    width: 100%;
+}
+
 div.outer {
     position: relative;
 }
@@ -407,72 +501,3 @@ div.inner {
     position: absolute;
     width: 100%;
 }
-
-td {
-    vertical-align: top;
-}
-
-#no-entities {
-    display: none;
-    position: absolute;
-    top: 54px;
-    font-size: 120%;
-    padding: 10pt;
-    font-weight: bold;
-    font-style: italic;
-}
-
-input[type="number"] {
-    position: relative;
-}
-
-/* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
-    width: 0.9em;
-    height: 4px;
-    opacity: 0.5; /* shows Spin Buttons per default (Chrome >= 39) */
-    top: 0;
-    right: 0;
-    bottom: 0;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-}
-
-input[type="number"]::-webkit-inner-spin-button:hover,
-input[type="number"]::-webkit-inner-spin-button:active{
-    opacity: .8;
-}
-
-input#property-name {
-    width: 100%;
-}
-
-.color-picker {
-    width: 50px;
-    height: 10px;
-    margin: 5px;
-    border: 1px solid white;
-}
-
-.prop-x {
-    color:red !important;
-    background: rgba(255, 0, 0, .9);
-    height:2px !important;
-}
-
-.prop-y {
-    color:green !important;
-    background: rgba(0, 255, 0, .9);
-    height:2px !important;
-}
-
-.prop-z{
-    color:blue !important;
-    background: rgba(0, 0, 255, .9);
-    height:2px !important;
-}
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 086d8f7ab3..7c07bc2038 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -242,7 +242,7 @@
 
           function resize() {
               // Set the table height to take up available window space
-              var tableHeight = window.innerHeight - 180;
+              var tableHeight = window.innerHeight - 218;
               document.getElementById("entity-table-scroll").style.height = tableHeight;
 
               // Update the widths of the header cells to match the body

From c7712f2d05de21dfb243e43b83688c68dbd37ffc Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 16:16:03 +1300
Subject: [PATCH 12/64] Entities table styling

---
 examples/html/edit-style.css  | 297 ++++++++++++++++++++--------------
 examples/html/entityList.html |  10 +-
 2 files changed, 182 insertions(+), 125 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 0842357bee..c96eddf630 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -8,10 +8,22 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 */
 
+@font-face {
+    font-family: Raleway-Regular;
+    src: url(../../resources/fonts/Raleway-Regular.ttf),  /* Production */
+         url(../../interface/resources/fonts/Raleway-Regular.ttf);  /* Development */
+}
+
+@font-face {
+    font-family: Raleway-Light;
+    src: url(../../resources/fonts/Raleway-Light.ttf),
+         url(../../interface/resources/fonts/Raleway-Light.ttf);
+}
+
 @font-face {
     font-family: Raleway-Bold;
-    src: url(../../resources/fonts/Raleway-Bold.ttf),  /* Production */
-         url(../../interface/resources/fonts/Raleway-Bold.ttf);  /* Development */
+    src: url(../../resources/fonts/Raleway-Bold.ttf),
+         url(../../interface/resources/fonts/Raleway-Bold.ttf);
 }
 
 @font-face {
@@ -20,6 +32,12 @@
          url(../../interface/resources/fonts/Raleway-SemiBold.ttf);
 }
 
+@font-face {
+    font-family: FiraSans-SemiBold;
+    src: url(../../resources/fonts/FiraSans-SemiBold.ttf),
+         url(../../interface/resources/fonts/FiraSans-SemiBold.ttf);
+}
+
 @font-face {
     font-family: HiFi-Glyphs;
     src: url(../../resources/fonts/hifi-glyphs.ttf), 
@@ -30,10 +48,10 @@ body {
     margin: 0;
     padding: 24px 12px 24px 12px;
 
-    background-color: #404040;
     color: #afafaf;
-    font-family: Arial;
-    font-size: 9.0pt;
+    background-color: #404040;
+    font-family: Raleway-Regular;
+    font-size: 15px;
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -43,78 +61,92 @@ body {
     user-select: none;
 }
 
-td {
-    vertical-align: top;
+
+table {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #afafaf;
 }
 
-
-.selectable {
-    -webkit-touch-callout: text;
-    -webkit-user-select: text;
-    -khtml-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-
-    cursor: text;
+thead {
+    font-family: Raleway-Regular;
+    font-size: 12px;
+    background-color: #1c1c1c;
+    border-bottom: 1px solid #575757;
+    width: 100%;
 }
 
-.color-box {
-    display: inline-block;
-    width: 15pt;
-    height: 15pt;
-    border: 0.75pt solid black;
-    margin: 1.5pt;
+tbody {
+    width: 100%;
+}
+
+tfoot {
+    font-family: Raleway-Light;
+    font-size: 13px;
+    background-color: #1c1c1c;
+    border-top: 1px solid #575757;
+    width: 100%;
+}
+
+thead tr {
+    height: 30px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+thead th {
+    height: 28px;
+    background-color: #1c1c1c;
+}
+
+tbody td {
+    height: 26px;
+}
+
+tfoot td {
+    height: 18px;
+    width: 100%;
+    background-color: #1c1c1c;
+}
+
+tr {
+    width: 100%;
     cursor: pointer;
 }
 
-.color-box.highlight {
-    width: 13.5pt;
-    height: 13.5pt;
-    border: 1.5pt solid black;
+tr:nth-child(odd) {
+    background-color: #2e2e2e;
 }
 
-.section-header, .sub-section-header {
-    background: #AAA;
-    border-bottom: 0.75pt solid #CCC;
-    background-color: #333333;
-    color: #999;
-    padding: 3pt;
-    padding-top: 6pt;
+tr:nth-child(even) {
+    background-color: #1c1c1c;
 }
 
-.section-header label, .sub-section-header label {
-    font-weight: bold;
-    font-size: 11pt;
+tr.selected {
+    color: #000000;
+    background-color: #00b4ef;
 }
 
-.sub-section-header {
-    padding-top: 4px;
+th {
+    text-align: center;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 
-.sub-section-header label {
-    font-size: 9pt;
+td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 
-.multi-property-section {
-}
-
-.property-section {
-    display: block;
-    margin: 10 10;
-    height: 22.5pt;
-}
-
-
-.property-section label {
-    font-weight: bold;
-}
-
-.property-section span {
-    float: right;
-}
-
-.grid-section {
+td.url {
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 
@@ -253,6 +285,75 @@ input[type=button].red:active {
     background: linear-gradient(#94132e, #94132e);
 }
 
+
+.selectable {
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+
+    cursor: text;
+}
+
+.color-box {
+    display: inline-block;
+    width: 15pt;
+    height: 15pt;
+    border: 0.75pt solid black;
+    margin: 1.5pt;
+    cursor: pointer;
+}
+
+.color-box.highlight {
+    width: 13.5pt;
+    height: 13.5pt;
+    border: 1.5pt solid black;
+}
+
+.section-header, .sub-section-header {
+    background: #AAA;
+    border-bottom: 0.75pt solid #CCC;
+    background-color: #333333;
+    color: #999;
+    padding: 3pt;
+    padding-top: 6pt;
+}
+
+.section-header label, .sub-section-header label {
+    font-weight: bold;
+    font-size: 11pt;
+}
+
+.sub-section-header {
+    padding-top: 4px;
+}
+
+.sub-section-header label {
+    font-size: 9pt;
+}
+
+.multi-property-section {
+}
+
+.property-section {
+    display: block;
+    margin: 10 10;
+    height: 22.5pt;
+}
+
+.property-section label {
+    font-weight: bold;
+}
+
+.property-section span {
+    float: right;
+}
+
+.grid-section {
+}
+
 .color-picker {
     width: 50px;
     height: 10px;
@@ -294,7 +395,7 @@ input[type=button].red:active {
 }
 
 #search-area {
-    padding-right: 142px;
+    padding-right: 148px;
     padding-bottom: 24px;
 }
 
@@ -303,9 +404,8 @@ input[type=button].red:active {
 }
 
 #radius-and-unit {
-    width: 142px;
     float: right;
-    margin-right: -152px;
+    margin-right: -148px;
 }
 
 #radius {
@@ -317,96 +417,55 @@ input[type=button].red:active {
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    padding-top: 24px; /* Space for header and footer outside of scroll region. */
-    margin-top: 24px;
+    padding-top: 28px; /* Space for header and footer outside of scroll region. */
+    margin-top: 28px;
 }
 
 #entity-table-scroll, #entity-table {
-    background-color: #2d2d2d;
+    background-color: #1c1c1c;
 }
 
 #entity-table {
     border-collapse: collapse;
     width: 100%;
-    margin-top: -24px;
-    margin-bottom: -24px;
+    margin-top: -28px;
+    margin-bottom: -18px;
     table-layout: fixed;
-    font-family: Sans-Serif;
-    font-size: 9pt;
 }
 
 #col-type {
-    width: 15%;
+    width: 16%;
 }
 #col-name {
-    width: 30%;
+    width: 42%;
 }
 #col-url {
-    width: 54%;
-}
-#col-id {
-    width: 0;
+    width: 42%;
 }
 
 #entity-table thead {
     position: absolute;
-    top: 54px;
+    top: 52px; /* 24px below search field and 28px for header */
     left: 0;
     width: 100%;
 }
 
 #entity-table tfoot {
     position: absolute;
-    bottom: -18px;
+    bottom: -17px;
     left: 0;
     width: 100%;
 }
 
-#entity-table tr {
-    width: 100%;
-    cursor: pointer;
-    border-bottom: 0.75pt solid rgb(63, 63, 63)
-}
-
-#entity-table tr.selected {
-    color: rgb(43, 43, 43);
-    background-color: #AAA;
-}
-
-#entity-table th, #entity-table tfoot {
-    background-color: #333;
-}
-
-#entity-table th {
-    color: #fff;
-    border: 0pt black solid;
-    text-align: left;
-    word-wrap: nowrap;
-    white-space: nowrap;
-}
-
-#entity-table td {
-    font-size: 9.0pt;
-    border: 0pt black solid;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: nowrap;
-}
-
-#entity-table td.url {
-    white-space: nowrap;
-    overflow: hidden;
-}
-
 #no-entities {
     display: none;
     position: absolute;
-    top: 54px;
-    font-size: 120%;
-    padding: 10pt;
-    font-weight: bold;
+    top: 80px;
+    padding: 12px;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
     font-style: italic;
+    color: #afafaf;
 }
 
 
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 7c07bc2038..bf6264c7e5 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -278,14 +278,12 @@
                     <col span="1" id="col-type" />
                     <col span="1" id="col-name" />
                     <col span="1" id="col-url" />
-                    <col span="1" id="col-id" />
                 </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: inline">&nbsp;&#x25BE;</span></th>
-                        <th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
-                        <th style="display: none"></th>
+                        <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: inline">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-url" data-sort="url">FILE <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
                     </tr>
                 </thead>
                 <tbody class="list" id="entity-table-body">
@@ -298,7 +296,7 @@
                 </tbody>
                 <tfoot>
                     <tr>
-                        <td>Footer text</td>
+                        <td colspan="4">Footer text</td>
                     </tr>
                 </tfoot>
             </table>

From 6684bbf40418b25890b10a88432882f3347c6c56 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 16:48:41 +1300
Subject: [PATCH 13/64] Table header separators

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index c96eddf630..bd1da2d275 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -66,12 +66,15 @@ table {
     font-family: FiraSans-SemiBold;
     font-size: 15px;
     color: #afafaf;
+    border-collapse: collapse;
+    width: 100%;
 }
 
 thead {
     font-family: Raleway-Regular;
     font-size: 12px;
     background-color: #1c1c1c;
+    padding: 1px 0px;
     border-bottom: 1px solid #575757;
     width: 100%;
 }
@@ -89,14 +92,17 @@ tfoot {
 }
 
 thead tr {
-    height: 30px;
-    padding-top: 3px;
-    padding-bottom: 3px;
+    height: 26px;  /* 28px with thead padding */
 }
 
 thead th {
-    height: 28px;
+    height: 26px;
     background-color: #1c1c1c;
+    border-right: 1px solid #575757;
+}
+
+thead th:last-child {
+    border: none;
 }
 
 tbody td {
@@ -426,8 +432,6 @@ input[type=button].red:active {
 }
 
 #entity-table {
-    border-collapse: collapse;
-    width: 100%;
     margin-top: -28px;
     margin-bottom: -18px;
     table-layout: fixed;
@@ -450,6 +454,10 @@ input[type=button].red:active {
     width: 100%;
 }
 
+#entity-table thead th {
+    padding: 0;
+}
+
 #entity-table tfoot {
     position: absolute;
     bottom: -17px;

From 86354d01654f0518c8319e660a303d965f89c4c2 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 17:34:33 +1300
Subject: [PATCH 14/64] Table border

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index bd1da2d275..dd75b531fe 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -68,6 +68,8 @@ table {
     color: #afafaf;
     border-collapse: collapse;
     width: 100%;
+    border: 2px solid #575757;
+    border-radius: 7px;
 }
 
 thead {
@@ -91,6 +93,10 @@ tfoot {
     width: 100%;
 }
 
+tfoot tr {
+    background-color: #1c1cff;
+}
+
 thead tr {
     height: 26px;  /* 28px with thead padding */
 }
@@ -113,6 +119,7 @@ tfoot td {
     height: 18px;
     width: 100%;
     background-color: #1c1c1c;
+    margin-left: 12px;
 }
 
 tr {
@@ -425,6 +432,8 @@ input[type=button].red:active {
     overflow-y: auto;
     padding-top: 28px; /* Space for header and footer outside of scroll region. */
     margin-top: 28px;
+    border-left: 2px solid #575757;
+    border-right: 2px solid #575757;
 }
 
 #entity-table-scroll, #entity-table {
@@ -435,6 +444,26 @@ input[type=button].red:active {
     margin-top: -28px;
     margin-bottom: -18px;
     table-layout: fixed;
+    border: none;
+}
+
+#entity-table thead {
+    border: 2px solid #575757;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    border-bottom: 1px solid #575757;
+}
+
+#entity-table tfoot {
+    border: 2px solid #575757;
+    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;
 }
 
 #col-type {

From 054d575ed2d0468616e4acb57a7f67bc4fa80304 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 20:50:08 +1300
Subject: [PATCH 15/64] Report number of entities found or selected in entities
 table footer

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

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index bf6264c7e5..54fe2d3447 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -36,6 +36,7 @@
               elDelete = document.getElementById("delete");
               elTeleport = document.getElementById("teleport");
               elRadius = document.getElementById("radius");
+              elFooter = document.getElementById("footer-text");
               elNoEntitiesMessage = document.getElementById("no-entities");
               elNoEntitiesRadius = document.getElementById("no-entities-radius");
               
@@ -178,6 +179,15 @@
                           notFound = true;
                       }
                   }
+
+                  if (selectedEntities.length > 2) {
+                      elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
+                  } else if (selectedEntities.length === 1) {
+                      elFooter.firstChild.nodeValue = "1 entity selected";
+                  } else {
+                      elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
+                  }
+
                   return notFound;
               }
               
@@ -296,7 +306,7 @@
                 </tbody>
                 <tfoot>
                     <tr>
-                        <td colspan="4">Footer text</td>
+                        <td id="footer-text" colspan="3">Footer text</td>
                     </tr>
                 </tfoot>
             </table>

From ca90ab7597e2275887a15792cd28e5992b496841 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 21:08:25 +1300
Subject: [PATCH 16/64] Fix initial sort indicators

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

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 54fe2d3447..60d90bd687 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -292,7 +292,7 @@
                 <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: 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>
                     </tr>
                 </thead>

From 0f352b77b2037927ebe423d06d1ef1c90e77bf17 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 23 Mar 2016 21:25:02 +1300
Subject: [PATCH 17/64] Tidying

---
 examples/html/entityList.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 60d90bd687..72fa7c7558 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -39,6 +39,7 @@
               elFooter = document.getElementById("footer-text");
               elNoEntitiesMessage = document.getElementById("no-entities");
               elNoEntitiesRadius = document.getElementById("no-entities-radius");
+              elEntityTableScroll = document.getElementById("entity-table-scroll");
               
               document.getElementById("entity-name").onclick = function() {
                   setSortColumn('name');
@@ -248,25 +249,24 @@
                   });
                   setTimeout(refreshEntities, 1000);
               }
-          });
 
-          function resize() {
-              // Set the table height to take up available window space
-              var tableHeight = window.innerHeight - 218;
-              document.getElementById("entity-table-scroll").style.height = tableHeight;
+              function resize() {
+                  // Take up available window space
+                  elEntityTableScroll.style.height = window.innerHeight - 218;
 
-              // 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) {
-                  for (var i = 0; i < ths.length; i++) {
-                      ths[i].style.width = tds[i].offsetWidth;
+                  // 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) {
+                      for (var i = 0; i < ths.length; i++) {
+                          ths[i].style.width = tds[i].offsetWidth;
+                      }
                   }
-              }
-          };
+              };
 
-          window.onresize = resize;
-          resize();
+              window.onresize = resize;
+              resize();
+          });
       }
     </script>
 </head>

From 55fd861b696b5c15b1034433f6ab8b3df8523dd4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 24 Mar 2016 09:43:08 +1300
Subject: [PATCH 18/64] Style scrollbars

---
 examples/html/edit-style.css  | 19 +++++++++++++++++--
 examples/html/entityList.html |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index dd75b531fe..c58427ba2c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -393,6 +393,21 @@ input[type=button].red:active {
 }
 
 
+::-webkit-scrollbar {
+    width: 10px;
+}
+ 
+::-webkit-scrollbar-track {
+    background-color: #2e2e2e;
+}
+ 
+::-webkit-scrollbar-thumb {
+    background-color: #696969;
+    border: 2px solid #2e2e2e;
+    border-radius: 8px;
+}
+
+
 #entity-list-header {
     margin-bottom: 24px;
 }
@@ -478,7 +493,7 @@ input[type=button].red:active {
 
 #entity-table thead {
     position: absolute;
-    top: 52px; /* 24px below search field and 28px for header */
+    top: 49px;
     left: 0;
     width: 100%;
 }
@@ -489,7 +504,7 @@ input[type=button].red:active {
 
 #entity-table tfoot {
     position: absolute;
-    bottom: -17px;
+    bottom: -21px;
     left: 0;
     width: 100%;
 }
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 72fa7c7558..30955ff9bb 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -252,7 +252,7 @@
 
               function resize() {
                   // Take up available window space
-                  elEntityTableScroll.style.height = window.innerHeight - 218;
+                  elEntityTableScroll.style.height = window.innerHeight - 232;
 
                   // Update the widths of the header cells to match the body
                   var tds = document.querySelectorAll("#entity-table-body tr:first-child td");

From 454ba50dc1fb9eb5635c8d3003338ad1b4bf3ea1 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 24 Mar 2016 10:03:47 +1300
Subject: [PATCH 19/64] Tidying

---
 examples/html/edit-style.css           | 10 +++++-----
 interface/resources/qml/ToolWindow.qml |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index c58427ba2c..9dd4d9141c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -180,11 +180,6 @@ textarea {
     resize: vertical;
 }
 
-input {
-    height: 28px;
-    min-width: 120px;
-}
-
 input::-webkit-input-placeholder {
     font-style: italic;
 }
@@ -215,6 +210,11 @@ input:disabled, textarea:disabled {
     color: rgb(160, 160, 160);
 }
 
+input[type="text"], input[type="number"] {
+    height: 28px;
+    min-width: 120px;
+}
+
 input[type="number"] {
     position: relative;
 }
diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 939285546d..c06b17c434 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -30,6 +30,7 @@ Window {
     title: "Tools"
     property string newTabSource
     property alias tabView: tabView
+    minSize: Qt.vector2d(400, 500)
 
     HifiConstants { id: hifi }
 

From 96ce912d3d8407f5dfd0c5efff761071ff7ecae0 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 24 Mar 2016 11:07:48 +1300
Subject: [PATCH 20/64] Fix up tab display post-merge

---
 interface/resources/qml/ToolWindow.qml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 9ca8caffd4..57cf98cfc0 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -50,6 +50,7 @@ Window {
         id: tabView;
         width: pane.contentWidth
         height: pane.scrollHeight  // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
+        property int tabCount: 0
 
         Repeater {
             model: 4
@@ -85,7 +86,7 @@ Window {
                     text: styleData.title
                     font.capitalization: Font.AllUppercase
                     size: hifi.fontSizes.tabName
-                    width: control.count > 1 ? styleData.availableWidth / control.count : implicitWidth + 2 * hifi.dimensions.contentSpacing.x
+                    width: tabView.tabCount > 1 ? styleData.availableWidth / tabView.tabCount : implicitWidth + 2 * hifi.dimensions.contentSpacing.x
                     elide: Text.ElideRight
                     color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
                     horizontalAlignment: Text.AlignHCenter
@@ -212,6 +213,7 @@ Window {
         newTab.originalUrl = properties.source;
         newTab.item.url = properties.source;
         newTab.active = true;
+        tabView.tabCount++;
 
         if (properties.width) {
             tabView.width = Math.min(Math.max(tabView.width, properties.width),

From 5541dd67327452f5310121f06d898b14a5d59009 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 24 Mar 2016 15:38:26 +1300
Subject: [PATCH 21/64] Change edit window's title and default size

---
 interface/resources/qml/ToolWindow.qml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 57cf98cfc0..f9f03a414d 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -26,9 +26,9 @@ Window {
     destroyOnInvisible: false
     closable: true
     visible: false
-    width: 384; height: 640;
-    title: "Tools"
+    title: "Edit"
     property alias tabView: tabView
+    implicitWidth: 520; implicitHeight: 695
     minSize: Qt.vector2d(400, 500)
 
     HifiConstants { id: hifi }

From 46df386f0bb465aac03110d7e573b8591ef6e02c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 25 Mar 2016 10:18:58 +1300
Subject: [PATCH 22/64] Fix edit tab display after script reload

---
 interface/resources/qml/ToolWindow.qml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index f9f03a414d..7e9ab5ddb2 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -188,6 +188,7 @@ Window {
         tab.title = "";
         tab.originalUrl = "";
         tab.enabled = false;
+        tabView.tabCount--;
     }
 
     function addWebTab(properties) {

From 42af3ebc4a0038867d2a2dbc033c3db87b3d4e89 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 25 Mar 2016 14:15:03 +1300
Subject: [PATCH 23/64] Style the entity editor's "grid" tab

---
 examples/html/edit-style.css                  | 83 +++++++++++--------
 examples/html/gridControls.html               | 65 ++++++++-------
 .../qml/dialogs/preferences/Section.qml       |  1 -
 3 files changed, 81 insertions(+), 68 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 9dd4d9141c..9069ae2b8a 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -44,8 +44,12 @@
          url(../../interface/resources/fonts/hifi-glyphs.ttf);
 }
 
-body {
+* {
     margin: 0;
+    padding: 0;
+}
+
+body {
     padding: 24px 12px 24px 12px;
 
     color: #afafaf;
@@ -163,15 +167,14 @@ td.url {
 }
 
 
-input, textarea {
+input[type="text"], input[type="number"], textarea {
     margin: 0;
     padding: 0 12px;
     color: #afafaf;
     background-color: #252525;
     border: none;
-    font-family: Raleway-SemiBold;
+    font-family: FiraSans-SemiBold;
     font-size: 15px;
-    font-style: normal;
 }
 
 textarea {
@@ -212,7 +215,7 @@ input:disabled, textarea:disabled {
 
 input[type="text"], input[type="number"] {
     height: 28px;
-    min-width: 120px;
+    width: 120px;
 }
 
 input[type="number"] {
@@ -222,7 +225,6 @@ input[type="number"] {
 input:focus {
     color: #fff;
     background-color: #000;
-    border: 1px dotted red;
 }
 
 input::selection {
@@ -326,46 +328,60 @@ input[type=button].red:active {
 }
 
 .section-header, .sub-section-header {
-    background: #AAA;
-    border-bottom: 0.75pt solid #CCC;
-    background-color: #333333;
-    color: #999;
-    padding: 3pt;
-    padding-top: 6pt;
+    padding: 0 0 0 0;
+    font-size: 12px;
+    color: #afafaf;
 }
 
-.section-header label, .sub-section-header label {
-    font-weight: bold;
-    font-size: 11pt;
+.property {
+    display: table;
+    width: 100%;
+    margin-top: 22px;
+    min-height: 29px;
 }
 
-.sub-section-header {
-    padding-top: 4px;
+.property label {
+    display: table-cell;
+    vertical-align: middle;
+    font-family: Raleway-SemiBold;
+    font-size: 14px;
+    vertical-align: middle;
 }
 
-.sub-section-header label {
-    font-size: 9pt;
+.checkbox + .checkbox {
+    margin-top: 0;
+}
+.checkbox span {
+    display: table-cell;
+    width: 21px;
+    vertical-align: middle;
 }
 
-.multi-property-section {
+.property .number {
+    float: left;
+}
+.number + .number {
+    margin-left: 12px;
 }
 
-.property-section {
-    display: block;
-    margin: 10 10;
-    height: 22.5pt;
+.number label {
+    float: left;
+    margin-bottom: 4px;
+}
+.number span {
+    clear: both;
+    float: left;
 }
 
-.property-section label {
-    font-weight: bold;
+.color span, .color label {
+    display: inline-block;
+    float: left;
+}
+.color label {
+    padding: 4px 12px 0 0;
+    margin-left: 12px;
 }
 
-.property-section span {
-    float: right;
-}
-
-.grid-section {
-}
 
 .color-picker {
     width: 50px;
@@ -436,9 +452,6 @@ input[type=button].red:active {
     margin-right: -148px;
 }
 
-#radius {
-    width: 4em;
-}
 
 #entity-table-scroll {
     /* Height is set by JavaScript. */
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 8e1929f817..94ff3d224b 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -123,57 +123,58 @@
     </script>
 </head>
 <body onload='loaded();'>
-    <div class="grid-section">
+    <div id="grid-section">
 
-        <div class="property-section">
-            <label>Visible</label>
+        <div class="section-header">
+            <label>EDITING GRID</label>
+        </div>
+
+        <div class="property checkbox">
             <span>
                 <input type='checkbox' id="horiz-grid-visible">
             </span>
+            <label>Visible</label>
         </div>
 
-        <div class="property-section">
-            <label>Snap to grid</label>
+        <div class="property checkbox">
             <span>
                 <input type='checkbox' id="snap-to-grid">
             </span>
+            <label>Snap entities to grid</label>
         </div>
 
-        <div id="horizontal-position" class="property-section">
-            <label>Position (Y Axis)</label>
+        <div class="property">
+            <div class="number">
+                <label>Major grid size</label>
+                <span>
+                    <input type="number" id="major-spacing" min="1" step="1" />&nbsp;m
+                </span>
+            </div>
+            <div class="number">
+                <label>Minor grid size</label>
+                <span>
+                    <input type="number" id="minor-spacing" min="0.2" step="0.2" />&nbsp;m
+                </span>
+            </div>
+        </div>
+
+        <div class="property number">
+            <label>Position (Y axis)</label>
             <span>
-                <input type='number' id="horiz-y" class="number" step="0.1"></input>
+                <input type="number" id="horiz-y" step="0.1" />&nbsp;m
             </span>
         </div>
 
-        <div class="property-section">
-            <label>Minor Grid Size</label>
-            <span>
-                <input type='number' id="minor-spacing" min="0.2" step="0.2"></input>
-            </span>
-        </div>
-
-        <div class="property-section">
-            <label>Major Grid Every</label>
-            <span>
-                <input type='number' id="major-spacing" min="1" step="1", ></input>
-            </span>
-        </div>
-
-        <div class="property-section">
-            <label>Grid Color</label>
+       <div class="property color">
             <span id="grid-colors"></span>
+            <label>Grid line color</label>
         </div>
 
-        <div class="property-section">
+        <div class="property">
             <span>
-                <input type="button" id="move-to-selection" value="Move to Selection">
-            </span>
-        </div>
-        <div class="property-section">
-            <span>
-                <input type="button" id="move-to-avatar" value="Move to Avatar">
-            </span>
+                <input type="button" id="move-to-selection" value="ALIGN TO SELECTION">
+                <input type="button" id="move-to-avatar" value="ALIGN TO AVATAR">
+           </span>
         </div>
     </div>
 </body>
diff --git a/interface/resources/qml/dialogs/preferences/Section.qml b/interface/resources/qml/dialogs/preferences/Section.qml
index e48612ca03..b646b00648 100644
--- a/interface/resources/qml/dialogs/preferences/Section.qml
+++ b/interface/resources/qml/dialogs/preferences/Section.qml
@@ -111,7 +111,6 @@ Preference {
 
                 case Preference.Checkbox:
                     checkBoxCount++;
-                    console.log("####### checkBoxCount = " + checkBoxCount);
                     builder = checkboxBuilder;
                     break;
 

From 8185e13e18a9dd2909a6f95ca59c901a907e931c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 25 Mar 2016 16:40:26 +1300
Subject: [PATCH 24/64] Style checkboxes

---
 examples/html/edit-style.css    | 25 +++++++++++++++++++------
 examples/html/gridControls.html | 12 ++++--------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 9069ae2b8a..21a15329b2 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -301,6 +301,25 @@ input[type=button].red:active {
 }
 
 
+input[type=checkbox] {
+    display: none;
+}
+input[type=checkbox] + label {
+    padding-left: 24px;
+    background-position-y: 6px;
+    background-repeat: no-repeat;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVDhPY2xoaGD68+dPMSMjY9L////VgTQjAw4AlH8PxLOPHj1azWxjY1MBVNsBFBfBpwkEgNKcQGwtJyfHyATkF0KEiQdAzYlMQEIUyicFyDD9+/ePgRxMvsb///4zkIOZ/v0HmkAGHginYjGNGAzS+BpdkAj8mun/3//92DyPD//993cG88nTJ4+Zm5p/BSZeJYb/DEJADEzNOPF7hn8Mk69cvVIPAHN5pyfo70F5AAAAAElFTkSuQmCC);
+}
+input[type=checkbox] + label:hover {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAClSURBVDhPY2hoaGD6//9/6b9//64D8T8gGycASr/7+/dv5/79+1kYgIxKqDjRAKiniRFIv2JgYBAFYlLAE0aQ66AckgDjjx8/yNP44cMH8jS+fPmSPI0PHz4kT+PNmzfJ03jp0iXyNJ46dYo8jYcPHyYnAbxm+vnzZz8wLhlIwd+/f5/BrKSkdExCQuLrnz9/lIBpUAiIQekXF34PTGmTT548WQ8AokXg+rhVtPYAAAAASUVORK5CYII=);
+}
+input[type=checkbox]:checked + label {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLSURBVDhPjZK9SgNBFIXvbCaQRDQq7mIhQRPBRisJKcwLWOobaCsExEaxcEEQe0trGysfwg0EwWoDsbFIJUaIBJOwus547saNP3FlPzgzzJxzL5edFbZtG77v7wkhtrXWS9gFRQC/DZ07jnOYKJfL+8ie4n7mvyIGdhpay+VyQuK8y5dPZoHuVtbpZcLi4wjJ1x4t316R9dDgBlsSi8mGu7pJjyJFzVaH+r7iqyHSELSQzVADjS0UgjlDKUUsLzVO98+9kSLGV5qaHXhjU0GWNSxk3hCIwnsfeMNCjTArLmHeUBodoLiE+R+jxuHPUZP4elGE3teonx2S/Q7lJzOUlkYQ+A4/xzyegzNhXmJpwTMXry9IFjcoa84O0r+QXpcK1cugCLREZadyoA19Ergxwf96nKjd1KqlYqmLQ540TUNwItUmRWdu3T36AODjwgpY9xqqAAAAAElFTkSuQmCC);
+}
+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=);
+}
+
 .selectable {
     -webkit-touch-callout: text;
     -webkit-user-select: text;
@@ -345,17 +364,11 @@ input[type=button].red:active {
     vertical-align: middle;
     font-family: Raleway-SemiBold;
     font-size: 14px;
-    vertical-align: middle;
 }
 
 .checkbox + .checkbox {
     margin-top: 0;
 }
-.checkbox span {
-    display: table-cell;
-    width: 21px;
-    vertical-align: middle;
-}
 
 .property .number {
     float: left;
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 94ff3d224b..8be80ca97f 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -130,17 +130,13 @@
         </div>
 
         <div class="property checkbox">
-            <span>
-                <input type='checkbox' id="horiz-grid-visible">
-            </span>
-            <label>Visible</label>
+            <input type='checkbox' id="horiz-grid-visible">
+            <label for="horiz-grid-visible">Visible</label>
         </div>
 
         <div class="property checkbox">
-            <span>
-                <input type='checkbox' id="snap-to-grid">
-            </span>
-            <label>Snap entities to grid</label>
+            <input type='checkbox' id="snap-to-grid">
+            <label for="snap-to-grid">Snap entities to grid</label>
         </div>
 
         <div class="property">

From b7fa9d5f8d5749e72d4a092f33e985dee3affc7a Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 26 Mar 2016 16:27:20 +1300
Subject: [PATCH 25/64] Style entity property headings

---
 examples/html/edit-style.css        |  77 ++++++++++----
 examples/html/entityProperties.html | 149 ++++++++++++++++------------
 2 files changed, 140 insertions(+), 86 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 21a15329b2..dea94c5cf3 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -346,12 +346,59 @@ input[type=checkbox]:checked + label:hover {
     border: 1.5pt solid black;
 }
 
+
 .section-header, .sub-section-header {
-    padding: 0 0 0 0;
+    position: relative;
+    margin: 22px -12px 0 -12px;
+    padding: 14px 12px 0 12px;
     font-size: 12px;
     color: #afafaf;
+    height: 28px;
+    text-transform: uppercase;
 }
 
+.section-header {
+    background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
+}
+
+.sub-section-header, .no-collapse {
+    background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
+}
+
+.section-header:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    background: none;
+    height: auto;
+}
+
+.sub-section-header {
+    margin-bottom: 6px;
+}
+
+.section-header span {
+    font-family: HiFi-Glyphs;
+    float: right;
+    font-size: 20px;
+    position: absolute;
+    top: 9px;
+    right: 12px;
+}
+
+.text-section[collapsed="true"] ~ .text-section,
+.zone-section[collapsed="true"] ~ .zone-section,
+.web-section[collapsed="true"] ~ .web-section,
+.hyperlink-section[collapsed="true"] ~ .hyperlink-section,
+.spatial-section[collapsed="true"] ~ .spatial-section,
+.physical-section[collapsed="true"] ~ .physical-section,
+.behavior-section[collapsed="true"] ~ .behavior-section,
+.model-section[collapsed="true"] ~ .model-section,
+.light-section[collapsed="true"] ~ .light-section
+ {
+    display: none;
+}
+
+
 .property {
     display: table;
     width: 100%;
@@ -547,19 +594,17 @@ input[type=checkbox]:checked + label:hover {
 }
 
 
+#properties-list .property:first-child {
+    margin-top: 0;
+}
+
+
+/*
 div.input-area {
     display: inline-block;
     font-size: 9pt;
 }
 
-#type, #id {
-    font-size: 9.0pt;
-}
-
-#type label, #id label {
-    color: rgb(150, 150, 150);
-}
-
 #properties-list input[type=checkbox] {
     vertical-align: bottom;
 }
@@ -586,19 +631,6 @@ div.input-area {
 }
 
 
-table#properties-list {
-    border: none;
-    border-collapse: collapse;
-    width: 100%;
-    background-color: #efefef;
-    font-family: Arial;
-    table-layout: fixed;
-}
-
-#properties-list {
-    border-bottom: 0.75pt solid #e5e5e5;
-}
-
 .sub-props-checkbox-group {
     margin-left: 20px;
 }
@@ -638,3 +670,4 @@ div.inner {
     position: absolute;
     width: 100%;
 }
+*/
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 162f926c38..af7a592b92 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -492,6 +492,22 @@
                     urlUpdater.addEventListener("click", refreshEvent);
                 }
 
+                var toggleCollapsedEvent = function (event) {
+                    var element = event.target;
+                    if (element.nodeName !== "DIV") {
+                        element = element.parentNode;
+                    }
+                    var collapsed = element.getAttribute("collapsed") !== "true";
+                    element.setAttribute("collapsed", collapsed ? "true" : "false");
+                    element.getElementsByTagName("span")[0].textContent = collapsed ? "L" : "M";
+                };
+
+                var elCollapsible = document.getElementsByClassName("collapsible");
+                for (var i = 0, length = elCollapsible.length; i < length; i++) {
+                    var element = elCollapsible[i];
+                    addEventListener("click", toggleCollapsedEvent);
+                };
+
                 if (window.EventBridge !== undefined) {
                     var properties;
                     EventBridge.scriptEventReceived.connect(function(data) {
@@ -1095,7 +1111,7 @@
     </script>
 </head>
 
-<body class="properties" onload='loaded();'>
+<body onload='loaded();'>
     <div id="properties-list">
         <div id="type" class="property">
             <div class="label">
@@ -1138,8 +1154,8 @@
             </div>
         </div>
 
-        <div class="section-header text-section">
-            <label>Text</label>
+        <div id="text-section" class="section-header text-section collapsible">
+            <label>Text</label><span>M</span>
         </div>
 
         <div class="text-section property">
@@ -1170,12 +1186,12 @@
                 <div class="input-area">R <input class="coord" type="number" id="property-text-background-color-red"></div>
                 <div class="input-area">G <input class="coord" type="number" id="property-text-background-color-green"></div>
                 <div class="input-area">B <input class="coord" type="number" id="property-text-background-color-blue"></div>
-        
+
             </div>
         </div>
         
         <div class="section-header zone-section">
-            <label>Zone</label>
+            <label>Zone</label><span>M</span>
         </div>
 
         <div class="zone-section property">
@@ -1286,6 +1302,7 @@
                 </select> 
             </div>
         </div>
+
         <div class="sub-section-header zone-section skybox-section">
             <label>Skybox</label>
         </div>
@@ -1309,7 +1326,7 @@
         </div>
 
         <div class="section-header web-section">
-            <label>Web</label>
+            <label>Web</label><span>M</span>
         </div>
 
         <div class="web-section property">
@@ -1323,7 +1340,7 @@
 
 
         <div class="section-header hyperlink-section">
-            <label>Hyperlink</label>
+            <label>Hyperlink</label><span>M</span>
         </div>
 
         <div class="hyperlink-section property">
@@ -1342,16 +1359,16 @@
         </div>
 
 
-        <div class="section-header">
-            <label>Spatial Properties</label>
+        <div class="section-header spatial-section">
+            <label>Spatial Properties</label><span>M</span>
         </div>
 
-        <div class="property">
+        <div class="spatial-section property">
             <div class="label">Position</div>
             <div class="value">
                 <div class="input-area ">X<input class="coord" type='number' id="property-pos-x"><div class="prop-x"></div></div>
                 <div class="input-area ">Y<input class="coord" type='number' id="property-pos-y"><div class="prop-y"></div></div>
-                <div class="input-area ">Z<input class="coord" type='number' id="property-pos-z" ><div class="prop-z"></div></div>
+                <div class="input-area ">Z<input class="coord" type='number' id="property-pos-z"><div class="prop-z"></div></div>
                 <div>
                     <input type="button" id="move-selection-to-grid" value="Selection to Grid">
                     <input type="button" id="move-all-to-grid" value="All to Grid">
@@ -1360,20 +1377,20 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="spatial-section property">
             <span class="label" style="float: left; margin-right: 6px">ParentID</span>
             <div class="value" style="overflow: hidden;">
                 <input type="text" id="property-parent-id">
             </div>
         </div>
-        <div class="property">
+        <div class="spatial-section property">
             <span class="label" style="float: left; margin-right: 6px">ParentJointIndex</span>
             <div class="value" style="overflow: hidden;">
                 <input type="text" id="property-parent-joint-index">
             </div>
         </div>
 
-        <div class="property">
+        <div class="spatial-section property">
             <div class="label">Registration</div>
             <div class="value">
                 <div class="input-area">X <input class="coord" type="number" id="property-reg-x"><div class="prop-x"></div></div>
@@ -1382,7 +1399,7 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="spatial-section property">
             <div class="label">Dimensions</div>
             <div class="value">
                 <div class="input-area">X <input class="coord" type="number" id="property-dim-x" step="0.1"><div class="prop-x"></div></div>
@@ -1400,7 +1417,7 @@
             </div>
         </div>
 
-        <div class="poly-vox-section property">
+        <div class="spatial-section poly-vox-section property">
             <div class="label">Voxel Volume Size</div>
             <div class="value">
               <div class="input-area">X <br> <input class="coord" type="number" id="property-voxel-volume-size-x"></div>
@@ -1437,7 +1454,7 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="spatial-section property">
             <div class="label">Rotation</div>
             <div class="value">
                 <div class="input-area">Pitch <input class="coord" type="number" id="property-rot-x" step="0.1"></div>
@@ -1447,11 +1464,11 @@
         </div>
 
 
-        <div class="section-header">
-            <label>Physical Properites</label>
+        <div class="section-header physical-section">
+            <label>Physical Properites</label><span>M</span>
         </div>
 
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Linear Velocity</div>
             <div class="value">
                 <div class="input-area">X <input class="coord" type="number" id="property-lvel-x"><div class="prop-x"></div></div>
@@ -1459,13 +1476,13 @@
                 <div class="input-area">Z <input class="coord" type="number" id="property-lvel-z"><div class="prop-z"></div></div>
             </div>
         </div>
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Linear Damping</div>
             <div class="value">
                 <input class="coord" type="number" id="property-ldamping">
             </div>
         </div>
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Angular Velocity</div>
             <div class="value">
                 <div class="input-area">Pitch <input class="coord" type="number" id="property-avel-x"></div>
@@ -1473,26 +1490,26 @@
                 <div class="input-area">Roll <input class="coord" type="number" id="property-avel-z"></div>
             </div>
         </div>
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Angular Damping</div>
             <div class="value">
                 <input class="coord" type="number" id="property-adamping">
             </div>
         </div>
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Restitution</div>
             <div class="value">
                 <input class="coord" type="number" id="property-restitution">
             </div>
         </div>
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Friction</div>
             <div class="value">
                 <input class="coord" type="number" id="property-friction">
             </div>
         </div>
 
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Gravity</div>
             <div class="value">
                 <div class="input-area">X <input class="coord" type="number" id="property-grav-x"><div class="prop-x"></div></div>
@@ -1501,7 +1518,7 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Acceleration</div>
             <div class="value">
                 <div class="input-area">X <input class="coord" type="number" id="property-lacc-x"><div class="prop-x"></div></div>
@@ -1510,14 +1527,14 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="physical-section property">
             <div class="label">Density</div>
             <div>
                 <input type="number" id="property-density">
             </div>
         </div>
 
-        <div id="color-section" class="property">
+        <div id="color-section" class="physical-section property">
             <div class="label">Color</div>
             <div class="value">
                 <div id="property-color" class='color-picker'></div>
@@ -1528,18 +1545,18 @@
         </div>
 
 
-        <div class="section-header">
-            <label>Behavior</label>
+        <div class="section-header behavior-section">
+            <label>Behavior</label><span>M</span>
         </div>
 
-        <div class="property">
+        <div class="behavior-section property">
             <span class="label">Collisionless</span>
             <span class="value">
                 <input type='checkbox' id="property-collisionless">
             </span>
         </div>
 
-        <div class="property">
+        <div class="behavior-section property">
             <span class="label">Dynamic</span>
             <span class="value">
                 <input type='checkbox' id="property-dynamic">
@@ -1547,46 +1564,51 @@
         </div>
 
         
-            <div class = "sub-section-header"> Collides With: </div>
-            <div class = "sub-props-checkbox-group">
+            <div class = "sub-section-header behavior-section">
+                <span>Collides With</span>
+            </div>
+            <div class = "sub-props-checkbox-group behavior-section">
                 <div class="property">
-                  <span class="label"> static</span>
-                  <span class="value">
-                    <input type='checkbox' id="property-collide-static">
-                  </span>
+                    <span class="label"> static</span>
+                    <span class="value">
+                        <input type='checkbox' id="property-collide-static">
+                    </span>
                 </div>
 
                 <div class="property">
-                  <span class="label"> dynamic</span>
-                  <span class="value">
-                    <input type='checkbox' id="property-collide-dynamic">
-                  </span>
+                    <span class="label"> dynamic</span>
+                    <span class="value">
+                        <input type='checkbox' id="property-collide-dynamic">
+                    </span>
                 </div>
 
                 <div class="property">
-                  <span class="label"> kinematic</span>
-                  <span class="value">
-                    <input type='checkbox' id="property-collide-kinematic">
-                  </span>
+                    <span class="label"> kinematic</span>
+                    <span class="value">
+                        <input type='checkbox' id="property-collide-kinematic">
+                    </span>
                 </div>
 
                 <div class="property">
-                  <span class="label"> myAvatar</span>
-                  <span class="value">
-                    <input type='checkbox' id="property-collide-myAvatar">
-                  </span>
+                    <span class="label"> myAvatar</span>
+                    <span class="value">
+                        <input type='checkbox' id="property-collide-myAvatar">
+                    </span>
                 </div>
 
                 <div class="property">
-                  <span class="label"> otherAvatar</span>
-                  <span class="value">
-                    <input type='checkbox' id="property-collide-otherAvatar">
-                  </span>
+                    <span class="label"> otherAvatar</span>
+                    <span class="value">
+                        <input type='checkbox' id="property-collide-otherAvatar">
+                    </span>
                 </div>
             </div>
 
-            <div class = "sub-section-header"> Grabbable: </div>
-            <div class = "sub-props-checkbox-group">
+
+            <div class = "sub-section-header behavior-section">
+                <span>Grabbable</span>
+            </div>
+            <div class = "sub-props-checkbox-group behavior-section">
               <div class="property">
                 <span class="label">grabbable</span>
                 <span class="value">
@@ -1609,9 +1631,8 @@
               </div>
             </div>
 
-        </div>
 
-        <div class="property">
+        <div class="behavior-section property">
             <div class="label">Collision Sound URL</div>
             <div class="value">
                 <input id="property-collision-sound-url" class="url">
@@ -1619,14 +1640,14 @@
             </div>
         </div>
 
-        <div class="property">
+        <div class="behavior-section property">
             <div class="label">Lifetime</div>
             <div class="value">
                 <input type="number" id="property-lifetime">
             </div>
         </div>
 
-        <div class="property">
+        <div class="behavior-section property">
             <div class="label">Script URL
                 <input type="hidden" id="property-script-timestamp" class="value">
                 <input type="button" id="reload-script-button" value="Reload">
@@ -1638,8 +1659,8 @@
         </div>
 
 
-        <div class="section-header model-section zone-section">
-            <label>Model</label>
+        <div class="section-header model-section">
+            <label>Model</label><span>M</span>
         </div>
 
         <div class="model-section property">
@@ -1731,7 +1752,7 @@
         </div>
 
         <div class="section-header light-section">
-            <label>Light</label>
+            <label>Light</label><span>M</span>
         </div>
         
         <div class="light-section property">

From 3f8b89eea8571581bd7773e0639ad5b439a6a4b4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 26 Mar 2016 18:23:11 +1300
Subject: [PATCH 26/64] Miscellaneous fixes

---
 examples/html/edit-style.css        | 2 ++
 examples/html/entityList.html       | 4 ++--
 examples/html/entityProperties.html | 5 ++---
 examples/html/gridControls.html     | 8 ++++----
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index dea94c5cf3..88d5203c5c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -256,6 +256,7 @@ input[type="number"]::-webkit-inner-spin-button:active {
 input[type=button] {
     font-family: Raleway-Bold;
     font-size: 13px;
+    text-transform: uppercase;
     vertical-align: top;
     height: 28px;
     min-width: 120px;
@@ -272,6 +273,7 @@ input[type=button] {
 input[type=button].glyph {
     font-family: HiFi-Glyphs;
     font-size: 20px;
+    text-transform: none;
     min-width: 34px;
     padding: 0;
 }
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 30955ff9bb..dabfa7dbc1 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -273,8 +273,8 @@
 <body onload='loaded();'>
     <div id="entity-list-header">
         <input type="button" class="glyph" id="refresh" value="F" />
-        <input type="button" id="teleport" value="JUMP TO SELECTION" />
-        <input type="button" class="red" id="delete" value="DELETE" />
+        <input type="button" id="teleport" value="Jump To Selection" />
+        <input type="button" class="red" id="delete" value="Delete" />
     </div>
 
     <div id="entity-list">
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index af7a592b92..3d66700166 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -502,10 +502,10 @@
                     element.getElementsByTagName("span")[0].textContent = collapsed ? "L" : "M";
                 };
 
-                var elCollapsible = document.getElementsByClassName("collapsible");
+                var elCollapsible = document.getElementsByClassName("section-header");
                 for (var i = 0, length = elCollapsible.length; i < length; i++) {
                     var element = elCollapsible[i];
-                    addEventListener("click", toggleCollapsedEvent);
+                    element.addEventListener("click", toggleCollapsedEvent, true);
                 };
 
                 if (window.EventBridge !== undefined) {
@@ -1107,7 +1107,6 @@
                 }
             });
         }
-
     </script>
 </head>
 
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 8be80ca97f..7040379070 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -126,7 +126,7 @@
     <div id="grid-section">
 
         <div class="section-header">
-            <label>EDITING GRID</label>
+            <label>Editing Grid</label>
         </div>
 
         <div class="property checkbox">
@@ -135,7 +135,7 @@
         </div>
 
         <div class="property checkbox">
-            <input type='checkbox' id="snap-to-grid">
+            <input type="checkbox" id="snap-to-grid">
             <label for="snap-to-grid">Snap entities to grid</label>
         </div>
 
@@ -168,8 +168,8 @@
 
         <div class="property">
             <span>
-                <input type="button" id="move-to-selection" value="ALIGN TO SELECTION">
-                <input type="button" id="move-to-avatar" value="ALIGN TO AVATAR">
+                <input type="button" id="move-to-selection" value="Align To Selection">
+                <input type="button" id="move-to-avatar" value="Align To Avatar">
            </span>
         </div>
     </div>

From e23b3157a973280e0ff96eacb637af45bbb6f83e Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 26 Mar 2016 18:24:56 +1300
Subject: [PATCH 27/64] Restyle entity property checkboxes

---
 examples/html/entityProperties.html | 200 ++++++++++++----------------
 1 file changed, 85 insertions(+), 115 deletions(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 3d66700166..a3c763663e 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1132,18 +1132,14 @@
             </div>
         </div>
 
-        <div class="property">
-            <span class="label">Locked</span>
-            <span class="value">
-                <input type='checkbox' id="property-locked">
-            </span>
+        <div class="property checkbox">
+            <input type="checkbox" id="property-locked">
+            <label for="property-locked">Locked</label>
         </div>
 
-        <div class="property">
-            <span class="label">Visible</span>
-            <span class="value">
-                <input type='checkbox' id="property-visible">
-            </span>
+        <div class="property checkbox">
+            <input type="checkbox" id="property-visible">
+            <label for="property-visible">Visible</label>
         </div>
 
         <div class="property">
@@ -1153,7 +1149,8 @@
             </div>
         </div>
 
-        <div id="text-section" class="section-header text-section collapsible">
+
+        <div id="text-section" class="section-header text-section">
             <label>Text</label><span>M</span>
         </div>
 
@@ -1189,17 +1186,17 @@
             </div>
         </div>
         
+
         <div class="section-header zone-section">
             <label>Zone</label><span>M</span>
         </div>
 
-        <div class="zone-section property">
-            <span class="label">Stage Sun Model Enabled</span>
-            <span class="value">
-                <input type='checkbox' id="property-zone-stage-sun-model-enabled">
-            </span>
+        <div class="zone-section property checkbox">
+            <input type="checkbox" id="property-zone-stage-sun-model-enabled">
+            <label for="property-zone-stage-sun-model-enabled">Enable stage sun model</label>
         </div>
 
+
         <div class="sub-section-header zone-section keyLight-section">
             <label>KeyLight</label>
         </div>
@@ -1235,7 +1232,6 @@
                 <input class="coord" type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
             </div>
         </div>
-
         
         <div class="zone-section keyLight-section property">
             <div class="label">Ambient URL</div>
@@ -1245,6 +1241,7 @@
             </div>
         </div>
 
+
         <div class="sub-section-header zone-section stage-section">
             <label>Stage</label>
         </div>
@@ -1268,11 +1265,9 @@
             </div>
         </div>
 
-        <div class="zone-section stage-section property">
-            <span class="label">Automatically calculate stage hour and day from location and clock.</span>
-            <span class="value">
-                <input type='checkbox' id="property-zone-stage-automatic-hour-day">
-            </span>
+        <div class="zone-section stage-section property checkbox">
+            <input type="checkbox" id="property-zone-stage-automatic-hour-day">
+            <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
         </div>
 
         <div class="zone-section stage-section property">
@@ -1288,6 +1283,7 @@
             </div>
         </div>
 
+
         <div class="sub-section-header zone-section background-section">
             <label>Background</label>
         </div>
@@ -1302,6 +1298,7 @@
             </div>
         </div>
 
+
         <div class="sub-section-header zone-section skybox-section">
             <label>Skybox</label>
         </div>
@@ -1324,6 +1321,7 @@
             </div>
         </div>
 
+
         <div class="section-header web-section">
             <label>Web</label><span>M</span>
         </div>
@@ -1548,88 +1546,67 @@
             <label>Behavior</label><span>M</span>
         </div>
 
-        <div class="behavior-section property">
-            <span class="label">Collisionless</span>
-            <span class="value">
-                <input type='checkbox' id="property-collisionless">
-            </span>
+        <div class="behavior-section property checkbox">
+            <input type="checkbox" id="property-collisionless">
+            <label for="property-collisionless">Collisionless</label>
         </div>
 
-        <div class="behavior-section property">
-            <span class="label">Dynamic</span>
-            <span class="value">
-                <input type='checkbox' id="property-dynamic">
-            </span>
+        <div class="behavior-section property checkbox">
+            <input type="checkbox" id="property-dynamic">
+            <label for="property-dynamic">Dynamic</label>
         </div>
 
         
-            <div class = "sub-section-header behavior-section">
-                <span>Collides With</span>
-            </div>
-            <div class = "sub-props-checkbox-group behavior-section">
-                <div class="property">
-                    <span class="label"> static</span>
-                    <span class="value">
-                        <input type='checkbox' id="property-collide-static">
-                    </span>
-                </div>
-
-                <div class="property">
-                    <span class="label"> dynamic</span>
-                    <span class="value">
-                        <input type='checkbox' id="property-collide-dynamic">
-                    </span>
-                </div>
-
-                <div class="property">
-                    <span class="label"> kinematic</span>
-                    <span class="value">
-                        <input type='checkbox' id="property-collide-kinematic">
-                    </span>
-                </div>
-
-                <div class="property">
-                    <span class="label"> myAvatar</span>
-                    <span class="value">
-                        <input type='checkbox' id="property-collide-myAvatar">
-                    </span>
-                </div>
-
-                <div class="property">
-                    <span class="label"> otherAvatar</span>
-                    <span class="value">
-                        <input type='checkbox' id="property-collide-otherAvatar">
-                    </span>
-                </div>
+        <div class="sub-section-header behavior-section">
+            <span>Collides With</span>
+        </div>
+        <div class="sub-props-checkbox-group behavior-section">
+            <div class="property checkbox">
+                <input type="checkbox" id="property-collide-static">
+                <label for="property-collide-static">Static entities</label>
             </div>
 
-
-            <div class = "sub-section-header behavior-section">
-                <span>Grabbable</span>
-            </div>
-            <div class = "sub-props-checkbox-group behavior-section">
-              <div class="property">
-                <span class="label">grabbable</span>
-                <span class="value">
-                  <input type='checkbox' id="property-grabbable">
-                </span>
-              </div>
-
-              <div class="property">
-                <span class="label">triggerable</span>
-                <span class="value">
-                  <input type='checkbox' id="property-wants-trigger">
-                </span>
-              </div>
-
-              <div class="property">
-                <span class="label">ignore inverse-kinematics</span>
-                <span class="value">
-                  <input type='checkbox' id="property-ignore-ik">
-                </span>
-              </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 = "sub-section-header behavior-section">
+            <span>Grabbing</span>
+        </div>
+        <div class="sub-props-checkbox-group behavior-section">
+            <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 class="behavior-section property">
             <div class="label">Collision Sound URL</div>
@@ -1695,11 +1672,9 @@
                 <div class="update-url-version"></div>
             </div>
         </div>
-        <div class="model-section property">
-            <span class="label">Animation Playing</span>
-            <span class="value">
-                <input type='checkbox' id="property-model-animation-playing">
-            </span>
+        <div class="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-section property">
             <div class="label">Animation FPS</div>
@@ -1725,17 +1700,13 @@
                 <input class="coord" type="number" id="property-model-animation-last-frame">
             </div>
         </div>
-        <div class="model-section property">
-            <span class="label">Animation Loop</span>
-            <span class="value">
-                <input type='checkbox' id="property-model-animation-loop">
-            </span>
+        <div class="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-section property">
-            <span class="label">Animation Hold</span>
-            <span class="value">
-                <input type='checkbox' id="property-model-animation-hold">
-            </span>
+        <div class="model-section property checkbox">
+            <input type="checkbox" id="property-model-animation-hold">
+            <label for="property-model-animation-hold">Animation hold</label>
         </div>
         <div class="model-section property">
             <div class="label">Textures</div>
@@ -1750,6 +1721,7 @@
             </div>
         </div>
 
+
         <div class="section-header light-section">
             <label>Light</label><span>M</span>
         </div>
@@ -1775,11 +1747,9 @@
                 <input class="coord" type="number" id="property-light-falloff-radius" min="0" step="0.1">
             </div>
         </div>
-        <div class="light-section property">
-            <span class="label">Spot Light</span>
-            <span class="value">
-                <input type='checkbox' id="property-light-spot-light">
-            </span>
+        <div class="light-section property checkbox">
+            <input type="checkbox" id="property-light-spot-light">
+            <label for="property-light-spot-light">Spot light</label>
         </div>
         <div class="light-section property">
             <div class="label">Spot Light Exponent</div>

From ce8cc168eece159c73eac186cc0ec27f752a4c49 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 26 Mar 2016 20:45:19 +1300
Subject: [PATCH 28/64] Restyle entity property text fields

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 88d5203c5c..8a43190496 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -191,10 +191,6 @@ input.search {
     border-radius: 14px;
 }
 
-input.url {
-    width: 100%;
-}
-
 input.coord {
     width: 7em;
     display: block;
@@ -231,6 +227,10 @@ input::selection {
     background-color: #00b4ef;
 }
 
+input[type="text"] {
+    width: 100%;
+}
+
 /* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -395,8 +395,7 @@ input[type=checkbox]:checked + label:hover {
 .physical-section[collapsed="true"] ~ .physical-section,
 .behavior-section[collapsed="true"] ~ .behavior-section,
 .model-section[collapsed="true"] ~ .model-section,
-.light-section[collapsed="true"] ~ .light-section
- {
+.light-section[collapsed="true"] ~ .light-section {
     display: none;
 }
 
@@ -426,7 +425,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.number label {
+.text label, .url label, .number label {
     float: left;
     margin-bottom: 4px;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index a3c763663e..8028948e47 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1125,11 +1125,9 @@
                 <span id="property-id" class="selectable"></span>
             </div>
         </div>
-        <div class="property">
-            <span class="label" style="float: left; margin-right: 6px">Name</span>
-            <div class="value" style="overflow: hidden;">
-                <input type="text" id="property-name">
-            </div>
+        <div class="property text">
+            <label for="property-name">Name</label>
+            <input type="text" id="property-name">
         </div>
 
         <div class="property checkbox">
@@ -1153,12 +1151,9 @@
         <div id="text-section" class="section-header text-section">
             <label>Text</label><span>M</span>
         </div>
-
-        <div class="text-section property">
-            <div class="label">Text Content</div>
-            <div class="value">
-                <input type="text" id="property-text-text">
-            </div>
+        <div class="text-section property text">
+            <label for="property-text-text">Text content</label>
+            <input type="text" id="property-text-text">
         </div>
         <div class="text-section property">
             <div class="label">Line Height</div>
@@ -1233,12 +1228,10 @@
             </div>
         </div>
         
-        <div class="zone-section keyLight-section property">
-            <div class="label">Ambient URL</div>
-            <div class="value">
-                <input type="text" id="property-zone-key-ambient-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="zone-section keyLight-section property url">
+            <label for="property-zone-key-ambient-url">Ambient URL</label>
+            <input type="text" id="property-zone-key-ambient-url">
+            <div class="update-url-version"></div>
         </div>
 
 
@@ -1313,12 +1306,10 @@
             </div>
         </div>
 
-        <div class="zone-section skybox-section property">
-            <div class="label">Skybox URL</div>
-            <div class="value">
-                <input type="text" id="property-zone-skybox-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="zone-section skybox-section property url">
+            <label for="property-zone-skybox-url">Skybox URL</label>
+            <input type="text" id="property-zone-skybox-url">
+            <div class="update-url-version"></div>
         </div>
 
 
@@ -1326,13 +1317,10 @@
             <label>Web</label><span>M</span>
         </div>
 
-        <div class="web-section property">
-            <div class="label">Source URL</div>
-            <div class="value">
-                <input type="text" id="property-web-source-url" class="url">
-                <div class="update-url-version"></div>
-
-            </div>
+        <div class="web-section property url">
+            <label for="property-web-source-url">Source URL</label>
+            <input type="text" id="property-web-source-url">
+            <div class="update-url-version"></div>
         </div>
 
 
@@ -1340,19 +1328,13 @@
             <label>Hyperlink</label><span>M</span>
         </div>
 
-        <div class="hyperlink-section property">
-            <div class="label">Href - Hifi://address</div>
-            <div class="value">
-                <input id="property-hyperlink-href" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="hyperlink-section property url">
+            <label for="property-hyperlink-href">Href - hifi://address</label>
+            <input type="text" id="property-hyperlink-href">
         </div>
-        <div class="hyperlink-section property">
-            <div class="label">Description</div>
-            <div class="value">
-                <input id="property-hyperlink-description" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="hyperlink-section property text">
+            <label for="property-hyperlink-description">Description</label>
+            <input type="text" id="property-hyperlink-description">
         </div>
 
 
@@ -1374,17 +1356,13 @@
             </div>
         </div>
 
-        <div class="spatial-section property">
-            <span class="label" style="float: left; margin-right: 6px">ParentID</span>
-            <div class="value" style="overflow: hidden;">
-                <input type="text" id="property-parent-id">
-            </div>
+        <div class="spatial-section property text">
+            <label for="property-parent-id">Parent ID</label>
+            <input type="text" id="property-parent-id">
         </div>
-        <div class="spatial-section property">
-            <span class="label" style="float: left; margin-right: 6px">ParentJointIndex</span>
-            <div class="value" style="overflow: hidden;">
-                <input type="text" id="property-parent-joint-index">
-            </div>
+        <div class="spatial-section property text">
+            <label for="property-parent-joint-index">Parent joint index</label>
+            <input type="text" id="property-parent-joint-index">
         </div>
 
         <div class="spatial-section property">
@@ -1432,22 +1410,22 @@
               </select>
             </div>
 
-            <div class="label">X-axis Texture URL</div>
-            <div class="value">
-              <input type="text" id="property-x-texture-url" class="url">
-              <div class="update-url-version"></div>
+            <div class="property url">
+                <label for="property-x-texture-url">X-axis texture URL</label>
+                <input type="text" id="property-x-texture-url">
+                <div class="update-url-version"></div>
             </div>
 
-            <div class="label">Y-axis Texture URL</div>
-            <div class="value">
-              <input type="text" id="property-y-texture-url" class="url">
-              <div class="update-url-version"></div>
+            <div class="property url">
+                <label for="property-y-texture-url">Y-axis texture URL</label>
+                <input type="text" id="property-y-texture-url">
+                <div class="update-url-version"></div>
             </div>
 
-            <div class="label">Z-axis Texture URL</div>
-            <div class="value">
-              <input type="text" id="property-z-texture-url" class="url">
-              <div class="update-url-version"></div>
+            <div class="property url">
+                <label for="property-z-texture-url">Z-axis texture URL</label>
+                <input type="text" id="property-z-texture-url">
+                <div class="update-url-version"></div>
             </div>
         </div>
 
@@ -1608,12 +1586,10 @@
             </div>
         </div>
 
-        <div class="behavior-section property">
-            <div class="label">Collision Sound URL</div>
-            <div class="value">
-                <input id="property-collision-sound-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="behavior-section property url">
+            <label for="property-collision-sound-url">Collision sound URL</label>
+            <input type="text" id="property-collision-sound-url">
+            <div class="update-url-version"></div>
         </div>
 
         <div class="behavior-section property">
@@ -1623,15 +1599,12 @@
             </div>
         </div>
 
-        <div class="behavior-section property">
-            <div class="label">Script URL
-                <input type="hidden" id="property-script-timestamp" class="value">
-                <input type="button" id="reload-script-button" value="Reload">
-            </div>
-            <div class="value">
-                <input id="property-script-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="behavior-section property url">
+            <input type="hidden" id="property-script-timestamp" class="value">
+            <input type="button" id="reload-script-button" value="Reload">
+            <label for="property-script-url">Script URL</label>
+            <input type="text" id="property-script-url">
+            <div class="update-url-version"></div>
         </div>
 
 
@@ -1639,12 +1612,10 @@
             <label>Model</label><span>M</span>
         </div>
 
-        <div class="model-section property">
-            <div class="label">Model URL</div>
-            <div class="value">
-                <input type="text" id="property-model-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="model-section property url">
+            <label for="property-model-url">Model URL</label>
+            <input type="text" id="property-model-url">
+            <div class="update-url-version"></div>
         </div>
 
         <div class="model-section zone-section property">
@@ -1658,19 +1629,15 @@
                 </select>
             </div>
         </div>
-        <div class="model-section zone-section property">
-            <div class="label">Compound Shape URL</div>
-            <div class="value">
-                <input type="text" id="property-compound-shape-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="model-section zone-section property url">
+            <label for="property-compound-shape-url">Compound shape URL</label>
+            <input type="text" id="property-compound-shape-url">
+            <div class="update-url-version"></div>
         </div>
-        <div class="model-section property">
-            <div class="label">Animation URL</div>
-            <div class="value">
-                <input type="text" id="property-model-animation-url" class="url">
-                <div class="update-url-version"></div>
-            </div>
+        <div class="model-section property url">
+            <label for="property-model-animation-url">Animation URL</label>
+            <input type="text" id="property-model-animation-url">
+            <div class="update-url-version"></div>
         </div>
         <div class="model-section property checkbox">
             <input type="checkbox" id="property-model-animation-playing">

From 04dd27d07f015987c0cb2abbe2423801898f78c5 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sun, 27 Mar 2016 11:31:30 +1300
Subject: [PATCH 29/64] Restyle entity property textarea fields

---
 examples/html/edit-style.css        | 17 +++++-
 examples/html/entityProperties.html | 80 ++++++++++++++++++-----------
 2 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 8a43190496..818fd72b00 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -178,7 +178,9 @@ input[type="text"], input[type="number"], textarea {
 }
 
 textarea {
-    min-height: 28px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    min-height: 64px;
     width: 100%;
     resize: vertical;
 }
@@ -425,7 +427,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label {
+.text label, .url label, .number label, .textarea label {
     float: left;
     margin-bottom: 4px;
 }
@@ -484,6 +486,17 @@ input[type=checkbox]:checked + label:hover {
     border-radius: 8px;
 }
 
+/* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
+have correct background color with and without scrollbars. */
+::-webkit-resizer, textarea {
+    background-size: 10px 10px;
+    background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
+}
+textarea[scrolling="true"]::-webkit-resizer {
+    background-size: 10px 10px;
+    background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
+}
+
 
 #entity-list-header {
     margin-bottom: 24px;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 8028948e47..0c68683825 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -287,6 +287,10 @@
             );
         };
 
+        function setTextareaScrolling(element) {
+            var isScrolling = element.scrollHeight > element.offsetHeight;
+            element.setAttribute("scrolling", isScrolling ? "true" : "false");
+        }
 
         function loaded() { 
             openEventBridge(function() {
@@ -492,22 +496,6 @@
                     urlUpdater.addEventListener("click", refreshEvent);
                 }
 
-                var toggleCollapsedEvent = function (event) {
-                    var element = event.target;
-                    if (element.nodeName !== "DIV") {
-                        element = element.parentNode;
-                    }
-                    var collapsed = element.getAttribute("collapsed") !== "true";
-                    element.setAttribute("collapsed", collapsed ? "true" : "false");
-                    element.getElementsByTagName("span")[0].textContent = collapsed ? "L" : "M";
-                };
-
-                var elCollapsible = document.getElementsByClassName("section-header");
-                for (var i = 0, length = elCollapsible.length; i < length; i++) {
-                    var element = elCollapsible[i];
-                    element.addEventListener("click", toggleCollapsedEvent, true);
-                };
-
                 if (window.EventBridge !== undefined) {
                     var properties;
                     EventBridge.scriptEventReceived.connect(function(data) {
@@ -645,6 +633,7 @@
                                 elScriptURL.value = properties.script;
                                 elScriptTimestamp.value = properties.scriptTimestamp;
                                 elUserData.value = properties.userData;
+                                setTextareaScrolling(elUserData);
     
                                 elHyperlinkHref.value = properties.href;
                                 elHyperlinkDescription.value = properties.description;
@@ -686,7 +675,9 @@
                                     elModelAnimationLoop.checked = properties.animation.loop;
                                     elModelAnimationHold.checked = properties.animation.hold;
                                     elModelTextures.value = properties.textures;
+                                    setTextareaScrolling(elModelTextures);
                                     elModelOriginalTextures.value = properties.originalTextures;
+                                    setTextAreaScrolling(elModelOriginalTextures);
                                 } else if (properties.type == "Web") {
                                     for (var i = 0; i < elWebSections.length; i++) {
                                         elWebSections[i].style.display = 'block';
@@ -1106,6 +1097,39 @@
                     };
                 }
             });
+
+            var elCollapsible = document.getElementsByClassName("section-header");
+
+            var toggleCollapsedEvent = function (event) {
+                var element = event.target;
+                if (element.nodeName !== "DIV") {
+                    element = element.parentNode;
+                }
+                var isCollapsed = element.getAttribute("collapsed") !== "true";
+                element.setAttribute("collapsed", isCollapsed ? "true" : "false");
+                element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M";
+            };
+
+            for (var i = 0, length = elCollapsible.length; i < length; i++) {
+                var element = elCollapsible[i];
+                element.addEventListener("click", toggleCollapsedEvent, true);
+            };
+
+            var elTextareas = document.getElementsByTagName("TEXTAREA");
+
+            var textareaOnChangeEvent = function (event) {
+                setTextareaScrolling(event.target);
+            }
+
+            for (var i = 0, length = elTextareas.length; i < length; i++) {
+                var element = elTextareas[i];
+                setTextareaScrolling(element);
+                element.addEventListener("input", textareaOnChangeEvent, false);
+                element.addEventListener("change", textareaOnChangeEvent, false);
+                /* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize
+                event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
+                element.addEventListener("mouseup", textareaOnChangeEvent, false);
+            };
         }
     </script>
 </head>
@@ -1140,11 +1164,9 @@
             <label for="property-visible">Visible</label>
         </div>
 
-        <div class="property">
-            <div class="label">User Data</div>
-            <div class="value">
-                <textarea id="property-user-data"></textarea>
-            </div>
+        <div class="property textarea">
+            <label for="property-user-data">User data</label>
+            <textarea id="property-user-data"></textarea>
         </div>
 
 
@@ -1675,17 +1697,13 @@
             <input type="checkbox" id="property-model-animation-hold">
             <label for="property-model-animation-hold">Animation hold</label>
         </div>
-        <div class="model-section property">
-            <div class="label">Textures</div>
-            <div class="value">
-                <textarea id="property-model-textures" value=''></textarea>
-            </div>
+        <div class="model-section property textarea">
+            <label for="property-model-textures">Textures</label>
+            <textarea id="property-model-textures"></textarea>
         </div>
-        <div class="model-section property">
-            <div class="label">Original Textures</div>
-            <div class="value">
-                <textarea id="property-model-original-textures" readonly value=''></textarea>
-            </div>
+        <div class="model-section property textarea">
+            <label for="property-model-original-textures">Original textures</label>
+            <textarea id="property-model-original-textures" readonly></textarea>
         </div>
 
 

From 653ddd2ae0ac4427dbd14ddfa5ed32ca6141f1f4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sun, 27 Mar 2016 15:13:51 +1300
Subject: [PATCH 30/64] Style URL refresh buttons

---
 examples/html/edit-style.css        | 21 ++++++----
 examples/html/entityProperties.html | 60 +++++++++++++++++------------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 818fd72b00..db53544128 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -211,13 +211,15 @@ input:disabled, textarea:disabled {
     color: rgb(160, 160, 160);
 }
 
-input[type="text"], input[type="number"] {
+input[type="text"] {
     height: 28px;
-    width: 120px;
+    width: 100%;
 }
 
 input[type="number"] {
     position: relative;
+    height: 28px;
+    width: 120px;
 }
 
 input:focus {
@@ -229,10 +231,6 @@ input::selection {
     background-color: #00b4ef;
 }
 
-input[type="text"] {
-    width: 100%;
-}
-
 /* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -276,7 +274,7 @@ input[type=button].glyph {
     font-family: HiFi-Glyphs;
     font-size: 20px;
     text-transform: none;
-    min-width: 34px;
+    min-width: 32px;
     padding: 0;
 }
 
@@ -436,6 +434,15 @@ input[type=checkbox]:checked + label:hover {
     float: left;
 }
 
+div.refresh {
+    box-sizing: border-box;
+    padding-right: 44px;
+}
+div.refresh input[type="button"] {
+    float: right;
+    margin-right: -44px;
+}
+
 .color span, .color label {
     display: inline-block;
     float: left;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 0c68683825..797b111a81 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -469,8 +469,8 @@
                 var PARAM_REGEXP = /(?:\?)(\S+)/; // Check if this has any parameters.
                 var TIMESTAMP_REGEXP = /(&?HFTime=\d+)/;
 
-                var refreshEvent = function(event){
-                    var urlElement = event.target.parentElement.getElementsByClassName("url")[0];
+                var refreshEvent = function (event) {
+                    var urlElement = event.target.parentElement.getElementsByTagName("INPUT")[0];
                     var content = urlElement.value;
                     var date = new Date();
                     var timeStamp = date.getTime();
@@ -493,7 +493,7 @@
 
                 for(var index = 0; index < urlUpdaters.length; index++){
                     var urlUpdater = urlUpdaters[index];
-                    urlUpdater.addEventListener("click", refreshEvent);
+                    urlUpdater.addEventListener("click", refreshEvent, true);
                 }
 
                 if (window.EventBridge !== undefined) {
@@ -873,7 +873,10 @@
     
                 elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
                 elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
+                /*
+                FIXME: See FIXME for property-script-url.
                 elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp'));
+                */
                 elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
     
                 var colorChangeFunction = createEmitColorPropertyUpdateFunction(
@@ -1051,12 +1054,15 @@
                         percentage: parseInt(elRescaleDimensionsPct.value),
                     }));
                 });
+                /*
+                FIXME: See FIXME for property-script-url.
                 elReloadScriptButton.addEventListener("click", function() {
                     EventBridge.emitWebEvent(JSON.stringify({
                         type: "action",
                         action: "reloadScript"
                     }));
                 });
+                */
                 elPreviewCameraButton.addEventListener("click", function() {
                     EventBridge.emitWebEvent(JSON.stringify({
                         type: "action",
@@ -1250,10 +1256,10 @@
             </div>
         </div>
         
-        <div class="zone-section keyLight-section property url">
+        <div class="zone-section keyLight-section property url refresh">
             <label for="property-zone-key-ambient-url">Ambient URL</label>
             <input type="text" id="property-zone-key-ambient-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1328,10 +1334,10 @@
             </div>
         </div>
 
-        <div class="zone-section skybox-section property url">
+        <div class="zone-section skybox-section property url refresh">
             <label for="property-zone-skybox-url">Skybox URL</label>
             <input type="text" id="property-zone-skybox-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1339,10 +1345,10 @@
             <label>Web</label><span>M</span>
         </div>
 
-        <div class="web-section property url">
+        <div class="web-section property url refresh">
             <label for="property-web-source-url">Source URL</label>
             <input type="text" id="property-web-source-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1432,22 +1438,22 @@
               </select>
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-x-texture-url">X-axis texture URL</label>
                 <input type="text" id="property-x-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-y-texture-url">Y-axis texture URL</label>
                 <input type="text" id="property-y-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-z-texture-url">Z-axis texture URL</label>
                 <input type="text" id="property-z-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
         </div>
 
@@ -1608,10 +1614,10 @@
             </div>
         </div>
 
-        <div class="behavior-section property url">
+        <div class="behavior-section property url refresh">
             <label for="property-collision-sound-url">Collision sound URL</label>
             <input type="text" id="property-collision-sound-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
         <div class="behavior-section property">
@@ -1621,12 +1627,16 @@
             </div>
         </div>
 
-        <div class="behavior-section property url">
+        <div class="behavior-section property url refresh">
+            <!--
+            FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated 
+            code should be removed.
             <input type="hidden" id="property-script-timestamp" class="value">
             <input type="button" id="reload-script-button" value="Reload">
+            -->
             <label for="property-script-url">Script URL</label>
             <input type="text" id="property-script-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1634,10 +1644,10 @@
             <label>Model</label><span>M</span>
         </div>
 
-        <div class="model-section property url">
+        <div class="model-section property url refresh">
             <label for="property-model-url">Model URL</label>
             <input type="text" id="property-model-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
         <div class="model-section zone-section property">
@@ -1651,15 +1661,15 @@
                 </select>
             </div>
         </div>
-        <div class="model-section zone-section property url">
+        <div class="model-section zone-section property url refresh">
             <label for="property-compound-shape-url">Compound shape URL</label>
             <input type="text" id="property-compound-shape-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
-        <div class="model-section property url">
+        <div class="model-section property url refresh">
             <label for="property-model-animation-url">Animation URL</label>
             <input type="text" id="property-model-animation-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
         <div class="model-section property checkbox">
             <input type="checkbox" id="property-model-animation-playing">

From ee6f55b81bb94c304e5d871b0f8a0c41d8a1e38f Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sun, 27 Mar 2016 17:21:02 +1300
Subject: [PATCH 31/64] Style color pickers

---
 examples/html/edit-style.css        |  40 +++++++---
 examples/html/entityProperties.html | 118 +++++++++++++++-------------
 2 files changed, 89 insertions(+), 69 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index db53544128..ee8a14c17a 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -443,22 +443,36 @@ div.refresh input[type="button"] {
     margin-right: -44px;
 }
 
-.color span, .color label {
-    display: inline-block;
-    float: left;
-}
-.color label {
-    padding: 4px 12px 0 0;
-    margin-left: 12px;
-}
-
 
 .color-picker {
-    width: 50px;
-    height: 10px;
-    margin: 5px;
-    border: 1px solid white;
+    box-sizing: border-box;
+    width: 36px;
+    height: 36px;
+    border: 4px solid #afafaf;
+    border-radius: 4px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
+    background-position: bottom right;
+    background-repeat: no-repeat;
 }
+.color-picker[active="true"] {
+    border-color: #000;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
+}
+
+.color-picker {
+    float: left;
+    margin-bottom: 22px;
+}
+
+.color label {
+    float: left;
+    margin-top: 10px;
+    margin-left: 12px;
+}
+.color label + * {
+    clear: both;
+}
+
 
 .prop-x {
     color:red !important;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 797b111a81..11b1008497 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -888,7 +888,10 @@
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onShow: function (colpick) {
+                        $('#property-color').attr('active', 'true');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
@@ -906,7 +909,10 @@
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onShow: function (colpick) {
+                        $('#property-light-color').attr('active', 'true');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
@@ -946,10 +952,14 @@
                 $('#property-text-text-color').colpick({
                     colorScheme:'dark',
                     layout:'hex',
-                    color:'000000',
+                    color: '000000',
+                    onShow: function (colpick) {
+                        $('#property-text-text-color').attr('active', 'true');
+                    },
                     onSubmit: function(hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
+                        $(el).attr('active', 'false');
                         emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
                     }
                 });
@@ -963,7 +973,10 @@
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onShow: function (colpick) {
+                        $('#property-text-background-color').attr('active', 'true');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
@@ -975,7 +988,10 @@
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onShow: function (colpick) {
+                        $('#property-zone-key-light-color').attr('active', 'true');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
@@ -1010,7 +1026,10 @@
                     colorScheme:'dark',
                     layout:'hex',
                     color:'000000',
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onShow: function (colpick) {
+                        $('#property-zone-skybox-color').attr('active', 'true');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
@@ -1189,24 +1208,19 @@
                 <input class="coord" type="number" id="property-text-line-height" min="0" step="0.005">
             </div>
         </div>
-        <div class="text-section property">
-            <div class="label">Text Color</div>
-            <div class="value">
-                <div class='color-picker' id="property-text-text-color"></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-text-text-color-red"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-text-text-color-green"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-text-text-color-blue"></div>
-            </div>
+        <div class="text-section property color">
+            <div class="color-picker" id="property-text-text-color"></div>
+            <label>Text color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-text-text-color-red"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-text-text-color-green"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-text-text-color-blue"></div>
         </div>
-        <div class="text-section property">
-            <div class="label">Background Color</div>
-            <div class="value">
-                <div class='color-picker' id="property-text-background-color"></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-text-background-color-red"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-text-background-color-green"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-text-background-color-blue"></div>
-
-            </div>
+        <div class="text-section property color">
+            <div class="color-picker" id="property-text-background-color"></div>
+            <label>Background color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-text-background-color-red"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-text-background-color-green"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-text-background-color-blue"></div>
         </div>
         
 
@@ -1221,17 +1235,15 @@
 
 
         <div class="sub-section-header zone-section keyLight-section">
-            <label>KeyLight</label>
+            <label>Key Light</label>
         </div>
 
-        <div class="zone-section keyLight-section property">
-            <div class="label">Light Color</div>
-            <div class="value">
-                <div class='color-picker' id="property-zone-key-light-color"></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-zone-key-light-color-red" min="0" max="255" step="1"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-zone-key-light-color-green" min="0" max="255" step="1"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-zone-key-light-color-blue" min="0" max="255" step="1"></div>
-            </div>
+        <div class="zone-section keyLight-section property color">
+            <div class="color-picker" id="property-zone-key-light-color"></div>
+            <label>Key light color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-zone-key-light-color-red" min="0" max="255" step="1"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-zone-key-light-color-green" min="0" max="255" step="1"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-zone-key-light-color-blue" min="0" max="255" step="1"></div>
         </div>
 
         <div class="zone-section keyLight-section property">
@@ -1324,14 +1336,12 @@
             <label>Skybox</label>
         </div>
 
-        <div class="zone-section skybox-section property">
-            <div class="label">Skybox Color</div>
-            <div class="value">
-                <div class='color-picker' id="property-zone-skybox-color"></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-zone-skybox-color-red"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-zone-skybox-color-green"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-zone-skybox-color-blue"></div>
-            </div>
+        <div class="zone-section skybox-section property color">
+            <div class="color-picker" id="property-zone-skybox-color"></div>
+            <label>Skybox color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-zone-skybox-color-red"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-zone-skybox-color-green"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-zone-skybox-color-blue"></div>
         </div>
 
         <div class="zone-section skybox-section property url refresh">
@@ -1537,14 +1547,12 @@
             </div>
         </div>
 
-        <div id="color-section" class="physical-section property">
-            <div class="label">Color</div>
-            <div class="value">
-                <div id="property-color" class='color-picker'></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-color-red"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-color-green"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-color-blue"></div>
-            </div>
+        <div id="color-section" class="physical-section property color">
+            <div id="property-color" class="color-picker"></div>
+            <label>Entity color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-color-red"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-color-green"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-color-blue"></div>
         </div>
 
 
@@ -1721,14 +1729,12 @@
             <label>Light</label><span>M</span>
         </div>
         
-        <div class="light-section property">
-            <div class="label">Color</div>
-            <div class="value">
-                <div class='color-picker' id="property-light-color"></div>
-                <div class="input-area">R <input class="coord" type="number" id="property-light-color-red"></div>
-                <div class="input-area">G <input class="coord" type="number" id="property-light-color-green"></div>
-                <div class="input-area">B <input class="coord" type="number" id="property-light-color-blue"></div>
-            </div>
+        <div class="light-section property color">
+            <div class="color-picker" id="property-light-color"></div>
+            <label>Light color</label>
+            <div class="input-area">R <input class="coord" type="number" id="property-light-color-red"></div>
+            <div class="input-area">G <input class="coord" type="number" id="property-light-color-green"></div>
+            <div class="input-area">B <input class="coord" type="number" id="property-light-color-blue"></div>
         </div>
         <div class="light-section property">
             <div class="label">Intensity</div>

From b9ec5f39d9cd435527ff9224c05fc1ff14f0b433 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sun, 27 Mar 2016 22:12:10 +1300
Subject: [PATCH 32/64] Style color RGB fields

---
 examples/html/edit-style.css                  | 66 +++++++++++++++----
 examples/html/entityProperties.html           | 60 ++++++++++-------
 .../qml/styles-uit/HifiConstants.qml          |  1 +
 3 files changed, 92 insertions(+), 35 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index ee8a14c17a..ae70e206fa 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -167,6 +167,11 @@ td.url {
 }
 
 
+input:focus {
+    outline: 1px solid #00b4ef;
+    outline-offset: -1px;
+}
+
 input[type="text"], input[type="number"], textarea {
     margin: 0;
     padding: 0 12px;
@@ -193,11 +198,6 @@ input.search {
     border-radius: 14px;
 }
 
-input.coord {
-    width: 7em;
-    display: block;
-}
-
 input.no-spin::-webkit-outer-spin-button,
 input.no-spin::-webkit-inner-spin-button {
     display: none;
@@ -443,9 +443,10 @@ div.refresh input[type="button"] {
     margin-right: -44px;
 }
 
-
 .color-picker {
     box-sizing: border-box;
+    float: left;
+    margin-bottom: 12px;
     width: 36px;
     height: 36px;
     border: 4px solid #afafaf;
@@ -459,11 +460,6 @@ div.refresh input[type="button"] {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
 }
 
-.color-picker {
-    float: left;
-    margin-bottom: 22px;
-}
-
 .color label {
     float: left;
     margin-top: 10px;
@@ -473,6 +469,54 @@ div.refresh input[type="button"] {
     clear: both;
 }
 
+.tuple {
+    width: 100%;
+    text-align: center;
+}
+.tuple div {
+    display: inline-block;
+    position: relative;
+}
+.tuple div:nth-child(1) {
+    float: left;
+}
+.tuple div:nth-child(2) {
+}
+.tuple div:nth-child(3) {
+    float: right;
+}
+
+.color .tuple input {
+    padding-left: 65px;
+}
+
+.tuple label {
+    display: inline !important;
+    float: none !important;
+    position: absolute;
+    left: -6px;
+    top: -4px;
+}
+.tuple .red + label {
+    color: #e2334d;
+}
+.tuple .green + label {
+    color: #1ac567;
+}
+.tuple .blue + label {
+    color: #1080b8;
+}
+
+.tuple .red:focus {
+    outline-color: #e2334d;
+}
+.tuple .green:focus {
+    outline-color: #1ac567;
+}
+.tuple .blue:focus {
+    outline-color: #1080b8;
+}
+
 
 .prop-x {
     color:red !important;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 11b1008497..507dc08d88 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1211,16 +1211,20 @@
         <div class="text-section property color">
             <div class="color-picker" id="property-text-text-color"></div>
             <label>Text color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-text-text-color-red"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-text-text-color-green"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-text-text-color-blue"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-text-text-color-red"><label for="property-text-text-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-text-text-color-green"><label for="property-text-text-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
+            </div>
         </div>
         <div class="text-section property color">
             <div class="color-picker" id="property-text-background-color"></div>
             <label>Background color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-text-background-color-red"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-text-background-color-green"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-text-background-color-blue"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-text-background-color-red"><label for="roperty-text-background-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-text-background-color-green"><label for="property-text-background-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-text-background-color-blue"><label for="property-text-background-color-blue">Blue:</label></div>
+            </div>
         </div>
         
 
@@ -1234,26 +1238,28 @@
         </div>
 
 
-        <div class="sub-section-header zone-section keyLight-section">
+        <div class="sub-section-header zone-section keylight-section">
             <label>Key Light</label>
         </div>
 
-        <div class="zone-section keyLight-section property color">
+        <div class="zone-section keylight-section property color">
             <div class="color-picker" id="property-zone-key-light-color"></div>
             <label>Key light color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-zone-key-light-color-red" min="0" max="255" step="1"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-zone-key-light-color-green" min="0" max="255" step="1"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-zone-key-light-color-blue" min="0" max="255" step="1"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-zone-key-light-color-red" min="0" max="255" step="1"><label for="property-zone-key-light-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-zone-key-light-color-green" min="0" max="255" step="1"><label for="property-zone-key-light-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
+            </div>
         </div>
 
-        <div class="zone-section keyLight-section property">
+        <div class="zone-section keylight-section property">
             <div class="label">Light Intensity</div>
             <div class="value">
                 <input class="coord" type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
             </div>
         </div>
         
-        <div class="zone-section keyLight-section property">
+        <div class="zone-section keylight-section property">
             <div class="label">Light Direction</div>
             <div class="value">
                 <div class="input-area">Altitude <input class="coord" type="number" id="property-zone-key-light-direction-x"></div>
@@ -1261,14 +1267,14 @@
             </div>
         </div>
 
-        <div class="zone-section keyLight-section property">
+        <div class="zone-section keylight-section property">
             <div class="label">Ambient Intensity</div>
             <div class="value">
                 <input class="coord" type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
             </div>
         </div>
         
-        <div class="zone-section keyLight-section property url refresh">
+        <div class="zone-section keylight-section property url refresh">
             <label for="property-zone-key-ambient-url">Ambient URL</label>
             <input type="text" id="property-zone-key-ambient-url">
             <input type="button" class="update-url-version glyph" value="F" />
@@ -1339,9 +1345,11 @@
         <div class="zone-section skybox-section property color">
             <div class="color-picker" id="property-zone-skybox-color"></div>
             <label>Skybox color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-zone-skybox-color-red"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-zone-skybox-color-green"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-zone-skybox-color-blue"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-zone-skybox-color-red"><label for="property-zone-skybox-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-zone-skybox-color-green"><label for="property-zone-skybox-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-zone-skybox-color-blue"><label for="property-zone-skybox-color-blue">Blue:</label></div>
+            </div>
         </div>
 
         <div class="zone-section skybox-section property url refresh">
@@ -1550,9 +1558,11 @@
         <div id="color-section" class="physical-section property color">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-color-red"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-color-green"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-color-blue"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-color-red"><label for="property-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-color-green"><label for="property-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-color-blue"><label for="property-color-blue">Blue:</label></div>
+            </div>
         </div>
 
 
@@ -1732,9 +1742,11 @@
         <div class="light-section property color">
             <div class="color-picker" id="property-light-color"></div>
             <label>Light color</label>
-            <div class="input-area">R <input class="coord" type="number" id="property-light-color-red"></div>
-            <div class="input-area">G <input class="coord" type="number" id="property-light-color-green"></div>
-            <div class="input-area">B <input class="coord" type="number" id="property-light-color-blue"></div>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-light-color-red"><label for="property-light-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-light-color-green"><label for="property-light-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
+            </div>
         </div>
         <div class="light-section property">
             <div class="label">Intensity</div>
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index b2bd3981d6..45267e05ad 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -58,6 +58,7 @@ Item {
         readonly property color lightGrayText: "#afafaf"
         readonly property color faintGray: "#e3e3e3"
         readonly property color primaryHighlight: "#00b4ef"
+        readonly property color blueHighlight: "#00b4ef"
         readonly property color blueAccent: "#1080b8"
         readonly property color redHighlight: "#e2334d"
         readonly property color redAccent: "#b70a37"

From ef4d67008b1942d45598d0a974444d1cb70cd153 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Mon, 28 Mar 2016 11:45:50 +1300
Subject: [PATCH 33/64] Style x, y, z fields

---
 examples/html/edit-style.css                  |  51 +++---
 examples/html/entityProperties.html           | 148 +++++++++---------
 .../qml/styles-uit/HifiConstants.qml          |   1 +
 3 files changed, 99 insertions(+), 101 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index ae70e206fa..1d34036307 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -425,7 +425,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label, .textarea label {
+.text label, .url label, .number label, .textarea label, .xyz label {
     float: left;
     margin-bottom: 4px;
 }
@@ -433,6 +433,9 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
     float: left;
 }
+.xyz > div {
+    clear: both;
+}
 
 div.refresh {
     box-sizing: border-box;
@@ -486,54 +489,48 @@ div.refresh input[type="button"] {
     float: right;
 }
 
+.xyz .tuple input {
+    padding-left: 30px;
+}
 .color .tuple input {
     padding-left: 65px;
 }
-
-.tuple label {
+.tuple div label {
     display: inline !important;
     float: none !important;
     position: absolute;
-    left: -6px;
-    top: -4px;
+    margin-top: 8px;
+    margin-left: 6px;
+    left: 0;
+    font-family: FiraSans-SemiBold;
+    font-size: 12px;
 }
-.tuple .red + label {
+.tuple .x + label, .tuple .red + label {
     color: #e2334d;
 }
-.tuple .green + label {
+.tuple .y + label, .tuple .green + label {
     color: #1ac567;
 }
-.tuple .blue + label {
+.tuple .z + label, .tuple .blue + label {
     color: #1080b8;
 }
 
-.tuple .red:focus {
+.tuple .x:focus, .tuple .red:focus {
     outline-color: #e2334d;
 }
-.tuple .green:focus {
+.tuple .y:focus, .tuple .green:focus {
     outline-color: #1ac567;
 }
-.tuple .blue:focus {
+.tuple .z:focus.tuple, .blue:focus {
     outline-color: #1080b8;
 }
 
-
-.prop-x {
-    color:red !important;
-    background: rgba(255, 0, 0, .9);
-    height:2px !important;
+.xyz .buttons input {
+    margin-top: 12px;
 }
-
-.prop-y {
-    color:green !important;
-    background: rgba(0, 255, 0, .9);
-    height:2px !important;
-}
-
-.prop-z{
-    color:blue !important;
-    background: rgba(0, 0, 255, .9);
-    height:2px !important;
+.xyz .buttons span {
+    word-wrap: nowrap;
+    white-space: nowrap;
 }
 
 
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 507dc08d88..526f01897b 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1388,17 +1388,17 @@
             <label>Spatial Properties</label><span>M</span>
         </div>
 
-        <div class="spatial-section property">
-            <div class="label">Position</div>
-            <div class="value">
-                <div class="input-area ">X<input class="coord" type='number' id="property-pos-x"><div class="prop-x"></div></div>
-                <div class="input-area ">Y<input class="coord" type='number' id="property-pos-y"><div class="prop-y"></div></div>
-                <div class="input-area ">Z<input class="coord" type='number' id="property-pos-z"><div class="prop-z"></div></div>
-                <div>
-                    <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 class="spatial-section property xyz">
+            <label>Position</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>
 
@@ -1411,68 +1411,68 @@
             <input type="text" id="property-parent-joint-index">
         </div>
 
-        <div class="spatial-section property">
-            <div class="label">Registration</div>
-            <div class="value">
-                <div class="input-area">X <input class="coord" type="number" id="property-reg-x"><div class="prop-x"></div></div>
-                <div class="input-area">Y <input class="coord" type="number" id="property-reg-y"><div class="prop-y"></div></div>
-                <div class="input-area">Z <input class="coord" type="number" id="property-reg-z"><div class="prop-z"></div></div>
+        <div class="spatial-section property xyz">
+            <label>Registration</label>
+            <div class="tuple">
+                <div><input type="number" class="x" id="property-reg-x"><label for="property-reg-x">X:</label></div>
+                <div><input type="number" class="y" id="property-reg-y"><label for="property-reg-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-reg-z"><label for="property-reg-z">Z:</label></div>
             </div>
         </div>
 
-        <div class="spatial-section property">
-            <div class="label">Dimensions</div>
-            <div class="value">
-                <div class="input-area">X <input class="coord" type="number" id="property-dim-x" step="0.1"><div class="prop-x"></div></div>
-                <div class="input-area">Y <input class="coord" type="number" id="property-dim-y" step="0.1"><div class="prop-y"></div></div>
-                <div class="input-area">Z <input class="coord" type="number" id="property-dim-z" step="0.1"><div class="prop-z"></div></div>
-                <div>
-                    <input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
-                </div>
-                <div class="input-area">
-                    <input class="" type="number" id="dimension-rescale-pct" value=100>%
-                </div>
+        <div class="spatial-section property xyz">
+            <label>Dimensions</label>
+            <div class="tuple">
+                <div><input type="number" class="x" id="property-dim-x" step="0.1"><label for="property-dim-x">X:</label></div>
+                <div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
+            </div>
+            <div class="buttons">
+                <input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
                 <span>
+                    <input class="" type="number" id="dimension-rescale-pct" value=100>&nbsp;%
                     <input type="button" id="dimension-rescale-button" value="Rescale">
                 </span>
             </div>
         </div>
 
-        <div class="spatial-section poly-vox-section property">
-            <div class="label">Voxel Volume Size</div>
-            <div class="value">
-              <div class="input-area">X <br> <input class="coord" type="number" id="property-voxel-volume-size-x"></div>
-              <div class="input-area">Y <br><input class="coord" type="number" id="property-voxel-volume-size-y"></div>
-              <div class="input-area">Z <br><input class="coord" type="number" id="property-voxel-volume-size-z"></div>
+        <div class="spatial-section poly-vox-section property XYZ">
+            <label>Voxel volume size</label>
+            <div class="tuple">
+                <div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
+                <div><input type="number" class="y" id="property-voxel-volume-size-y"><label for="property-voxel-volume-size-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-voxel-volume-size-z"><label for="property-voxel-volume-size-z">Z:</label></div>
             </div>
+        </div>
 
+        <div class="property">
             <div class="label">Surface Extractor</div>
             <div class="value">
-              <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
-                <option value='0'>marching cubes</option>
-                <option value='1'>cubic</option>
-                <option value='2'>edged cubic</option>
-                <option value='3'>edged marching cubes</option>
-              </select>
+                <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
+                    <option value='0'>marching cubes</option>
+                    <option value='1'>cubic</option>
+                    <option value='2'>edged cubic</option>
+                    <option value='3'>edged marching cubes</option>
+                </select>
             </div>
+        </div>
 
-            <div class="property url refresh">
-                <label for="property-x-texture-url">X-axis texture URL</label>
-                <input type="text" id="property-x-texture-url">
-                <input type="button" class="update-url-version glyph" value="F" />
-            </div>
+        <div class="property url refresh">
+            <label for="property-x-texture-url">X-axis texture URL</label>
+            <input type="text" id="property-x-texture-url">
+            <input type="button" class="update-url-version glyph" value="F" />
+        </div>
 
-            <div class="property url refresh">
-                <label for="property-y-texture-url">Y-axis texture URL</label>
-                <input type="text" id="property-y-texture-url">
-                <input type="button" class="update-url-version glyph" value="F" />
-            </div>
+        <div class="property url refresh">
+            <label for="property-y-texture-url">Y-axis texture URL</label>
+            <input type="text" id="property-y-texture-url">
+            <input type="button" class="update-url-version glyph" value="F" />
+        </div>
 
-            <div class="property url refresh">
-                <label for="property-z-texture-url">Z-axis texture URL</label>
-                <input type="text" id="property-z-texture-url">
-                <input type="button" class="update-url-version glyph" value="F" />
-            </div>
+        <div class="property url refresh">
+            <label for="property-z-texture-url">Z-axis texture URL</label>
+            <input type="text" id="property-z-texture-url">
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
         <div class="spatial-section property">
@@ -1489,12 +1489,12 @@
             <label>Physical Properites</label><span>M</span>
         </div>
 
-        <div class="physical-section property">
-            <div class="label">Linear Velocity</div>
-            <div class="value">
-                <div class="input-area">X <input class="coord" type="number" id="property-lvel-x"><div class="prop-x"></div></div>
-                <div class="input-area">Y <input class="coord" type="number" id="property-lvel-y"><div class="prop-y"></div></div>
-                <div class="input-area">Z <input class="coord" type="number" id="property-lvel-z"><div class="prop-z"></div></div>
+        <div class="physical-section property xyz">
+            <label>Linear velocity</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>
+                <div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
             </div>
         </div>
         <div class="physical-section property">
@@ -1530,21 +1530,21 @@
             </div>
         </div>
 
-        <div class="physical-section property">
-            <div class="label">Gravity</div>
-            <div class="value">
-                <div class="input-area">X <input class="coord" type="number" id="property-grav-x"><div class="prop-x"></div></div>
-                <div class="input-area">Y <input class="coord" type="number" id="property-grav-y"><div class="prop-y"></div></div>
-                <div class="input-area">Z <input class="coord" type="number" id="property-grav-z"><div class="prop-z"></div></div>
+        <div class="physical-section property xyz">
+            <label>Gravity</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>
+                <div><input type="number" class="z" id="property-grav-z"><label for="property-grav-z">Z:</label></div>
             </div>
         </div>
 
-        <div class="physical-section property">
-            <div class="label">Acceleration</div>
-            <div class="value">
-                <div class="input-area">X <input class="coord" type="number" id="property-lacc-x"><div class="prop-x"></div></div>
-                <div class="input-area">Y <input class="coord" type="number" id="property-lacc-y"><div class="prop-y"></div></div>
-                <div class="input-area">Z <input class="coord" type="number" id="property-lacc-z"><div class="prop-z"></div></div>
+        <div class="physical-section property xyz">
+            <label>Acceleration</label>
+            <div class="tuple">
+                <div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
+                <div><input type="number" class="y" id="property-lacc-y"><label for="property-lacc-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
             </div>
         </div>
 
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index 45267e05ad..9c879a2fd6 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -155,6 +155,7 @@ Item {
         readonly property real sectionName: dimensions.largeScreen ? 12 : 10
         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 tableText: dimensions.largeScreen ? 15 : 12
         readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9
         readonly property real iconButton: dimensions.largeScreen ? 13 : 9

From 2ebde880afdaa04af53c1739cb9ce531a16ac417 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Mon, 28 Mar 2016 12:10:32 +1300
Subject: [PATCH 34/64] Style pitch, yaw, roll fields

---
 examples/html/edit-style.css        | 27 ++++++++++++----------
 examples/html/entityProperties.html | 36 ++++++++++++++---------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 1d34036307..0658cfd144 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -425,7 +425,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label, .textarea label, .xyz label {
+.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label {
     float: left;
     margin-bottom: 4px;
 }
@@ -433,7 +433,7 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
     float: left;
 }
-.xyz > div {
+.xyz > div, .pyr > div {
     clear: both;
 }
 
@@ -463,12 +463,12 @@ div.refresh input[type="button"] {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
 }
 
-.color label {
+.rgb label {
     float: left;
     margin-top: 10px;
     margin-left: 12px;
 }
-.color label + * {
+.rgb label + * {
     clear: both;
 }
 
@@ -489,11 +489,14 @@ div.refresh input[type="button"] {
     float: right;
 }
 
+.rgb .tuple input {
+    padding-left: 65px;
+}
 .xyz .tuple input {
     padding-left: 30px;
 }
-.color .tuple input {
-    padding-left: 65px;
+.pyr .tuple input {
+    padding-left: 45px;
 }
 .tuple div label {
     display: inline !important;
@@ -505,23 +508,23 @@ div.refresh input[type="button"] {
     font-family: FiraSans-SemiBold;
     font-size: 12px;
 }
-.tuple .x + label, .tuple .red + label {
+.tuple .red + label, .tuple .x + label, .tuple .pitch + label {
     color: #e2334d;
 }
-.tuple .y + label, .tuple .green + label {
+.tuple .green + label, .tuple .y + label, .tuple .yaw + label {
     color: #1ac567;
 }
-.tuple .z + label, .tuple .blue + label {
+.tuple .blue + label, .tuple .z + label, .tuple .roll + label {
     color: #1080b8;
 }
 
-.tuple .x:focus, .tuple .red:focus {
+.tuple .red:focus, .tuple .x:focus, .tuple .pitch:focus {
     outline-color: #e2334d;
 }
-.tuple .y:focus, .tuple .green:focus {
+.tuple .green:focus, .tuple .y:focus, .tuple .yaw:focus {
     outline-color: #1ac567;
 }
-.tuple .z:focus.tuple, .blue:focus {
+tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     outline-color: #1080b8;
 }
 
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 526f01897b..b49eb40c0b 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1208,7 +1208,7 @@
                 <input class="coord" type="number" id="property-text-line-height" min="0" step="0.005">
             </div>
         </div>
-        <div class="text-section property color">
+        <div class="text-section property rgb">
             <div class="color-picker" id="property-text-text-color"></div>
             <label>Text color</label>
             <div class="tuple">
@@ -1217,7 +1217,7 @@
                 <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
             </div>
         </div>
-        <div class="text-section property color">
+        <div class="text-section property rgb">
             <div class="color-picker" id="property-text-background-color"></div>
             <label>Background color</label>
             <div class="tuple">
@@ -1242,7 +1242,7 @@
             <label>Key Light</label>
         </div>
 
-        <div class="zone-section keylight-section property color">
+        <div class="zone-section keylight-section property rgb">
             <div class="color-picker" id="property-zone-key-light-color"></div>
             <label>Key light color</label>
             <div class="tuple">
@@ -1342,7 +1342,7 @@
             <label>Skybox</label>
         </div>
 
-        <div class="zone-section skybox-section property color">
+        <div class="zone-section skybox-section property rgb">
             <div class="color-picker" id="property-zone-skybox-color"></div>
             <label>Skybox color</label>
             <div class="tuple">
@@ -1475,12 +1475,12 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="spatial-section property">
-            <div class="label">Rotation</div>
-            <div class="value">
-                <div class="input-area">Pitch <input class="coord" type="number" id="property-rot-x" step="0.1"></div>
-                <div class="input-area">Yaw <input class="coord" type="number" id="property-rot-y" step="0.1"></div>
-                <div class="input-area">Roll <input class="coord" type="number" id="property-rot-z"step="0.1"></div>
+        <div class="spatial-section property pyr">
+            <label>Rotation</label>
+            <div class="tuple">
+                <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
+                <div><input type="number" class="yaw" id="property-rot-y" step="0.1"><label for="property-rot-y">Yaw:</label></div>
+                <div><input type="number" class="roll" id="property-rot-z" step="0.1"><label for="property-rot-z">Roll:</label></div>
             </div>
         </div>
 
@@ -1503,12 +1503,12 @@
                 <input class="coord" type="number" id="property-ldamping">
             </div>
         </div>
-        <div class="physical-section property">
-            <div class="label">Angular Velocity</div>
-            <div class="value">
-                <div class="input-area">Pitch <input class="coord" type="number" id="property-avel-x"></div>
-                <div class="input-area">Yaw <input class="coord" type="number" id="property-avel-y"></div>
-                <div class="input-area">Roll <input class="coord" type="number" id="property-avel-z"></div>
+        <div class="physical-section property pyr">
+            <label>Angular Velocity</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>
+                <div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
             </div>
         </div>
         <div class="physical-section property">
@@ -1555,7 +1555,7 @@
             </div>
         </div>
 
-        <div id="color-section" class="physical-section property color">
+        <div id="color-section" class="physical-section property rgb">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
             <div class="tuple">
@@ -1739,7 +1739,7 @@
             <label>Light</label><span>M</span>
         </div>
         
-        <div class="light-section property color">
+        <div class="light-section property rgb">
             <div class="color-picker" id="property-light-color"></div>
             <label>Light color</label>
             <div class="tuple">

From 11ae07a91df1eeb9bfdedf9ae972dd91f52abd4b Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Mon, 28 Mar 2016 12:43:40 +1300
Subject: [PATCH 35/64] Style header type and ID values

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 0658cfd144..98daa6ab4a 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -329,7 +329,6 @@ input[type=checkbox]:checked + label:hover {
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
-
     cursor: text;
 }
 
@@ -414,6 +413,20 @@ input[type=checkbox]:checked + label:hover {
     font-size: 14px;
 }
 
+.value {
+    display: block;
+    min-height: 18px;
+}
+.value label {
+    display: inline-block;
+    vertical-align: top;
+    width: 48px;
+}
+.value span {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+}
+
 .checkbox + .checkbox {
     margin-top: 0;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index b49eb40c0b..7b342c0541 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1161,18 +1161,13 @@
 
 <body onload='loaded();'>
     <div id="properties-list">
-        <div id="type" class="property">
-            <div class="label">
-                <label>Type: </label><span id="property-type"></span>
-            </div>
+        <div id="type" class="property value">
+            <label>Type:</label>
+            <span id="property-type"></span>
         </div>
-        <div id="id" class="property">
-            <span class="label" style="float: left; margin-right: 6px">
-                <label>ID: </label>
-            </span>
-            <div class="value">
-                <span id="property-id" class="selectable"></span>
-            </div>
+        <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>

From 9c953aa491819898023193af434f5f1b79116223 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Mon, 28 Mar 2016 14:49:24 +1300
Subject: [PATCH 36/64] Style miscellaneous number fields

---
 examples/html/edit-style.css        |   9 +-
 examples/html/entityProperties.html | 193 +++++++++++-----------------
 2 files changed, 84 insertions(+), 118 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 98daa6ab4a..10f20153d7 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -434,7 +434,7 @@ input[type=checkbox]:checked + label:hover {
 .property .number {
     float: left;
 }
-.number + .number {
+.property .number + .number {
     margin-left: 12px;
 }
 
@@ -442,7 +442,12 @@ input[type=checkbox]:checked + label:hover {
     float: left;
     margin-bottom: 4px;
 }
-.number span {
+
+.number > input {
+    clear: both;
+    float: left;
+}
+.number > span {
     clear: both;
     float: left;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 7b342c0541..58e08b1efc 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1197,11 +1197,9 @@
             <label for="property-text-text">Text content</label>
             <input type="text" id="property-text-text">
         </div>
-        <div class="text-section property">
-            <div class="label">Line Height</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-text-line-height" min="0" step="0.005">
-            </div>
+        <div class="text-section property number">
+            <label>Line height</label>
+            <input type="number" id="property-text-line-height" min="0" step="0.005">
         </div>
         <div class="text-section property rgb">
             <div class="color-picker" id="property-text-text-color"></div>
@@ -1247,26 +1245,25 @@
             </div>
         </div>
 
-        <div class="zone-section keylight-section property">
-            <div class="label">Light Intensity</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
-            </div>
+        <div class="zone-section keylight-section property number">
+            <label>Light intensity</label>
+            <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
         </div>
         
         <div class="zone-section keylight-section property">
-            <div class="label">Light Direction</div>
-            <div class="value">
-                <div class="input-area">Altitude <input class="coord" type="number" id="property-zone-key-light-direction-x"></div>
-                <div class="input-area">Azimuth <input class="coord" type="number" id="property-zone-key-light-direction-y"></div>
+            <div class="number">
+                <label>Light altitude</label>
+                <input type="number" id="property-zone-key-light-direction-x">
+            </div>
+            <div class="number">
+                <label>Light azimuth</label>
+                <input type="number" id="property-zone-key-light-direction-y">
             </div>
         </div>
 
-        <div class="zone-section keylight-section property">
-            <div class="label">Ambient Intensity</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
-            </div>
+        <div class="zone-section keylight-section property number">
+            <label>Ambient intensity</label>
+            <input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
         </div>
         
         <div class="zone-section keylight-section property url refresh">
@@ -1280,23 +1277,19 @@
             <label>Stage</label>
         </div>
 
-        <div class="zone-section stage-section property">
-            <div class="label">Stage Latitude</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
-            </div>
+        <div class="zone-section stage-section property number">
+            <label>Stage latitude</label>
+            <input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
         </div>
-        <div class="zone-section stage-section property">
-            <div class="label">Stage Longitude</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
-            </div>
+
+        <div class="zone-section stage-section property number">
+            <label>Stage longitude</label>
+            <input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
         </div>
-        <div class="zone-section stage-section property">
-            <div class="label">Stage Altitude</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-stage-altitude" step="1">
-            </div>
+
+        <div class="zone-section stage-section property number">
+            <label>Stage altitude</label>
+            <input type="number" id="property-zone-stage-altitude" step="1">
         </div>
 
         <div class="zone-section stage-section property checkbox">
@@ -1304,17 +1297,13 @@
             <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
         </div>
 
-        <div class="zone-section stage-section property">
-            <div class="label">Stage Day</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-stage-day" min="0" max="365" step="1">
-            </div>
+        <div class="zone-section stage-section property number">
+            <label>Stage day of year</label>
+            <input type="number" id="property-zone-stage-day" min="0" max="365" step="1">
         </div>
-        <div class="zone-section stage-section property">
-            <div class="label">Stage Hour</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
-            </div>
+        <div class="zone-section stage-section property number">
+            <label>Stage hour</label>
+            <input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
         </div>
 
 
@@ -1492,37 +1481,29 @@
                 <div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
             </div>
         </div>
-        <div class="physical-section property">
-            <div class="label">Linear Damping</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-ldamping">
-            </div>
+        <div class="physical-section property number">
+            <label>Linear damping</label>
+            <input type="number" id="property-ldamping">
         </div>
         <div class="physical-section property pyr">
-            <label>Angular Velocity</label>
+            <label>Angular velocity</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>
                 <div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
             </div>
         </div>
-        <div class="physical-section property">
-            <div class="label">Angular Damping</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-adamping">
-            </div>
+        <div class="physical-section property number">
+            <label>Angular damping</label>
+            <input type="number" id="property-adamping">
         </div>
-        <div class="physical-section property">
-            <div class="label">Restitution</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-restitution">
-            </div>
+        <div class="physical-section property number">
+            <label>Restitution</label>
+            <input type="number" id="property-restitution">
         </div>
-        <div class="physical-section property">
-            <div class="label">Friction</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-friction">
-            </div>
+        <div class="physical-section property number">
+            <label>Friction</label>
+            <input type="number" id="property-friction">
         </div>
 
         <div class="physical-section property xyz">
@@ -1543,11 +1524,9 @@
             </div>
         </div>
 
-        <div class="physical-section property">
-            <div class="label">Density</div>
-            <div>
-                <input type="number" id="property-density">
-            </div>
+        <div class="physical-section property number">
+            <label>Density</label>
+            <input type="number" id="property-density">
         </div>
 
         <div id="color-section" class="physical-section property rgb">
@@ -1633,11 +1612,9 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="behavior-section property">
-            <div class="label">Lifetime</div>
-            <div class="value">
-                <input type="number" id="property-lifetime">
-            </div>
+        <div class="behavior-section property number">
+            <label>Lifetime</label>
+            <input type="number" id="property-lifetime">
         </div>
 
         <div class="behavior-section property url refresh">
@@ -1688,29 +1665,21 @@
             <input type="checkbox" id="property-model-animation-playing">
             <label for="property-model-animation-playing">Animation playing</label>
         </div>
-        <div class="model-section property">
-            <div class="label">Animation FPS</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-model-animation-fps">
-            </div>
+        <div class="model-section property number">
+            <label>Animation FPS</label>
+            <input type="number" id="property-model-animation-fps">
         </div>
-        <div class="model-section property">
-            <div class="label">Animation Frame</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-model-animation-frame">
-            </div>
+        <div class="model-section property number">
+            <label>Animation frame</label>
+            <input type="number" id="property-model-animation-frame">
         </div>
-        <div class="model-section property">
-            <div class="label">Animation First Frame</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-model-animation-first-frame">
-            </div>
+        <div class="model-section property number">
+            <label>Animation first frame</label>
+            <input type="number" id="property-model-animation-first-frame">
         </div>
-        <div class="model-section property">
-            <div class="label">Animation Last Frame</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-model-animation-last-frame">
-            </div>
+        <div class="model-section property number">
+            <label>Animation last frame</label>
+            <input type="number" id="property-model-animation-last-frame">
         </div>
         <div class="model-section property checkbox">
             <input type="checkbox" id="property-model-animation-loop">
@@ -1743,33 +1712,25 @@
                 <div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
             </div>
         </div>
-        <div class="light-section property">
-            <div class="label">Intensity</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-light-intensity" min="0" step="0.1">
-            </div>
+        <div class="light-section property number">
+            <label>Intensity</label>
+            <input type="number" id="property-light-intensity" min="0" step="0.1">
         </div>
-        <div class="light-section property">
-            <div class="label">Falloff Radius</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-light-falloff-radius" min="0" step="0.1">
-            </div>
+        <div class="light-section property number">
+            <label>Fall-off radius</label>
+            <input type="number" id="property-light-falloff-radius" min="0" step="0.1">
         </div>
         <div class="light-section property checkbox">
             <input type="checkbox" id="property-light-spot-light">
-            <label for="property-light-spot-light">Spot light</label>
+            <label for="property-light-spot-light">Spotlight</label>
         </div>
-        <div class="light-section property">
-            <div class="label">Spot Light Exponent</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-light-exponent" step="0.01">
-            </div>
+        <div class="light-section property number">
+            <label>Spotlight exponent</label>
+            <input type="number" id="property-light-exponent" step="0.01">
         </div>
-        <div class="light-section property">
-            <div class="label">Spot Light Cutoff (degrees)</div>
-            <div class="value">
-                <input class="coord" type="number" id="property-light-cutoff" step="0.01">
-            </div>
+        <div class="light-section property number">
+            <label>Spotlight cut-off</label>
+            <input type="number" id="property-light-cutoff" step="0.01">
         </div>
     </div>
 </body>

From a2d9f088ab2eaf687ea22edfc79e2b2d6f1e3fda Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 18:47:13 +1300
Subject: [PATCH 37/64] Typos

---
 examples/html/entityProperties.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 58e08b1efc..4837197984 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -361,7 +361,10 @@
 
                 var elLifetime = document.getElementById("property-lifetime");
                 var elScriptURL = document.getElementById("property-script-url");
+                /*
+                FIXME: See FIXME for property-script-url.
                 var elScriptTimestamp = document.getElementById("property-script-timestamp");
+                */
                 var elReloadScriptButton = document.getElementById("reload-script-button");
                 var elUserData = document.getElementById("property-user-data");
     
@@ -631,7 +634,10 @@
                                 elCollisionSoundURL.value = properties.collisionSoundURL;
                                 elLifetime.value = properties.lifetime;
                                 elScriptURL.value = properties.script;
+                                /*
+                                FIXME: See FIXME for property-script-url.
                                 elScriptTimestamp.value = properties.scriptTimestamp;
+                                */
                                 elUserData.value = properties.userData;
                                 setTextareaScrolling(elUserData);
     
@@ -677,7 +683,7 @@
                                     elModelTextures.value = properties.textures;
                                     setTextareaScrolling(elModelTextures);
                                     elModelOriginalTextures.value = properties.originalTextures;
-                                    setTextAreaScrolling(elModelOriginalTextures);
+                                    setTextareaScrolling(elModelOriginalTextures);
                                 } else if (properties.type == "Web") {
                                     for (var i = 0; i < elWebSections.length; i++) {
                                         elWebSections[i].style.display = 'block';

From ab37534e0dba7d403e1ba6fa02a2e4e7a0cd6969 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 20:14:08 +1300
Subject: [PATCH 38/64] Restyle dropdowns

---
 examples/html/edit-style.css        |  87 +++++++++++++++-
 examples/html/entityProperties.html | 154 +++++++++++++++++++++++-----
 2 files changed, 211 insertions(+), 30 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 10f20153d7..72a48cfa49 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -349,7 +349,6 @@ input[type=checkbox]:checked + label:hover {
 
 
 .section-header, .sub-section-header {
-    position: relative;
     margin: 22px -12px 0 -12px;
     padding: 14px 12px 0 12px;
     font-size: 12px;
@@ -359,6 +358,7 @@ input[type=checkbox]:checked + label:hover {
 }
 
 .section-header {
+    position: relative;
     background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
 }
 
@@ -438,7 +438,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label {
+.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label {
     float: left;
     margin-bottom: 4px;
 }
@@ -455,6 +455,89 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
 }
 
+.dropdown {
+    position: relative;
+}
+
+.dropdown select {
+    clear: both;
+}
+
+.dropdown dl {
+    clear: both;
+}
+.dropdown dl {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    width: 172px;
+    height: 28px;
+    padding: 0 28px 0 12px;
+
+    color: #afafaf;
+    background: linear-gradient(#7d7d7d 20%, #686a68 100%);
+
+    position: relative;
+}
+.dropdown dl[dropped="true"] {
+    color: #404040;
+    background: linear-gradient(#afafaf, #afafaf);
+}
+
+.dropdown dt {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #121212;
+    width: 100%;
+}
+.dropdown dt:hover {
+    color: #404040;
+}
+.dropdown dt span:first-child {
+    display: inline-block;
+    position: relative;
+    top: 5px;
+}
+.dropdown dt span:last-child {
+    font-family: HiFi-Glyphs;
+    font-size: 42px;
+    float: right;
+    margin-right: -48px;
+    position: relative;
+    left: -12px;
+    top: -11px;
+}
+
+.dropdown dd {
+    position: absolute;
+    top: 28px;
+    left: 3px;
+    display: none;
+}
+.dropdown dl[dropped="true"] dd {
+    display: block;
+}
+
+.dropdown li {
+    list-style-type: none;
+    padding: 3px 0 1px 12px;
+    width: 200px;
+    height: auto;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #404040;
+    background-color: #afafaf
+}
+.dropdown li:hover {
+    background-color: #00b4ef;
+}
+
+/*dd {
+    min-width: 100px;
+    min-height: 100px;
+    border: 1x dotted red;
+}*/
+
+
 div.refresh {
     box-sizing: border-box;
     padding-right: 44px;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 4837197984..c5b388ece1 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -671,6 +671,7 @@
     
                                     elModelURL.value = properties.modelURL;
                                     elShapeType.value = properties.shapeType;
+                                    setDropdownText(elShapeType);
                                     elCompoundShapeURL.value = properties.compoundShapeURL;
                                     elModelAnimationURL.value = properties.animation.url;
                                     elModelAnimationPlaying.checked = properties.animation.running;
@@ -750,6 +751,7 @@
                                     elCompoundShapeURL.value = properties.compoundShapeURL;
     
                                     elZoneBackgroundMode.value = properties.backgroundMode;
+                                    setDropdownText(elZoneBackgroundMode);
     
                                     elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red  + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")";
                                     elZoneSkyboxColorRed.value = properties.skybox.color.red;
@@ -767,6 +769,7 @@
                                     elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
                                     elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
                                     elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle;
+                                    setDropdownText(elVoxelSurfaceStyle);
                                     elXTextureURL.value = properties.xTextureURL;
                                     elYTextureURL.value = properties.yTextureURL;
                                     elZTextureURL.value = properties.zTextureURL;
@@ -1129,6 +1132,7 @@
                 }
             });
 
+            // Collapsible sections
             var elCollapsible = document.getElementsByClassName("section-header");
 
             var toggleCollapsedEvent = function (event) {
@@ -1146,6 +1150,8 @@
                 element.addEventListener("click", toggleCollapsedEvent, true);
             };
 
+
+            // Textarea scollbars
             var elTextareas = document.getElementsByTagName("TEXTAREA");
 
             var textareaOnChangeEvent = function (event) {
@@ -1161,6 +1167,104 @@
                 event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
                 element.addEventListener("mouseup", textareaOnChangeEvent, false);
             };
+
+            // Dropdowns
+            // For each dropdown the following replacement is created in place of the oriringal dropdown...
+            // Structure created:
+            //  <dl dropped="true/false">
+            //      <dt name="?" id="?" value="?"><span>display text</span><span>carat</span></dt>
+            //      <dd>
+            //          <ul>
+            //              <li value="??>display text</li>
+            //              <li>...</li>
+            //          </ul>
+            //      </dd>
+            //  </dl>
+
+            function setDropdownText(dropdown) {
+                var lis = dropdown.parentNode.getElementsByTagName("li");
+                var text = "";
+                for (var i = 0; i < lis.length; i++) {
+                    if (lis[i].getAttribute("value") === dropdown.value) {
+                        text = lis[i].textContent;
+                    }
+                }
+                dropdown.firstChild.textContent = text;
+            }
+
+            function toggleDropdown(event) {
+                var element = event.target;
+                if (element.nodeName !== "DT") {
+                    element = element.parentNode;
+                }
+                element = element.parentNode;
+                var isDropped = element.getAttribute("dropped");
+                element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
+            }
+
+            function setDropdownValue(event) {
+                var dt = event.target.parentNode.parentNode.previousSibling;
+                dt.value = event.target.getAttribute("value");
+                dt.firstChild.textContent = event.target.textContent;
+
+                dt.parentNode.setAttribute("dropped", "false");
+
+                var evt = document.createEvent("HTMLEvents");
+                evt.initEvent("change", true, true);
+                dt.dispatchEvent(evt);
+            }
+
+            var elDropdowns = document.getElementsByTagName("select");
+            for (var i = 0; i < elDropdowns.length; i++) {
+                var options = elDropdowns[i].getElementsByTagName("option");
+                var selectedOption = 0;
+                for (var j = 0; j < options.length; j++) {
+                    if (options[i].getAttribute("selected") === "selected") {
+                        selectedOption = i;
+                    }
+                }
+                var div = elDropdowns[i].parentNode;
+
+                var dl = document.createElement("dl");
+                div.appendChild(dl);
+
+                var dt = document.createElement("dt");
+                dt.name = elDropdowns[i].name;
+                dt.id = elDropdowns[i].id;
+                dt.addEventListener("click", toggleDropdown, true);
+                dl.appendChild(dt);
+
+                var span = document.createElement("span");
+                span.setAttribute("value", options[selectedOption].value);
+                span.textContent = options[selectedOption].firstChild.textContent;
+                dt.appendChild(span);
+
+                var span = document.createElement("span");
+                span.textContent = "5";  // caratDn
+                dt.appendChild(span);
+
+                var dd = document.createElement("dd");
+                dl.appendChild(dd);
+
+                var ul = document.createElement("ul");
+                dd.appendChild(ul);
+
+                for (var j = 0; j < options.length; j++) {
+                    var li = document.createElement("li");
+                    li.setAttribute("value", options[j].value);
+                    li.textContent = options[j].firstChild.textContent;
+                    li.addEventListener("click", setDropdownValue);
+                    ul.appendChild(li);
+                }
+            }
+
+            elDropdowns = document.getElementsByTagName("select");
+            while (elDropdowns.length > 0) {
+                var el = elDropdowns[0];
+                el.parentNode.removeChild(el);
+                elDropdowns = document.getElementsByTagName("select");
+            }
+
         }
     </script>
 </head>
@@ -1317,14 +1421,12 @@
             <label>Background</label>
         </div>
 
-        <div class="zone-section background-section property">
-            <div class="label">Background Mode</div>
-            <div class="value">
-                <select name="SelectBackgroundMode" id="property-zone-background-mode">
-                    <option value='inherit'>Nothing</option>
-                    <option value='skybox'>Skybox</option>
-                </select> 
-            </div>
+        <div class="zone-section background-section property dropdown">
+            <label>Background mode</label>
+            <select name="SelectBackgroundMode" id="property-zone-background-mode">
+                <option value="inherit">Nothing</option>
+                <option value="skybox">Skybox</option>
+            </select>
         </div>
 
 
@@ -1435,16 +1537,14 @@
             </div>
         </div>
 
-        <div class="property">
-            <div class="label">Surface Extractor</div>
-            <div class="value">
-                <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
-                    <option value='0'>marching cubes</option>
-                    <option value='1'>cubic</option>
-                    <option value='2'>edged cubic</option>
-                    <option value='3'>edged marching cubes</option>
-                </select>
-            </div>
+        <div class="property dropdown">
+            <label>Surface extractor</label>
+            <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
+                <option value="0">Marching cubes</option>
+                <option value="1">Cubic</option>
+                <option value="2">Edged cubic</option>
+                <option value="3">Edged marching cubes</option>
+            </select>
         </div>
 
         <div class="property url refresh">
@@ -1646,16 +1746,14 @@
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="model-section zone-section property">
-            <div class="label">Collision Shape Type</div>
-            <div class="value">
-                <select name="SelectShapeType" id="property-shape-type">
-                    <option value='none'>none</option>
-                    <option value='box'>box</option>
-                    <option value='sphere'>sphere</option>
-                    <option value='compound'>compound</option>
-                </select>
-            </div>
+        <div class="model-section zone-section property dropdown">
+            <label>Collision shape type</label>
+            <select name="SelectShapeType" id="property-shape-type">
+                <option value="none">None</option>
+                <option value="box">Box</option>
+                <option value="sphere">Sphere</option>
+                <option value="compound">Compound</option>
+            </select>
         </div>
         <div class="model-section zone-section property url refresh">
             <label for="property-compound-shape-url">Compound shape URL</label>

From 252a48ed5b2edcdfdf8327148ab27fc77467ab3c Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 22:28:00 +1300
Subject: [PATCH 39/64] Miscellaneous fixes

---
 examples/html/edit-style.css        | 124 +++++++---------------------
 examples/html/entityProperties.html |  20 ++++-
 examples/html/gridControls.html     |   4 +-
 3 files changed, 52 insertions(+), 96 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 72a48cfa49..92100b6488 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -167,11 +167,6 @@ td.url {
 }
 
 
-input:focus {
-    outline: 1px solid #00b4ef;
-    outline-offset: -1px;
-}
-
 input[type="text"], input[type="number"], textarea {
     margin: 0;
     padding: 0 12px;
@@ -194,6 +189,17 @@ input::-webkit-input-placeholder {
     font-style: italic;
 }
 
+input:focus, textarea:focus {
+    color: #fff;
+    background-color: #000;
+    outline: 1px solid #00b4ef;
+    outline-offset: -1px;
+}
+
+input::selection {
+    background-color: #00b4ef;
+}
+
 input.search {
     border-radius: 14px;
 }
@@ -222,15 +228,6 @@ input[type="number"] {
     width: 120px;
 }
 
-input:focus {
-    color: #fff;
-    background-color: #000;
-}
-
-input::selection {
-    background-color: #00b4ef;
-}
-
 /* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -266,7 +263,7 @@ input[type=button] {
     border: none;
     color: #fff;
     background-color: #000;
-    background: linear-gradient(#343434, #000);
+    background: linear-gradient(#343434 20%, #000 100%);
     cursor: pointer;
 }
 
@@ -281,7 +278,7 @@ input[type=button].glyph {
 input[type=button].red {
     color: #fff;
     background-color: #94132e;
-    background: linear-gradient(#d42043, #94132e);
+    background: linear-gradient(#d42043 20%, #94132e 100%);
 }
 
 input[type=button]:hover {
@@ -302,7 +299,6 @@ input[type=button].red:active {
     background: linear-gradient(#94132e, #94132e);
 }
 
-
 input[type=checkbox] {
     display: none;
 }
@@ -374,7 +370,7 @@ input[type=checkbox]:checked + label:hover {
 }
 
 .sub-section-header {
-    margin-bottom: 6px;
+    margin-bottom: -10px;
 }
 
 .section-header span {
@@ -431,6 +427,10 @@ input[type=checkbox]:checked + label:hover {
     margin-top: 0;
 }
 
+.sub-props-checkbox-group {
+    margin-top: 18px;
+}
+
 .property .number {
     float: left;
 }
@@ -457,6 +457,7 @@ input[type=checkbox]:checked + label:hover {
 
 .dropdown {
     position: relative;
+    margin-bottom: -17px;
 }
 
 .dropdown select {
@@ -531,12 +532,6 @@ input[type=checkbox]:checked + label:hover {
     background-color: #00b4ef;
 }
 
-/*dd {
-    min-width: 100px;
-    min-height: 100px;
-    border: 1x dotted red;
-}*/
-
 
 div.refresh {
     box-sizing: border-box;
@@ -640,6 +635,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 
 ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
 }
  
 ::-webkit-scrollbar-track {
@@ -654,10 +650,14 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 
 /* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
 have correct background color with and without scrollbars. */
-::-webkit-resizer, textarea {
+textarea::-webkit-resizer {
     background-size: 10px 10px;
     background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
 }
+textarea:focus::-webkit-resizer {
+    background-size: 10px 10px;
+    background: #000000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVChThdC5DQQhDAXQvyRI5LQxFdABARWQElAPogYkiqEWQhLYGe8xxzJaS5a/8AuQHwDG2n+Lvee0hBDQWlO+hRvy3mNZFjDG5vCDOOeIMaL3/guPKISAWiu9n+AVSSlhraXdF86Qcw6tNdoTvEOlFOScd6iUOv3JGEMopYQx9jNvaawnoHnNr8Z4AuRLPOq2gPgnAAAAAElFTkSuQmCC) no-repeat bottom right;
+}
 textarea[scrolling="true"]::-webkit-resizer {
     background-size: 10px 10px;
     background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
@@ -778,76 +778,14 @@ textarea[scrolling="true"]::-webkit-resizer {
     margin-top: 0;
 }
 
-
-/*
-div.input-area {
-    display: inline-block;
-    font-size: 9pt;
-}
-
-#properties-list input[type=checkbox] {
-    vertical-align: bottom;
-}
-
-#properties-list input[type=button] {
-    cursor: pointer;
-    background-color: rgb(51, 102, 102);
-    border-color: #608e96;
-    border-radius: 3.75pt;
-    padding: 3.75pt 7.5pt;
-    border: 0;
-    color: rgb(204, 204, 204);
-}
-
-#properties-list input[type=button]:disabled {
-    background-color: rgb(41, 82, 82);
-    color: rgb(160, 160, 160);
-}
-
-#properties-list .property {
-    padding: 4pt;
-    border-bottom: 0.75pt solid rgb(63, 63, 63);
-    min-height: 12pt;
+#property-id::selection {
+    background-color: #00b4ef;
 }
 
 
-.sub-props-checkbox-group {
-    margin-left: 20px;
+.color-set label, .color-set span {
+    display: block;
 }
-
-#properties-list .label {
-    font-weight: bold;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    height: 1.2em;
+.color-set span {
+    padding-top: 2px;
 }
-
-#properties-list .label input[type=button] {
-    float: right;
-    padding: 0 5px 1px;
-}
-
-#properties-list .value > div{
-    padding: 3pt 0;
-}
-
-col#col-label {
-    width: 97.5pt;
-}
-
-input#property-name {
-    width: 100%;
-}
-
-div.outer {
-    position: relative;
-}
-div.inner {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    position: absolute;
-    width: 100%;
-}
-*/
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index c5b388ece1..19d9b92b65 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -900,6 +900,9 @@
                     onShow: function (colpick) {
                         $('#property-color').attr('active', 'true');
                     },
+                    onHide: function (colpick) {
+                        $('#property-color').attr('active', 'false');
+                    },
                     onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
@@ -921,6 +924,9 @@
                     onShow: function (colpick) {
                         $('#property-light-color').attr('active', 'true');
                     },
+                    onHide: function (colpick) {
+                        $('#property-light-color').attr('active', 'false');
+                    },
                     onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
@@ -965,7 +971,10 @@
                     onShow: function (colpick) {
                         $('#property-text-text-color').attr('active', 'true');
                     },
-                    onSubmit: function(hsb, hex, rgb, el) {
+                    onHide: function (colpick) {
+                        $('#property-text-text-color').attr('active', 'false');
+                    },
+                    onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
                         $(el).attr('active', 'false');
@@ -985,6 +994,9 @@
                     onShow: function (colpick) {
                         $('#property-text-background-color').attr('active', 'true');
                     },
+                    onHide: function (colpick) {
+                        $('#property-text-background-color').attr('active', 'false');
+                    },
                     onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
@@ -1000,6 +1012,9 @@
                     onShow: function (colpick) {
                         $('#property-zone-key-light-color').attr('active', 'true');
                     },
+                    onHide: function (colpick) {
+                        $('#property-zone-key-light-color').attr('active', 'false');
+                    },
                     onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
@@ -1038,6 +1053,9 @@
                     onShow: function (colpick) {
                         $('#property-zone-skybox-color').attr('active', 'true');
                     },
+                    onHide: function (colpick) {
+                        $('#property-zone-skybox-color').attr('active', 'false');
+                    },
                     onSubmit: function (hsb, hex, rgb, el) {
                         $(el).css('background-color', '#'+hex);
                         $(el).colpickHide();
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 7040379070..9563e85903 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -161,9 +161,9 @@
             </span>
         </div>
 
-       <div class="property color">
-            <span id="grid-colors"></span>
+        <div class="property color-set">
             <label>Grid line color</label>
+            <span id="grid-colors"></span>
         </div>
 
         <div class="property">

From 791d3b03105bbf55ba3f07930fdcbf083fa47854 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 23:24:34 +1300
Subject: [PATCH 40/64] Fix styling of disabled form

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 92100b6488..d379c183b3 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -213,8 +213,8 @@ input.no-spin::-webkit-inner-spin-button {
 }
 
 input:disabled, textarea:disabled {
-    background-color: rgb(63, 63, 63);
-    color: rgb(160, 160, 160);
+    background-color: #383838;
+    color: #afafaf;
 }
 
 input[type="text"] {
@@ -281,12 +281,12 @@ input[type=button].red {
     background: linear-gradient(#d42043 20%, #94132e 100%);
 }
 
-input[type=button]:hover {
+input[type=button]:enabled:hover {
     background: linear-gradient(#000, #000);
     border: none;
 }
 
-input[type=button].red:hover {
+input[type=button].red:enabled:hover {
     background: linear-gradient(#d42043, #d42043);
     border: none;
 }
@@ -298,6 +298,10 @@ input[type=button]:active {
 input[type=button].red:active {
     background: linear-gradient(#94132e, #94132e);
 }
+input[type=button]:disabled {
+    color: #252525;
+    background: linear-gradient(#575757 20%, #252525 100%);
+}
 
 input[type=checkbox] {
     display: none;
@@ -308,7 +312,7 @@ input[type=checkbox] + label {
     background-repeat: no-repeat;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVDhPY2xoaGD68+dPMSMjY9L////VgTQjAw4AlH8PxLOPHj1azWxjY1MBVNsBFBfBpwkEgNKcQGwtJyfHyATkF0KEiQdAzYlMQEIUyicFyDD9+/ePgRxMvsb///4zkIOZ/v0HmkAGHginYjGNGAzS+BpdkAj8mun/3//92DyPD//993cG88nTJ4+Zm5p/BSZeJYb/DEJADEzNOPF7hn8Mk69cvVIPAHN5pyfo70F5AAAAAElFTkSuQmCC);
 }
-input[type=checkbox] + label:hover {
+input[type=checkbox]:enabled + label:hover {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAClSURBVDhPY2hoaGD6//9/6b9//64D8T8gGycASr/7+/dv5/79+1kYgIxKqDjRAKiniRFIv2JgYBAFYlLAE0aQ66AckgDjjx8/yNP44cMH8jS+fPmSPI0PHz4kT+PNmzfJ03jp0iXyNJ46dYo8jYcPHyYnAbxm+vnzZz8wLhlIwd+/f5/BrKSkdExCQuLrnz9/lIBpUAiIQekXF34PTGmTT548WQ8AokXg+rhVtPYAAAAASUVORK5CYII=);
 }
 input[type=checkbox]:checked + label {
@@ -650,7 +654,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 
 /* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
 have correct background color with and without scrollbars. */
-textarea::-webkit-resizer {
+textarea:enabled::-webkit-resizer {
     background-size: 10px 10px;
     background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
 }
@@ -658,7 +662,7 @@ textarea:focus::-webkit-resizer {
     background-size: 10px 10px;
     background: #000000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVChThdC5DQQhDAXQvyRI5LQxFdABARWQElAPogYkiqEWQhLYGe8xxzJaS5a/8AuQHwDG2n+Lvee0hBDQWlO+hRvy3mNZFjDG5vCDOOeIMaL3/guPKISAWiu9n+AVSSlhraXdF86Qcw6tNdoTvEOlFOScd6iUOv3JGEMopYQx9jNvaawnoHnNr8Z4AuRLPOq2gPgnAAAAAElFTkSuQmCC) no-repeat bottom right;
 }
-textarea[scrolling="true"]::-webkit-resizer {
+textarea:enabled[scrolling="true"]::-webkit-resizer {
     background-size: 10px 10px;
     background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 19d9b92b65..31ec5b12c9 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -507,7 +507,7 @@
                             if (data.selections.length == 0) {
                                 elType.innerHTML = "<i>No Selection</i>";
                                 elID.innerHTML = "";
-                                disableChildren(document.getElementById("properties-list"), 'input');
+                                disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
                             } else if (data.selections.length > 1) {
                                 var selections = data.selections;
     
@@ -530,7 +530,7 @@
                                 }
                                 elType.innerHTML = typeStrs.join(", ");
     
-                                disableChildren(document.getElementById("properties-list"), 'input');
+                                disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
                             } else {
                                 var activeElement = document.activeElement;
     
@@ -551,10 +551,10 @@
                                 elLocked.checked = properties.locked;
     
                                 if (properties.locked) {
-                                    disableChildren(document.getElementById("properties-list"), 'input');
+                                    disableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
                                     elLocked.removeAttribute('disabled');
                                 } else {
-                                    enableChildren(document.getElementById("properties-list"), 'input');
+                                    enableChildren(document.getElementById("properties-list"), 'input, textarea, checkbox');
                                 }
 
     

From d07cc82512ff94b55f3ee4674c3c777a31e1a325 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Tue, 29 Mar 2016 23:39:02 +1300
Subject: [PATCH 41/64] Color some buttons

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index d379c183b3..88a5fbd6a7 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -280,24 +280,35 @@ input[type=button].red {
     background-color: #94132e;
     background: linear-gradient(#d42043 20%, #94132e 100%);
 }
+input[type=button].blue {
+    color: #fff;
+    background-color: #94132e;
+    background: linear-gradient(#00b4ef 20%, #1080b8 100%);
+}
 
 input[type=button]:enabled:hover {
     background: linear-gradient(#000, #000);
     border: none;
 }
-
 input[type=button].red:enabled:hover {
     background: linear-gradient(#d42043, #d42043);
     border: none;
 }
+input[type=button].blue:enabled:hover {
+    background: linear-gradient(#00b4ef, #00b4ef);
+    border: none;
+}
 
 input[type=button]:active {
     background: linear-gradient(#343434, #343434);
 }
-
 input[type=button].red:active {
     background: linear-gradient(#94132e, #94132e);
 }
+input[type=button].blue:active {
+    background: linear-gradient(#1080b8, #1080b8);
+}
+
 input[type=button]:disabled {
     color: #252525;
     background: linear-gradient(#575757 20%, #252525 100%);
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 31ec5b12c9..6367c91578 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1538,11 +1538,11 @@
                 <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
             </div>
             <div class="buttons">
-                <input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
                 <span>
-                    <input class="" type="number" id="dimension-rescale-pct" value=100>&nbsp;%
-                    <input type="button" id="dimension-rescale-button" value="Rescale">
+                    <input type="number" id="dimension-rescale-pct" value=100>&nbsp;%
+                    <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
                 </span>
+                <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
             </div>
         </div>
 

From 28d0fc677c5777f1d4d5c7b84014a1c0e395ea1f Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 12:19:26 +1300
Subject: [PATCH 42/64] Update UIT QML control

---
 interface/resources/qml/controls-uit/WebView.qml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/interface/resources/qml/controls-uit/WebView.qml b/interface/resources/qml/controls-uit/WebView.qml
index 2b31881a78..5ea4b22baf 100644
--- a/interface/resources/qml/controls-uit/WebView.qml
+++ b/interface/resources/qml/controls-uit/WebView.qml
@@ -68,5 +68,7 @@ WebEngineView {
             request.openIn(newWindow.webView)
     }
 
-    profile: desktop.browserProfile
+    // This breaks the webchannel used for passing messages.  Fixed in Qt 5.6
+    // See https://bugreports.qt.io/browse/QTBUG-49521
+    //profile: desktop.browserProfile
 }

From 1c5e414c15e8407fd1f46f781dc63e8f150e5452 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 16:10:32 +1300
Subject: [PATCH 43/64] Reinstate original property "-section" classifications

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

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 6367c91578..4478d05d04 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1318,7 +1318,7 @@
         </div>
 
 
-        <div id="text-section" class="section-header text-section">
+        <div class="section-header text-section">
             <label>Text</label><span>M</span>
         </div>
         <div class="text-section property text">
@@ -1494,11 +1494,11 @@
         </div>
 
 
-        <div class="section-header spatial-section">
+        <div class="section-header">
             <label>Spatial Properties</label><span>M</span>
         </div>
 
-        <div class="spatial-section property xyz">
+        <div class="property xyz">
             <label>Position</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-pos-x"><label for="property-pos-x">X:</label></div>
@@ -1512,16 +1512,16 @@
             </div>
         </div>
 
-        <div class="spatial-section property text">
+        <div class="property text">
             <label for="property-parent-id">Parent ID</label>
             <input type="text" id="property-parent-id">
         </div>
-        <div class="spatial-section property text">
+        <div class="property text">
             <label for="property-parent-joint-index">Parent joint index</label>
             <input type="text" id="property-parent-joint-index">
         </div>
 
-        <div class="spatial-section property xyz">
+        <div class="property xyz">
             <label>Registration</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-reg-x"><label for="property-reg-x">X:</label></div>
@@ -1530,7 +1530,7 @@
             </div>
         </div>
 
-        <div class="spatial-section property xyz">
+        <div class="property xyz">
             <label>Dimensions</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>
@@ -1546,7 +1546,7 @@
             </div>
         </div>
 
-        <div class="spatial-section poly-vox-section property XYZ">
+        <div class="poly-vox-section property XYZ">
             <label>Voxel volume size</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
@@ -1555,7 +1555,7 @@
             </div>
         </div>
 
-        <div class="property dropdown">
+        <div class="poly-vox-section property dropdown">
             <label>Surface extractor</label>
             <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
                 <option value="0">Marching cubes</option>
@@ -1565,25 +1565,25 @@
             </select>
         </div>
 
-        <div class="property url refresh">
+        <div class="poly-vox-section property url refresh">
             <label for="property-x-texture-url">X-axis texture URL</label>
             <input type="text" id="property-x-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="property url refresh">
+        <div class="poly-vox-section property url refresh">
             <label for="property-y-texture-url">Y-axis texture URL</label>
             <input type="text" id="property-y-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="property url refresh">
+        <div class="poly-vox-section property url refresh">
             <label for="property-z-texture-url">Z-axis texture URL</label>
             <input type="text" id="property-z-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="spatial-section property pyr">
+        <div class="property pyr">
             <label>Rotation</label>
             <div class="tuple">
                 <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
@@ -1593,11 +1593,11 @@
         </div>
 
 
-        <div class="section-header physical-section">
+        <div class="section-header">
             <label>Physical Properites</label><span>M</span>
         </div>
 
-        <div class="physical-section property xyz">
+        <div class="property xyz">
             <label>Linear velocity</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lvel-x"><label for="property-lvel-x">X:</label></div>
@@ -1605,11 +1605,11 @@
                 <div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
             </div>
         </div>
-        <div class="physical-section property number">
+        <div class="property number">
             <label>Linear damping</label>
             <input type="number" id="property-ldamping">
         </div>
-        <div class="physical-section property pyr">
+        <div class="property pyr">
             <label>Angular velocity</label>
             <div class="tuple">
                 <div><input type="number" class="pitch" id="property-avel-x"><label for="property-avel-x">Pitch:</label></div>
@@ -1617,20 +1617,20 @@
                 <div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
             </div>
         </div>
-        <div class="physical-section property number">
+        <div class="property number">
             <label>Angular damping</label>
             <input type="number" id="property-adamping">
         </div>
-        <div class="physical-section property number">
+        <div class="property number">
             <label>Restitution</label>
             <input type="number" id="property-restitution">
         </div>
-        <div class="physical-section property number">
+        <div class="property number">
             <label>Friction</label>
             <input type="number" id="property-friction">
         </div>
 
-        <div class="physical-section property xyz">
+        <div class="property xyz">
             <label>Gravity</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-grav-x"><label for="property-grav-x">X:</label></div>
@@ -1639,7 +1639,7 @@
             </div>
         </div>
 
-        <div class="physical-section property xyz">
+        <div class="property xyz">
             <label>Acceleration</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
@@ -1648,12 +1648,12 @@
             </div>
         </div>
 
-        <div class="physical-section property number">
+        <div class="property number">
             <label>Density</label>
             <input type="number" id="property-density">
         </div>
 
-        <div id="color-section" class="physical-section property rgb">
+        <div id="color-section" class="property rgb">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
             <div class="tuple">
@@ -1664,25 +1664,25 @@
         </div>
 
 
-        <div class="section-header behavior-section">
+        <div class="section-header">
             <label>Behavior</label><span>M</span>
         </div>
 
-        <div class="behavior-section property checkbox">
+        <div class="property checkbox">
             <input type="checkbox" id="property-collisionless">
             <label for="property-collisionless">Collisionless</label>
         </div>
 
-        <div class="behavior-section property checkbox">
+        <div class="property checkbox">
             <input type="checkbox" id="property-dynamic">
             <label for="property-dynamic">Dynamic</label>
         </div>
 
         
-        <div class="sub-section-header behavior-section">
+        <div class="sub-section-header">
             <span>Collides With</span>
         </div>
-        <div class="sub-props-checkbox-group behavior-section">
+        <div class="sub-props-checkbox-group">
             <div class="property checkbox">
                 <input type="checkbox" id="property-collide-static">
                 <label for="property-collide-static">Static entities</label>
@@ -1710,10 +1710,10 @@
         </div>
 
 
-        <div class = "sub-section-header behavior-section">
+        <div class = "sub-section-header">
             <span>Grabbing</span>
         </div>
-        <div class="sub-props-checkbox-group behavior-section">
+        <div class="sub-props-checkbox-group">
             <div class="property checkbox">
                 <input type="checkbox" id="property-grabbable">
                 <label for="property-grabbable">Grabbable</label>
@@ -1730,18 +1730,18 @@
             </div>
         </div>
 
-        <div class="behavior-section property url refresh">
+        <div class="property url refresh">
             <label for="property-collision-sound-url">Collision sound URL</label>
             <input type="text" id="property-collision-sound-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-        <div class="behavior-section property number">
+        <div class="property number">
             <label>Lifetime</label>
             <input type="number" id="property-lifetime">
         </div>
 
-        <div class="behavior-section property url refresh">
+        <div class="property url refresh">
             <!--
             FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated 
             code should be removed.
@@ -1754,7 +1754,7 @@
         </div>
 
 
-        <div class="section-header model-section">
+        <div class="section-header model-section zone-section">
             <label>Model</label><span>M</span>
         </div>
 

From fdf45e0134f99b1af837b359f346e5c846271b51 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 17:34:31 +1300
Subject: [PATCH 44/64] Use "-group" classification for section expand and
 collapse

---
 examples/html/edit-style.css        |  25 +--
 examples/html/entityProperties.html | 234 +++++++++++-----------------
 2 files changed, 108 insertions(+), 151 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 88a5fbd6a7..f4ec47f444 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -360,12 +360,15 @@ input[type=checkbox]:checked + label:hover {
 
 
 .section-header, .sub-section-header {
+    display: table;
+    width: 100%;
     margin: 22px -12px 0 -12px;
     padding: 14px 12px 0 12px;
     font-size: 12px;
     color: #afafaf;
     height: 28px;
     text-transform: uppercase;
+    outline: none;
 }
 
 .section-header {
@@ -397,16 +400,16 @@ input[type=checkbox]:checked + label:hover {
     right: 12px;
 }
 
-.text-section[collapsed="true"] ~ .text-section,
-.zone-section[collapsed="true"] ~ .zone-section,
-.web-section[collapsed="true"] ~ .web-section,
-.hyperlink-section[collapsed="true"] ~ .hyperlink-section,
-.spatial-section[collapsed="true"] ~ .spatial-section,
-.physical-section[collapsed="true"] ~ .physical-section,
-.behavior-section[collapsed="true"] ~ .behavior-section,
-.model-section[collapsed="true"] ~ .model-section,
-.light-section[collapsed="true"] ~ .light-section {
-    display: none;
+.text-group[collapsed="true"] ~ .text-group,
+.zone-group[collapsed="true"] ~ .zone-group,
+.web-group[collapsed="true"] ~ .web-group,
+.hyperlink-group[collapsed="true"] ~ .hyperlink-group,
+.spatial-group[collapsed="true"] ~ .spatial-group,
+.physical-group[collapsed="true"] ~ .physical-group,
+.behavior-group[collapsed="true"] ~ .behavior-group,
+.model-group[collapsed="true"] ~ .model-group,
+.light-group[collapsed="true"] ~ .light-group {
+    display: none !important;
 }
 
 
@@ -442,7 +445,7 @@ input[type=checkbox]:checked + label:hover {
     margin-top: 0;
 }
 
-.sub-props-checkbox-group {
+.checkbox-sub-props {
     margin-top: 18px;
 }
 
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 4478d05d04..73f0ac6b28 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -46,7 +46,7 @@
 
         function showElements(els, show) {
             for (var i = 0; i < els.length; i++) {
-                els[i].style.display = (show) ? 'block' : 'none';
+                els[i].style.display = (show) ? 'table' : 'none';
             }
         }
 
@@ -651,11 +651,11 @@
                                 }                                    
 
                                 for (var i = 0; i < elHyperlinkSections.length; i++) {
-                                    elHyperlinkSections[i].style.display = 'block';
+                                    elHyperlinkSections[i].style.display = 'table';
                                 }
 
                                 if (properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") {
-                                    elColorSection.style.display = 'block';
+                                    elColorSection.style.display = 'table';
                                     elColorRed.value = properties.color.red;
                                     elColorGreen.value = properties.color.green;
                                     elColorBlue.value = properties.color.blue;
@@ -666,7 +666,7 @@
     
                                 if (properties.type == "Model") {
                                     for (var i = 0; i < elModelSections.length; i++) {
-                                        elModelSections[i].style.display = 'block';
+                                        elModelSections[i].style.display = 'table';
                                     }
     
                                     elModelURL.value = properties.modelURL;
@@ -687,7 +687,7 @@
                                     setTextareaScrolling(elModelOriginalTextures);
                                 } else if (properties.type == "Web") {
                                     for (var i = 0; i < elWebSections.length; i++) {
-                                        elWebSections[i].style.display = 'block';
+                                        elWebSections[i].style.display = 'table';
                                     }
                                     for (var i = 0; i < elHyperlinkSections.length; i++) {
                                         elHyperlinkSections[i].style.display = 'none';
@@ -696,7 +696,7 @@
                                     elWebSourceURL.value = properties.sourceUrl;
                                 } else if (properties.type == "Text") {
                                     for (var i = 0; i < elTextSections.length; i++) {
-                                        elTextSections[i].style.display = 'block';
+                                        elTextSections[i].style.display = 'table';
                                     }
     
                                     elTextText.value = properties.text;
@@ -710,7 +710,7 @@
                                     elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
                                 } else if (properties.type == "Light") {
                                     for (var i = 0; i < elLightSections.length; i++) {
-                                        elLightSections[i].style.display = 'block';
+                                        elLightSections[i].style.display = 'table';
                                     }
     
                                     elLightSpotLight.checked = properties.isSpotlight;
@@ -726,7 +726,7 @@
                                     elLightCutoff.value = properties.cutoff.toFixed(2);
                                 } else if (properties.type == "Zone") {
                                     for (var i = 0; i < elZoneSections.length; i++) {
-                                        elZoneSections[i].style.display = 'block';
+                                        elZoneSections[i].style.display = 'table';
                                     }
     
                                     elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled;
@@ -762,7 +762,7 @@
                                     showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox');
                                 } else if (properties.type == "PolyVox") {
                                     for (var i = 0; i < elPolyVoxSections.length; i++) {
-                                        elPolyVoxSections[i].style.display = 'block';
+                                        elPolyVoxSections[i].style.display = 'table';
                                     }
     
                                     elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2);
@@ -1301,35 +1301,32 @@
             <label for="property-name">Name</label>
             <input type="text" id="property-name">
         </div>
-
         <div class="property checkbox">
             <input type="checkbox" id="property-locked">
             <label for="property-locked">Locked</label>
         </div>
-
         <div class="property checkbox">
             <input type="checkbox" id="property-visible">
             <label for="property-visible">Visible</label>
         </div>
-
         <div class="property textarea">
             <label for="property-user-data">User data</label>
             <textarea id="property-user-data"></textarea>
         </div>
 
 
-        <div class="section-header text-section">
+        <div class="section-header text-group text-section">
             <label>Text</label><span>M</span>
         </div>
-        <div class="text-section property text">
+        <div class="text-group text-section property text">
             <label for="property-text-text">Text content</label>
             <input type="text" id="property-text-text">
         </div>
-        <div class="text-section property number">
+        <div class="text-group text-section property number">
             <label>Line height</label>
             <input type="number" id="property-text-line-height" min="0" step="0.005">
         </div>
-        <div class="text-section property rgb">
+        <div class="text-group text-section property rgb">
             <div class="color-picker" id="property-text-text-color"></div>
             <label>Text color</label>
             <div class="tuple">
@@ -1338,7 +1335,7 @@
                 <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
             </div>
         </div>
-        <div class="text-section property rgb">
+        <div class="text-group text-section property rgb">
             <div class="color-picker" id="property-text-background-color"></div>
             <label>Background color</label>
             <div class="tuple">
@@ -1349,21 +1346,18 @@
         </div>
         
 
-        <div class="section-header zone-section">
+        <div class="section-header zone-group zone-section">
             <label>Zone</label><span>M</span>
         </div>
-
-        <div class="zone-section property checkbox">
+        <div class="zone-group zone-section property checkbox">
             <input type="checkbox" id="property-zone-stage-sun-model-enabled">
             <label for="property-zone-stage-sun-model-enabled">Enable stage sun model</label>
         </div>
 
-
-        <div class="sub-section-header zone-section keylight-section">
+        <div class="sub-section-header zone-group zone-section keylight-section">
             <label>Key Light</label>
         </div>
-
-        <div class="zone-section keylight-section property rgb">
+        <div class="zone-section keylight-section zone-group property rgb">
             <div class="color-picker" id="property-zone-key-light-color"></div>
             <label>Key light color</label>
             <div class="tuple">
@@ -1372,13 +1366,11 @@
                 <div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
             </div>
         </div>
-
-        <div class="zone-section keylight-section property number">
+        <div class="zone-section keylight-section zone-group property number">
             <label>Light intensity</label>
             <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
         </div>
-        
-        <div class="zone-section keylight-section property">
+        <div class="zone-group zone-section keylight-section property">
             <div class="number">
                 <label>Light altitude</label>
                 <input type="number" id="property-zone-key-light-direction-x">
@@ -1388,58 +1380,48 @@
                 <input type="number" id="property-zone-key-light-direction-y">
             </div>
         </div>
-
-        <div class="zone-section keylight-section property number">
+        <div class="zone-group zone-section keylight-section property number">
             <label>Ambient intensity</label>
             <input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
         </div>
-        
-        <div class="zone-section keylight-section property url refresh">
+        <div class="zone-group zone-section keylight-section property url refresh">
             <label for="property-zone-key-ambient-url">Ambient URL</label>
             <input type="text" id="property-zone-key-ambient-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
-
-        <div class="sub-section-header zone-section stage-section">
+        <div class="sub-section-header zone-group zone-section stage-section">
             <label>Stage</label>
         </div>
-
-        <div class="zone-section stage-section property number">
+        <div class="zone-group zone-section stage-section property number">
             <label>Stage latitude</label>
             <input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
         </div>
-
-        <div class="zone-section stage-section property number">
+        <div class="zone-group zone-section stage-section property number">
             <label>Stage longitude</label>
             <input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
         </div>
-
-        <div class="zone-section stage-section property number">
+        <div class="zone-group zone-section stage-section property number">
             <label>Stage altitude</label>
             <input type="number" id="property-zone-stage-altitude" step="1">
         </div>
-
-        <div class="zone-section stage-section property checkbox">
+        <div class="zone-group zone-section stage-section property checkbox">
             <input type="checkbox" id="property-zone-stage-automatic-hour-day">
             <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
         </div>
-
-        <div class="zone-section stage-section property number">
+        <div class="zone-group zone-section stage-section property number">
             <label>Stage day of year</label>
             <input type="number" id="property-zone-stage-day" min="0" max="365" step="1">
         </div>
-        <div class="zone-section stage-section property number">
+        <div class="zone-group zone-section stage-section property number">
             <label>Stage hour</label>
             <input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
         </div>
 
-
-        <div class="sub-section-header zone-section background-section">
+        <div class="sub-section-header zone-group zone-section background-section">
             <label>Background</label>
         </div>
-
-        <div class="zone-section background-section property dropdown">
+        <div class="zone-section zone-group background-section property dropdown">
             <label>Background mode</label>
             <select name="SelectBackgroundMode" id="property-zone-background-mode">
                 <option value="inherit">Nothing</option>
@@ -1447,12 +1429,10 @@
             </select>
         </div>
 
-
-        <div class="sub-section-header zone-section skybox-section">
+        <div class="sub-section-header zone-group zone-section skybox-section">
             <label>Skybox</label>
         </div>
-
-        <div class="zone-section skybox-section property rgb">
+        <div class="zone-group zone-section skybox-section property rgb">
             <div class="color-picker" id="property-zone-skybox-color"></div>
             <label>Skybox color</label>
             <div class="tuple">
@@ -1461,44 +1441,40 @@
                 <div><input type="number" class="blue" id="property-zone-skybox-color-blue"><label for="property-zone-skybox-color-blue">Blue:</label></div>
             </div>
         </div>
-
-        <div class="zone-section skybox-section property url refresh">
+        <div class="zone-group zone-section skybox-section property url refresh">
             <label for="property-zone-skybox-url">Skybox URL</label>
             <input type="text" id="property-zone-skybox-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
-        <div class="section-header web-section">
+        <div class="section-header web-group web-section">
             <label>Web</label><span>M</span>
         </div>
-
-        <div class="web-section property url refresh">
+        <div class="web-group web-section property url refresh">
             <label for="property-web-source-url">Source URL</label>
             <input type="text" id="property-web-source-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
-        <div class="section-header hyperlink-section">
+        <div class="section-header hyperlink-group hyperlink-section">
             <label>Hyperlink</label><span>M</span>
         </div>
-
-        <div class="hyperlink-section property url">
+        <div class="hyperlink-group hyperlink-section property url">
             <label for="property-hyperlink-href">Href - hifi://address</label>
             <input type="text" id="property-hyperlink-href">
         </div>
-        <div class="hyperlink-section property text">
+        <div class="hyperlink-group hyperlink-section property text">
             <label for="property-hyperlink-description">Description</label>
             <input type="text" id="property-hyperlink-description">
         </div>
 
 
-        <div class="section-header">
+        <div class="section-header spatial-group">
             <label>Spatial Properties</label><span>M</span>
         </div>
-
-        <div class="property xyz">
+        <div class="spatial-group property xyz">
             <label>Position</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-pos-x"><label for="property-pos-x">X:</label></div>
@@ -1511,17 +1487,15 @@
                 <input type="button" id="preview-camera-button" value="Preview Camera">
             </div>
         </div>
-
-        <div class="property text">
+        <div class="spatial-group property text">
             <label for="property-parent-id">Parent ID</label>
             <input type="text" id="property-parent-id">
         </div>
-        <div class="property text">
+        <div class="spatial-group property text">
             <label for="property-parent-joint-index">Parent joint index</label>
             <input type="text" id="property-parent-joint-index">
         </div>
-
-        <div class="property xyz">
+        <div class="spatial-group property xyz">
             <label>Registration</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-reg-x"><label for="property-reg-x">X:</label></div>
@@ -1529,8 +1503,7 @@
                 <div><input type="number" class="z" id="property-reg-z"><label for="property-reg-z">Z:</label></div>
             </div>
         </div>
-
-        <div class="property xyz">
+        <div class="spatial-group property xyz">
             <label>Dimensions</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>
@@ -1545,8 +1518,7 @@
                 <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
             </div>
         </div>
-
-        <div class="poly-vox-section property XYZ">
+        <div class="spatial-group poly-vox-section property XYZ">
             <label>Voxel volume size</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
@@ -1554,8 +1526,7 @@
                 <div><input type="number" class="z" id="property-voxel-volume-size-z"><label for="property-voxel-volume-size-z">Z:</label></div>
             </div>
         </div>
-
-        <div class="poly-vox-section property dropdown">
+        <div class="spatial-group poly-vox-section property dropdown">
             <label>Surface extractor</label>
             <select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
                 <option value="0">Marching cubes</option>
@@ -1564,26 +1535,22 @@
                 <option value="3">Edged marching cubes</option>
             </select>
         </div>
-
-        <div class="poly-vox-section property url refresh">
+        <div class="spatial-group poly-vox-section property url refresh">
             <label for="property-x-texture-url">X-axis texture URL</label>
             <input type="text" id="property-x-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-
-        <div class="poly-vox-section property url refresh">
+        <div class="spatial-group poly-vox-section property url refresh">
             <label for="property-y-texture-url">Y-axis texture URL</label>
             <input type="text" id="property-y-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-
-        <div class="poly-vox-section property url refresh">
+        <div class="spatial-group poly-vox-section property url refresh">
             <label for="property-z-texture-url">Z-axis texture URL</label>
             <input type="text" id="property-z-texture-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-
-        <div class="property pyr">
+        <div class="spatial-group property pyr">
             <label>Rotation</label>
             <div class="tuple">
                 <div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
@@ -1593,11 +1560,10 @@
         </div>
 
 
-        <div class="section-header">
-            <label>Physical Properites</label><span>M</span>
+        <div class="section-header physical-group">
+            <label>Physical Properties</label><span>M</span>
         </div>
-
-        <div class="property xyz">
+        <div class="physical-group property xyz">
             <label>Linear velocity</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lvel-x"><label for="property-lvel-x">X:</label></div>
@@ -1605,11 +1571,11 @@
                 <div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
             </div>
         </div>
-        <div class="property number">
+        <div class="physical-group property number">
             <label>Linear damping</label>
             <input type="number" id="property-ldamping">
         </div>
-        <div class="property pyr">
+        <div class="physical-group property pyr">
             <label>Angular velocity</label>
             <div class="tuple">
                 <div><input type="number" class="pitch" id="property-avel-x"><label for="property-avel-x">Pitch:</label></div>
@@ -1617,20 +1583,20 @@
                 <div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
             </div>
         </div>
-        <div class="property number">
+        <div class="physical-group property number">
             <label>Angular damping</label>
             <input type="number" id="property-adamping">
         </div>
-        <div class="property number">
+        <div class="physical-group property number">
             <label>Restitution</label>
             <input type="number" id="property-restitution">
         </div>
-        <div class="property number">
+        <div class="physical-group property number">
             <label>Friction</label>
             <input type="number" id="property-friction">
         </div>
 
-        <div class="property xyz">
+        <div class="physical-group property xyz">
             <label>Gravity</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-grav-x"><label for="property-grav-x">X:</label></div>
@@ -1638,8 +1604,7 @@
                 <div><input type="number" class="z" id="property-grav-z"><label for="property-grav-z">Z:</label></div>
             </div>
         </div>
-
-        <div class="property xyz">
+        <div class="physical-group property xyz">
             <label>Acceleration</label>
             <div class="tuple">
                 <div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
@@ -1647,13 +1612,11 @@
                 <div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
             </div>
         </div>
-
-        <div class="property number">
+        <div class="physical-group property number">
             <label>Density</label>
             <input type="number" id="property-density">
         </div>
-
-        <div id="color-section" class="property rgb">
+        <div id="color-section" class="physical-group property rgb">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
             <div class="tuple">
@@ -1664,25 +1627,22 @@
         </div>
 
 
-        <div class="section-header">
+        <div class="section-header behavior-group">
             <label>Behavior</label><span>M</span>
         </div>
-
-        <div class="property checkbox">
+        <div class="behavior-group property checkbox">
             <input type="checkbox" id="property-collisionless">
             <label for="property-collisionless">Collisionless</label>
         </div>
-
-        <div class="property checkbox">
+        <div class="behavior-group property checkbox">
             <input type="checkbox" id="property-dynamic">
             <label for="property-dynamic">Dynamic</label>
         </div>
-
         
-        <div class="sub-section-header">
+        <div class="behavior-group sub-section-header">
             <span>Collides With</span>
         </div>
-        <div class="sub-props-checkbox-group">
+        <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>
@@ -1709,11 +1669,10 @@
             </div>
         </div>
 
-
-        <div class = "sub-section-header">
+        <div class="behavior-group sub-section-header">
             <span>Grabbing</span>
         </div>
-        <div class="sub-props-checkbox-group">
+        <div class="behavior-group checkbox-sub-props">
             <div class="property checkbox">
                 <input type="checkbox" id="property-grabbable">
                 <label for="property-grabbable">Grabbable</label>
@@ -1730,18 +1689,16 @@
             </div>
         </div>
 
-        <div class="property url refresh">
+        <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">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-
-        <div class="property number">
+        <div class="behavior-group property number">
             <label>Lifetime</label>
             <input type="number" id="property-lifetime">
         </div>
-
-        <div class="property url refresh">
+        <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 
             code should be removed.
@@ -1754,17 +1711,15 @@
         </div>
 
 
-        <div class="section-header model-section zone-section">
+        <div class="section-header model-group model-section zone-section">
             <label>Model</label><span>M</span>
         </div>
-
-        <div class="model-section property url refresh">
+        <div class="model-group model-section property url refresh">
             <label for="property-model-url">Model URL</label>
             <input type="text" id="property-model-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-
-        <div class="model-section zone-section property dropdown">
+        <div class="model-group model-section zone-section property dropdown">
             <label>Collision shape type</label>
             <select name="SelectShapeType" id="property-shape-type">
                 <option value="none">None</option>
@@ -1773,59 +1728,58 @@
                 <option value="compound">Compound</option>
             </select>
         </div>
-        <div class="model-section zone-section property url refresh">
+        <div class="model-group model-section zone-section property url refresh">
             <label for="property-compound-shape-url">Compound shape URL</label>
             <input type="text" id="property-compound-shape-url">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-        <div class="model-section property url refresh">
+        <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">
             <input type="button" class="update-url-version glyph" value="F" />
         </div>
-        <div class="model-section property checkbox">
+        <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-section property number">
+        <div class="model-group model-section property number">
             <label>Animation FPS</label>
             <input type="number" id="property-model-animation-fps">
         </div>
-        <div class="model-section property number">
+        <div class="model-group model-section property number">
             <label>Animation frame</label>
             <input type="number" id="property-model-animation-frame">
         </div>
-        <div class="model-section property number">
+        <div class="model-group model-section property number">
             <label>Animation first frame</label>
             <input type="number" id="property-model-animation-first-frame">
         </div>
-        <div class="model-section property number">
+        <div class="model-group model-section property number">
             <label>Animation last frame</label>
             <input type="number" id="property-model-animation-last-frame">
         </div>
-        <div class="model-section property checkbox">
+        <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-section property checkbox">
+        <div class="model-group model-section property checkbox">
             <input type="checkbox" id="property-model-animation-hold">
             <label for="property-model-animation-hold">Animation hold</label>
         </div>
-        <div class="model-section property textarea">
+        <div class="model-group model-section property textarea">
             <label for="property-model-textures">Textures</label>
             <textarea id="property-model-textures"></textarea>
         </div>
-        <div class="model-section property textarea">
+        <div class="model-group model-section property textarea">
             <label for="property-model-original-textures">Original textures</label>
             <textarea id="property-model-original-textures" readonly></textarea>
         </div>
 
 
-        <div class="section-header light-section">
+        <div class="section-header light-group light-section">
             <label>Light</label><span>M</span>
         </div>
-        
-        <div class="light-section property rgb">
+        <div class="light-group light-section property rgb">
             <div class="color-picker" id="property-light-color"></div>
             <label>Light color</label>
             <div class="tuple">
@@ -1834,23 +1788,23 @@
                 <div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
             </div>
         </div>
-        <div class="light-section property number">
+        <div class="light-group light-section property number">
             <label>Intensity</label>
             <input type="number" id="property-light-intensity" min="0" step="0.1">
         </div>
-        <div class="light-section property number">
+        <div class="light-group light-section property number">
             <label>Fall-off radius</label>
             <input type="number" id="property-light-falloff-radius" min="0" step="0.1">
         </div>
-        <div class="light-section property checkbox">
+        <div class="light-group light-section property checkbox">
             <input type="checkbox" id="property-light-spot-light">
             <label for="property-light-spot-light">Spotlight</label>
         </div>
-        <div class="light-section property number">
+        <div class="light-group light-section property number">
             <label>Spotlight exponent</label>
             <input type="number" id="property-light-exponent" step="0.01">
         </div>
-        <div class="light-section property number">
+        <div class="light-group light-section property number">
             <label>Spotlight cut-off</label>
             <input type="number" id="property-light-cutoff" step="0.01">
         </div>

From f4b9ffe26f47f60e610394dbbbbaa7557a6dbcf9 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 18:07:45 +1300
Subject: [PATCH 45/64] Reorder sections

---
 examples/html/entityProperties.html | 291 ++++++++++++++--------------
 1 file changed, 145 insertions(+), 146 deletions(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 73f0ac6b28..ccbaec3670 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1315,149 +1315,6 @@
         </div>
 
 
-        <div class="section-header text-group text-section">
-            <label>Text</label><span>M</span>
-        </div>
-        <div class="text-group text-section property text">
-            <label for="property-text-text">Text content</label>
-            <input type="text" id="property-text-text">
-        </div>
-        <div class="text-group text-section property number">
-            <label>Line height</label>
-            <input type="number" id="property-text-line-height" min="0" step="0.005">
-        </div>
-        <div class="text-group text-section property rgb">
-            <div class="color-picker" id="property-text-text-color"></div>
-            <label>Text color</label>
-            <div class="tuple">
-                <div><input type="number" class="red" id="property-text-text-color-red"><label for="property-text-text-color-red">Red:</label></div>
-                <div><input type="number" class="green" id="property-text-text-color-green"><label for="property-text-text-color-green">Green:</label></div>
-                <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
-            </div>
-        </div>
-        <div class="text-group text-section property rgb">
-            <div class="color-picker" id="property-text-background-color"></div>
-            <label>Background color</label>
-            <div class="tuple">
-                <div><input type="number" class="red" id="property-text-background-color-red"><label for="roperty-text-background-color-red">Red:</label></div>
-                <div><input type="number" class="green" id="property-text-background-color-green"><label for="property-text-background-color-green">Green:</label></div>
-                <div><input type="number" class="blue" id="property-text-background-color-blue"><label for="property-text-background-color-blue">Blue:</label></div>
-            </div>
-        </div>
-        
-
-        <div class="section-header zone-group zone-section">
-            <label>Zone</label><span>M</span>
-        </div>
-        <div class="zone-group zone-section property checkbox">
-            <input type="checkbox" id="property-zone-stage-sun-model-enabled">
-            <label for="property-zone-stage-sun-model-enabled">Enable stage sun model</label>
-        </div>
-
-        <div class="sub-section-header zone-group zone-section keylight-section">
-            <label>Key Light</label>
-        </div>
-        <div class="zone-section keylight-section zone-group property rgb">
-            <div class="color-picker" id="property-zone-key-light-color"></div>
-            <label>Key light color</label>
-            <div class="tuple">
-                <div><input type="number" class="red" id="property-zone-key-light-color-red" min="0" max="255" step="1"><label for="property-zone-key-light-color-red">Red:</label></div>
-                <div><input type="number" class="green" id="property-zone-key-light-color-green" min="0" max="255" step="1"><label for="property-zone-key-light-color-green">Green:</label></div>
-                <div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
-            </div>
-        </div>
-        <div class="zone-section keylight-section zone-group property number">
-            <label>Light intensity</label>
-            <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
-        </div>
-        <div class="zone-group zone-section keylight-section property">
-            <div class="number">
-                <label>Light altitude</label>
-                <input type="number" id="property-zone-key-light-direction-x">
-            </div>
-            <div class="number">
-                <label>Light azimuth</label>
-                <input type="number" id="property-zone-key-light-direction-y">
-            </div>
-        </div>
-        <div class="zone-group zone-section keylight-section property number">
-            <label>Ambient intensity</label>
-            <input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
-        </div>
-        <div class="zone-group zone-section keylight-section property url refresh">
-            <label for="property-zone-key-ambient-url">Ambient URL</label>
-            <input type="text" id="property-zone-key-ambient-url">
-            <input type="button" class="update-url-version glyph" value="F" />
-        </div>
-
-        <div class="sub-section-header zone-group zone-section stage-section">
-            <label>Stage</label>
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage latitude</label>
-            <input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage longitude</label>
-            <input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage altitude</label>
-            <input type="number" id="property-zone-stage-altitude" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property checkbox">
-            <input type="checkbox" id="property-zone-stage-automatic-hour-day">
-            <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage day of year</label>
-            <input type="number" id="property-zone-stage-day" min="0" max="365" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage hour</label>
-            <input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
-        </div>
-
-        <div class="sub-section-header zone-group zone-section background-section">
-            <label>Background</label>
-        </div>
-        <div class="zone-section zone-group background-section property dropdown">
-            <label>Background mode</label>
-            <select name="SelectBackgroundMode" id="property-zone-background-mode">
-                <option value="inherit">Nothing</option>
-                <option value="skybox">Skybox</option>
-            </select>
-        </div>
-
-        <div class="sub-section-header zone-group zone-section skybox-section">
-            <label>Skybox</label>
-        </div>
-        <div class="zone-group zone-section skybox-section property rgb">
-            <div class="color-picker" id="property-zone-skybox-color"></div>
-            <label>Skybox color</label>
-            <div class="tuple">
-                <div><input type="number" class="red" id="property-zone-skybox-color-red"><label for="property-zone-skybox-color-red">Red:</label></div>
-                <div><input type="number" class="green" id="property-zone-skybox-color-green"><label for="property-zone-skybox-color-green">Green:</label></div>
-                <div><input type="number" class="blue" id="property-zone-skybox-color-blue"><label for="property-zone-skybox-color-blue">Blue:</label></div>
-            </div>
-        </div>
-        <div class="zone-group zone-section skybox-section property url refresh">
-            <label for="property-zone-skybox-url">Skybox URL</label>
-            <input type="text" id="property-zone-skybox-url">
-            <input type="button" class="update-url-version glyph" value="F" />
-        </div>
-
-
-        <div class="section-header web-group web-section">
-            <label>Web</label><span>M</span>
-        </div>
-        <div class="web-group web-section property url refresh">
-            <label for="property-web-source-url">Source URL</label>
-            <input type="text" id="property-web-source-url">
-            <input type="button" class="update-url-version glyph" value="F" />
-        </div>
-
-
         <div class="section-header hyperlink-group hyperlink-section">
             <label>Hyperlink</label><span>M</span>
         </div>
@@ -1595,7 +1452,6 @@
             <label>Friction</label>
             <input type="number" id="property-friction">
         </div>
-
         <div class="physical-group property xyz">
             <label>Gravity</label>
             <div class="tuple">
@@ -1638,7 +1494,7 @@
             <input type="checkbox" id="property-dynamic">
             <label for="property-dynamic">Dynamic</label>
         </div>
-        
+
         <div class="behavior-group sub-section-header">
             <span>Collides With</span>
         </div>
@@ -1700,7 +1556,7 @@
         </div>
         <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 
+            FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated
             code should be removed.
             <input type="hidden" id="property-script-timestamp" class="value">
             <input type="button" id="reload-script-button" value="Reload">
@@ -1776,6 +1632,149 @@
         </div>
 
 
+        <div class="section-header text-group text-section">
+            <label>Text</label><span>M</span>
+        </div>
+        <div class="text-group text-section property text">
+            <label for="property-text-text">Text content</label>
+            <input type="text" id="property-text-text">
+        </div>
+        <div class="text-group text-section property number">
+            <label>Line height</label>
+            <input type="number" id="property-text-line-height" min="0" step="0.005">
+        </div>
+        <div class="text-group text-section property rgb">
+            <div class="color-picker" id="property-text-text-color"></div>
+            <label>Text color</label>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-text-text-color-red"><label for="property-text-text-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-text-text-color-green"><label for="property-text-text-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
+            </div>
+        </div>
+        <div class="text-group text-section property rgb">
+            <div class="color-picker" id="property-text-background-color"></div>
+            <label>Background color</label>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-text-background-color-red"><label for="roperty-text-background-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-text-background-color-green"><label for="property-text-background-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-text-background-color-blue"><label for="property-text-background-color-blue">Blue:</label></div>
+            </div>
+        </div>
+
+
+        <div class="section-header zone-group zone-section">
+            <label>Zone</label><span>M</span>
+        </div>
+        <div class="zone-group zone-section property checkbox">
+            <input type="checkbox" id="property-zone-stage-sun-model-enabled">
+            <label for="property-zone-stage-sun-model-enabled">Enable stage sun model</label>
+        </div>
+
+        <div class="sub-section-header zone-group zone-section keylight-section">
+            <label>Key Light</label>
+        </div>
+        <div class="zone-section keylight-section zone-group property rgb">
+            <div class="color-picker" id="property-zone-key-light-color"></div>
+            <label>Key light color</label>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-zone-key-light-color-red" min="0" max="255" step="1"><label for="property-zone-key-light-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-zone-key-light-color-green" min="0" max="255" step="1"><label for="property-zone-key-light-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
+            </div>
+        </div>
+        <div class="zone-section keylight-section zone-group property number">
+            <label>Light intensity</label>
+            <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
+        </div>
+        <div class="zone-group zone-section keylight-section property">
+            <div class="number">
+                <label>Light altitude</label>
+                <input type="number" id="property-zone-key-light-direction-x">
+            </div>
+            <div class="number">
+                <label>Light azimuth</label>
+                <input type="number" id="property-zone-key-light-direction-y">
+            </div>
+        </div>
+        <div class="zone-group zone-section keylight-section property number">
+            <label>Ambient intensity</label>
+            <input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
+        </div>
+        <div class="zone-group zone-section keylight-section property url refresh">
+            <label for="property-zone-key-ambient-url">Ambient URL</label>
+            <input type="text" id="property-zone-key-ambient-url">
+            <input type="button" class="update-url-version glyph" value="F" />
+        </div>
+
+        <div class="sub-section-header zone-group zone-section stage-section">
+            <label>Stage</label>
+        </div>
+        <div class="zone-group zone-section stage-section property number">
+            <label>Stage latitude</label>
+            <input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
+        </div>
+        <div class="zone-group zone-section stage-section property number">
+            <label>Stage longitude</label>
+            <input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
+        </div>
+        <div class="zone-group zone-section stage-section property number">
+            <label>Stage altitude</label>
+            <input type="number" id="property-zone-stage-altitude" step="1">
+        </div>
+        <div class="zone-group zone-section stage-section property checkbox">
+            <input type="checkbox" id="property-zone-stage-automatic-hour-day">
+            <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
+        </div>
+        <div class="zone-group zone-section stage-section property number">
+            <label>Stage day of year</label>
+            <input type="number" id="property-zone-stage-day" min="0" max="365" step="1">
+        </div>
+        <div class="zone-group zone-section stage-section property number">
+            <label>Stage hour</label>
+            <input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
+        </div>
+
+        <div class="sub-section-header zone-group zone-section background-section">
+            <label>Background</label>
+        </div>
+        <div class="zone-section zone-group background-section property dropdown">
+            <label>Background mode</label>
+            <select name="SelectBackgroundMode" id="property-zone-background-mode">
+                <option value="inherit">Nothing</option>
+                <option value="skybox">Skybox</option>
+            </select>
+        </div>
+
+        <div class="sub-section-header zone-group zone-section skybox-section">
+            <label>Skybox</label>
+        </div>
+        <div class="zone-group zone-section skybox-section property rgb">
+            <div class="color-picker" id="property-zone-skybox-color"></div>
+            <label>Skybox color</label>
+            <div class="tuple">
+                <div><input type="number" class="red" id="property-zone-skybox-color-red"><label for="property-zone-skybox-color-red">Red:</label></div>
+                <div><input type="number" class="green" id="property-zone-skybox-color-green"><label for="property-zone-skybox-color-green">Green:</label></div>
+                <div><input type="number" class="blue" id="property-zone-skybox-color-blue"><label for="property-zone-skybox-color-blue">Blue:</label></div>
+            </div>
+        </div>
+        <div class="zone-group zone-section skybox-section property url refresh">
+            <label for="property-zone-skybox-url">Skybox URL</label>
+            <input type="text" id="property-zone-skybox-url">
+            <input type="button" class="update-url-version glyph" value="F" />
+        </div>
+
+
+        <div class="section-header web-group web-section">
+            <label>Web</label><span>M</span>
+        </div>
+        <div class="web-group web-section property url refresh">
+            <label for="property-web-source-url">Source URL</label>
+            <input type="text" id="property-web-source-url">
+            <input type="button" class="update-url-version glyph" value="F" />
+        </div>
+
+
         <div class="section-header light-group light-section">
             <label>Light</label><span>M</span>
         </div>

From 0b70da158170415221cbd670e55775ce11328adf Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 19:02:28 +1300
Subject: [PATCH 46/64] Improve layout of scale controls

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index f4ec47f444..9da1b5d47c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -456,7 +456,7 @@ input[type=checkbox]:checked + label:hover {
     margin-left: 12px;
 }
 
-.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label {
+.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
     float: left;
     margin-bottom: 4px;
 }
@@ -469,7 +469,7 @@ input[type=checkbox]:checked + label:hover {
     clear: both;
     float: left;
 }
-.xyz > div, .pyr > div {
+.xyz > div, .pyr > div, .gen > div {
     clear: both;
 }
 
@@ -650,6 +650,14 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
     white-space: nowrap;
 }
 
+.row input {
+    float: left;
+}
+.row input[type=button] {
+    margin-left: 8px;
+    margin-right: 0;
+}
+
 
 ::-webkit-scrollbar {
     width: 10px;
@@ -801,6 +809,12 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 }
 
 
+input#dimension-rescale-button {
+    min-width: 50px;
+    margin-left: 6px;
+}
+
+
 .color-set label, .color-set span {
     display: block;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index ccbaec3670..0acbd633c1 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1367,11 +1367,12 @@
                 <div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
                 <div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
             </div>
-            <div class="buttons">
-                <span>
-                    <input type="number" id="dimension-rescale-pct" value=100>&nbsp;%
-                    <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
-                </span>
+        </div>
+        <div class="spatial-group property gen">
+            <label>Scale</label>
+            <div class="row">
+                <input type="number" id="dimension-rescale-pct" value=100>
+                <input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
                 <input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
             </div>
         </div>

From cfc5c36f059a27920130d129708a642c3de2389b Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 19:16:04 +1300
Subject: [PATCH 47/64] Fix dropdowns

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

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 0acbd633c1..8fb8cdc9f3 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1237,8 +1237,8 @@
                 var options = elDropdowns[i].getElementsByTagName("option");
                 var selectedOption = 0;
                 for (var j = 0; j < options.length; j++) {
-                    if (options[i].getAttribute("selected") === "selected") {
-                        selectedOption = i;
+                    if (options[j].getAttribute("selected") === "selected") {
+                        selectedOption = j;
                     }
                 }
                 var div = elDropdowns[i].parentNode;
@@ -1739,7 +1739,7 @@
         <div class="sub-section-header zone-group zone-section background-section">
             <label>Background</label>
         </div>
-        <div class="zone-section zone-group background-section property dropdown">
+        <div class="zone-group zone-section background-section property dropdown">
             <label>Background mode</label>
             <select name="SelectBackgroundMode" id="property-zone-background-mode">
                 <option value="inherit">Nothing</option>

From db72e3efbb5cbc39f6f72abb0bea42a8719d411e Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 19:22:34 +1300
Subject: [PATCH 48/64] Increase maximum window height

---
 interface/resources/qml/windows-uit/Window.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/resources/qml/windows-uit/Window.qml b/interface/resources/qml/windows-uit/Window.qml
index 429c6d5dcc..56f5e6c07d 100644
--- a/interface/resources/qml/windows-uit/Window.qml
+++ b/interface/resources/qml/windows-uit/Window.qml
@@ -53,7 +53,7 @@ Fadable {
     property bool resizable: false
 
     property vector2d minSize: Qt.vector2d(100, 100)
-    property vector2d maxSize: Qt.vector2d(1280, 720)
+    property vector2d maxSize: Qt.vector2d(1280, 800)
 
     // The content to place inside the window, determined by the client
     default property var content

From 0a83df22816d350bff00e76681467b47ab2a9c04 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 30 Mar 2016 19:25:45 +1300
Subject: [PATCH 49/64] Fix textarea selection highlight

---
 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 9da1b5d47c..6d4235091c 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -196,7 +196,7 @@ input:focus, textarea:focus {
     outline-offset: -1px;
 }
 
-input::selection {
+input::selection, textarea::selection {
     background-color: #00b4ef;
 }
 

From 3457d1c21e88425ed661ee2486a5eaff7b9b2649 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 09:16:31 +1300
Subject: [PATCH 50/64] Entities list fixes

- Fix report of number of entities selected if have two selected
- Don't show yellow focus highlight on row when first click it
---
 examples/html/edit-style.css  | 4 ++++
 examples/html/entityList.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 6d4235091c..a8cdd45f09 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -139,6 +139,10 @@ tr:nth-child(even) {
     background-color: #1c1c1c;
 }
 
+tr:focus {
+    outline: none;
+}
+
 tr.selected {
     color: #000000;
     background-color: #00b4ef;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index dabfa7dbc1..2260fbdbd6 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -181,7 +181,7 @@
                       }
                   }
 
-                  if (selectedEntities.length > 2) {
+                  if (selectedEntities.length > 1) {
                       elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
                   } else if (selectedEntities.length === 1) {
                       elFooter.firstChild.nodeValue = "1 entity selected";

From 870636832f2043e2c301c6f4790b0ed03631ddc0 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 10:45:57 +1300
Subject: [PATCH 51/64] Possible work-around for OSX font issues

---
 examples/html/edit-style.css        | 3 ++-
 examples/html/entityProperties.html | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index a8cdd45f09..438375b879 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -368,6 +368,7 @@ input[type=checkbox]:checked + label:hover {
     width: 100%;
     margin: 22px -12px 0 -12px;
     padding: 14px 12px 0 12px;
+    font-family: Raleway-Regular;
     font-size: 12px;
     color: #afafaf;
     height: 28px;
@@ -397,8 +398,8 @@ input[type=checkbox]:checked + label:hover {
 
 .section-header span {
     font-family: HiFi-Glyphs;
-    float: right;
     font-size: 20px;
+    float: right;
     position: absolute;
     top: 9px;
     right: 12px;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 8fb8cdc9f3..c92ac3f264 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1244,6 +1244,8 @@
                 var div = elDropdowns[i].parentNode;
 
                 var dl = document.createElement("dl");
+                // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
+                dl.style = "font-family:FiraSans-SemiBold;"  // For OSX
                 div.appendChild(dl);
 
                 var dt = document.createElement("dt");
@@ -1258,6 +1260,8 @@
                 dt.appendChild(span);
 
                 var span = document.createElement("span");
+                // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
+                span.style = "font-family:HiFi-Glyphs";  // For OSX
                 span.textContent = "5";  // caratDn
                 dt.appendChild(span);
 
@@ -1269,6 +1273,8 @@
 
                 for (var j = 0; j < options.length; j++) {
                     var li = document.createElement("li");
+                    li.style = "font-family:FiraSans-SemiBold;"  // For OSX
+                    // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
                     li.setAttribute("value", options[j].value);
                     li.textContent = options[j].firstChild.textContent;
                     li.addEventListener("click", setDropdownValue);

From ba43843340c9f6395939f816df0f20dff027caa2 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 12:27:08 +1300
Subject: [PATCH 52/64] Disable right-click context menu

---
 examples/html/entityList.html                    | 5 +++++
 examples/html/entityProperties.html              | 4 ++++
 examples/html/gridControls.html                  | 5 +++++
 examples/particle_explorer/particleExplorer.html | 8 +++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 2260fbdbd6..57b96afbfe 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -267,6 +267,11 @@
               window.onresize = resize;
               resize();
           });
+
+          // 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();
+          }, false);
       }
     </script>
 </head>
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index c92ac3f264..e64d519137 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1289,6 +1289,10 @@
                 elDropdowns = document.getElementsByTagName("select");
             }
 
+            // 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();
+            }, false);
         }
     </script>
 </head>
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 9563e85903..429ab45d0e 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -119,6 +119,11 @@
     
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
+
+            // 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();
+            }, false);
         }
     </script>
 </head>
diff --git a/examples/particle_explorer/particleExplorer.html b/examples/particle_explorer/particleExplorer.html
index d69d221306..2ab89c98ca 100644
--- a/examples/particle_explorer/particleExplorer.html
+++ b/examples/particle_explorer/particleExplorer.html
@@ -20,6 +20,12 @@
 <script type="text/javascript" src="../html/eventBridgeLoader.js"></script>
 <script type="text/javascript" src="particleExplorer.js?v42"></script>
 <script>
+    function loaded() {
+        // 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();
+        }, false);
+    }
 </script>
 <style>
 
@@ -60,7 +66,7 @@ body{
 
 </style>
 </head>
-<body>
+<body  onload="loaded();">
 <div class="importer">
 <input type='text' id="importer-input" placeholder="Import: Paste JSON here."  onkeypress="handleInputKeyPress(event)">
 <div class = "exported-props-section">

From 4189f46156dc7e6b26a9bc4ba06ec2045dcdbfaa Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 12:32:36 +1300
Subject: [PATCH 53/64] Make input text color change to black when selected

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 438375b879..d216f33f25 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -201,6 +201,7 @@ input:focus, textarea:focus {
 }
 
 input::selection, textarea::selection {
+    color: #000000;
     background-color: #00b4ef;
 }
 
@@ -810,6 +811,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 }
 
 #property-id::selection {
+    color: #000000;
     background-color: #00b4ef;
 }
 

From 382b05e00b4f6be4acb21ec8abbe5fdfbe82597f Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 13:13:13 +1300
Subject: [PATCH 54/64] Make expand/collapse icon larger

---
 examples/html/edit-style.css                            | 6 +++---
 interface/resources/qml/controls-uit/ContentSection.qml | 4 ++--
 interface/resources/qml/styles-uit/HifiConstants.qml    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index d216f33f25..28dbaaf30f 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -399,11 +399,11 @@ input[type=checkbox]:checked + label:hover {
 
 .section-header span {
     font-family: HiFi-Glyphs;
-    font-size: 20px;
+    font-size: 30px;
     float: right;
     position: absolute;
-    top: 9px;
-    right: 12px;
+    top: 4px;
+    right: 6px;
 }
 
 .text-group[collapsed="true"] ~ .text-group,
diff --git a/interface/resources/qml/controls-uit/ContentSection.qml b/interface/resources/qml/controls-uit/ContentSection.qml
index 6f106a8347..7a6f472c46 100644
--- a/interface/resources/qml/controls-uit/ContentSection.qml
+++ b/interface/resources/qml/controls-uit/ContentSection.qml
@@ -97,11 +97,11 @@ Column {
 
             HiFiGlyphs {
                 anchors {
-                    verticalCenter: title.verticalCenter
+                    top: title.top
+                    topMargin: -9
                     right: parent.right
                     rightMargin: -4
                 }
-                y: -2
                 size: hifi.fontSizes.disclosureButton
                 text: isCollapsed ? hifi.glyphs.disclosureButtonExpand : hifi.glyphs.disclosureButtonCollapse
                 color: hifi.colors.lightGrayText
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index 9c879a2fd6..02be3b93d1 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -168,7 +168,7 @@ Item {
         readonly property real menuItem: dimensions.largeScreen ? 15 : 11
         readonly property real shortcutText: dimensions.largeScreen ? 13 : 9
         readonly property real carat: dimensions.largeScreen ? 38 : 30
-        readonly property real disclosureButton: dimensions.largeScreen ? 20 : 15
+        readonly property real disclosureButton: dimensions.largeScreen ? 30 : 22
     }
 
     Item {

From 13ab854a9d14a472619a5f268c640723700543ae Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 15:02:16 +1300
Subject: [PATCH 55/64] Reduce space between collapsed sections

In settings dialogs as well as entities editor.
---
 examples/html/edit-style.css                            | 4 ++++
 interface/resources/qml/AssetServer.qml                 | 3 +--
 interface/resources/qml/controls-uit/ContentSection.qml | 2 +-
 interface/resources/qml/dialogs/preferences/Section.qml | 2 +-
 interface/resources/qml/hifi/dialogs/RunningScripts.qml | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 28dbaaf30f..31fb4ba4ec 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -406,6 +406,10 @@ input[type=checkbox]:checked + label:hover {
     right: 6px;
 }
 
+.section-header[collapsed="true"] {
+    margin-bottom: -22px;
+}
+
 .text-group[collapsed="true"] ~ .text-group,
 .zone-group[collapsed="true"] ~ .zone-group,
 .web-group[collapsed="true"] ~ .web-group,
diff --git a/interface/resources/qml/AssetServer.qml b/interface/resources/qml/AssetServer.qml
index 37291480b2..99658f63b9 100644
--- a/interface/resources/qml/AssetServer.qml
+++ b/interface/resources/qml/AssetServer.qml
@@ -416,7 +416,6 @@ Window {
             anchors.top: assetDirectory.bottom
             anchors.bottom: uploadSection.top
             anchors.margins: 12
-            anchors.bottomMargin: 0
             anchors.left: parent.left
             anchors.right: parent.right
 
@@ -445,7 +444,7 @@ Window {
             name: "Upload A File"
             spacing: hifi.dimensions.contentSpacing.y
             anchors.bottom: parent.bottom
-            height: 130
+            height: 92
 
             Item {
                 height: parent.height
diff --git a/interface/resources/qml/controls-uit/ContentSection.qml b/interface/resources/qml/controls-uit/ContentSection.qml
index 7a6f472c46..427146aabe 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 : hifi.dimensions.controlInterlineHeight
+            height: isFirst ? hifi.dimensions.contentSpacing.y : 0
             anchors.top: parent.top
         }
 
diff --git a/interface/resources/qml/dialogs/preferences/Section.qml b/interface/resources/qml/dialogs/preferences/Section.qml
index b646b00648..a813dc6b5f 100644
--- a/interface/resources/qml/dialogs/preferences/Section.qml
+++ b/interface/resources/qml/dialogs/preferences/Section.qml
@@ -44,7 +44,7 @@ Preference {
 
     children: [ contentContainer ]
 
-    height: contentContainer.height + (root.isLast ? 2 * hifi.dimensions.contentSpacing.y : 0)
+    height: contentContainer.height + (contentContainer.isCollapsed ? 0 : hifi.dimensions.controlInterlineHeight)
 
     Component.onCompleted: d.buildPreferences();
 
diff --git a/interface/resources/qml/hifi/dialogs/RunningScripts.qml b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
index b156a95a02..215710cc81 100644
--- a/interface/resources/qml/hifi/dialogs/RunningScripts.qml
+++ b/interface/resources/qml/hifi/dialogs/RunningScripts.qml
@@ -120,7 +120,7 @@ Window {
             }
 
             HifiControls.VerticalSpacer {
-                height: 2  // Table view draws a little taller than it's height.
+                height: hifi.dimensions.controlInterlineHeight + 2  // Table view draws a little taller than it's height.
             }
         }
 

From 751a37a1ffd34b257e75581fcb0412bbd8e49c28 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 16:48:40 +1300
Subject: [PATCH 56/64] Arrange more properties in rows

---
 examples/html/edit-style.css        |  12 +++-
 examples/html/entityProperties.html | 102 +++++++++++-----------------
 2 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 31fb4ba4ec..0ca9e0b6fd 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -603,6 +603,8 @@ div.refresh input[type="button"] {
 .tuple div {
     display: inline-block;
     position: relative;
+    min-width: 120px;
+    min-height: 1px;
 }
 .tuple div:nth-child(1) {
     float: left;
@@ -622,7 +624,15 @@ div.refresh input[type="button"] {
 .pyr .tuple input {
     padding-left: 45px;
 }
-.tuple div label {
+
+.tuple div > label:first-child {
+    float: left;
+}
+.tuple div > label + input {
+    clear: both;
+    float: left;
+}
+.tuple div input + label {
     display: inline !important;
     float: none !important;
     position: absolute;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index e64d519137..d6939d56ee 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1455,13 +1455,12 @@
             <label>Angular damping</label>
             <input type="number" id="property-adamping">
         </div>
-        <div class="physical-group property number">
-            <label>Restitution</label>
-            <input type="number" id="property-restitution">
-        </div>
-        <div class="physical-group property number">
-            <label>Friction</label>
-            <input type="number" id="property-friction">
+        <div class="physical-group property gen">
+            <div class="tuple">
+                <div><label>Restitution</label><input type="number" id="property-restitution"></div>
+                <div><label>Friction</label><input type="number" id="property-friction"></div>
+                <div><label>Density</label><input type="number" id="property-density"></div>
+            </div>
         </div>
         <div class="physical-group property xyz">
             <label>Gravity</label>
@@ -1479,10 +1478,6 @@
                 <div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
             </div>
         </div>
-        <div class="physical-group property number">
-            <label>Density</label>
-            <input type="number" id="property-density">
-        </div>
         <div id="color-section" class="physical-group property rgb">
             <div id="property-color" class="color-picker"></div>
             <label>Entity color</label>
@@ -1614,16 +1609,11 @@
             <input type="number" id="property-model-animation-fps">
         </div>
         <div class="model-group model-section property number">
-            <label>Animation frame</label>
-            <input type="number" id="property-model-animation-frame">
-        </div>
-        <div class="model-group model-section property number">
-            <label>Animation first frame</label>
-            <input type="number" id="property-model-animation-first-frame">
-        </div>
-        <div class="model-group model-section property number">
-            <label>Animation last frame</label>
-            <input type="number" id="property-model-animation-last-frame">
+            <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>
         </div>
         <div class="model-group model-section property checkbox">
             <input type="checkbox" id="property-model-animation-loop">
@@ -1698,14 +1688,11 @@
             <label>Light intensity</label>
             <input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
         </div>
-        <div class="zone-group zone-section keylight-section property">
-            <div class="number">
-                <label>Light altitude</label>
-                <input type="number" id="property-zone-key-light-direction-x">
-            </div>
-            <div class="number">
-                <label>Light azimuth</label>
-                <input type="number" id="property-zone-key-light-direction-y">
+        <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></div>
             </div>
         </div>
         <div class="zone-group zone-section keylight-section property number">
@@ -1721,29 +1708,24 @@
         <div class="sub-section-header zone-group zone-section stage-section">
             <label>Stage</label>
         </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage latitude</label>
-            <input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage longitude</label>
-            <input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage altitude</label>
-            <input type="number" id="property-zone-stage-altitude" step="1">
+        <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>
         </div>
         <div class="zone-group zone-section stage-section property checkbox">
             <input type="checkbox" id="property-zone-stage-automatic-hour-day">
             <label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
         </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage day of year</label>
-            <input type="number" id="property-zone-stage-day" min="0" max="365" step="1">
-        </div>
-        <div class="zone-group zone-section stage-section property number">
-            <label>Stage hour</label>
-            <input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5">
+
+        <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></div>
+            </div>
         </div>
 
         <div class="sub-section-header zone-group zone-section background-section">
@@ -1798,25 +1780,23 @@
                 <div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
             </div>
         </div>
-        <div class="light-group light-section property number">
-            <label>Intensity</label>
-            <input type="number" id="property-light-intensity" min="0" step="0.1">
-        </div>
-        <div class="light-group light-section property number">
-            <label>Fall-off radius</label>
-            <input type="number" id="property-light-falloff-radius" min="0" step="0.1">
+        <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></div>
+            </div>
         </div>
         <div class="light-group light-section property checkbox">
             <input type="checkbox" id="property-light-spot-light">
             <label for="property-light-spot-light">Spotlight</label>
         </div>
-        <div class="light-group light-section property number">
-            <label>Spotlight exponent</label>
-            <input type="number" id="property-light-exponent" step="0.01">
-        </div>
-        <div class="light-group light-section property number">
-            <label>Spotlight cut-off</label>
-            <input type="number" id="property-light-cutoff" step="0.01">
+        <div class="light-group light-section property gen">
+            <div class="tuple">
+                <div><label>Spotlight exponent</label><input type="number" id="property-light-exponent" step="0.01"></div>
+                <div><label>Spotlight cut-off</label><input type="number" id="property-light-cutoff" step="0.01"></div>
+                <div></div>
+            </div>
         </div>
     </div>
 </body>

From f584d4d00c4fb4772f70d39caa6f98142ba89db9 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 16:49:11 +1300
Subject: [PATCH 57/64] Style parent joint index property as a number

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

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index d6939d56ee..02bcbc4528 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1358,9 +1358,9 @@
             <label for="property-parent-id">Parent ID</label>
             <input type="text" id="property-parent-id">
         </div>
-        <div class="spatial-group property text">
+        <div class="spatial-group property number">
             <label for="property-parent-joint-index">Parent joint index</label>
-            <input type="text" id="property-parent-joint-index">
+            <input type="number" id="property-parent-joint-index">
         </div>
         <div class="spatial-group property xyz">
             <label>Registration</label>

From 31b96c75ca8a09c425e8779559e418b861355bbc Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 31 Mar 2016 16:53:03 +1300
Subject: [PATCH 58/64] Tidying

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 0ca9e0b6fd..fd587a58ec 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -521,6 +521,9 @@ input[type=checkbox]:checked + label:hover {
 .dropdown dt:hover {
     color: #404040;
 }
+.dropdown dt:focus {
+    outline: none;
+}
 .dropdown dt span:first-child {
     display: inline-block;
     position: relative;
@@ -582,6 +585,9 @@ div.refresh input[type="button"] {
     background-position: bottom right;
     background-repeat: no-repeat;
 }
+.color-picker:focus {
+    outline: none;
+}
 .color-picker[active="true"] {
     border-color: #000;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
@@ -780,6 +786,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     background: none;
 }
 
+#entity-table th:focus {
+    outline: none;
+}
+
 #col-type {
     width: 16%;
 }
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 02bcbc4528..02d26d4644 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1339,7 +1339,7 @@
 
 
         <div class="section-header spatial-group">
-            <label>Spatial Properties</label><span>M</span>
+            <label>Spatial</label><span>M</span>
         </div>
         <div class="spatial-group property xyz">
             <label>Position</label>
@@ -1429,7 +1429,7 @@
 
 
         <div class="section-header physical-group">
-            <label>Physical Properties</label><span>M</span>
+            <label>Physical</label><span>M</span>
         </div>
         <div class="physical-group property xyz">
             <label>Linear velocity</label>

From dbd6b9e90b2a56549476d18c9491f0c01069b398 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 08:50:11 +1300
Subject: [PATCH 59/64] Use monospace font for textarea fields

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index fd587a58ec..57d8e23330 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -38,6 +38,12 @@
          url(../../interface/resources/fonts/FiraSans-SemiBold.ttf);
 }
 
+@font-face {
+    font-family: AnonymousPro-Regular;
+    src: url(../../resources/fonts/AnonymousPro-Regular.ttf), 
+         url(../../interface/resources/fonts/AnonymousPro-Regular.ttf);
+}
+
 @font-face {
     font-family: HiFi-Glyphs;
     src: url(../../resources/fonts/hifi-glyphs.ttf), 
@@ -182,6 +188,8 @@ input[type="text"], input[type="number"], textarea {
 }
 
 textarea {
+    font-family: AnonymousPro-Regular;
+    font-size: 16px;
     padding-top: 5px;
     padding-bottom: 5px;
     min-height: 64px;

From 048865fb097745a87419913297e1cb31980b0db2 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 09:55:27 +1300
Subject: [PATCH 60/64] Style spin buttons

---
 examples/html/edit-style.css        | 60 +++++++++++++++++------------
 examples/html/entityProperties.html |  6 +--
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 57d8e23330..b8c8e8db77 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -217,14 +217,6 @@ input.search {
     border-radius: 14px;
 }
 
-input.no-spin::-webkit-outer-spin-button,
-input.no-spin::-webkit-inner-spin-button {
-    display: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-}
-
 input:disabled, textarea:disabled {
     background-color: #383838;
     color: #afafaf;
@@ -241,26 +233,44 @@ input[type="number"] {
     width: 120px;
 }
 
-/* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
+input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
-    background: #FFF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
-    width: 0.9em;
-    height: 22px;
-    opacity: 0.5; /* shows Spin Buttons per default (Chrome >= 39) */
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
+    opacity: 1.0;
+    display: block;
+    position: relative;
+    left: 5px;
+    width: 10px;
+    overflow: hidden;
+    color: #afafaf;
+    cursor: pointer;
+    /*background-color: #000000;*/
+}
+input[type=number]::-webkit-inner-spin-button:before,
+input[type=number]::-webkit-inner-spin-button:after {
+    position:absolute;
+    left: -21px;
+    font-family:hifi-glyphs;
+    text-align: center;
+    font-size: 52px;
+    line-height: 8px;
+}
+input[type=number]::-webkit-inner-spin-button:before {
+    content: "6";
+    top: 6px;
+}
+input[type=number]::-webkit-inner-spin-button:after {
+    content: "5";
+    bottom: 6px;
+}
+input[type="number"]::-webkit-inner-spin-button:hover {
+    color: #ffffff;
 }
 
-input[type="number"]::-webkit-inner-spin-button:hover,
-input[type="number"]::-webkit-inner-spin-button:active {
-    opacity: .8;
+input.no-spin::-webkit-outer-spin-button,
+input.no-spin::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
 }
 
 input[type=button] {
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 02d26d4644..976a65a8db 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1365,9 +1365,9 @@
         <div class="spatial-group property xyz">
             <label>Registration</label>
             <div class="tuple">
-                <div><input type="number" class="x" id="property-reg-x"><label for="property-reg-x">X:</label></div>
-                <div><input type="number" class="y" id="property-reg-y"><label for="property-reg-y">Y:</label></div>
-                <div><input type="number" class="z" id="property-reg-z"><label for="property-reg-z">Z:</label></div>
+                <div><input type="number" class="x" id="property-reg-x" step="0.1"><label for="property-reg-x">X:</label></div>
+                <div><input type="number" class="y" id="property-reg-y" step="0.1"><label for="property-reg-y">Y:</label></div>
+                <div><input type="number" class="z" id="property-reg-z" step="0.1"><label for="property-reg-z">Z:</label></div>
             </div>
         </div>
         <div class="spatial-group property xyz">

From a2953595a5315706554f726f4d5da4a0035eece5 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 10:23:39 +1300
Subject: [PATCH 61/64] Tweak spinbox fields for large values

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index b8c8e8db77..52f194cc20 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -233,12 +233,14 @@ input[type="number"] {
     width: 120px;
 }
 
+input[type=number] {
+    padding-right: 6px;
+}
 input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     opacity: 1.0;
     display: block;
     position: relative;
-    left: 5px;
     width: 10px;
     overflow: hidden;
     color: #afafaf;
@@ -251,12 +253,12 @@ input[type=number]::-webkit-inner-spin-button:after {
     left: -21px;
     font-family:hifi-glyphs;
     text-align: center;
-    font-size: 52px;
+    font-size: 50px;
     line-height: 8px;
 }
 input[type=number]::-webkit-inner-spin-button:before {
     content: "6";
-    top: 6px;
+    top: 5px;
 }
 input[type=number]::-webkit-inner-spin-button:after {
     content: "5";
@@ -271,6 +273,7 @@ input.no-spin::-webkit-inner-spin-button {
     display: none;
     -webkit-appearance: none;
     margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+    padding-right: 12px;
 }
 
 input[type=button] {
@@ -643,7 +646,7 @@ div.refresh input[type="button"] {
     padding-left: 65px;
 }
 .xyz .tuple input {
-    padding-left: 30px;
+    padding-left: 25px;
 }
 .pyr .tuple input {
     padding-left: 45px;

From b900fcbbf0cf62ea5305368db449a1bb5860cd02 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 12:43:30 +1300
Subject: [PATCH 62/64] Back out attempt at fixing OSX styling

---
 examples/html/entityProperties.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 976a65a8db..bd8abb9a91 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -1244,8 +1244,6 @@
                 var div = elDropdowns[i].parentNode;
 
                 var dl = document.createElement("dl");
-                // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
-                dl.style = "font-family:FiraSans-SemiBold;"  // For OSX
                 div.appendChild(dl);
 
                 var dt = document.createElement("dt");
@@ -1260,8 +1258,6 @@
                 dt.appendChild(span);
 
                 var span = document.createElement("span");
-                // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
-                span.style = "font-family:HiFi-Glyphs";  // For OSX
                 span.textContent = "5";  // caratDn
                 dt.appendChild(span);
 
@@ -1273,8 +1269,6 @@
 
                 for (var j = 0; j < options.length; j++) {
                     var li = document.createElement("li");
-                    li.style = "font-family:FiraSans-SemiBold;"  // For OSX
-                    // FIXME: Test with Qt 5.6 and remove li.style setting if no longer needed; style is set in CSS.
                     li.setAttribute("value", options[j].value);
                     li.textContent = options[j].firstChild.textContent;
                     li.addEventListener("click", setDropdownValue);

From 1f0529b5ea77e781fc251f3600f3b52656d147c4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 14:13:38 +1300
Subject: [PATCH 63/64] Miscellaneous fixes

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

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 52f194cc20..e597003ac9 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -243,6 +243,8 @@ input[type=number]::-webkit-inner-spin-button {
     position: relative;
     width: 10px;
     overflow: hidden;
+    font-family: hifi-glyphs;
+    font-size: 50px;
     color: #afafaf;
     cursor: pointer;
     /*background-color: #000000;*/
@@ -251,10 +253,8 @@ input[type=number]::-webkit-inner-spin-button:before,
 input[type=number]::-webkit-inner-spin-button:after {
     position:absolute;
     left: -21px;
-    font-family:hifi-glyphs;
-    text-align: center;
-    font-size: 50px;
     line-height: 8px;
+    text-align: center;
 }
 input[type=number]::-webkit-inner-spin-button:before {
     content: "6";
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 57b96afbfe..0f49d839ab 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -185,6 +185,8 @@
                       elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
                   } else if (selectedEntities.length === 1) {
                       elFooter.firstChild.nodeValue = "1 entity selected";
+                  } else if (entityList.visibleItems.length === 1) {
+                      elFooter.firstChild.nodeValue = "1 entity found";
                   } else {
                       elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
                   }
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index 429ab45d0e..c8dd05ec3f 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -148,13 +148,13 @@
             <div class="number">
                 <label>Major grid size</label>
                 <span>
-                    <input type="number" id="major-spacing" min="1" step="1" />&nbsp;m
+                    <input type="number" id="major-spacing" min="1" step="1" />
                 </span>
             </div>
             <div class="number">
                 <label>Minor grid size</label>
                 <span>
-                    <input type="number" id="minor-spacing" min="0.2" step="0.2" />&nbsp;m
+                    <input type="number" id="minor-spacing" min="0.2" step="0.2" />
                 </span>
             </div>
         </div>
@@ -162,7 +162,7 @@
         <div class="property number">
             <label>Position (Y axis)</label>
             <span>
-                <input type="number" id="horiz-y" step="0.1" />&nbsp;m
+                <input type="number" id="horiz-y" step="0.1" />
             </span>
         </div>
 

From 7d36ec952098fdf14a7e41ba2b2b57e23bee5826 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Fri, 1 Apr 2016 17:30:22 +1300
Subject: [PATCH 64/64] Miscellaneous fixes

---
 examples/html/edit-style.css    | 8 ++++++++
 examples/html/entityList.html   | 8 ++++----
 examples/html/gridControls.html | 6 +++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index e597003ac9..02a3ba3cab 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -85,6 +85,7 @@ table {
 thead {
     font-family: Raleway-Regular;
     font-size: 12px;
+    text-transform: uppercase;
     background-color: #1c1c1c;
     padding: 1px 0px;
     border-bottom: 1px solid #575757;
@@ -504,6 +505,13 @@ 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;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 0f49d839ab..532b18bb97 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -287,7 +287,7 @@
     <div id="entity-list">
         <div id="search-area">
             <input type="text" class="search" id="filter" placeholder="Filter" />
-            <span id="radius-and-unit"><input type="number" id="radius" value="100" />&nbsp;m</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">
             <table id="entity-table">
@@ -298,9 +298,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" 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>
                     </tr>
                 </thead>
                 <tbody class="list" id="entity-table-body">
diff --git a/examples/html/gridControls.html b/examples/html/gridControls.html
index c8dd05ec3f..7b1be72bdc 100644
--- a/examples/html/gridControls.html
+++ b/examples/html/gridControls.html
@@ -148,13 +148,13 @@
             <div class="number">
                 <label>Major grid size</label>
                 <span>
-                    <input type="number" id="major-spacing" min="1" step="1" />
+                    <input type="number" id="major-spacing" min="1" step="1" /><span class="unit">m</span>
                 </span>
             </div>
             <div class="number">
                 <label>Minor grid size</label>
                 <span>
-                    <input type="number" id="minor-spacing" min="0.2" step="0.2" />
+                    <input type="number" id="minor-spacing" min="0.2" step="0.2" /><span class="unit">m</span>
                 </span>
             </div>
         </div>
@@ -162,7 +162,7 @@
         <div class="property number">
             <label>Position (Y axis)</label>
             <span>
-                <input type="number" id="horiz-y" step="0.1" />
+                <input type="number" id="horiz-y" step="0.1" /><span class="unit">m</span>
             </span>
         </div>