Merge "Make it more clear when in "edit mode""

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html

@@ -63,6 +63,9 @@ limitations under the License.
         padding: .55em var(--default-horizontal-margin);
         z-index: 99;  /* Less than gr-overlay's backdrop */
       }
+      .header.editMode {
+        background-color: #ebf5fb;
+      }
       .header .download {
         margin-right: 1em;
       }
@@ -320,7 +323,7 @@ limitations under the License.
         id="mainContent"
         class="container"
         hidden$="{{_loading}}">
-      <div class$="[[_computeHeaderClass(_change)]]">
+      <div class$="[[_computeHeaderClass(_editMode)]]">
         <div class="headerTitle">
           <gr-change-star
               id="changeStar"

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js

@@ -1397,8 +1397,10 @@
       this.$.relatedChanges.reload();
     },
 
-    _computeHeaderClass(change) {
+    _computeHeaderClass(editMode) {
-      return change.work_in_progress ? 'header wip' : 'header';
+      const classes = ['header'];
+      if (editMode) { classes.push('editMode'); }
+      return classes.join(' ');
     },
 
     _computeEditMode(patchRangeRecord, paramsRecord) {

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html

@@ -1324,12 +1324,11 @@ limitations under the License.
         assert.isFalse(element._computeCanStartReview(false, change, account1));
         assert.isFalse(element._computeCanStartReview(true, change, account2));
       });
+    });
 
-      test('header class computation', () => {
+    test('header class computation', () => {
-        assert.equal(element._computeHeaderClass({}), 'header');
+      assert.equal(element._computeHeaderClass(), 'header');
-        assert.equal(element._computeHeaderClass({work_in_progress: true}),
+      assert.equal(element._computeHeaderClass(true), 'header editMode');
-            'header wip');
-      });
     });
 
     test('_maybeScrollToMessage', () => {

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html

@@ -39,9 +39,6 @@ limitations under the License.
       .collapseToggleButton {
         text-decoration: none;
       }
-      .patchInfoEdit.patchInfo-header {
-        background-color: #fcfad6;
-      }
       .patchInfoOldPatchSet.patchInfo-header {
         background-color: #fff9c4;
       }
@@ -138,7 +135,8 @@ limitations under the License.
         font-family: var(--font-family-bold);
         margin-right: 24px;
       }
-      gr-commit-info {
+      gr-commit-info,
+      gr-edit-controls {
         margin-right: -5px;
       }
       @media screen and (max-width: 50em) {

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js

@@ -189,10 +189,6 @@
     },
 
     _computePatchInfoClass(patchNum, allPatchSets) {
-      if (this.patchNumEquals(patchNum, this.EDIT_NAME)) {
-        return 'patchInfoEdit';
-      }
-
       const latestNum = this.computeLatestPatchNum(allPatchSets);
       if (this.patchNumEquals(patchNum, latestNum)) {
         return '';

polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html

@@ -36,8 +36,8 @@ limitations under the License.
         background-color: var(--view-background-color);
       }
       gr-fixed-panel {
-        background-color: #fff;
+        background-color: #ebf5fb;
-        border-bottom: 1px #eee solid;
+        border-bottom: 1px #ddd solid;
         z-index: 1;
       }
       header,
@@ -48,7 +48,7 @@ limitations under the License.
         padding: .75em var(--default-horizontal-margin);
       }
       header gr-editable-label {
-        font-size: 1.2rem;
+        font-size: var(--font-size-large);
         font-weight: bold;
         --label-style: {
           text-overflow: initial;
@@ -67,6 +67,11 @@ limitations under the License.
       .textareaWrapper .editButtons {
         display: none;
       }
+      .controlGroup {
+        align-items: center;
+        display: flex;
+        font-size: var(--font-size-large);
+      }
       .rightControls {
         justify-content: flex-end;
       }
@@ -82,12 +87,16 @@ limitations under the License.
     </style>
     <gr-fixed-panel keep-on-scroll>
       <header>
-        <gr-editable-label
+        <span class="controlGroup">
-            label-text="File path"
+          <span>Edit mode</span>
-            value="[[_path]]"
+          <span class="separator"></span>
-            placeholder="File path..."
+          <gr-editable-label
-            on-changed="_handlePathChanged"></gr-editable-label>
+              label-text="File path"
-        <span class="rightControls">
+              value="[[_path]]"
+              placeholder="File path..."
+              on-changed="_handlePathChanged"></gr-editable-label>
+        </span>
+        <span class="controlGroup rightControls">
           <gr-button
               id="close"
               link