Revert "Remove the omnipresent `gr-diff` css class" This reverts commit ea6db3f8e42f3ad9d5869afdbb061b56383deaa9. Release-Notes: skip Change-Id: Ifc641628fec5eef9c90c744623fabc7f7f4bbc8a Signed-off-by: Luca Milanesio <luca.milanesio@gmail.com>
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section.ts index 686cce7..cf507e8 100644 --- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section.ts +++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section.ts
@@ -98,20 +98,33 @@ > ${when( this.columns.blame, - () => html`<td class="blame" data-line-number="0"></td>` + () => + html`<td class=${diffClasses('blame')} data-line-number="0"></td>` )} ${when( this.columns.leftNumber, - () => html`<td class="contextLineNum"></td>` + () => html`<td class=${diffClasses('contextLineNum')}></td>` )} - ${when(this.columns.leftSign, () => html`<td class="sign"></td>`)} - ${when(this.columns.leftContent, () => html`<td></td>`)} + ${when( + this.columns.leftSign, + () => html`<td class=${diffClasses('sign')}></td>` + )} + ${when( + this.columns.leftContent, + () => html`<td class=${diffClasses()}></td>` + )} ${when( this.columns.rightNumber, - () => html`<td class="contextLineNum"></td>` + () => html`<td class=${diffClasses('contextLineNum')}></td>` )} - ${when(this.columns.rightSign, () => html`<td class="sign"></td>`)} - ${when(this.columns.rightContent, () => html`<td></td>`)} + ${when( + this.columns.rightSign, + () => html`<td class=${diffClasses('sign')}></td>` + )} + ${when( + this.columns.rightContent, + () => html`<td class=${diffClasses()}></td>` + )} </tr> `; } @@ -129,10 +142,12 @@ <tr class=${diffClasses('dividerRow', `show-${showConfig}`)}> ${when( this.columns.blame, - () => html`<td class="blame" data-line-number="0"></td>` + () => + html`<td class=${diffClasses('blame')} data-line-number="0"></td>` )} - <td class="dividerCell" colspan=${colspan}> + <td class=${diffClasses('dividerCell')} colspan=${colspan}> <gr-context-controls + class=${diffClasses()} .diff=${this.diff} .renderPreferences=${this.renderPrefs} .group=${this.group}
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section_test.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section_test.ts index 778121b..772c7ff 100644 --- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls-section_test.ts
@@ -42,29 +42,30 @@ <table> <tbody> <tr - class="above contextBackground side-by-side" + class="above contextBackground gr-diff side-by-side" left-type="contextControl" right-type="contextControl" > - <td class="contextLineNum"></td> - <td></td> - <td class="contextLineNum"></td> - <td></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> - <tr class="dividerRow show-both"> - <td class="dividerCell" colspan="4"> - <gr-context-controls showconfig="both"> </gr-context-controls> + <tr class="dividerRow gr-diff show-both"> + <td class="dividerCell gr-diff" colspan="4"> + <gr-context-controls class="gr-diff" showconfig="both"> + </gr-context-controls> </td> </tr> <tr - class="below contextBackground side-by-side" + class="below contextBackground gr-diff side-by-side" left-type="contextControl" right-type="contextControl" > - <td class="contextLineNum"></td> - <td></td> - <td class="contextLineNum"></td> - <td></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> </tbody> </table>
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts index 8a679c3..e889b90 100644 --- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts +++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
@@ -265,7 +265,7 @@ } private createExpandAllButtonContainer() { - return html` <div class="aboveBelowButtons fullExpansion"> + return html` <div class="gr-diff aboveBelowButtons fullExpansion"> ${this.createContextButton(ContextButtonType.ALL, this.numLines())} </div>`; }
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts index 1bdf985..46af242 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row.ts
@@ -300,7 +300,7 @@ return html` <td ${ref(this.blameCellRef)} - class="blame" + class=${diffClasses('blame')} data-line-number=${this.left?.beforeNumber ?? 0} >${this.renderBlameElement()}</td> `; @@ -321,10 +321,10 @@ // td.blame has `white-space: pre`, so prettier must not add spaces. // prettier-ignore return html`<span class=${diffClasses(...extras)} - ><a href=${url} class="blameDate">${date}</a - ><span class="blameAuthor"> ${shortName}</span - ><gr-hovercard> - <span class="blameHoverCard"> + ><a href=${url} class=${diffClasses('blameDate')}>${date}</a + ><span class=${diffClasses('blameAuthor')}> ${shortName}</span + ><gr-hovercard class=${diffClasses()}> + <span class=${diffClasses('blameHoverCard')}> Commit ${commit.id}<br /> Author: ${commit.author}<br /> Date: ${date}<br /> @@ -586,7 +586,7 @@ // .content has `white-space: pre`, so prettier must not add spaces. // prettier-ignore return html`<div - class="contentText" + class=${diffClasses('contentText')} data-side=${ifDefined(side)} id=${this.contentId(side)} >${textElement}</div>`;
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts index 1526ce3..9c6121d 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-row_test.ts
@@ -34,15 +34,15 @@ <tbody> <tr aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -50,9 +50,9 @@ 1 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-1" > @@ -60,10 +60,10 @@ </div> </div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -71,9 +71,9 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-1" > @@ -105,13 +105,13 @@ <tbody> <tr aria-labelledby="left-button-1 right-button-1 right-content-1" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -119,10 +119,10 @@ 1 </button> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -130,8 +130,12 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> - <div class="contentText" data-side="right" id="right-content-1"> + <td class="both content gr-diff no-intraline-info right"> + <div + class="contentText gr-diff" + data-side="right" + id="right-content-1" + > <gr-diff-text data-side="right"> lorem ipsum </gr-diff-text> </div> </td> @@ -157,19 +161,19 @@ <tbody> <tr aria-labelledby="right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -177,8 +181,12 @@ 1 </button> </td> - <td class="add content no-intraline-info right"> - <div class="contentText" data-side="right" id="right-content-1"> + <td class="add content gr-diff no-intraline-info right"> + <div + class="contentText gr-diff" + data-side="right" + id="right-content-1" + > <gr-diff-text data-side="right"> lorem ipsum </gr-diff-text> </div> </td> @@ -203,15 +211,15 @@ <tbody> <tr aria-labelledby="left-button-1 left-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="blank" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -219,14 +227,18 @@ 1 </button> </td> - <td class="content left no-intraline-info remove"> - <div class="contentText" data-side="left" id="left-content-1"> + <td class="content gr-diff left no-intraline-info remove"> + <div + class="contentText gr-diff" + data-side="left" + id="left-content-1" + > <gr-diff-text data-side="left"> lorem ipsum </gr-diff-text> </div> </td> - <td class="blankLineNum right"></td> - <td class="blank no-intraline-info right"> - <div class="contentText" data-side="right"></div> + <td class="blankLineNum gr-diff right"></td> + <td class="blank gr-diff no-intraline-info right"> + <div class="contentText gr-diff" data-side="right"></div> </td> </tr> <slot name="post-left-line-1"></slot>
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts index 2e8065f..d249801 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section.ts
@@ -225,10 +225,10 @@ private renderMoveControls() { if (!this.group?.moveDetails) return; const movedIn = this.group.adds.length > 0; - const plainCell = html`<td></td>`; + const plainCell = html`<td class=${diffClasses()}></td>`; const moveCell = html` - <td class="moveHeader"> - <gr-range-header icon="move_item"> + <td class=${diffClasses('moveHeader')}> + <gr-range-header class=${diffClasses()} icon="move_item"> ${this.renderMoveDescription(movedIn)} </gr-range-header> </td> @@ -237,20 +237,29 @@ <tr class=${diffClasses('moveControls', movedIn ? 'movedIn' : 'movedOut')} > - ${when(this.columns.blame, () => html`<td class="blame"></td>`)} + ${when( + this.columns.blame, + () => html`<td class=${diffClasses('blame')}></td>` + )} ${when( this.columns.leftNumber, - () => html`<td class="moveControlsLineNumCol"></td>` + () => html`<td class=${diffClasses('moveControlsLineNumCol')}></td>` )} - ${when(this.columns.leftSign, () => html`<td class="sign"></td>`)} + ${when( + this.columns.leftSign, + () => html`<td class=${diffClasses('sign')}></td>` + )} ${when(this.columns.leftContent, () => movedIn ? plainCell : moveCell )} ${when( this.columns.rightNumber, - () => html`<td class="moveControlsLineNumCol"></td>` + () => html`<td class=${diffClasses('moveControlsLineNumCol')}></td>` )} - ${when(this.columns.rightSign, () => html`<td class="sign"></td>`)} + ${when( + this.columns.rightSign, + () => html`<td class=${diffClasses('sign')}></td>` + )} ${when(this.columns.rightContent, () => movedIn || this.isUnifiedDiff() ? moveCell : plainCell )} @@ -266,18 +275,20 @@ const direction = movedIn ? 'from' : 'to'; const textLabel = `Moved ${andChangedLabel}${direction} lines `; return html` - <div> - <span>${textLabel}</span> + <div class=${diffClasses()}> + <span class=${diffClasses()}>${textLabel}</span> ${this.renderMovedLineAnchor(range.start, otherSide)} - <span> - </span> + <span class=${diffClasses()}> - </span> ${this.renderMovedLineAnchor(range.end, otherSide)} </div> `; } return html` - <div> - <span>${movedIn ? 'Moved in' : 'Moved out'}</span> + <div class=${diffClasses()}> + <span class=${diffClasses()} + >${movedIn ? 'Moved in' : 'Moved out'}</span + > </div> `; } @@ -288,7 +299,11 @@ this.handleMovedLineAnchorClick(e.target, side, line); }; // `href` is not actually used but important for Screen Readers - return html`<a href=${`#${line}`} @click=${listener}>${line}</a>`; + return html` + <a class=${diffClasses()} href=${`#${line}`} @click=${listener} + >${line}</a + > + `; } private handleMovedLineAnchorClick(
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts index d5e471b..aab8e22 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-section_test.ts
@@ -50,20 +50,20 @@ /* HTML */ ` <table> <tbody> - <tr class="moveControls movedOut"> - <td class="moveControlsLineNumCol"></td> - <td class="moveHeader"> - <gr-range-header icon="move_item"> - <div> - <span> Moved to lines </span> - <a href="#1"> 1 </a> - <span> - </span> - <a href="#2"> 2 </a> + <tr class="gr-diff moveControls movedOut"> + <td class="gr-diff moveControlsLineNumCol"></td> + <td class="gr-diff moveHeader"> + <gr-range-header class="gr-diff" icon="move_item"> + <div class="gr-diff"> + <span class="gr-diff"> Moved to lines </span> + <a class="gr-diff" href="#1"> 1 </a> + <span class="gr-diff"> - </span> + <a class="gr-diff" href="#2"> 2 </a> </div> </gr-range-header> </td> - <td class="moveControlsLineNumCol"></td> - <td></td> + <td class="gr-diff moveControlsLineNumCol"></td> + <td class="gr-diff"></td> </tr> </tbody> </table> @@ -86,16 +86,16 @@ /* HTML */ ` <table> <tbody> - <tr class="moveControls movedOut"> - <td class="moveControlsLineNumCol"></td> - <td class="moveControlsLineNumCol"></td> - <td class="moveHeader"> - <gr-range-header icon="move_item"> - <div> - <span> Moved to lines </span> - <a href="#1"> 1 </a> - <span> - </span> - <a href="#2"> 2 </a> + <tr class="gr-diff moveControls movedOut"> + <td class="gr-diff moveControlsLineNumCol"></td> + <td class="gr-diff moveControlsLineNumCol"></td> + <td class="gr-diff moveHeader"> + <gr-range-header class="gr-diff" icon="move_item"> + <div class="gr-diff"> + <span class="gr-diff"> Moved to lines </span> + <a class="gr-diff" href="#1"> 1 </a> + <span class="gr-diff"> - </span> + <a class="gr-diff" href="#2"> 2 </a> </div> </gr-range-header> </td> @@ -133,18 +133,18 @@ <slot name="post-left-line-1"></slot> <slot name="post-right-line-1"></slot> <table> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -152,15 +152,19 @@ 1 </button> </td> - <td class="both content left no-intraline-info"> - <div class="contentText" data-side="left" id="left-content-1"> + <td class="both content gr-diff left no-intraline-info"> + <div + class="contentText gr-diff" + data-side="left" + id="left-content-1" + > <gr-diff-text data-side="left">asdf</gr-diff-text> </div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -168,23 +172,27 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> - <div class="contentText" data-side="right" id="right-content-1"> + <td class="both content gr-diff no-intraline-info right"> + <div + class="contentText gr-diff" + data-side="right" + id="right-content-1" + > <gr-diff-text data-side="right">asdf </gr-diff-text> </div> </td> </tr> <tr aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -192,15 +200,19 @@ 1 </button> </td> - <td class="both content left no-intraline-info"> - <div class="contentText" data-side="left" id="left-content-1"> + <td class="both content gr-diff left no-intraline-info"> + <div + class="contentText gr-diff" + data-side="left" + id="left-content-1" + > <gr-diff-text data-side="left"> qwer</gr-diff-text> </div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -208,23 +220,27 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> - <div class="contentText" data-side="right" id="right-content-1"> + <td class="both content gr-diff no-intraline-info right"> + <div + class="contentText gr-diff" + data-side="right" + id="right-content-1" + > <gr-diff-text data-side="right">qwer </gr-diff-text> </div> </td> </tr> <tr aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -232,15 +248,19 @@ 1 </button> </td> - <td class="both content left no-intraline-info"> - <div class="contentText" data-side="left" id="left-content-1"> + <td class="both content gr-diff left no-intraline-info"> + <div + class="contentText gr-diff" + data-side="left" + id="left-content-1" + > <gr-diff-text data-side="left">zxcv </gr-diff-text> </div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -248,8 +268,12 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> - <div class="contentText" data-side="right" id="right-content-1"> + <td class="both content gr-diff no-intraline-info right"> + <div + class="contentText gr-diff" + data-side="right" + id="right-content-1" + > <gr-diff-text data-side="right">zxcv </gr-diff-text> </div> </td>
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text.ts index 2156a5b..5161b18 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text.ts
@@ -6,6 +6,7 @@ import {LitElement, html, TemplateResult} from 'lit'; import {property} from 'lit/decorators.js'; import {styleMap} from 'lit/directives/style-map.js'; +import {diffClasses} from '../gr-diff/gr-diff-utils'; const SURROGATE_PAIR = /[\uD800-\uDBFF][\uDC00-\uDFFF]/; @@ -112,7 +113,7 @@ tabSize = this.tabSize; } const piece = html`<span - class="tab" + class=${diffClasses('tab')} style=${styleMap({'tab-size': `${tabSize}`})} >${TAB}</span >`; @@ -134,9 +135,9 @@ /** Render a line break, don't advance text offset, reset col position. */ private renderLineBreak() { if (this.isResponsive) { - this.pieces.push(html`<wbr></wbr>`); + this.pieces.push(html`<wbr class=${diffClasses()}></wbr>`); } else { - this.pieces.push(html`<span class="br"></span>`); + this.pieces.push(html`<span class=${diffClasses('br')}></span>`); } // this.textOffset += 0; this.columnPos = 0;
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text_test.ts index a458a61..3858bed 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/gr-diff-text_test.ts
@@ -8,9 +8,9 @@ import {GrDiffText} from './gr-diff-text'; import {fixture, html, assert} from '@open-wc/testing'; -const LINE_BREAK = '<span class="br"></span>'; +const LINE_BREAK = '<span class="gr-diff br"></span>'; -const LINE_BREAK_WBR = '<wbr></wbr>'; +const LINE_BREAK_WBR = '<wbr class="gr-diff"></wbr>'; const TAB = '<span class="" style=""></span>'; @@ -86,21 +86,21 @@ element.tabSize = 4; await check( '\t', - /* HTML */ '<span class="tab" style="tab-size:4;"></span>' + /* HTML */ '<span class="gr-diff tab" style="tab-size:4;"></span>' ); await check( 'abc\t', - /* HTML */ 'abc<span class="tab" style="tab-size:1;"></span>' + /* HTML */ 'abc<span class="gr-diff tab" style="tab-size:1;"></span>' ); element.tabSize = 8; await check( '\t', - /* HTML */ '<span class="tab" style="tab-size:8;"></span>' + /* HTML */ '<span class="gr-diff tab" style="tab-size:8;"></span>' ); await check( 'abc\t', - /* HTML */ 'abc<span class="tab" style="tab-size:5;"></span>' + /* HTML */ 'abc<span class="gr-diff tab" style="tab-size:5;"></span>' ); });
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts index e158bd7..b5a79cd 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element.ts
@@ -14,7 +14,12 @@ import '../gr-diff-builder/gr-diff-builder-image'; import '../gr-diff-builder/gr-diff-section'; import '../gr-diff-builder/gr-diff-row'; -import {isResponsive, FullContext, FULL_CONTEXT} from './gr-diff-utils'; +import { + isResponsive, + FullContext, + diffClasses, + FULL_CONTEXT, +} from './gr-diff-utils'; import {ImageInfo} from '../../../types/common'; import {DiffInfo, DiffPreferencesInfo} from '../../../types/diff'; import { @@ -359,9 +364,9 @@ public renderBinaryDiff() { return html` - <tbody class="binary-diff"> - <tr> - <td colspan=${this.columnCount}> + <tbody class="gr-diff binary-diff"> + <tr class="gr-diff"> + <td colspan=${this.columnCount} class="gr-diff"> <span>Difference in binary files</span> </td> </tr> @@ -389,19 +394,42 @@ ); return html` <colgroup> - ${when(this.columns.blame, () => html`<col class="blame" />`)} + ${when( + this.columns.blame, + () => html`<col class=${diffClasses('blame')} />` + )} ${when( this.columns.leftNumber, - () => html`<col class="left" width=${lineNumberWidth} />` + () => + html`<col + class=${diffClasses(Side.LEFT)} + width=${lineNumberWidth} + />` )} - ${when(this.columns.leftSign, () => html`<col class="left sign" />`)} - ${when(this.columns.leftContent, () => html`<col class="left" />`)} + ${when( + this.columns.leftSign, + () => html`<col class=${diffClasses(Side.LEFT, 'sign')} />` + )} + ${when( + this.columns.leftContent, + () => html`<col class=${diffClasses(Side.LEFT)} />` + )} ${when( this.columns.rightNumber, - () => html`<col class="right" width=${lineNumberWidth} />` + () => + html`<col + class=${diffClasses(Side.RIGHT)} + width=${lineNumberWidth} + />` )} - ${when(this.columns.rightSign, () => html`<col class="right sign" />`)} - ${when(this.columns.rightContent, () => html`<col class="right" />`)} + ${when( + this.columns.rightSign, + () => html`<col class=${diffClasses(Side.RIGHT, 'sign')} />` + )} + ${when( + this.columns.rightContent, + () => html`<col class=${diffClasses(Side.RIGHT)} />` + )} </colgroup> `; }
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts index c1d8079..8996be3 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-element_test.ts
@@ -60,10 +60,10 @@ <div class="diffContainer sideBySide"> <table id="diffTable"> <colgroup> - <col class="left" width="48" /> - <col class="left" /> - <col class="right" width="48" /> - <col class="right" /> + <col class="gr-diff left" width="48" /> + <col class="gr-diff left" /> + <col class="gr-diff right" width="48" /> + <col class="gr-diff right" /> </colgroup> </table> </div> @@ -85,31 +85,33 @@ <div class="diffContainer unified"> <table id="diffTable"> <colgroup> - <col class="left" width="48" /> - <col class="right" width="48" /> - <col class="right" /> + <col class="gr-diff left" width="48" /> + <col class="gr-diff right" width="48" /> + <col class="gr-diff right" /> </colgroup> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-LOST right-button-LOST right-content-LOST" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="LOST"></td> - <td class="lineNum right" data-value="LOST"></td> - <td class="both content lost no-intraline-info right"></td> + <td class="gr-diff left lineNum" data-value="LOST"></td> + <td class="gr-diff lineNum right" data-value="LOST"></td> + <td + class="both content gr-diff lost no-intraline-info right" + ></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-FILE right-button-FILE right-content-FILE" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="FILE"> + <td class="gr-diff left lineNum" data-value="FILE"> <button aria-label="Add file comment" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="FILE" id="left-button-FILE" tabindex="-1" @@ -117,10 +119,10 @@ FILE </button> </td> - <td class="lineNum right" data-value="FILE"> + <td class="gr-diff lineNum right" data-value="FILE"> <button aria-label="Add file comment" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="FILE" id="right-button-FILE" tabindex="-1" @@ -128,19 +130,21 @@ FILE </button> </td> - <td class="both content file no-intraline-info right"></td> + <td + class="both content file gr-diff no-intraline-info right" + ></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-1 right-button-1 right-content-1" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -148,10 +152,10 @@ 1 </button> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -159,9 +163,9 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-1" ></div> @@ -169,13 +173,13 @@ </tr> <tr aria-labelledby="left-button-2 right-button-2 right-content-2" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="2"> + <td class="gr-diff left lineNum" data-value="2"> <button aria-label="2 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="2" id="left-button-2" tabindex="-1" @@ -183,10 +187,10 @@ 2 </button> </td> - <td class="lineNum right" data-value="2"> + <td class="gr-diff lineNum right" data-value="2"> <button aria-label="2 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="2" id="right-button-2" tabindex="-1" @@ -194,9 +198,9 @@ 2 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-2" ></div> @@ -204,13 +208,13 @@ </tr> <tr aria-labelledby="left-button-3 right-button-3 right-content-3" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="3"> + <td class="gr-diff left lineNum" data-value="3"> <button aria-label="3 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="3" id="left-button-3" tabindex="-1" @@ -218,10 +222,10 @@ 3 </button> </td> - <td class="lineNum right" data-value="3"> + <td class="gr-diff lineNum right" data-value="3"> <button aria-label="3 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="3" id="right-button-3" tabindex="-1" @@ -229,9 +233,9 @@ 3 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-3" ></div> @@ -239,13 +243,13 @@ </tr> <tr aria-labelledby="left-button-4 right-button-4 right-content-4" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="4"> + <td class="gr-diff left lineNum" data-value="4"> <button aria-label="4 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="4" id="left-button-4" tabindex="-1" @@ -253,10 +257,10 @@ 4 </button> </td> - <td class="lineNum right" data-value="4"> + <td class="gr-diff lineNum right" data-value="4"> <button aria-label="4 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="4" id="right-button-4" tabindex="-1" @@ -264,26 +268,26 @@ 4 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-4" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="right-button-5 right-content-5" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="5"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="5"> <button aria-label="5 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="5" id="right-button-5" tabindex="-1" @@ -291,9 +295,9 @@ 5 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-5" ></div> @@ -301,14 +305,14 @@ </tr> <tr aria-labelledby="right-button-6 right-content-6" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="6"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="6"> <button aria-label="6 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="6" id="right-button-6" tabindex="-1" @@ -316,9 +320,9 @@ 6 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-6" ></div> @@ -326,14 +330,14 @@ </tr> <tr aria-labelledby="right-button-7 right-content-7" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="7"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="7"> <button aria-label="7 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="7" id="right-button-7" tabindex="-1" @@ -341,25 +345,25 @@ 7 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-7" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-5 right-button-8 right-content-8" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="5"> + <td class="gr-diff left lineNum" data-value="5"> <button aria-label="5 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="5" id="left-button-5" tabindex="-1" @@ -367,10 +371,10 @@ 5 </button> </td> - <td class="lineNum right" data-value="8"> + <td class="gr-diff lineNum right" data-value="8"> <button aria-label="8 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="8" id="right-button-8" tabindex="-1" @@ -378,9 +382,9 @@ 8 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-8" ></div> @@ -388,13 +392,13 @@ </tr> <tr aria-labelledby="left-button-6 right-button-9 right-content-9" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="6"> + <td class="gr-diff left lineNum" data-value="6"> <button aria-label="6 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="6" id="left-button-6" tabindex="-1" @@ -402,10 +406,10 @@ 6 </button> </td> - <td class="lineNum right" data-value="9"> + <td class="gr-diff lineNum right" data-value="9"> <button aria-label="9 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="9" id="right-button-9" tabindex="-1" @@ -413,9 +417,9 @@ 9 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-9" ></div> @@ -423,13 +427,13 @@ </tr> <tr aria-labelledby="left-button-7 right-button-10 right-content-10" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="7"> + <td class="gr-diff left lineNum" data-value="7"> <button aria-label="7 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="7" id="left-button-7" tabindex="-1" @@ -437,10 +441,10 @@ 7 </button> </td> - <td class="lineNum right" data-value="10"> + <td class="gr-diff lineNum right" data-value="10"> <button aria-label="10 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="10" id="right-button-10" tabindex="-1" @@ -448,9 +452,9 @@ 10 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-10" ></div> @@ -458,13 +462,13 @@ </tr> <tr aria-labelledby="left-button-8 right-button-11 right-content-11" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="8"> + <td class="gr-diff left lineNum" data-value="8"> <button aria-label="8 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="8" id="left-button-8" tabindex="-1" @@ -472,10 +476,10 @@ 8 </button> </td> - <td class="lineNum right" data-value="11"> + <td class="gr-diff lineNum right" data-value="11"> <button aria-label="11 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="11" id="right-button-11" tabindex="-1" @@ -483,9 +487,9 @@ 11 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-11" ></div> @@ -493,13 +497,13 @@ </tr> <tr aria-labelledby="left-button-9 right-button-12 right-content-12" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="9"> + <td class="gr-diff left lineNum" data-value="9"> <button aria-label="9 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="9" id="left-button-9" tabindex="-1" @@ -507,10 +511,10 @@ 9 </button> </td> - <td class="lineNum right" data-value="12"> + <td class="gr-diff lineNum right" data-value="12"> <button aria-label="12 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="12" id="right-button-12" tabindex="-1" @@ -518,25 +522,25 @@ 12 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-12" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="left-button-10 left-content-10" - class="diff-row remove unified" + class="diff-row gr-diff remove unified" tabindex="-1" > - <td class="left lineNum" data-value="10"> + <td class="gr-diff left lineNum" data-value="10"> <button aria-label="10 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="10" id="left-button-10" tabindex="-1" @@ -544,10 +548,10 @@ 10 </button> </td> - <td class="blankLineNum right"></td> - <td class="content left no-intraline-info remove"> + <td class="blankLineNum gr-diff right"></td> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-10" ></div> @@ -555,13 +559,13 @@ </tr> <tr aria-labelledby="left-button-11 left-content-11" - class="diff-row remove unified" + class="diff-row gr-diff remove unified" tabindex="-1" > - <td class="left lineNum" data-value="11"> + <td class="gr-diff left lineNum" data-value="11"> <button aria-label="11 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="11" id="left-button-11" tabindex="-1" @@ -569,10 +573,10 @@ 11 </button> </td> - <td class="blankLineNum right"></td> - <td class="content left no-intraline-info remove"> + <td class="blankLineNum gr-diff right"></td> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-11" ></div> @@ -580,13 +584,13 @@ </tr> <tr aria-labelledby="left-button-12 left-content-12" - class="diff-row remove unified" + class="diff-row gr-diff remove unified" tabindex="-1" > - <td class="left lineNum" data-value="12"> + <td class="gr-diff left lineNum" data-value="12"> <button aria-label="12 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="12" id="left-button-12" tabindex="-1" @@ -594,10 +598,10 @@ 12 </button> </td> - <td class="blankLineNum right"></td> - <td class="content left no-intraline-info remove"> + <td class="blankLineNum gr-diff right"></td> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-12" ></div> @@ -605,13 +609,13 @@ </tr> <tr aria-labelledby="left-button-13 left-content-13" - class="diff-row remove unified" + class="diff-row gr-diff remove unified" tabindex="-1" > - <td class="left lineNum" data-value="13"> + <td class="gr-diff left lineNum" data-value="13"> <button aria-label="13 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="13" id="left-button-13" tabindex="-1" @@ -619,27 +623,27 @@ 13 </button> </td> - <td class="blankLineNum right"></td> - <td class="content left no-intraline-info remove"> + <td class="blankLineNum gr-diff right"></td> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-13" ></div> </td> </tr> </tbody> - <tbody class="delta ignoredWhitespaceOnly section"> + <tbody class="delta gr-diff ignoredWhitespaceOnly section"> <tr aria-labelledby="right-button-13 right-content-13" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="13"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="13"> <button aria-label="13 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="13" id="right-button-13" tabindex="-1" @@ -647,9 +651,9 @@ 13 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-13" ></div> @@ -657,14 +661,14 @@ </tr> <tr aria-labelledby="right-button-14 right-content-14" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="14"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="14"> <button aria-label="14 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="14" id="right-button-14" tabindex="-1" @@ -672,25 +676,25 @@ 14 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-14" ></div> </td> </tr> </tbody> - <tbody class="delta section"> + <tbody class="delta gr-diff section"> <tr aria-labelledby="left-button-16 left-content-16" - class="diff-row remove unified" + class="diff-row gr-diff remove unified" tabindex="-1" > - <td class="left lineNum" data-value="16"> + <td class="gr-diff left lineNum" data-value="16"> <button aria-label="16 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="16" id="left-button-16" tabindex="-1" @@ -698,10 +702,10 @@ 16 </button> </td> - <td class="blankLineNum right"></td> - <td class="content left remove"> + <td class="blankLineNum gr-diff right"></td> + <td class="content gr-diff left remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-16" ></div> @@ -709,14 +713,14 @@ </tr> <tr aria-labelledby="right-button-15 right-content-15" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="15"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="15"> <button aria-label="15 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="15" id="right-button-15" tabindex="-1" @@ -724,25 +728,25 @@ 15 </button> </td> - <td class="add content right"> + <td class="add content gr-diff right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-15" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-17 right-button-16 right-content-16" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="17"> + <td class="gr-diff left lineNum" data-value="17"> <button aria-label="17 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="17" id="left-button-17" tabindex="-1" @@ -750,10 +754,10 @@ 17 </button> </td> - <td class="lineNum right" data-value="16"> + <td class="gr-diff lineNum right" data-value="16"> <button aria-label="16 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="16" id="right-button-16" tabindex="-1" @@ -761,9 +765,9 @@ 16 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-16" ></div> @@ -771,13 +775,13 @@ </tr> <tr aria-labelledby="left-button-18 right-button-17 right-content-17" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="18"> + <td class="gr-diff left lineNum" data-value="18"> <button aria-label="18 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="18" id="left-button-18" tabindex="-1" @@ -785,10 +789,10 @@ 18 </button> </td> - <td class="lineNum right" data-value="17"> + <td class="gr-diff lineNum right" data-value="17"> <button aria-label="17 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="17" id="right-button-17" tabindex="-1" @@ -796,9 +800,9 @@ 17 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-17" ></div> @@ -806,13 +810,13 @@ </tr> <tr aria-labelledby="left-button-19 right-button-18 right-content-18" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="19"> + <td class="gr-diff left lineNum" data-value="19"> <button aria-label="19 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="19" id="left-button-19" tabindex="-1" @@ -820,10 +824,10 @@ 19 </button> </td> - <td class="lineNum right" data-value="18"> + <td class="gr-diff lineNum right" data-value="18"> <button aria-label="18 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="18" id="right-button-18" tabindex="-1" @@ -831,43 +835,43 @@ 18 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-18" ></div> </td> </tr> </tbody> - <tbody class="contextControl section"> - <tr class="above contextBackground unified"> - <td class="contextLineNum"></td> - <td class="contextLineNum"></td> - <td></td> + <tbody class="contextControl gr-diff section"> + <tr class="above contextBackground gr-diff unified"> + <td class="contextLineNum gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> - <tr class="dividerRow show-both"> - <td class="dividerCell" colspan="3"> - <gr-context-controls showconfig="both"> + <tr class="dividerRow gr-diff show-both"> + <td class="dividerCell gr-diff" colspan="3"> + <gr-context-controls class="gr-diff" showconfig="both"> </gr-context-controls> </td> </tr> - <tr class="below contextBackground unified"> - <td class="contextLineNum"></td> - <td class="contextLineNum"></td> - <td></td> + <tr class="below contextBackground gr-diff unified"> + <td class="contextLineNum gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-38 right-button-37 right-content-37" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="38"> + <td class="gr-diff left lineNum" data-value="38"> <button aria-label="38 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="38" id="left-button-38" tabindex="-1" @@ -875,10 +879,10 @@ 38 </button> </td> - <td class="lineNum right" data-value="37"> + <td class="gr-diff lineNum right" data-value="37"> <button aria-label="37 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="37" id="right-button-37" tabindex="-1" @@ -886,9 +890,9 @@ 37 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-37" ></div> @@ -896,13 +900,13 @@ </tr> <tr aria-labelledby="left-button-39 right-button-38 right-content-38" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="39"> + <td class="gr-diff left lineNum" data-value="39"> <button aria-label="39 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="39" id="left-button-39" tabindex="-1" @@ -910,10 +914,10 @@ 39 </button> </td> - <td class="lineNum right" data-value="38"> + <td class="gr-diff lineNum right" data-value="38"> <button aria-label="38 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="38" id="right-button-38" tabindex="-1" @@ -921,9 +925,9 @@ 38 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-38" ></div> @@ -931,13 +935,13 @@ </tr> <tr aria-labelledby="left-button-40 right-button-39 right-content-39" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="40"> + <td class="gr-diff left lineNum" data-value="40"> <button aria-label="40 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="40" id="left-button-40" tabindex="-1" @@ -945,10 +949,10 @@ 40 </button> </td> - <td class="lineNum right" data-value="39"> + <td class="gr-diff lineNum right" data-value="39"> <button aria-label="39 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="39" id="right-button-39" tabindex="-1" @@ -956,26 +960,26 @@ 39 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-39" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="right-button-40 right-content-40" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="40"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="40"> <button aria-label="40 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="40" id="right-button-40" tabindex="-1" @@ -983,9 +987,9 @@ 40 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-40" ></div> @@ -993,14 +997,14 @@ </tr> <tr aria-labelledby="right-button-41 right-content-41" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="41"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="41"> <button aria-label="41 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="41" id="right-button-41" tabindex="-1" @@ -1008,9 +1012,9 @@ 41 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-41" ></div> @@ -1018,14 +1022,14 @@ </tr> <tr aria-labelledby="right-button-42 right-content-42" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="42"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="42"> <button aria-label="42 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="42" id="right-button-42" tabindex="-1" @@ -1033,9 +1037,9 @@ 42 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-42" ></div> @@ -1043,14 +1047,14 @@ </tr> <tr aria-labelledby="right-button-43 right-content-43" - class="add diff-row unified" + class="add diff-row gr-diff unified" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="lineNum right" data-value="43"> + <td class="blankLineNum gr-diff left"></td> + <td class="gr-diff lineNum right" data-value="43"> <button aria-label="43 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="43" id="right-button-43" tabindex="-1" @@ -1058,25 +1062,25 @@ 43 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-43" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-41 right-button-44 right-content-44" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="41"> + <td class="gr-diff left lineNum" data-value="41"> <button aria-label="41 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="41" id="left-button-41" tabindex="-1" @@ -1084,10 +1088,10 @@ 41 </button> </td> - <td class="lineNum right" data-value="44"> + <td class="gr-diff lineNum right" data-value="44"> <button aria-label="44 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="44" id="right-button-44" tabindex="-1" @@ -1095,9 +1099,9 @@ 44 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-44" ></div> @@ -1105,13 +1109,13 @@ </tr> <tr aria-labelledby="left-button-42 right-button-45 right-content-45" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="42"> + <td class="gr-diff left lineNum" data-value="42"> <button aria-label="42 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="42" id="left-button-42" tabindex="-1" @@ -1119,10 +1123,10 @@ 42 </button> </td> - <td class="lineNum right" data-value="45"> + <td class="gr-diff lineNum right" data-value="45"> <button aria-label="45 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="45" id="right-button-45" tabindex="-1" @@ -1130,9 +1134,9 @@ 45 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-45" ></div> @@ -1140,13 +1144,13 @@ </tr> <tr aria-labelledby="left-button-43 right-button-46 right-content-46" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="43"> + <td class="gr-diff left lineNum" data-value="43"> <button aria-label="43 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="43" id="left-button-43" tabindex="-1" @@ -1154,10 +1158,10 @@ 43 </button> </td> - <td class="lineNum right" data-value="46"> + <td class="gr-diff lineNum right" data-value="46"> <button aria-label="46 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="46" id="right-button-46" tabindex="-1" @@ -1165,9 +1169,9 @@ 46 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-46" ></div> @@ -1175,13 +1179,13 @@ </tr> <tr aria-labelledby="left-button-44 right-button-47 right-content-47" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="44"> + <td class="gr-diff left lineNum" data-value="44"> <button aria-label="44 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="44" id="left-button-44" tabindex="-1" @@ -1189,10 +1193,10 @@ 44 </button> </td> - <td class="lineNum right" data-value="47"> + <td class="gr-diff lineNum right" data-value="47"> <button aria-label="47 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="47" id="right-button-47" tabindex="-1" @@ -1200,9 +1204,9 @@ 47 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-47" ></div> @@ -1210,13 +1214,13 @@ </tr> <tr aria-labelledby="left-button-45 right-button-48 right-content-48" - class="both diff-row unified" + class="both diff-row gr-diff unified" tabindex="-1" > - <td class="left lineNum" data-value="45"> + <td class="gr-diff left lineNum" data-value="45"> <button aria-label="45 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="45" id="left-button-45" tabindex="-1" @@ -1224,10 +1228,10 @@ 45 </button> </td> - <td class="lineNum right" data-value="48"> + <td class="gr-diff lineNum right" data-value="48"> <button aria-label="48 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="48" id="right-button-48" tabindex="-1" @@ -1235,9 +1239,9 @@ 48 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-48" ></div> @@ -1274,37 +1278,41 @@ <div class="diffContainer sideBySide"> <table id="diffTable"> <colgroup> - <col class="left" width="48" /> - <col class="left" /> - <col class="right" width="48" /> - <col class="right" /> + <col class="gr-diff left" width="48" /> + <col class="gr-diff left" /> + <col class="gr-diff right" width="48" /> + <col class="gr-diff right" /> </colgroup> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-LOST left-content-LOST right-button-LOST right-content-LOST" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="LOST"></td> - <td class="both content left lost no-intraline-info"></td> - <td class="lineNum right" data-value="LOST"></td> - <td class="both content lost no-intraline-info right"></td> + <td class="gr-diff left lineNum" data-value="LOST"></td> + <td + class="both content gr-diff left lost no-intraline-info" + ></td> + <td class="gr-diff lineNum right" data-value="LOST"></td> + <td + class="both content gr-diff lost no-intraline-info right" + ></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="FILE"> + <td class="gr-diff left lineNum" data-value="FILE"> <button aria-label="Add file comment" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="FILE" id="left-button-FILE" tabindex="-1" @@ -1312,11 +1320,13 @@ FILE </button> </td> - <td class="both content file left no-intraline-info"></td> - <td class="lineNum right" data-value="FILE"> + <td + class="both content file gr-diff left no-intraline-info" + ></td> + <td class="gr-diff lineNum right" data-value="FILE"> <button aria-label="Add file comment" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="FILE" id="right-button-FILE" tabindex="-1" @@ -1324,21 +1334,23 @@ FILE </button> </td> - <td class="both content file no-intraline-info right"></td> + <td + class="both content file gr-diff no-intraline-info right" + ></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="1"> + <td class="gr-diff left lineNum" data-value="1"> <button aria-label="1 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="1" id="left-button-1" tabindex="-1" @@ -1346,17 +1358,17 @@ 1 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-1" ></div> </td> - <td class="lineNum right" data-value="1"> + <td class="gr-diff lineNum right" data-value="1"> <button aria-label="1 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="1" id="right-button-1" tabindex="-1" @@ -1364,9 +1376,9 @@ 1 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-1" ></div> @@ -1374,15 +1386,15 @@ </tr> <tr aria-labelledby="left-button-2 left-content-2 right-button-2 right-content-2" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="2"> + <td class="gr-diff left lineNum" data-value="2"> <button aria-label="2 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="2" id="left-button-2" tabindex="-1" @@ -1390,17 +1402,17 @@ 2 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-2" ></div> </td> - <td class="lineNum right" data-value="2"> + <td class="gr-diff lineNum right" data-value="2"> <button aria-label="2 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="2" id="right-button-2" tabindex="-1" @@ -1408,9 +1420,9 @@ 2 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-2" ></div> @@ -1418,15 +1430,15 @@ </tr> <tr aria-labelledby="left-button-3 left-content-3 right-button-3 right-content-3" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="3"> + <td class="gr-diff left lineNum" data-value="3"> <button aria-label="3 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="3" id="left-button-3" tabindex="-1" @@ -1434,17 +1446,17 @@ 3 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-3" ></div> </td> - <td class="lineNum right" data-value="3"> + <td class="gr-diff lineNum right" data-value="3"> <button aria-label="3 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="3" id="right-button-3" tabindex="-1" @@ -1452,9 +1464,9 @@ 3 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-3" ></div> @@ -1462,15 +1474,15 @@ </tr> <tr aria-labelledby="left-button-4 left-content-4 right-button-4 right-content-4" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="4"> + <td class="gr-diff left lineNum" data-value="4"> <button aria-label="4 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="4" id="left-button-4" tabindex="-1" @@ -1478,17 +1490,17 @@ 4 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-4" ></div> </td> - <td class="lineNum right" data-value="4"> + <td class="gr-diff lineNum right" data-value="4"> <button aria-label="4 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="4" id="right-button-4" tabindex="-1" @@ -1496,31 +1508,31 @@ 4 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-4" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="right-button-5 right-content-5" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="5"> + <td class="gr-diff lineNum right" data-value="5"> <button aria-label="5 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="5" id="right-button-5" tabindex="-1" @@ -1528,9 +1540,9 @@ 5 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-5" ></div> @@ -1538,19 +1550,19 @@ </tr> <tr aria-labelledby="right-button-6 right-content-6" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="6"> + <td class="gr-diff lineNum right" data-value="6"> <button aria-label="6 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="6" id="right-button-6" tabindex="-1" @@ -1558,9 +1570,9 @@ 6 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-6" ></div> @@ -1568,19 +1580,19 @@ </tr> <tr aria-labelledby="right-button-7 right-content-7" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="7"> + <td class="gr-diff lineNum right" data-value="7"> <button aria-label="7 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="7" id="right-button-7" tabindex="-1" @@ -1588,27 +1600,27 @@ 7 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-7" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-5 left-content-5 right-button-8 right-content-8" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="5"> + <td class="gr-diff left lineNum" data-value="5"> <button aria-label="5 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="5" id="left-button-5" tabindex="-1" @@ -1616,17 +1628,17 @@ 5 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-5" ></div> </td> - <td class="lineNum right" data-value="8"> + <td class="gr-diff lineNum right" data-value="8"> <button aria-label="8 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="8" id="right-button-8" tabindex="-1" @@ -1634,9 +1646,9 @@ 8 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-8" ></div> @@ -1644,15 +1656,15 @@ </tr> <tr aria-labelledby="left-button-6 left-content-6 right-button-9 right-content-9" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="6"> + <td class="gr-diff left lineNum" data-value="6"> <button aria-label="6 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="6" id="left-button-6" tabindex="-1" @@ -1660,17 +1672,17 @@ 6 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-6" ></div> </td> - <td class="lineNum right" data-value="9"> + <td class="gr-diff lineNum right" data-value="9"> <button aria-label="9 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="9" id="right-button-9" tabindex="-1" @@ -1678,9 +1690,9 @@ 9 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-9" ></div> @@ -1688,15 +1700,15 @@ </tr> <tr aria-labelledby="left-button-7 left-content-7 right-button-10 right-content-10" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="7"> + <td class="gr-diff left lineNum" data-value="7"> <button aria-label="7 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="7" id="left-button-7" tabindex="-1" @@ -1704,17 +1716,17 @@ 7 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-7" ></div> </td> - <td class="lineNum right" data-value="10"> + <td class="gr-diff lineNum right" data-value="10"> <button aria-label="10 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="10" id="right-button-10" tabindex="-1" @@ -1722,9 +1734,9 @@ 10 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-10" ></div> @@ -1732,15 +1744,15 @@ </tr> <tr aria-labelledby="left-button-8 left-content-8 right-button-11 right-content-11" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="8"> + <td class="gr-diff left lineNum" data-value="8"> <button aria-label="8 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="8" id="left-button-8" tabindex="-1" @@ -1748,17 +1760,17 @@ 8 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-8" ></div> </td> - <td class="lineNum right" data-value="11"> + <td class="gr-diff lineNum right" data-value="11"> <button aria-label="11 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="11" id="right-button-11" tabindex="-1" @@ -1766,9 +1778,9 @@ 11 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-11" ></div> @@ -1776,15 +1788,15 @@ </tr> <tr aria-labelledby="left-button-9 left-content-9 right-button-12 right-content-12" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="9"> + <td class="gr-diff left lineNum" data-value="9"> <button aria-label="9 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="9" id="left-button-9" tabindex="-1" @@ -1792,17 +1804,17 @@ 9 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-9" ></div> </td> - <td class="lineNum right" data-value="12"> + <td class="gr-diff lineNum right" data-value="12"> <button aria-label="12 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="12" id="right-button-12" tabindex="-1" @@ -1810,27 +1822,27 @@ 12 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-12" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="left-button-10 left-content-10" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="blank" tabindex="-1" > - <td class="left lineNum" data-value="10"> + <td class="gr-diff left lineNum" data-value="10"> <button aria-label="10 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="10" id="left-button-10" tabindex="-1" @@ -1838,29 +1850,29 @@ 10 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-10" ></div> </td> - <td class="blankLineNum right"></td> - <td class="blank no-intraline-info right"> - <div class="contentText" data-side="right"></div> + <td class="blankLineNum gr-diff right"></td> + <td class="blank gr-diff no-intraline-info right"> + <div class="contentText gr-diff" data-side="right"></div> </td> </tr> <tr aria-labelledby="left-button-11 left-content-11" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="blank" tabindex="-1" > - <td class="left lineNum" data-value="11"> + <td class="gr-diff left lineNum" data-value="11"> <button aria-label="11 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="11" id="left-button-11" tabindex="-1" @@ -1868,29 +1880,29 @@ 11 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-11" ></div> </td> - <td class="blankLineNum right"></td> - <td class="blank no-intraline-info right"> - <div class="contentText" data-side="right"></div> + <td class="blankLineNum gr-diff right"></td> + <td class="blank gr-diff no-intraline-info right"> + <div class="contentText gr-diff" data-side="right"></div> </td> </tr> <tr aria-labelledby="left-button-12 left-content-12" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="blank" tabindex="-1" > - <td class="left lineNum" data-value="12"> + <td class="gr-diff left lineNum" data-value="12"> <button aria-label="12 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="12" id="left-button-12" tabindex="-1" @@ -1898,29 +1910,29 @@ 12 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-12" ></div> </td> - <td class="blankLineNum right"></td> - <td class="blank no-intraline-info right"> - <div class="contentText" data-side="right"></div> + <td class="blankLineNum gr-diff right"></td> + <td class="blank gr-diff no-intraline-info right"> + <div class="contentText gr-diff" data-side="right"></div> </td> </tr> <tr aria-labelledby="left-button-13 left-content-13" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="blank" tabindex="-1" > - <td class="left lineNum" data-value="13"> + <td class="gr-diff left lineNum" data-value="13"> <button aria-label="13 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="13" id="left-button-13" tabindex="-1" @@ -1928,31 +1940,31 @@ 13 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-13" ></div> </td> - <td class="blankLineNum right"></td> - <td class="blank no-intraline-info right"> - <div class="contentText" data-side="right"></div> + <td class="blankLineNum gr-diff right"></td> + <td class="blank gr-diff no-intraline-info right"> + <div class="contentText gr-diff" data-side="right"></div> </td> </tr> </tbody> - <tbody class="delta ignoredWhitespaceOnly section"> + <tbody class="delta gr-diff ignoredWhitespaceOnly section"> <tr aria-labelledby="left-button-14 left-content-14 right-button-13 right-content-13" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="add" tabindex="-1" > - <td class="left lineNum" data-value="14"> + <td class="gr-diff left lineNum" data-value="14"> <button aria-label="14 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="14" id="left-button-14" tabindex="-1" @@ -1960,17 +1972,17 @@ 14 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-14" ></div> </td> - <td class="lineNum right" data-value="13"> + <td class="gr-diff lineNum right" data-value="13"> <button aria-label="13 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="13" id="right-button-13" tabindex="-1" @@ -1978,9 +1990,9 @@ 13 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-13" ></div> @@ -1988,15 +2000,15 @@ </tr> <tr aria-labelledby="left-button-15 left-content-15 right-button-14 right-content-14" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="add" tabindex="-1" > - <td class="left lineNum" data-value="15"> + <td class="gr-diff left lineNum" data-value="15"> <button aria-label="15 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="15" id="left-button-15" tabindex="-1" @@ -2004,17 +2016,17 @@ 15 </button> </td> - <td class="content left no-intraline-info remove"> + <td class="content gr-diff left no-intraline-info remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-15" ></div> </td> - <td class="lineNum right" data-value="14"> + <td class="gr-diff lineNum right" data-value="14"> <button aria-label="14 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="14" id="right-button-14" tabindex="-1" @@ -2022,27 +2034,27 @@ 14 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-14" ></div> </td> </tr> </tbody> - <tbody class="delta section"> + <tbody class="delta gr-diff section"> <tr aria-labelledby="left-button-16 left-content-16 right-button-15 right-content-15" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="remove" right-type="add" tabindex="-1" > - <td class="left lineNum" data-value="16"> + <td class="gr-diff left lineNum" data-value="16"> <button aria-label="16 removed" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="16" id="left-button-16" tabindex="-1" @@ -2050,17 +2062,17 @@ 16 </button> </td> - <td class="content left remove"> + <td class="content gr-diff left remove"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-16" ></div> </td> - <td class="lineNum right" data-value="15"> + <td class="gr-diff lineNum right" data-value="15"> <button aria-label="15 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="15" id="right-button-15" tabindex="-1" @@ -2068,27 +2080,27 @@ 15 </button> </td> - <td class="add content right"> + <td class="add content gr-diff right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-15" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-17 left-content-17 right-button-16 right-content-16" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="17"> + <td class="gr-diff left lineNum" data-value="17"> <button aria-label="17 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="17" id="left-button-17" tabindex="-1" @@ -2096,17 +2108,17 @@ 17 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-17" ></div> </td> - <td class="lineNum right" data-value="16"> + <td class="gr-diff lineNum right" data-value="16"> <button aria-label="16 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="16" id="right-button-16" tabindex="-1" @@ -2114,9 +2126,9 @@ 16 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-16" ></div> @@ -2124,15 +2136,15 @@ </tr> <tr aria-labelledby="left-button-18 left-content-18 right-button-17 right-content-17" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="18"> + <td class="gr-diff left lineNum" data-value="18"> <button aria-label="18 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="18" id="left-button-18" tabindex="-1" @@ -2140,17 +2152,17 @@ 18 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-18" ></div> </td> - <td class="lineNum right" data-value="17"> + <td class="gr-diff lineNum right" data-value="17"> <button aria-label="17 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="17" id="right-button-17" tabindex="-1" @@ -2158,9 +2170,9 @@ 17 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-17" ></div> @@ -2168,15 +2180,15 @@ </tr> <tr aria-labelledby="left-button-19 left-content-19 right-button-18 right-content-18" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="19"> + <td class="gr-diff left lineNum" data-value="19"> <button aria-label="19 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="19" id="left-button-19" tabindex="-1" @@ -2184,17 +2196,17 @@ 19 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-19" ></div> </td> - <td class="lineNum right" data-value="18"> + <td class="gr-diff lineNum right" data-value="18"> <button aria-label="18 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="18" id="right-button-18" tabindex="-1" @@ -2202,56 +2214,57 @@ 18 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-18" ></div> </td> </tr> </tbody> - <tbody class="contextControl section"> + <tbody class="contextControl gr-diff section"> <tr - class="above contextBackground side-by-side" + class="above contextBackground gr-diff side-by-side" left-type="contextControl" right-type="contextControl" > - <td class="contextLineNum"></td> - <td></td> - <td class="contextLineNum"></td> - <td></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> - <tr class="dividerRow show-both"> - <td class="dividerCell" colspan="4"> + <tr class="dividerRow gr-diff show-both"> + <td class="dividerCell gr-diff" colspan="4"> <gr-context-controls + class="gr-diff" showconfig="both" ></gr-context-controls> </td> </tr> <tr - class="below contextBackground side-by-side" + class="below contextBackground gr-diff side-by-side" left-type="contextControl" right-type="contextControl" > - <td class="contextLineNum"></td> - <td></td> - <td class="contextLineNum"></td> - <td></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> + <td class="contextLineNum gr-diff"></td> + <td class="gr-diff"></td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-38 left-content-38 right-button-37 right-content-37" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="38"> + <td class="gr-diff left lineNum" data-value="38"> <button aria-label="38 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="38" id="left-button-38" tabindex="-1" @@ -2259,17 +2272,17 @@ 38 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-38" ></div> </td> - <td class="lineNum right" data-value="37"> + <td class="gr-diff lineNum right" data-value="37"> <button aria-label="37 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="37" id="right-button-37" tabindex="-1" @@ -2277,9 +2290,9 @@ 37 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-37" ></div> @@ -2287,15 +2300,15 @@ </tr> <tr aria-labelledby="left-button-39 left-content-39 right-button-38 right-content-38" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="39"> + <td class="gr-diff left lineNum" data-value="39"> <button aria-label="39 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="39" id="left-button-39" tabindex="-1" @@ -2303,17 +2316,17 @@ 39 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-39" ></div> </td> - <td class="lineNum right" data-value="38"> + <td class="gr-diff lineNum right" data-value="38"> <button aria-label="38 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="38" id="right-button-38" tabindex="-1" @@ -2321,9 +2334,9 @@ 38 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-38" ></div> @@ -2331,15 +2344,15 @@ </tr> <tr aria-labelledby="left-button-40 left-content-40 right-button-39 right-content-39" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="40"> + <td class="gr-diff left lineNum" data-value="40"> <button aria-label="40 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="40" id="left-button-40" tabindex="-1" @@ -2347,17 +2360,17 @@ 40 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-40" ></div> </td> - <td class="lineNum right" data-value="39"> + <td class="gr-diff lineNum right" data-value="39"> <button aria-label="39 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="39" id="right-button-39" tabindex="-1" @@ -2365,31 +2378,31 @@ 39 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-39" ></div> </td> </tr> </tbody> - <tbody class="delta section total"> + <tbody class="delta gr-diff section total"> <tr aria-labelledby="right-button-40 right-content-40" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="40"> + <td class="gr-diff lineNum right" data-value="40"> <button aria-label="40 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="40" id="right-button-40" tabindex="-1" @@ -2397,9 +2410,9 @@ 40 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-40" ></div> @@ -2407,19 +2420,19 @@ </tr> <tr aria-labelledby="right-button-41 right-content-41" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="41"> + <td class="gr-diff lineNum right" data-value="41"> <button aria-label="41 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="41" id="right-button-41" tabindex="-1" @@ -2427,9 +2440,9 @@ 41 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-41" ></div> @@ -2437,19 +2450,19 @@ </tr> <tr aria-labelledby="right-button-42 right-content-42" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="42"> + <td class="gr-diff lineNum right" data-value="42"> <button aria-label="42 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="42" id="right-button-42" tabindex="-1" @@ -2457,9 +2470,9 @@ 42 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-42" ></div> @@ -2467,19 +2480,19 @@ </tr> <tr aria-labelledby="right-button-43 right-content-43" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="blank" right-type="add" tabindex="-1" > - <td class="blankLineNum left"></td> - <td class="blank left no-intraline-info"> - <div class="contentText" data-side="left"></div> + <td class="blankLineNum gr-diff left"></td> + <td class="blank gr-diff left no-intraline-info"> + <div class="contentText gr-diff" data-side="left"></div> </td> - <td class="lineNum right" data-value="43"> + <td class="gr-diff lineNum right" data-value="43"> <button aria-label="43 added" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="43" id="right-button-43" tabindex="-1" @@ -2487,27 +2500,27 @@ 43 </button> </td> - <td class="add content no-intraline-info right"> + <td class="add content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-43" ></div> </td> </tr> </tbody> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-41 left-content-41 right-button-44 right-content-44" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="41"> + <td class="gr-diff left lineNum" data-value="41"> <button aria-label="41 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="41" id="left-button-41" tabindex="-1" @@ -2515,17 +2528,17 @@ 41 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-41" ></div> </td> - <td class="lineNum right" data-value="44"> + <td class="gr-diff lineNum right" data-value="44"> <button aria-label="44 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="44" id="right-button-44" tabindex="-1" @@ -2533,9 +2546,9 @@ 44 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-44" ></div> @@ -2543,15 +2556,15 @@ </tr> <tr aria-labelledby="left-button-42 left-content-42 right-button-45 right-content-45" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="42"> + <td class="gr-diff left lineNum" data-value="42"> <button aria-label="42 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="42" id="left-button-42" tabindex="-1" @@ -2559,17 +2572,17 @@ 42 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-42" ></div> </td> - <td class="lineNum right" data-value="45"> + <td class="gr-diff lineNum right" data-value="45"> <button aria-label="45 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="45" id="right-button-45" tabindex="-1" @@ -2577,9 +2590,9 @@ 45 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-45" ></div> @@ -2587,15 +2600,15 @@ </tr> <tr aria-labelledby="left-button-43 left-content-43 right-button-46 right-content-46" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="43"> + <td class="gr-diff left lineNum" data-value="43"> <button aria-label="43 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="43" id="left-button-43" tabindex="-1" @@ -2603,17 +2616,17 @@ 43 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-43" ></div> </td> - <td class="lineNum right" data-value="46"> + <td class="gr-diff lineNum right" data-value="46"> <button aria-label="46 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="46" id="right-button-46" tabindex="-1" @@ -2621,9 +2634,9 @@ 46 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-46" ></div> @@ -2631,15 +2644,15 @@ </tr> <tr aria-labelledby="left-button-44 left-content-44 right-button-47 right-content-47" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="44"> + <td class="gr-diff left lineNum" data-value="44"> <button aria-label="44 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="44" id="left-button-44" tabindex="-1" @@ -2647,17 +2660,17 @@ 44 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-44" ></div> </td> - <td class="lineNum right" data-value="47"> + <td class="gr-diff lineNum right" data-value="47"> <button aria-label="47 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="47" id="right-button-47" tabindex="-1" @@ -2665,9 +2678,9 @@ 47 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-47" ></div> @@ -2675,15 +2688,15 @@ </tr> <tr aria-labelledby="left-button-45 left-content-45 right-button-48 right-content-48" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="45"> + <td class="gr-diff left lineNum" data-value="45"> <button aria-label="45 unmodified" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="45" id="left-button-45" tabindex="-1" @@ -2691,17 +2704,17 @@ 45 </button> </td> - <td class="both content left no-intraline-info"> + <td class="both content gr-diff left no-intraline-info"> <div - class="contentText" + class="contentText gr-diff" data-side="left" id="left-content-45" ></div> </td> - <td class="lineNum right" data-value="48"> + <td class="gr-diff lineNum right" data-value="48"> <button aria-label="48 unmodified" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="48" id="right-button-48" tabindex="-1" @@ -2709,9 +2722,9 @@ 48 </button> </td> - <td class="both content no-intraline-info right"> + <td class="both content gr-diff no-intraline-info right"> <div - class="contentText" + class="contentText gr-diff" data-side="right" id="right-content-48" ></div> @@ -2764,23 +2777,23 @@ <gr-diff-row class="left-FILE right-FILE"> </gr-diff-row> <table id="diffTable"> <colgroup> - <col class="left" width="48" /> - <col class="left" /> - <col class="right" width="48" /> - <col class="right" /> + <col class="gr-diff left" width="48" /> + <col class="gr-diff left" /> + <col class="gr-diff right" width="48" /> + <col class="gr-diff right" /> </colgroup> - <tbody class="both section"> + <tbody class="both gr-diff section"> <tr aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE" - class="diff-row side-by-side" + class="diff-row gr-diff side-by-side" left-type="both" right-type="both" tabindex="-1" > - <td class="left lineNum" data-value="FILE"> + <td class="gr-diff left lineNum" data-value="FILE"> <button aria-label="Add file comment" - class="left lineNumButton" + class="gr-diff left lineNumButton" data-value="FILE" id="left-button-FILE" tabindex="-1" @@ -2788,11 +2801,13 @@ FILE </button> </td> - <td class="both content file left no-intraline-info"></td> - <td class="lineNum right" data-value="FILE"> + <td + class="both content file gr-diff left no-intraline-info" + ></td> + <td class="gr-diff lineNum right" data-value="FILE"> <button aria-label="Add file comment" - class="lineNumButton right" + class="gr-diff lineNumButton right" data-value="FILE" id="right-button-FILE" tabindex="-1" @@ -2800,12 +2815,14 @@ FILE </button> </td> - <td class="both content file no-intraline-info right"></td> + <td + class="both content file gr-diff no-intraline-info right" + ></td> </tr> </tbody> - <tbody class="binary-diff"> - <tr> - <td colspan="4"> + <tbody class="binary-diff gr-diff"> + <tr class="gr-diff"> + <td class="gr-diff" colspan="4"> <span> Difference in binary files </span> </td> </tr> @@ -2881,32 +2898,32 @@ assert.lightDom.equal( imageDiffSection, /* HTML */ ` - <tbody class="image-diff"> - <tr> - <td class="blank left lineNum"></td> - <td class="left"> + <tbody class="gr-diff image-diff"> + <tr class="gr-diff"> + <td class="blank gr-diff left lineNum"></td> + <td class="gr-diff left"> <img class="gr-diff left" src="data:image/bmp;base64,${mockFile1.body}" /> </td> - <td class="blank lineNum right"></td> - <td class="right"> + <td class="blank gr-diff lineNum right"></td> + <td class="gr-diff right"> <img class="gr-diff right" src="data:image/bmp;base64,${mockFile2.body}" /> </td> </tr> - <tr> - <td class="blank left lineNum"></td> - <td class="left"> + <tr class="gr-diff"> + <td class="blank gr-diff left lineNum"></td> + <td class="gr-diff left"> <label class="gr-diff"> <span class="gr-diff label"> 1×1 image/bmp </span> </label> </td> - <td class="blank lineNum right"></td> - <td class="right"> + <td class="blank gr-diff lineNum right"></td> + <td class="gr-diff right"> <label class="gr-diff"> <span class="gr-diff label"> 1×1 image/bmp </span> </label> @@ -2919,8 +2936,8 @@ assert.dom.equal( endpoint, /* HTML */ ` - <tbody class="endpoint"> - <tr> + <tbody class="gr-diff endpoint"> + <tr class="gr-diff"> <gr-endpoint-decorator class="gr-diff" name="image-diff"> <gr-endpoint-param class="gr-diff" name="baseImage"> </gr-endpoint-param>
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils.ts index b854830..6dc292e 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils.ts
@@ -318,11 +318,9 @@ /** * Simple helper method for creating element classes in the context of * gr-diff. This is just a super simple convenience function. - * - * TODO: Maybe rename this simple function or inline it everywhere? */ export function diffClasses(...additionalClasses: string[]) { - return additionalClasses.join(' '); + return ['gr-diff', ...additionalClasses].join(' '); } /** @@ -335,6 +333,7 @@ ): HTMLElement { const el = document.createElement(tagName); + el.classList.add('gr-diff'); if (classStr) { for (const className of classStr.split(' ')) { el.classList.add(className);
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils_test.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils_test.ts index fc68445..f425e2b 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-utils_test.ts
@@ -23,11 +23,12 @@ import {FILE, LOST, Side} from '../../../api/diff'; import {createDefaultDiffPrefs} from '../../../constants/constants'; -const LINE_BREAK_HTML = '<span class="br"></span>'; +const LINE_BREAK_HTML = '<span class="gr-diff br"></span>'; suite('gr-diff-utils tests', () => { test('createElementDiff classStr applies all classes', () => { const node = createElementDiff('div', 'test classes'); + assert.isTrue(node.classList.contains('gr-diff')); assert.isTrue(node.classList.contains('test')); assert.isTrue(node.classList.contains('classes')); }); @@ -82,7 +83,7 @@ test('tab wrapper style', () => { const pattern = new RegExp( - '^<span class="tab" ' + + '^<span class="gr-diff tab" ' + 'style="((?:-moz-)?tab-size: (\\d+);.?)+">\\t<\\/span>$' );
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts index c04e479..4e9e7e5 100644 --- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts +++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
@@ -785,7 +785,7 @@ // differences to highlight and apply them to the element as // annotations. annotate(contentEl: HTMLElement, _: HTMLElement, line: GrDiffLine) { - const HL_CLASS = 'intraline'; + const HL_CLASS = 'gr-diff intraline'; for (const highlight of line.highlights) { // The start and end indices could be the same if a highlight is // meant to start at the end of a line and continue onto the @@ -854,7 +854,7 @@ contentEl, index, length, - 'trailing-whitespace' + 'gr-diff trailing-whitespace' ); } }, @@ -972,7 +972,7 @@ // Skip forward by the length of the content pos += split[i].length; - GrAnnotationImpl.annotateElement(contentEl, pos, 1, className); + GrAnnotationImpl.annotateElement(contentEl, pos, 1, `gr-diff ${className}`); pos++; }
diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts index fa9a782..4d9c71a 100644 --- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts +++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts
@@ -49,8 +49,8 @@ [side in Side]: LinesMap; }; -const RANGE_BASE_ONLY = 'range'; -const RANGE_HIGHLIGHT = 'range rangeHighlight'; +const RANGE_BASE_ONLY = 'gr-diff range'; +const RANGE_HIGHLIGHT = 'gr-diff range rangeHighlight'; // Note that there is also `rangeHoverHighlight` being set by GrDiffHighlight. /**
diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts index 338ac07..7c25eeb 100644 --- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts
@@ -159,7 +159,10 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range rangeHighlight generated_a'); + assert.equal( + lastCall.args[3], + 'gr-diff range rangeHighlight generated_a' + ); }); test('type=Both has-comment', () => { @@ -176,7 +179,10 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range rangeHighlight generated_a'); + assert.equal( + lastCall.args[3], + 'gr-diff range rangeHighlight generated_a' + ); }); test('type=Both has-comment off side', () => { @@ -204,7 +210,10 @@ assert.equal(lastCall.args[0], el); assert.equal(lastCall.args[1], expectedStart); assert.equal(lastCall.args[2], expectedLength); - assert.equal(lastCall.args[3], 'range rangeHighlight generated_b'); + assert.equal( + lastCall.args[3], + 'gr-diff range rangeHighlight generated_b' + ); }); test('long range comment', () => { @@ -217,7 +226,7 @@ assert.isTrue(annotateElementStub.called); assert.equal( annotateElementStub.lastCall.args[3], - 'range generated_right-60-1-71-1' + 'gr-diff range generated_right-60-1-71-1' ); });
diff --git a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts index 4710c98..4e166ba 100644 --- a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts +++ b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts
@@ -99,7 +99,7 @@ ['text/vbscript', 'vbscript'], ]); -const CLASS_PREFIX = 'gr-syntax gr-syntax-'; +const CLASS_PREFIX = 'gr-diff gr-syntax gr-syntax-'; const CLASS_SAFELIST = new Set<string>([ 'attr',
diff --git a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker_test.ts b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker_test.ts index 221eada..c6c46f9 100644 --- a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker_test.ts +++ b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker_test.ts
@@ -139,7 +139,7 @@ const el = annotate(Side.LEFT, 1, 'import it;'); assert.equal( el.innerHTML, - '<hl class="gr-syntax gr-syntax-literal">import</hl> it;' + '<hl class="gr-diff gr-syntax gr-syntax-literal">import</hl> it;' ); assert.equal(listener.callCount, 2); assert.equal(listener.getCall(0).args[0], 1); @@ -155,9 +155,9 @@ const el = annotate(Side.RIGHT, 3, ' public static final {'); assert.equal( el.innerHTML, - ' <hl class="gr-syntax gr-syntax-literal">public</hl> ' + - '<hl class="gr-syntax gr-syntax-keyword">static</hl> ' + - '<hl class="gr-syntax gr-syntax-name">final</hl> {' + ' <hl class="gr-diff gr-syntax gr-syntax-literal">public</hl> ' + + '<hl class="gr-diff gr-syntax gr-syntax-keyword">static</hl> ' + + '<hl class="gr-diff gr-syntax gr-syntax-name">final</hl> {' ); assert.equal(listener.callCount, 2); });