From 122f8982f0e3c3a4d4ee0201b7dd02fa5b3a51b6 Mon Sep 17 00:00:00 2001
From: Kasper Nilsson <kaspern@google.com>
Date: Fri, 9 Feb 2018 13:46:50 -0800
Subject: [PATCH] Make it more clear when in "edit mode"

Previously, there was no indication that "edit mode" was loaded. This
change colors the header blue in edit-related views. It also removes the
yellow coloration of the file list header when an edit patch set is
loaded. This color may or may not be replaced with another color later,
based on feedback from users.

Change-Id: I42c546a1e5809c853f71f6aa6e7ad198213d45c0
---
 .../change/gr-change-view/gr-change-view.html |  5 +++-
 .../change/gr-change-view/gr-change-view.js   |  6 +++--
 .../gr-change-view/gr-change-view_test.html   |  9 +++----
 .../gr-file-list-header.html                  |  6 ++---
 .../gr-file-list-header.js                    |  4 ---
 .../edit/gr-editor-view/gr-editor-view.html   | 27 ++++++++++++-------
 6 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 268a6a2f7e..14edae457c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/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"
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index 2c49e6c2da..e1f93a1144 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -1397,8 +1397,10 @@
       this.$.relatedChanges.reload();
     },
 
-    _computeHeaderClass(change) {
-      return change.work_in_progress ? 'header wip' : 'header';
+    _computeHeaderClass(editMode) {
+      const classes = ['header'];
+      if (editMode) { classes.push('editMode'); }
+      return classes.join(' ');
     },
 
     _computeEditMode(patchRangeRecord, paramsRecord) {
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
index b7ae295c45..6159d1ce4c 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
@@ -1322,12 +1322,11 @@ limitations under the License.
         assert.isFalse(element._computeCanStartReview(false, change, account1));
         assert.isFalse(element._computeCanStartReview(true, change, account2));
       });
+    });
 
-      test('header class computation', () => {
-        assert.equal(element._computeHeaderClass({}), 'header');
-        assert.equal(element._computeHeaderClass({work_in_progress: true}),
-            'header wip');
-      });
+    test('header class computation', () => {
+      assert.equal(element._computeHeaderClass(), 'header');
+      assert.equal(element._computeHeaderClass(true), 'header editMode');
     });
 
     test('_maybeScrollToMessage', () => {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
index 8cd03296b7..ba8530b502 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -38,9 +38,6 @@ limitations under the License.
       .collapseToggleButton {
         text-decoration: none;
       }
-      .patchInfoEdit.patchInfo-header {
-        background-color: #fcfad6;
-      }
       .patchInfoOldPatchSet.patchInfo-header {
         background-color: #fff9c4;
       }
@@ -140,7 +137,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) {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
index 9d32e75067..4e89ef7d91 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
@@ -206,10 +206,6 @@
     },
 
     _computePatchInfoClass(patchNum, allPatchSets) {
-      if (this.patchNumEquals(patchNum, this.EDIT_NAME)) {
-        return 'patchInfoEdit';
-      }
-
       const latestNum = this.computeLatestPatchNum(allPatchSets);
       if (this.patchNumEquals(patchNum, latestNum)) {
         return '';
diff --git a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
index ac8ec0834d..8f2f166d31 100644
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
+++ b/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;
-        border-bottom: 1px #eee solid;
+        background-color: #ebf5fb;
+        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
-            label-text="File path"
-            value="[[_path]]"
-            placeholder="File path..."
-            on-changed="_handlePathChanged"></gr-editable-label>
-        <span class="rightControls">
+        <span class="controlGroup">
+          <span>Edit mode</span>
+          <span class="separator"></span>
+          <gr-editable-label
+              label-text="File path"
+              value="[[_path]]"
+              placeholder="File path..."
+              on-changed="_handlePathChanged"></gr-editable-label>
+        </span>
+        <span class="controlGroup rightControls">
           <gr-button
               id="close"
               link