Invert comment action alignments

It makes the most sense (at least for left-to-right language speaking
locales) to have the most final and most destructive UI elements read
last, as interacting with those is the most permanent, and requires the
full context of the information in the element.

In diff comments, actions like 'Save' and 'Discard' (which affect the
entire comment) were on the left, whereas toggling the resolved state
was on the right. This change flips these alignments.

Bug: Issue 5924
Change-Id: Id00e19d662a983fad071df0fb866052b2001beb4

polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.html

@@ -30,6 +30,7 @@ limitations under the License.
         white-space: normal;
       }
       #actions {
+        margin-left: auto;
         padding: .5em .7em;
       }
       #container {
@@ -41,11 +42,10 @@ limitations under the License.
       #commentInfoContainer {
         border-top: 1px dotted #bbb;
         display: flex;
-        justify-content: space-between;
       }
       #unresolvedLabel {
         font-family: var(--font-family);
-        margin: auto 0 auto auto;
+        margin: auto 0;
         padding: .5em .7em;
       }
     </style>
@@ -67,6 +67,7 @@ limitations under the License.
       </template>
       <div id="commentInfoContainer"
           hidden$="[[_hideActions(_showActions, _lastComment)]]">
+        <span id="unresolvedLabel" hidden$="[[!_unresolved]]">Unresolved</span>
         <div id="actions">
           <gr-button id="replyBtn" class="action reply"
               on-tap="_handleCommentReply">Reply</gr-button>
@@ -77,7 +78,6 @@ limitations under the License.
           <gr-button id="doneBtn" class="action done" on-tap="_handleCommentDone">
             Done</gr-button>
         </div>
-        <span id="unresolvedLabel" hidden$="[[!_unresolved]]">Unresolved</span>
       </div>
     </div>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>

polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html

@@ -89,10 +89,15 @@ limitations under the License.
       }
       .actions {
         display: flex;
+        justify-content: flex-end;
         padding-top: 0;
       }
       .action {
-        margin-right: .5em;
+        margin-left: .5em;
+      }
+      .rightActions {
+        display: flex;
+        justify-content: flex-end;
       }
       .editMessage {
         display: none;
@@ -180,7 +185,7 @@ limitations under the License.
         align-items: center;
         display: flex;
         flex: 1;
-        justify-content: flex-end;
+        margin: 0;
       }
       .resolve label {
         color: #333;
@@ -258,14 +263,6 @@ limitations under the License.
         </div>
       </div>
       <div class="actions humanActions" hidden$="[[!_showHumanActions]]">
-        <gr-button class="action edit hideOnPublished" on-tap="_handleEdit">
-            Edit</gr-button>
-        <gr-button class="action save hideOnPublished" on-tap="_handleSave"
-            disabled$="[[_computeSaveDisabled(_messageText)]]">Save</gr-button>
-        <gr-button class="action cancel hideOnPublished"
-            on-tap="_handleCancel" hidden>Cancel</gr-button>
-        <gr-button class="action discard hideOnPublished"
-            on-tap="_handleDiscard">Discard</gr-button>
         <div class="action resolve hideOnPublished">
           <label>
             <input type="checkbox"
@@ -277,12 +274,22 @@ limitations under the License.
         <div class="action unresolved hideOnPublished" hidden$="[[resolved]]">
           Unresolved
         </div>
-        <gr-button
-            id="deleteBtn"
-            class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]"
-            on-tap="_handleCommentDelete">
-          Delete
-        </gr-button>
+        <div class="rightActions">
+          <gr-button class="action edit hideOnPublished" on-tap="_handleEdit">
+              Edit</gr-button>
+          <gr-button class="action save hideOnPublished" on-tap="_handleSave"
+              disabled$="[[_computeSaveDisabled(_messageText)]]">Save</gr-button>
+          <gr-button class="action cancel hideOnPublished"
+              on-tap="_handleCancel" hidden>Cancel</gr-button>
+          <gr-button class="action discard hideOnPublished"
+              on-tap="_handleDiscard">Discard</gr-button>
+          <gr-button
+              id="deleteBtn"
+              class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]"
+              on-tap="_handleCommentDelete">
+            Delete
+          </gr-button>
+        </div>
       </div>
       <div class="actions robotActions" hidden$="[[!_showRobotActions]]">
         <gr-button class="action fix"