Merge "Fix line number padding and size"

polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_test.html

@@ -916,7 +916,7 @@ suite('gr-diff-builder tests', () => {
 
     test('aria-labels on added line numbers', () => {
       const deltaLineNumberButton = element.diffElement.querySelectorAll(
-          'button.lineNum.right')[5];
+          '.lineNumButton.right')[5];
 
       assert.isOk(deltaLineNumberButton);
       assert.equal(deltaLineNumberButton.getAttribute('aria-label'), '5 added');
@@ -924,7 +924,7 @@ suite('gr-diff-builder tests', () => {
 
     test('aria-labels on removed line numbers', () => {
       const deltaLineNumberButton = element.diffElement.querySelectorAll(
-          'button.lineNum.left')[10];
+          '.lineNumButton.left')[10];
 
       assert.isOk(deltaLineNumberButton);
       assert.equal(

polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js

@@ -308,7 +308,9 @@ GrDiffBuilder.prototype._createLineEl = function(
     // Both td and button need a number of classes/attributes for various
     // selectors to work.
     this._decorateLineEl(td, number, side);
+    td.classList.add('lineNum');
     this._decorateLineEl(button, number, side);
+    button.classList.add('lineNumButton');
 
     button.textContent = number === 'FILE' ? 'File' : number;
 
@@ -330,7 +332,6 @@ GrDiffBuilder.prototype._createLineEl = function(
 
 GrDiffBuilder.prototype._decorateLineEl = function(el, number, side) {
   el.classList.add(side);
-  el.classList.add('lineNum');
   el.dataset.value = number;
 };
 

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.js

@@ -492,7 +492,8 @@ class GrDiff extends mixinBehaviors( [
         composed: true, bubbles: true,
       }));
       this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
-    } else if (el.classList.contains('lineNum')) {
+    } else if (el.classList.contains('lineNum') ||
+               el.classList.contains('lineNumButton')) {
       this.addDraftAtLine(el);
     } else if (el.tagName === 'HL' ||
         el.classList.contains('content') ||

polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js

@@ -49,14 +49,17 @@ export const htmlTemplate = html`
         border-right: 1px solid var(--border-color);
         table-layout: fixed;
       }
-      .lineNum {
+      .lineNumButton {
+        display: block;
+        width: 100%;
+        height: 100%;
         background-color: var(--diff-blank-background-color);
       }
       /*
       The only way to focus this (clicking) will apply our own focus styling,
       so this default styling is not needed and distracting.
       */
-      button.lineNum:focus {
+      .lineNumButton:focus {
         outline: none;
       }
       .image-diff .gr-diff {
@@ -66,7 +69,7 @@ export const htmlTemplate = html`
         box-shadow: var(--elevation-level-1);
         max-width: 50em;
       }
-      .image-diff .right.lineNum {
+      .image-diff .right.lineNumButton {
         border-left: 1px solid var(--border-color);
       }
       .image-diff label,
@@ -78,9 +81,9 @@ export const htmlTemplate = html`
         outline: none;
         user-select: none;
       }
-      .diff-row.target-row.target-side-left .lineNum.left,
-      .diff-row.target-row.target-side-right .lineNum.right,
-      .diff-row.target-row.unified .lineNum {
+      .diff-row.target-row.target-side-left .lineNumButton.left,
+      .diff-row.target-row.target-side-right .lineNumButton.right,
+      .diff-row.target-row.unified .lineNumButton {
         background-color: var(--diff-selection-background-color);
         color: var(--primary-text-color);
       }
@@ -103,13 +106,13 @@ export const htmlTemplate = html`
         white-space: pre-wrap;
         word-wrap: break-word;
       }
-      .lineNum,
+      .lineNumButton,
       .content {
         vertical-align: top;
         white-space: pre;
       }
       .contextLineNum,
-      .lineNum {
+      .lineNumButton {
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
@@ -119,7 +122,7 @@ export const htmlTemplate = html`
         padding: 0 var(--spacing-m);
         text-align: right;
       }
-      .canComment .lineNum {
+      .canComment .lineNumButton {
         cursor: pointer;
       }
       .content {
@@ -198,7 +201,7 @@ export const htmlTemplate = html`
         width: var(--line-height-mono, 18px);
         height: var(--line-height-mono, 18px);
       }
-      .contextControl td:not(.lineNum) {
+      .contextControl td:not(.lineNumButton) {
         text-align: center;
       }
       .displayLine .diff-row.target-row td {
@@ -295,13 +298,13 @@ export const htmlTemplate = html`
       .newlineWarning.hidden {
         display: none;
       }
-      .lineNum.COVERED {
+      .lineNumButton.COVERED {
          background-color: var(--coverage-covered, #e0f2f1);
       }
-      .lineNum.NOT_COVERED {
+      .lineNumButton.NOT_COVERED {
         background-color: var(--coverage-not-covered, #ffd1a4);
       }
-      .lineNum.PARTIALLY_COVERED {
+      .lineNumButton.PARTIALLY_COVERED {
         background: linear-gradient(to right bottom, var(--coverage-not-covered, #ffd1a4) 0%,
                                                      var(--coverage-not-covered, #ffd1a4) 50%,
                                                      var(--coverage-covered, #e0f2f1) 50%,
@@ -321,8 +324,8 @@ export const htmlTemplate = html`
 
       .selected-left:not(.selected-comment) .side-by-side .left + .content .contentText,
       .selected-right:not(.selected-comment) .side-by-side .right + .content .contentText,
-      .selected-left:not(.selected-comment) .unified .left.lineNum ~ .content:not(.both) .contentText,
-      .selected-right:not(.selected-comment) .unified .right.lineNum ~ .content .contentText,
+      .selected-left:not(.selected-comment) .unified .left.lineNumButton ~ .content:not(.both) .contentText,
+      .selected-right:not(.selected-comment) .unified .right.lineNumButton ~ .content .contentText,
       .selected-left.selected-comment .side-by-side .left + .content .message,
       .selected-right.selected-comment .side-by-side .right + .content .message :not(.collapsedContent),
       .selected-comment .unified .message :not(.collapsedContent),