Restyle entity property textarea fields

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;

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>