Merge "Move Save button to left side and mark as tertiary"

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -60,7 +60,7 @@ limitations under the License.
         display: flex;
         justify-content: space-between;
       }
-      .actions gr-button {
+      .actions .right gr-button {
         margin-left: 1em;
       }
       .peopleContainer,
@@ -267,6 +267,16 @@ limitations under the License.
       </section>
       <section class="actions">
         <div class="left">
+          <template is="dom-if" if="[[canBeStarted]]">
+            <gr-button
+                link
+                tertiary
+                disabled="[[_isState(knownLatestState, 'not-latest')]]"
+                class="action save"
+                has-tooltip
+                title="[[_saveTooltip]]"
+                on-tap="_saveTapHandler">Save</gr-button>
+          </template>
           <span
               id="checkingStatusLabel"
               hidden$="[[!_isState(knownLatestState, 'checking')]]">
@@ -290,14 +300,9 @@ limitations under the License.
               primary
               disabled="[[_computeSendButtonDisabled(knownLatestState, _sendButtonLabel, diffDrafts, draft, _reviewersMutated, _labelsChanged, _includeComments)]]"
               class="action send"
+              has-tooltip
+              title$="[[_computeSendButtonTooltip(canBeStarted)]]"
               on-tap="_sendTapHandler">[[_sendButtonLabel]]</gr-button>
-          <template is="dom-if" if="[[canBeStarted]]">
-            <gr-button
-                link
-                disabled="[[_isState(knownLatestState, 'not-latest')]]"
-                class="action save"
-                on-tap="_saveTapHandler">Save</gr-button>
-          </template>
         </div>
       </section>
     </div>

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js

@@ -39,6 +39,12 @@
     SEND: 'Send',
   };
 
+  const ButtonTooltips = {
+    SAVE: 'Save reply but do not send',
+    START_REVIEW: 'Mark as ready for review and send reply',
+    SEND: 'Send reply',
+  };
+
   // TODO(logan): Remove once the fix for issue 6841 is stable on
   // googlesource.com.
   const START_REVIEW_MESSAGE = 'This change is ready for review.';
@@ -188,6 +194,11 @@
         type: Boolean,
         value: false,
       },
+      _saveTooltip: {
+        type: String,
+        value: ButtonTooltips.SAVE,
+        readOnly: true,
+      },
     },
 
     FocusTarget,
@@ -798,6 +809,10 @@
       return canBeStarted ? ButtonLabels.START_REVIEW : ButtonLabels.SEND;
     },
 
+    _computeSendButtonTooltip(canBeStarted) {
+      return canBeStarted ? ButtonTooltips.START_REVIEW : ButtonTooltips.SEND;
+    },
+
     _computeCCsEnabled(serverConfig) {
       return serverConfig && serverConfig.note_db_enabled;
     },

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -41,6 +41,9 @@ limitations under the License.
         font-family: var(--font-family-bold);
         text-transform: none;
       }
+      :host([link][tertiary]) {
+        color: var(--color-link-tertiary);
+      }
       :host([link]) paper-button {
         margin: 0;
         padding: 0;

polygerrit-ui/app/elements/shared/gr-button/gr-button.js

@@ -28,6 +28,11 @@
         value: false,
         reflectToAttribute: true,
       },
+      tertiary: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
       disabled: {
         type: Boolean,
         observer: '_disabledChanged',

polygerrit-ui/app/styles/app-theme.html

@@ -38,6 +38,7 @@ limitations under the License.
 
   /* Follow are a part of the design refresh */
   --color-link: #2a66d9;
+  --color-link-tertiary: #000;
   /* 12% darker */
   --color-button-hover: #0B47BA;
 }