Issue #2080217 by Wim Leers, tkoleary, Bojhan: Polish entity toolbar visually.

core/misc/icons/000000/ex.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#000000" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>

core/misc/icons/5181c6/pencil.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#5181C6" d="M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z"/><rect fill="#5181C6" x="5.129" y="3.8" transform="matrix(-.707 -.707 .707 -.707 6.189 20.064)" width="4.243" height="9.899"/><path fill="#5181C6" d="M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z"/></g></svg>

core/misc/icons/787878/ex.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#787878" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>

core/misc/icons/bebebe/ex.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#bebebe" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>

core/misc/icons/ffffff/ex.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#ffffff" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>

core/modules/ckeditor/css/ckeditor.css

@@ -23,3 +23,17 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+/**
+ * Adjust the style of in-place editing CKEditor instances.
+ */
+.edit-toolgroup.wysiwyg-main .cke_chrome,
+.edit-toolgroup.wysiwyg-main .cke_inner,
+.edit-toolgroup.wysiwyg-main .cke_top {
+  background: transparent;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+  box-shadow: none;
+}

core/modules/edit/css/edit.icons.css

@@ -46,20 +46,28 @@
 .edit button.icon {
   font-size: 1em;
 }
+.edit .icon-pencil {
+  margin-left: .5em;
+  padding-left: 1.5em;
+}
 
 /**
  * Images.
  */
 .edit .icon-close:before {
-  background-image: url("../images/icon-close.png");
-  background-position: center top;
+  background-image: url('../../../misc/icons/787878/ex.svg');
   height: 12px;
   top: 10px;
 }
-.edit .icon-close:hover:before {
-  background-image: url("../images/icon-close.png");
-  background-position: center bottom;
+.edit .icon-close:hover:before,
+.edit .icon-close:active:before {
+  background-image: url('../../../misc/icons/000000/ex.svg');
 }
 .edit .icon-throbber:before {
   background-image: url("../images/icon-throbber.gif");
 }
+.edit .icon-pencil:before {
+  background-image: url('../../../misc/icons/5181c6/pencil.svg');
+  background-position: left center;
+  background-size: 1.3em;
+}

core/modules/edit/css/edit.module.css

@@ -11,6 +11,7 @@
 .edit-editable {
   z-index: 98;
   position: relative;
+  cursor: pointer;
 }
 .edit-editable:focus {
   outline: none;

core/modules/edit/css/edit.theme.css

@@ -13,7 +13,7 @@
  */
 .edit-field.edit-editable,
 .edit-field .edit-editable {
-  box-shadow: 0 0 0 2px #4d9de9;
+  box-shadow: 0 0 0 2px #74b7ff;
 }
 
 /**
@@ -22,16 +22,19 @@
 .edit-field.edit-highlighted,
 .edit-form.edit-highlighted,
 .edit-field .edit-highlighted {
-  box-shadow: 0 0 0 2px #0199ff, 0 1px 0 3px rgba(153, 153, 153, .5);
+  box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
 }
 .edit-field.edit-changed,
 .edit-form.edit-changed,
 .edit-field .edit-changed {
-  box-shadow: 0 0 0px 2px orange, 0px 1px 0px 3px rgba(153, 153, 153, .5);
+  box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
 }
 .edit-editing.edit-validation-error,
 .edit-form.edit-validation-error {
-  box-shadow: 0 0 1px 2px red, 0 0 3px 5px rgba(153, 153, 153, .5);
+  box-shadow: 0 0 0px 1px #ee8b74, 0 0 0 2px #fa2209;
+}
+.edit-editing.edit-editor-is-popup {
+  box-shadow: none;
 }
 .edit-form .form-item .error {
   border: 1px solid #eea0a0;
@@ -102,18 +105,20 @@
  */
 .edit-toolbar-container {
   font-family: 'Source Sans Pro','Lucida Grande', sans-serif;
-  font-size: 1.1em;
   padding-bottom: 7px;
   padding-top: 7px;
   -webkit-transition: all 1s;
   transition: all 1s;
 }
 .edit-toolbar-container > .edit-toolbar-content {
-  background-color: #45545E;
+  background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
+  background-image:    -moz-linear-gradient(top, #fff, #e4e4e4);
+  background-image:      -o-linear-gradient(top, #fff, #e4e4e4);
+  background-image:   linear-gradient(to bottom, #fff, #e4e4e4);
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  color: white;
+  color: black;
   padding: 0.1667em;
   position: relative;
   -webkit-user-select: none;
@@ -123,9 +128,9 @@
   z-index: 2;
 }
 .edit-toolbar-container > .edit-toolbar-pointer {
-  background-color: #45545E;
+  background-color: #e4e4e4;
   bottom: 2px;
-  box-shadow: 0px 0px 0 4px rgba(150, 150, 150, 0.5);
+  box-shadow: 0 0 0 1px #818181, 0px 0px 0 4px rgba(150, 150, 150, 0.5);
   display: block;
   height: 16px;
   left: 18px; /* LTR */
@@ -146,7 +151,7 @@
 }
 .edit-toolbar-container > .edit-toolbar-lining {
   bottom: 7px;
-  box-shadow: 0px 1px 0px 3px rgba(150, 150, 150, 0.5);
+  box-shadow: 0 0 0 1px #818181, 0px 3px 0px 1px rgba(150, 150, 150, 0.5);
   display: block;
   left: 0;
   position: absolute;
@@ -156,11 +161,16 @@
 }
 
 .edit-toolbar-label {
+  font-style: italic;
   overflow: hidden;
-  padding: 0.333em 0.5em;
+  padding: 0.333em 0.4em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.edit-toolbar-label .field:after {
+  content: ' → ';
+}
+
 /* The toolbar; these are not necessarily visible. */
 .edit-toolbar {
   font-family: 'Droid sans', 'Lucida Grande', sans-serif;
@@ -202,9 +212,9 @@
   display: inline-block;
   margin: 0;
   opacity: 1;
-  padding: 0.4545em;
-  -webkit-transition: all .1s ease;
-  transition: all .1s ease;
+  padding: 0.345em;
+  -webkit-transition: opacity .1s ease;
+  transition: opacity .1s ease;
 }
 .edit-button[aria-hidden="true"] {
   visibility: hidden;
@@ -228,23 +238,18 @@
   background-color: transparent;
   border: 1px solid transparent;
 }
-.edit-toolbar-container .edit-button.action-cancel:hover {
-  background-color: transparent;
-  border: 1px solid #686868;
-}
 .edit-button.action-save {
   color: white;
   background-color: #50a0e9;
-  background-image: -moz-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: -o-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: -webkit-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: linear-gradient(180deg, #50a0e9, #4481dc);
+  background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
+  background-image:    -moz-linear-gradient(top, #50a0e9, #4481dc);
+  background-image:      -o-linear-gradient(top, #50a0e9, #4481dc);
+  background-image:   linear-gradient(to bottom, #50a0e9, #4481dc);
   border: 1px solid transparent;
 }
 .edit-button.action-save:hover,
 .edit-button.action-save:active {
   border: 1px solid #a0a0a0;
-  color: white;
 }
 .edit-button.action-saving,
 .edit-button.action-saving:hover,

core/modules/edit/edit.module

@@ -143,6 +143,22 @@ function edit_library_info() {
   return $libraries;
 }
 
+/**
+ * Implement hook_library_info_alter().
+ *
+ * Allow the admin theme to override the Edit entity toolbar's default styling.
+ * We must do it this way, because an admin theme's hooks do not fire while on
+ * the front-end.
+ */
+function edit_library_info_alter(&$libraries, $module) {
+  if ($module == 'edit' && isset($libraries['edit'])) {
+    $css = _edit_theme_css();
+    foreach ($css as $css_file) {
+      $libraries['edit']['css'][$css_file] = array();
+    }
+  }
+}
+
 /**
  * Implements hook_field_formatter_info_alter().
  *
@@ -175,3 +191,42 @@ function edit_preprocess_field(&$variables) {
 function edit_entity_view_alter(&$build, EntityInterface $entity, EntityDisplay $display) {
   $build['#attributes']['data-edit-entity'] = $entity->entityType() . '/' . $entity->id();
 }
+
+/**
+ * Retrieves the admin theme's Edit stylesheets.
+ *
+ * Admin themes may specify CSS files to make the front-end administration
+ * experience of in-place editing match the administration experience on the
+ * Drupal back-end.
+ * They can specify such CSS files using the "edit_stylesheets" key in
+ * the theme .info.yml file.
+ *
+ * @code
+ * edit_stylesheets[] = css/edit.css
+ * @endcode
+ *
+ * @param string|NULL $theme
+ *   The theme name for which to retrieve the edit_stylesheets CSS files.
+ *
+ * @return array
+ *   An array of CSS file paths.
+ */
+function _edit_theme_css($theme = NULL) {
+  $css = array();
+  if (!isset($theme)) {
+    $theme = Drupal::config('system.theme')->get('admin');
+  }
+  if ($theme_path = drupal_get_path('theme', $theme)) {
+    $info = system_get_info('theme', $theme);
+    if (isset($info['edit_stylesheets'])) {
+      $css = $info['edit_stylesheets'];
+      foreach ($css as $key => $path) {
+        $css[$key] = $theme_path . '/' . $path;
+      }
+    }
+    if (isset($info['base theme'])) {
+      $css = array_merge(_edit_theme_css($info['base theme'], $css));
+    }
+  }
+  return $css;
+}

core/modules/edit/js/editors/directEditor.js

@@ -92,7 +92,7 @@ Drupal.edit.editors.direct = Drupal.edit.EditorView.extend({
    * {@inheritdoc}
    */
   getEditUISettings: function () {
-    return { padding: true, unifiedToolbar: false, fullWidthToolbar: false };
+    return { padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
   },
 
   /**

core/modules/edit/js/editors/formEditor.js

@@ -51,6 +51,13 @@ Drupal.edit.editors.form = Drupal.edit.EditorView.extend({
     }
   },
 
+  /**
+   * {@inheritdoc}
+   */
+  getEditUISettings: function () {
+    return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: true };
+  },
+
   /**
    * Loads the form for this field, displays it on top of the actual field.
    */

core/modules/edit/js/theme.js

@@ -35,7 +35,7 @@ Drupal.theme.editEntityToolbar = function (settings) {
   html += '<div id="' + settings.id + '" class="edit edit-toolbar-container clearfix">';
   html += '<i class="edit-toolbar-pointer"></i>';
   html += '<div class="edit-toolbar-content">';
-  html += '<div class="edit-toolbar edit-toolbar-entity clearfix">';
+  html += '<div class="edit-toolbar edit-toolbar-entity clearfix icon icon-pencil">';
   html += '<div class="edit-toolbar-label" />';
   html += '</div>';
   html += '<div class="edit-toolbar edit-toolbar-field clearfix" />';
@@ -54,7 +54,7 @@ Drupal.theme.editEntityToolbar = function (settings) {
  *   The corresponding HTML.
  */
 Drupal.theme.editEntityToolbarLabel = function (settings) {
-  return settings.entityLabel + ': <b>' + settings.fieldLabel + '</b>';
+  return '<span class="field">' + settings.fieldLabel + '</span>' + settings.entityLabel;
 };
 
 /**

core/modules/edit/js/views/EditorDecorationView.js

@@ -173,6 +173,12 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
    */
   prepareEdit: function () {
     this.$el.addClass('edit-editing');
+
+    // Allow the field to be styled differently while editing in a pop-up
+    // in-place editor.
+    if (this.editorView.getEditUISettings().popup) {
+      this.$el.addClass('edit-editor-is-popup');
+    }
   },
 
   /**
@@ -184,6 +190,11 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({
   stopEdit: function () {
     this.$el.removeClass('edit-highlighted edit-editing');
 
+    // Done editing in a pop-up in-place editor; remove the class.
+    if (this.editorView.getEditUISettings().popup) {
+      this.$el.removeClass('edit-editor-is-popup');
+    }
+
     // Make the other editors show up again.
     $('.edit-candidate').addClass('edit-editable');
   },

core/modules/edit/js/views/EditorView.js

@@ -77,7 +77,7 @@ Drupal.edit.EditorView = Backbone.View.extend({
    *    just long enough to accomodate a label.
    */
   getEditUISettings: function () {
-    return { padding: false, unifiedToolbar: false, fullWidthToolbar: false };
+    return { padding: false, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
   },
 
   /**

core/modules/edit/js/views/EntityToolbarView.js

@@ -164,6 +164,10 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({
     var delay = 0;
     // Determines what check in the series of checks below should be evaluated
     var check = 0;
+    // When positioned against an active field that has padding, we should
+    // ignore that padding when positioning the toolbar, to not unnecessarily
+    // move the toolbar horizontally, which feels annoying.
+    var horizontalPadding = 0;
     var of, activeField, highlightedField;
     // There are several elements in the page that the entity toolbar might be
     // positioned against. They are considered below in a priority order.
@@ -181,6 +185,9 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({
         case 2:
           // Position against an active field.
           of = activeField && activeField.editorView && activeField.editorView.getEditedElement();
+          if (activeField && activeField.editorView && activeField.editorView.getEditUISettings().padding) {
+            horizontalPadding = 5;
+          }
           break;
         case 3:
           // Position against a highlighted field.
@@ -233,8 +240,10 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({
       that.$el
         .position({
           my: edge + ' bottom',
-          // Move the toolbar 2px towards the start edge of the 'of' element.
-          at: edge + '+1 top',
+          // Move the toolbar 1px towards the start edge of the 'of' element,
+          // plus any horizontal padding that may have been added to the element
+          // that is being added, to prevent unwanted horizontal movement.
+          at: edge + '+' + (1 + horizontalPadding) + ' top',
           of: of,
           collision: 'flipfit',
           using: refinePosition,

core/modules/editor/js/editor.formattedTextEditor.js

@@ -138,7 +138,7 @@ Drupal.edit.editors.editor = Drupal.edit.EditorView.extend({
    * {@inheritdoc}
    */
   getEditUISettings: function () {
-    return { padding: true, unifiedToolbar: true, fullWidthToolbar: true };
+    return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: false };
   },
 
   /**

core/themes/seven/edit.css

+/**
+ * @file
+ * Override Edit's entity toolbar style on the Drupal front-end.
+ *
+ * I.e. loaded by Edit on the front-end, despite this being a back-end theme.
+ */
+
+/**
+ * The Seven style guide prescribes softer corners.
+ */
+.edit-toolbar-container > .edit-toolbar-content,
+.edit-toolbar-container > .edit-toolbar-lining {
+  border-radius: 4px;
+}
+.edit-button {
+  border-radius: 3px;
+}
+
+/**
+ * Entity toolbar's "save" button must be styled like a Seven primary button.
+ */
+.edit-button.action-save,
+.edit-button.action-saving {
+  border-color: #1e5c90;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image:    -moz-linear-gradient(top, #007bc6, #0071b8);
+  background-image:      -o-linear-gradient(top, #007bc6, #0071b8);
+  background-image:   linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #fff;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+  margin-top: 2px;
+}
+.edit-button.action-save:focus,
+.edit-button.action-save:hover,
+.edit-button.action-saving:focus
+.edit-button.action-saving:hover {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image:    -moz-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image:      -o-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image:   linear-gradient(to bottom, #0c97ed, #1f86c7);
+  border-color: #1e5c90;
+  color: #fff;
+}
+.edit-button.action-save:hover,
+.edit-button.action-saving:hover {
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+.edit-button.action-save:active,
+.edit-button.action-saving:active {
+  background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+  background-image:    -moz-linear-gradient(top, #08639b, #0071b8);
+  background-image:      -o-linear-gradient(top, #08639b, #0071b8);
+  background-image:   linear-gradient(to bottom, #08639b, #0071b8);
+  border-color: #144b78;
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+/**
+ * The entity toolbar's "save" button's top margin shifts both buttons 2px down,
+ * so we must compensate for that to achieve vertically centered positioning.
+ */
+.edit .icon-close:before {
+  top: 8px;
+}

core/themes/seven/seven.info.yml

@@ -10,6 +10,8 @@ stylesheets:
 stylesheets-override:
   - vertical-tabs.css
   - jquery.ui.theme.css
+edit_stylesheets:
+  - edit.css
 settings:
   # @todo D8: Remove once themes have to be installed.
   shortcut_module_link: '1'