From dc4defd51222d0d04cd42a499173c6e1779e1ab7 Mon Sep 17 00:00:00 2001
From: Heiko Thiel <heiko.thiel@hpi.de>
Date: Mon, 3 Sep 2018 00:43:24 +0200
Subject: [PATCH 1/2] Cleanup section implementation in CesiumInspector *
 Headers are now using h3 elements instead of being just text in a div * Full
 header is now clickable to collapse/expand section instead of just +/- * +/-
 symbols before section title are now added via css instead of js, so they can
 be replaced by designer * Title and content of a section are now grouped
 together into a container

---
 .../CesiumInspector/CesiumInspector.css       | 23 +++++--
 .../CesiumInspector/CesiumInspector.js        | 62 +++++++------------
 .../CesiumInspectorViewModel.js               | 27 --------
 3 files changed, 39 insertions(+), 73 deletions(-)

diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.css b/Source/Widgets/CesiumInspector/CesiumInspector.css
index 89b8b66ee65e..9ed1a45ea78d 100644
--- a/Source/Widgets/CesiumInspector/CesiumInspector.css
+++ b/Source/Widgets/CesiumInspector/CesiumInspector.css
@@ -38,10 +38,12 @@
     height: 17px;
 }
 
+.cesium-cesiumInspector-sectionContent,
 .cesium-cesiumInspector-show {
     max-height: 500px;
 }
 
+.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent,
 .cesium-cesiumInspector-hide {
     max-height: 0;
     padding: 0 !important;
@@ -92,6 +94,9 @@
 
 .cesium-cesiumInspector-sectionHeader {
     font-weight: bold;
+    font-size: 10pt;
+    margin: 0;
+    cursor: pointer;
 }
 
 .cesium-cesiumInspector-pickSection {
@@ -101,16 +106,11 @@
     margin-bottom: 5px;
 }
 
-.cesium-cesiumInspector-section {
+.cesium-cesiumInspector-sectionContent {
     margin-bottom: 10px;
     transition: max-height 0.25s;
 }
 
-.cesium-cesiumInspector-toggleSwitch {
-    padding: 3px;
-    cursor: pointer;
-}
-
 .cesium-cesiumInspector-tileText {
     padding-bottom: 10px;
     border-bottom: 1px solid #aaa;
@@ -119,3 +119,14 @@
 .cesium-cesiumInspector-relativeText {
     padding-top: 10px;
 }
+
+.cesium-cesiumInspector-sectionHeader::before {
+    margin-right: 5px;
+    content: '+';
+    width: 1ch;
+    display: inline-block;
+}
+
+.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before {
+    content: '-';
+}
\ No newline at end of file
diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.js b/Source/Widgets/CesiumInspector/CesiumInspector.js
index 8072c3696e2a..73a2409e1b0b 100644
--- a/Source/Widgets/CesiumInspector/CesiumInspector.js
+++ b/Source/Widgets/CesiumInspector/CesiumInspector.js
@@ -52,6 +52,24 @@ define([
             return checkboxContainer;
         }
 
+        function addSection(headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) {
+            var section = document.createElement('div');
+            section.className = 'cesium-cesiumInspector-section';
+            section.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-section-collapsed": !' + sectionVisibleDataBinding + ' }');
+            panel.appendChild(section);
+
+            var sectionHeader = document.createElement('h3');
+            sectionHeader.className = 'cesium-cesiumInspector-sectionHeader';
+            sectionHeader.appendChild(document.createTextNode(headerText));
+            sectionHeader.setAttribute('data-bind', 'click: ' + sectionVisibilityToogleClickEvent);
+            section.appendChild(sectionHeader);
+
+            var sectionContent = document.createElement('div');
+            sectionContent.className = 'cesium-cesiumInspector-sectionContent';
+            section.appendChild(sectionContent);
+            return sectionContent;
+        }
+
         var performanceContainer = document.createElement('div');
 
         var viewModel = new CesiumInspectorViewModel(scene, performanceContainer);
@@ -75,19 +93,7 @@ define([
         element.appendChild(panel);
 
         // General
-        var general = document.createElement('div');
-        general.className = 'cesium-cesiumInspector-sectionHeader';
-        var plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: toggleGeneral, text: generalSwitchText');
-        general.appendChild(plus);
-        general.appendChild(document.createTextNode('General'));
-        panel.appendChild(general);
-
-        var generalSection = document.createElement('div');
-        generalSection.className = 'cesium-cesiumInspector-section';
-        generalSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : generalVisible, "cesium-cesiumInspector-hide" : !generalVisible}');
-        panel.appendChild(generalSection);
+        var generalSection = addSection('General', 'generalVisible', 'toggleGeneral');
 
         var debugShowFrustums = createCheckBox('checked: frustums', 'Show Frustums');
         var frustumStatistics = document.createElement('div');
@@ -142,22 +148,10 @@ define([
         depthFrustum.appendChild(gPlusButton);
 
         // Primitives
-        var prim = document.createElement('div');
-        prim.className = 'cesium-cesiumInspector-sectionHeader';
-        plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: togglePrimitives, text: primitivesSwitchText');
-        prim.appendChild(plus);
-        prim.appendChild(document.createTextNode('Primitives'));
-        panel.appendChild(prim);
-
-        var primitivesSection = document.createElement('div');
-        primitivesSection.className = 'cesium-cesiumInspector-section';
-        primitivesSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : primitivesVisible, "cesium-cesiumInspector-hide" : !primitivesVisible}');
-        panel.appendChild(primitivesSection);
+        var primSection = addSection('Primitives', 'primitivesVisible', 'togglePrimitives');
         var pickPrimRequired = document.createElement('div');
         pickPrimRequired.className = 'cesium-cesiumInspector-pickSection';
-        primitivesSection.appendChild(pickPrimRequired);
+        primSection.appendChild(pickPrimRequired);
 
         var pickPrimitiveButton = document.createElement('input');
         pickPrimitiveButton.type = 'button';
@@ -176,19 +170,7 @@ define([
         pickPrimRequired.appendChild(this._primitiveOnly);
 
         // Terrain
-        var terrain = document.createElement('div');
-        terrain.className = 'cesium-cesiumInspector-sectionHeader';
-        plus = document.createElement('span');
-        plus.className = 'cesium-cesiumInspector-toggleSwitch';
-        plus.setAttribute('data-bind', 'click: toggleTerrain, text: terrainSwitchText');
-        terrain.appendChild(plus);
-        terrain.appendChild(document.createTextNode('Terrain'));
-        panel.appendChild(terrain);
-
-        var terrainSection = document.createElement('div');
-        terrainSection.className = 'cesium-cesiumInspector-section';
-        terrainSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : terrainVisible, "cesium-cesiumInspector-hide" :  !terrainVisible}');
-        panel.appendChild(terrainSection);
+        var terrainSection = addSection('Terrain', 'terrainVisible', 'toggleTerrain');
         var pickTileRequired = document.createElement('div');
         pickTileRequired.className = 'cesium-cesiumInspector-pickSection';
         terrainSection.appendChild(pickTileRequired);
diff --git a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js
index 20c1d23a79a7..61b4cf816392 100644
--- a/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js
+++ b/Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js
@@ -280,33 +280,6 @@ define([
          */
         this.depthFrustumText = '';
 
-        /**
-         * Gets the text on the general section expand button.  This property is computed.
-         * @type {String}
-         * @default '-'
-         */
-        this.generalSwitchText = knockout.pureComputed(function() {
-            return that.generalVisible ? '-' : '+';
-        });
-
-        /**
-         * Gets the text on the primitives section expand button.  This property is computed.
-         * @type {String}
-         * @default '+'
-         */
-        this.primitivesSwitchText = knockout.pureComputed(function() {
-            return that.primitivesVisible ? '-' : '+';
-        });
-
-        /**
-         * Gets the text on the terrain section expand button.  This property is computed.
-         * @type {String}
-         * @default '+'
-         */
-        this.terrainSwitchText = knockout.pureComputed(function() {
-            return that.terrainVisible ? '-' : '+';
-        });
-
         knockout.track(this, [
             'frustums',
             'frustumPlanes',

From 966ce165d7d62a9e9a939c82c612ad1aee9ae1a3 Mon Sep 17 00:00:00 2001
From: Heiko Thiel <heiko.thiel@hpi.de>
Date: Mon, 3 Sep 2018 21:23:53 +0200
Subject: [PATCH 2/2] Fix eslint hint

---
 Source/Widgets/CesiumInspector/CesiumInspector.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.js b/Source/Widgets/CesiumInspector/CesiumInspector.js
index 73a2409e1b0b..013acb92c4a0 100644
--- a/Source/Widgets/CesiumInspector/CesiumInspector.js
+++ b/Source/Widgets/CesiumInspector/CesiumInspector.js
@@ -52,7 +52,7 @@ define([
             return checkboxContainer;
         }
 
-        function addSection(headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) {
+        function addSection(panel, headerText, sectionVisibleDataBinding, sectionVisibilityToogleClickEvent) {
             var section = document.createElement('div');
             section.className = 'cesium-cesiumInspector-section';
             section.setAttribute('data-bind', 'css: { "cesium-cesiumInspector-section-collapsed": !' + sectionVisibleDataBinding + ' }');
@@ -93,7 +93,7 @@ define([
         element.appendChild(panel);
 
         // General
-        var generalSection = addSection('General', 'generalVisible', 'toggleGeneral');
+        var generalSection = addSection(panel, 'General', 'generalVisible', 'toggleGeneral');
 
         var debugShowFrustums = createCheckBox('checked: frustums', 'Show Frustums');
         var frustumStatistics = document.createElement('div');
@@ -148,7 +148,7 @@ define([
         depthFrustum.appendChild(gPlusButton);
 
         // Primitives
-        var primSection = addSection('Primitives', 'primitivesVisible', 'togglePrimitives');
+        var primSection = addSection(panel, 'Primitives', 'primitivesVisible', 'togglePrimitives');
         var pickPrimRequired = document.createElement('div');
         pickPrimRequired.className = 'cesium-cesiumInspector-pickSection';
         primSection.appendChild(pickPrimRequired);
@@ -170,7 +170,7 @@ define([
         pickPrimRequired.appendChild(this._primitiveOnly);
 
         // Terrain
-        var terrainSection = addSection('Terrain', 'terrainVisible', 'toggleTerrain');
+        var terrainSection = addSection(panel, 'Terrain', 'terrainVisible', 'toggleTerrain');
         var pickTileRequired = document.createElement('div');
         pickTileRequired.className = 'cesium-cesiumInspector-pickSection';
         terrainSection.appendChild(pickTileRequired);