Fix fullscreen mode for HTML/CSS editors, highlight dividing comments for parts of the sample

ui/src/app/components/widget/action/custom-action-pretty-editor.directive.js

@@ -73,8 +73,11 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
         scope.removeResource = removeResource;
         scope.toggleFullscreen = toggleFullscreen;
 
-        var sampleJsFunction = "/* There are three examples: for delete, edit and add entity */\n" +
+        var sampleJsFunction = "/*=======================================================================*/\n" +
-            "/* Delete entity example */\n" +
+            "/*=====  There are three examples: for delete, edit and add entity  =====*/\n" +
+            "/*=======================================================================*/\n" +
+            "/*=======================  Delete entity example  =======================*/\n" +
+            "/*=======================================================================*/\n" +
             "//\n" +
             "//var $injector = widgetContext.$scope.$injector;\n" +
             "//var $mdDialog = $injector.get('$mdDialog'),\n" +
@@ -155,7 +158,9 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             "//    $mdDialog.show(alert);\n" +
             "//}\n" +
             "//\n" +
-            "/* Edit entity example */\n" +
+            "/*=======================================================================*/\n" +
+            "/*========================  Edit entity example  ========================*/\n" +
+            "/*=======================================================================*/\n" +
             "//\n" +
             "//var $injector = widgetContext.$scope.$injector;\n" +
             "//var $mdDialog = $injector.get('$mdDialog'),\n" +
@@ -340,7 +345,9 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             "//    }\n" +
             "//}\n" +
             "//\n" +
-            "/* Add entity example */\n" +
+            "/*========================================================================*/\n" +
+            "/*=========================  Add entity example  =========================*/\n" +
+            "/*========================================================================*/\n" +
             "//\n" +
             "//var $injector = widgetContext.$scope.$injector;\n" +
             "//var $mdDialog = $injector.get('$mdDialog'),\n" +
@@ -462,12 +469,13 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             "//            $rootScope.$broadcast('entityAliasesChanged', aliasIds);\n" +
             "//        });\n" +
             "//    }\n" +
-            "//}\n" +
+            "//}\n";
-            "\n" +
-            "\n";
 
-        var sampleHtmlTemplate = '<!-- There are two example templates: for edit and add entity -->\n' +
+        var sampleHtmlTemplate = '<!--=======================================================================-->\n' +
-            '<!-- Edit entity example -->\n' +
+            '<!--=====  There are two example templates: for edit and add entity   =====-->\n' +
+            '<!--=======================================================================-->\n' +
+            '<!--========================  Edit entity example  ========================-->\n' +
+            '<!--=======================================================================-->\n' +
             '<!-- -->\n' +
             '<!--<md-dialog aria-label="Edit entity">-->\n' +
             '<!--    <form name="editEntityForm" class="edit-entity-form" ng-submit="vm.save()">-->\n' +
@@ -634,7 +642,9 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             '<!--    </form>-->\n' +
             '<!--</md-dialog>-->\n' +
             '<!---->\n' +
-            '<!-- Add entity example -->\n' +
+            '<!--========================================================================-->\n' +
+            '<!--=========================  Add entity example  =========================-->\n' +
+            '<!--========================================================================-->\n' +
             '<!---->\n' +
             '<!--<md-dialog aria-label="Add entity">-->\n' +
             '<!--    <form name="addEntityForm" class="add-entity-form" ng-submit="vm.save()">-->\n' +
@@ -766,8 +776,11 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             '<!--    </form>-->\n' +
             '<!--</md-dialog>-->\n';
 
-        var sampleCss = '/* There are two examples: for edit and add entity */\n' +
+        var sampleCss = '/*=======================================================================*/\n' +
-            '/* Edit entity example */\n' +
+            '/*==========  There are two examples: for edit and add entity  ==========*/\n' +
+            '/*=======================================================================*/\n' +
+            '/*========================  Edit entity example  ========================*/\n' +
+            '/*=======================================================================*/\n' +
             '/*\n' +
             '.edit-entity-form md-input-container {\n' +
             '    padding-right: 10px;\n' +
@@ -825,7 +838,9 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             '    display: none;\n' +
             '} \n' +
             '*/\n' +
-            '/* Add entity example */\n' +
+            '/*========================================================================*/\n' +
+            '/*=========================  Add entity example  =========================*/\n' +
+            '/*========================================================================*/\n' +
             '/*\n' +
             '.add-entity-form md-input-container {\n' +
             '    padding-right: 10px;\n' +
@@ -878,9 +893,7 @@ function CustomActionPrettyEditor($compile, $templateCache, $window, $timeout) {
             '.relations-list .body .md-button {\n' +
             '    margin: 0;\n' +
             '}\n' +
-            '*/\n' +
+            '*/\n';
-            '\n' +
-            '\n';
 
         scope.$watch('action', function () {
             ngModelCtrl.$setViewValue(scope.action);

ui/src/app/components/widget/action/custom-action-pretty-editor.scss

@@ -38,14 +38,6 @@
     }
   }
 
-  .html-panel,
-  .css-panel {
-    width: 100%;
-    min-width: 200px;
-    height: 100%;
-    min-height: 200px;
-  }
-
   .tb-split {
     box-sizing: border-box;
     overflow-x: hidden;
@@ -94,3 +86,13 @@
     }
   }
 }
+
+.tb-custom-action-editor-container {
+  .html-panel,
+  .css-panel {
+    width: 100%;
+    min-width: 200px;
+    height: 100%;
+    min-height: 200px;
+  }
+}