Issue #1831894 by dead_arm, idebr, technicka, dawehner, Bojhan, damiankloip: Users miss "save" button and can't distinguish "editable" and "preview" areas

core/modules/views_ui/css/views_ui.admin.css

@@ -101,10 +101,6 @@
  * The attachment details section, its tabs for each section and the buttons
  * to add a new section
  */
-
-.form-edit .form-actions {
-}
-
 .views-displays {
   clear: both;
 }

core/modules/views_ui/css/views_ui.admin.theme.css

@@ -466,6 +466,15 @@ td.group-title {
   max-width: 180px;
 }
 
+.form-edit .form-actions {
+  background-color: #e1e2dc;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  margin-top: 0;
+  padding: 8px 12px;
+}
+
 /* @end */
 
 /* @group Attachment details tabs
@@ -659,12 +668,12 @@ td.group-title {
 
 #views-ui-preview-form .arguments-preview,
 #views-ui-preview-form .form-type-textfield {
-  margin-left: 14px; /* LTR */
+  margin-left: 10px; /* LTR */
 }
 [dir="rtl"] #views-ui-preview-form .arguments-preview,
 [dir="rtl"] #views-ui-preview-form .form-type-textfield {
   margin-left: 0;
-  margin-right: 14px;
+  margin-right: 10px;
 }
 
 #views-ui-preview-form .form-type-textfield label {
@@ -1011,16 +1020,28 @@ td.group-title {
 
 #views-preview-wrapper {
   border: 1px solid #ccc;
-  padding-bottom: 12px;
-  padding-top: 12px;
 }
 
-#views-ui-preview-form {
-  margin: 12px;
+.view-preview-form {
+  position: relative;
+}
+.view-preview-form__title {
+  background-color: #e1e2dc;
+  border-bottom: 1px solid #ccc;
+  margin-top: 0;
+  padding: 8px 12px;
+}
+.view-preview-form .form-item-live-preview {
+  position: absolute;
+  right: 12px;
+  top: 3px;
+}
+[dir="rtl"] .view-preview-form .form-item-live-preview {
+  right: auto;
+  left: 12px;
 }
-
 #views-live-preview {
-  margin: 0 12px;
+  padding: 12px;
 }
 
 #views-live-preview .views-query-info {

core/modules/views_ui/src/ViewEditForm.php

@@ -218,7 +218,6 @@ class ViewEditForm extends ViewFormBase {
       $form['ajax-area']['ajax-body'] = array(
         '#type' => 'container',
         '#id' => 'views-ajax-body',
-        '#children' => $view->getDefaultAJAXMessage(),
       );
     }
 

core/modules/views_ui/src/ViewPreviewForm.php

@@ -35,6 +35,12 @@ class ViewPreviewForm extends ViewFormBase {
 
     $form['controls']['#attributes'] = array('class' => array('clearfix'));
 
+    $form['controls']['title'] = array(
+      '#prefix' => '<h2 class="view-preview-form__title">',
+      '#markup' => $this->t('Preview'),
+      '#suffix' => '</h2>',
+    );
+
     // Add a checkbox controlling whether or not this display auto-previews.
     $form['controls']['live_preview'] = array(
       '#type' => 'checkbox',