From a65ca7cb1efdf49d1e2842329fe2b04fd70683fd Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 8 Jan 2016 16:47:11 -0800
Subject: [PATCH] [Frontend] Refactor Inspector to use s-status-editing

open #468
Removed ng-show="editMode" in object-inspector.html;
Refactored CSS as required in _inspector.scss;
Added opacity transition to splitter-inspect-panel and
split-pane-component pane bottom, but not working as desired currently:
entire inspector seems to be destroyed and recreated when switching into
and out of edit mode;
Moved <style> def for .location-item in object-inspector.html into .scss;
---
 .../commonUI/general/res/sass/_inspector.scss | 18 +++-
 .../res/templates/object-inspector.html       |  9 +-
 .../espresso/res/css/theme-espresso.css       | 83 +++++++++++++------
 .../themes/snow/res/css/theme-snow.css        | 83 +++++++++++++------
 4 files changed, 133 insertions(+), 60 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss
index dbbd7c64e3..b33f02ee37 100644
--- a/platform/commonUI/general/res/sass/_inspector.scss
+++ b/platform/commonUI/general/res/sass/_inspector.scss
@@ -97,7 +97,6 @@
     }
 
     .inspector-location {
-        //line-height: 180%;
         .location-item {
             cursor: pointer;
             display: inline-block;
@@ -142,3 +141,20 @@
     }
 }
 
+.l-inspect {
+    .splitter-inspect-panel,
+    .split-pane-component.pane.bottom {
+        @include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.s-status-editing .l-inspect {
+    .location-item { pointer-events: none; }
+    .splitter-inspect-panel,
+    .split-pane-component.pane.bottom {
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html
index 7dd8d6a5b3..5f3e4d522e 100644
--- a/platform/commonUI/general/res/templates/object-inspector.html
+++ b/platform/commonUI/general/res/templates/object-inspector.html
@@ -19,11 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<style>
-    .s-status-editing .location-item{
-        pointer-events: none;
-    }
-</style>
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
     <div ng-controller="PaneController as modelPaneEdit">
         <mct-split-pane class='abs contents split-layout' anchor='bottom'>
@@ -69,8 +64,8 @@
                     </ul>
                 </div><!--/ holder-inspector -->
             </div><!--/ split-pane-component -->
-            <mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
-            <div class="split-pane-component pane bottom" ng-show="editMode">
+            <mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
+            <div class="split-pane-component pane bottom">
                 <div class="abs holder holder-elements l-flex-col">
                     <em class="flex-elem">Elements</em>
                     <mct-representation
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 38b0f92cc5..6702917341 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -1551,20 +1551,20 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     .l-inspect .inspector-properties .value {
       color: #bfbfbf;
       word-break: break-all; }
-  /* line 101, ../../../../general/res/sass/_inspector.scss */
+  /* line 100, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location .location-item {
     cursor: pointer;
     display: inline-block;
     position: relative;
     padding: 2px 4px; }
-    /* line 106, ../../../../general/res/sass/_inspector.scss */
+    /* line 105, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item:hover {
       background: rgba(153, 153, 153, 0.1);
       color: #cccccc; }
-      /* line 109, ../../../../general/res/sass/_inspector.scss */
+      /* line 108, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
         color: #33ccff; }
-  /* line 114, ../../../../general/res/sass/_inspector.scss */
+  /* line 113, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
     color: #737373;
     content: '\3e';
@@ -1574,20 +1574,51 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: inherit;
     margin-left: 3px;
     width: 4px; }
-  /* line 126, ../../../../general/res/sass/_inspector.scss */
+  /* line 125, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .holder-elements .current-elements {
     position: relative; }
-    /* line 129, ../../../../general/res/sass/_inspector.scss */
+    /* line 128, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .holder-elements .current-elements .tree-item .t-object-label {
       left: 0; }
-      /* line 132, ../../../../general/res/sass/_inspector.scss */
+      /* line 131, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-item-icon {
         font-size: 1em;
         width: 1em; }
-      /* line 136, ../../../../general/res/sass/_inspector.scss */
+      /* line 135, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-title-label {
         left: 25px; }
 
+/* line 145, ../../../../general/res/sass/_inspector.scss */
+.l-inspect .splitter-inspect-panel,
+.l-inspect .split-pane-component.pane.bottom {
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -moz-transition-duration: 250ms;
+  -o-transition-duration: 250ms;
+  -webkit-transition-duration: 250ms;
+  transition-duration: 250ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  -moz-transition-delay: 0;
+  -o-transition-delay: 0;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+  opacity: 0;
+  pointer-events: none; }
+
+/* line 154, ../../../../general/res/sass/_inspector.scss */
+.s-status-editing .l-inspect .location-item {
+  pointer-events: none; }
+/* line 155, ../../../../general/res/sass/_inspector.scss */
+.s-status-editing .l-inspect .splitter-inspect-panel,
+.s-status-editing .l-inspect .split-pane-component.pane.bottom {
+  opacity: 1;
+  pointer-events: inherit; }
+
 /********************************* CONTROLS */
 /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
 .l-breadcrumb {
@@ -4936,20 +4967,20 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 10px; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back:not(.s-status-editing) {
       margin-right: 10px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .tree-holder,
 .pane-tree-hidden .splitter-treeview,
 .pane-tree-hidden .holder-treeview-elements {
   opacity: 0; }
 
-/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 310, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .tree-holder,
 .pane-tree-showing .splitter-treeview {
   -moz-transition-property: opacity;
@@ -4969,7 +5000,7 @@ span.req {
   -webkit-transition-delay: 250ms;
   transition-delay: 250ms;
   opacity: 1; }
-/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .holder-treeview-elements {
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
@@ -4988,7 +5019,7 @@ span.req {
   -webkit-transition-delay: 200ms;
   transition-delay: 200ms; }
 
-/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .l-inspect,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
   -moz-transition-property: opacity;
@@ -5009,41 +5040,41 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .l-inspect,
 .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
   opacity: 0; }
 
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .holder-all {
     min-width: 600px; }
 
-  /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.treeview.left {
     min-width: 150px;
     max-width: 35%;
     width: 25%; }
-  /* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.t-inspect.right {
     min-width: 200px;
     max-width: 35%;
     width: 20%;
     z-index: 3; }
 
-  /* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     padding-right: 5px; }
 
-  /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-tree-hidden .pane.right.primary-pane {
     left: 22px !important; }
 
-  /* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 366, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-inspect-hidden .l-object-and-inspector .pane.left {
     right: 22px !important; }
 
-  /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
@@ -5062,10 +5093,10 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0; }
 
-  /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.primary-pane .object-browse-bar {
     min-width: 200px; } }
-/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
 .s-status-editing .l-object-wrapper {
   -moz-animation-name: pulseBorder;
   -webkit-animation-name: pulseBorder;
@@ -5107,7 +5138,7 @@ span.req {
     border-color: rgba(88, 122, 181, 0.3); }
   100% {
     border-color: #587ab5; } }
-  /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
   .s-status-editing .l-object-wrapper .l-object-wrapper-inner {
     overflow: hidden;
     position: absolute;
@@ -5117,7 +5148,7 @@ span.req {
     left: 3px;
     width: auto;
     height: auto; }
-  /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
   .s-status-editing .l-object-wrapper .l-edit-controls {
     height: 30px;
     margin-bottom: 5px;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 9579b55486..ae467984fb 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -1532,20 +1532,20 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     .l-inspect .inspector-properties .value {
       color: #404040;
       word-break: break-all; }
-  /* line 101, ../../../../general/res/sass/_inspector.scss */
+  /* line 100, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location .location-item {
     cursor: pointer;
     display: inline-block;
     position: relative;
     padding: 2px 4px; }
-    /* line 106, ../../../../general/res/sass/_inspector.scss */
+    /* line 105, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .inspector-location .location-item:hover {
       background: rgba(102, 102, 102, 0.1);
       color: #333333; }
-      /* line 109, ../../../../general/res/sass/_inspector.scss */
+      /* line 108, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
         color: #0099cc; }
-  /* line 114, ../../../../general/res/sass/_inspector.scss */
+  /* line 113, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
     color: #8c8c8c;
     content: '\3e';
@@ -1555,20 +1555,51 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
     line-height: inherit;
     margin-left: 3px;
     width: 4px; }
-  /* line 126, ../../../../general/res/sass/_inspector.scss */
+  /* line 125, ../../../../general/res/sass/_inspector.scss */
   .l-inspect .holder-elements .current-elements {
     position: relative; }
-    /* line 129, ../../../../general/res/sass/_inspector.scss */
+    /* line 128, ../../../../general/res/sass/_inspector.scss */
     .l-inspect .holder-elements .current-elements .tree-item .t-object-label {
       left: 0; }
-      /* line 132, ../../../../general/res/sass/_inspector.scss */
+      /* line 131, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-item-icon {
         font-size: 1em;
         width: 1em; }
-      /* line 136, ../../../../general/res/sass/_inspector.scss */
+      /* line 135, ../../../../general/res/sass/_inspector.scss */
       .l-inspect .holder-elements .current-elements .tree-item .t-object-label .t-title-label {
         left: 25px; }
 
+/* line 145, ../../../../general/res/sass/_inspector.scss */
+.l-inspect .splitter-inspect-panel,
+.l-inspect .split-pane-component.pane.bottom {
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -moz-transition-duration: 250ms;
+  -o-transition-duration: 250ms;
+  -webkit-transition-duration: 250ms;
+  transition-duration: 250ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  -moz-transition-delay: 0;
+  -o-transition-delay: 0;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+  opacity: 0;
+  pointer-events: none; }
+
+/* line 154, ../../../../general/res/sass/_inspector.scss */
+.s-status-editing .l-inspect .location-item {
+  pointer-events: none; }
+/* line 155, ../../../../general/res/sass/_inspector.scss */
+.s-status-editing .l-inspect .splitter-inspect-panel,
+.s-status-editing .l-inspect .split-pane-component.pane.bottom {
+  opacity: 1;
+  pointer-events: inherit; }
+
 /********************************* CONTROLS */
 /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
 .l-breadcrumb {
@@ -4858,20 +4889,20 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 10px; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back:not(.s-status-editing) {
       margin-right: 10px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .tree-holder,
 .pane-tree-hidden .splitter-treeview,
 .pane-tree-hidden .holder-treeview-elements {
   opacity: 0; }
 
-/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 310, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .tree-holder,
 .pane-tree-showing .splitter-treeview {
   -moz-transition-property: opacity;
@@ -4891,7 +4922,7 @@ span.req {
   -webkit-transition-delay: 250ms;
   transition-delay: 250ms;
   opacity: 1; }
-/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .holder-treeview-elements {
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
@@ -4910,7 +4941,7 @@ span.req {
   -webkit-transition-delay: 200ms;
   transition-delay: 200ms; }
 
-/* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .l-inspect,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
   -moz-transition-property: opacity;
@@ -4931,41 +4962,41 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .l-inspect,
 .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
   opacity: 0; }
 
 @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) {
-  /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .holder-all {
     min-width: 600px; }
 
-  /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.treeview.left {
     min-width: 150px;
     max-width: 35%;
     width: 25%; }
-  /* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 351, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.t-inspect.right {
     min-width: 200px;
     max-width: 35%;
     width: 20%;
     z-index: 3; }
 
-  /* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     padding-right: 5px; }
 
-  /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-tree-hidden .pane.right.primary-pane {
     left: 22px !important; }
 
-  /* line 367, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 366, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-inspect-hidden .l-object-and-inspector .pane.left {
     right: 22px !important; }
 
-  /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
@@ -4984,10 +5015,10 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0; }
 
-  /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.primary-pane .object-browse-bar {
     min-width: 200px; } }
-/* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
 .s-status-editing .l-object-wrapper {
   -moz-animation-name: pulseBorder;
   -webkit-animation-name: pulseBorder;
@@ -5029,7 +5060,7 @@ span.req {
     border-color: rgba(75, 177, 199, 0.3); }
   100% {
     border-color: #4bb1c7; } }
-  /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 384, ../../../../general/res/sass/user-environ/_layout.scss */
   .s-status-editing .l-object-wrapper .l-object-wrapper-inner {
     overflow: hidden;
     position: absolute;
@@ -5039,7 +5070,7 @@ span.req {
     left: 3px;
     width: auto;
     height: auto; }
-  /* line 388, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 387, ../../../../general/res/sass/user-environ/_layout.scss */
   .s-status-editing .l-object-wrapper .l-edit-controls {
     height: 30px;
     margin-bottom: 5px;