Merge changes from topic "ts-diff-host"

* changes: Convert gr-diff-host to typescript Rename files to preserve history
2020-09-30 10:38:40 +00:00
parent 1fc24be084 1d487069fa
commit 2ce08db469
29 changed files with 1628 additions and 1485 deletions
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.js
@@ -27,6 +27,7 @@ import {runA11yAudit} from '../../../test/a11y-test-utils.js';
 import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 import {TestKeyboardShortcutBinder} from '../../../test/test-utils.js';
 import {Shortcut} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.js';
+import {ChangeComments} from '../../diff/gr-comment-api/gr-comment-api.js';

 const commentApiMock = createCommentApiMockWithTemplateElement(
    'gr-file-list-comment-api-mock', html`
@@ -351,7 +352,7 @@ suite('gr-file-list tests', () => {
    });

    test('comment filtering', () => {
-      element.changeComments._comments = {
+      const comments = {
        '/COMMIT_MSG': [
          {patch_set: 1, message: 'Done', updated: '2017-02-08 16:40:49'},
          {patch_set: 1, message: 'oh hay', updated: '2017-02-09 16:40:49'},
@@ -387,7 +388,7 @@ suite('gr-file-list tests', () => {
          },
        ],
      };
-      element.changeComments._drafts = {
+      const drafts = {
        '/COMMIT_MSG': [
          {
            patch_set: 1,
@@ -414,6 +415,7 @@ suite('gr-file-list tests', () => {
          },
        ],
      };
+      element.changeComments = new ChangeComments(comments, {}, drafts, 123);

      const parentTo1 = {
        basePatchNum: 'PARENT',
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
@@ -97,11 +97,8 @@ import {
  PolymerSplice,
  PolymerSpliceChange,
 } from '@polymer/polymer/interfaces';
-import {assertNever, hasOwnProperty} from '../../../utils/common-util';
-import {
-  CommentThread,
-  HumanCommentInfoWithPath,
-} from '../../diff/gr-comment-api/gr-comment-api';
+import {assertNever} from '../../../utils/common-util';
+import {CommentThread, isDraft} from '../../diff/gr-comment-api/gr-comment-api';
 import {GrTextarea} from '../../shared/gr-textarea/gr-textarea';
 import {GrAccountChip} from '../../shared/gr-account-chip/gr-account-chip';
 import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
@@ -1029,10 +1026,7 @@ export class GrReplyDialog extends KeyboardShortcutMixin(
  _containsNewCommentThread(threads: CommentThread[]) {
    return threads.some(
      thread =>
-        !!thread.comments &&
-        !!thread.comments[0] &&
-        hasOwnProperty(thread.comments[0], '__draft') &&
-        !!(thread.comments[0] as HumanCommentInfoWithPath).__draft
+        !!thread.comments && !!thread.comments[0] && isDraft(thread.comments[0])
    );
  }

--- a/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.ts
@@ -26,9 +26,12 @@ import {parseDate} from '../../../utils/date-util';

 import {NO_THREADS_MSG} from '../../../constants/messages';
 import {CommentSide, SpecialFilePath} from '../../../constants/constants';
-import {customElement, property, observe} from '@polymer/decorators';
-import {CommentThread} from '../../diff/gr-comment-api/gr-comment-api';
-import {Comment, RobotComment} from '../../shared/gr-comment/gr-comment';
+import {customElement, observe, property} from '@polymer/decorators';
+import {
+  CommentThread,
+  isDraft,
+  UIRobot,
+} from '../../diff/gr-comment-api/gr-comment-api';
 import {PolymerSpliceChange} from '@polymer/polymer/interfaces';
 import {ChangeInfo} from '../../../types/common';

@@ -303,27 +306,32 @@ export class GrThreadList extends GestureEventListeners(

  _getThreadWithStatusInfo(thread: CommentThread): CommentThreadWithInfo {
    const comments = thread.comments;
-    const lastComment = (comments[comments.length - 1] || {}) as Comment;
+    const lastComment = comments.length
+      ? comments[comments.length - 1]
+      : undefined;
    let hasRobotComment = false;
    let hasHumanReplyToRobotComment = false;
    comments.forEach(comment => {
-      if ((comment as RobotComment).robot_id) {
+      if ((comment as UIRobot).robot_id) {
        hasRobotComment = true;
      } else if (hasRobotComment) {
        hasHumanReplyToRobotComment = true;
      }
    });
+    let updated = undefined;
+    if (lastComment) {
+      if (isDraft(lastComment)) updated = lastComment.__date;
+      if (lastComment.updated) updated = parseDate(lastComment.updated);
+    }

    return {
      thread,
      hasRobotComment,
      hasHumanReplyToRobotComment,
-      unresolved: !!lastComment.unresolved,
-      isEditing: !!lastComment.__editing,
-      hasDraft: !!lastComment.__draft,
-      updated: lastComment.updated
-        ? parseDate(lastComment.updated)
-        : lastComment.__date,
+      unresolved: !!lastComment && !!lastComment.unresolved,
+      isEditing: !!lastComment && !!lastComment.__editing,
+      hasDraft: !!lastComment && isDraft(lastComment),
+      updated,
    };
  }

--- a/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_test.js
+++ b/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_test.js
@@ -154,7 +154,7 @@ suite('gr-thread-list tests', () => {
            message: 'resolved draft',
            unresolved: false,
            __draft: true,
-            __draftID: '0.m683trwff68',
+            __draftID: '0.m683trwff69',
            __editing: false,
            patch_set: '2',
          },
--- a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
+++ b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
@@ -38,11 +38,9 @@ import {
  RobotId,
 } from '../../../types/common';
 import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
-import {
-  CommentEventDetail,
-  isRobotComment,
-} from '../../shared/gr-comment/gr-comment';
+import {CommentEventDetail} from '../../shared/gr-comment/gr-comment';
 import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
+import {isRobot} from '../gr-comment-api/gr-comment-api';

 export interface GrApplyFixDialog {
  $: {
@@ -115,7 +113,7 @@ export class GrApplyFixDialog extends GestureEventListeners(
  open(e: CustomEvent<CommentEventDetail>) {
    const detail = e.detail;
    const comment = detail.comment;
-    if (!detail.patchNum || !comment || !isRobotComment(comment)) {
+    if (!detail.patchNum || !comment || !isRobot(comment)) {
      return Promise.resolve();
    }
    this._patchNum = detail.patchNum;
--- a/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api.ts
+++ b/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api.ts
@@ -27,12 +27,12 @@ import {
 } from '../../../utils/patch-set-util';
 import {customElement, property} from '@polymer/decorators';
 import {
+  CommentBasics,
  CommentInfo,
  ConfigInfo,
  ParentPatchSetNum,
  PatchRange,
  PatchSetNum,
-  PathToCommentsInfoMap,
  PathToRobotCommentsInfoMap,
  RobotCommentInfo,
  Timestamp,
@@ -40,36 +40,61 @@ import {
  NumericChangeId,
 } from '../../../types/common';
 import {hasOwnProperty} from '../../../utils/common-util';
-import {CommentSide} from '../../../constants/constants';
+import {CommentSide, Side} from '../../../constants/constants';
 import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';

-export interface HumanCommentInfoWithPath extends CommentInfo {
-  path: string;
+export interface DraftCommentProps {
  __draft?: boolean;
+  __draftID?: string;
  __date?: Date;
 }

-export interface RobotCommentInfoWithPath extends RobotCommentInfo {
-  path: string;
+export type DraftInfo = CommentBasics & DraftCommentProps;
+
+/**
+ * Each of the type implements or extends CommentBasics.
+ */
+export type Comment = DraftInfo | CommentInfo | RobotCommentInfo;
+
+export interface UIStateCommentProps {
+  // The `side` of the comment is PARENT or REVISION, but this is LEFT or RIGHT.
+  // TODO(TS): Remove the naming confusion of commentSide being of type of Side,
+  // but side being of type CommentSide. :-)
+  __commentSide?: Side;
+  // TODO(TS): Remove this. Seems to be exactly the same as `path`??
+  __path?: string;
+  collapsed?: boolean;
+  // TODO(TS): Consider allowing this only for drafts.
+  __editing?: boolean;
+  __otherEditing?: boolean;
 }

-export type CommentInfoWithPath =
-  | HumanCommentInfoWithPath
-  | RobotCommentInfoWithPath;
+export type UIDraft = DraftInfo & UIStateCommentProps;

-// TODO(TS): Can be removed, CommentInfoWithTwoPaths already has a path
-export type CommentInfoWithTwoPaths = CommentInfoWithPath & {__path: string};
+export type UIHuman = CommentInfo & UIStateCommentProps;

-export type PathToCommentsInfoWithPathMap = {
-  [path: string]: CommentInfoWithPath[];
-};
+export type UIRobot = RobotCommentInfo & UIStateCommentProps;
+
+export type UIComment = UIHuman | UIRobot | UIDraft;

 export type CommentMap = {[path: string]: boolean};

+export function isRobot<T extends CommentInfo>(
+  x: T | DraftInfo | RobotCommentInfo | undefined
+): x is RobotCommentInfo {
+  return !!x && !!(x as RobotCommentInfo).robot_id;
+}
+
+export function isDraft<T extends CommentInfo>(
+  x: T | UIDraft | undefined
+): x is UIDraft {
+  return !!x && !!(x as UIDraft).__draft;
+}
+
 export interface PatchSetFile {
  path: string;
  basePath?: string;
-  patchNum: PatchSetNum;
+  patchNum?: PatchSetNum;
 }

 export interface PatchNumOnly {
@@ -107,9 +132,13 @@ export function sortComments<T extends SortableComment>(comments: T[]): T[] {
 }

 export interface CommentThread {
-  comments: CommentInfoWithTwoPaths[];
+  comments: UIComment[];
  patchNum?: PatchSetNum;
  path: string;
+  // TODO(TS): It would be nice to use LineNumber here, but the comment thread
+  // element actually relies on line to be undefined for file comments. Be
+  // aware of element attribute getters and setters, if you try to refactor
+  // this. :-) Still worthwhile to do ...
  line?: number;
  rootId: UrlEncodedCommentId;
  commentSide?: CommentSide;
@@ -119,7 +148,7 @@ export type CommentIdToCommentThreadMap = {
  [urlEncodedCommentId: string]: CommentThread;
 };

-interface TwoSidesComments {
+export interface TwoSidesComments {
  // TODO(TS): remove meta - it is not used anywhere
  meta: {
    changeNum: NumericChangeId;
@@ -127,16 +156,16 @@ interface TwoSidesComments {
    patchRange: PatchRange;
    projectConfig?: ConfigInfo;
  };
-  left: CommentInfoWithPath[];
-  right: CommentInfoWithPath[];
+  left: UIComment[];
+  right: UIComment[];
 }

 export class ChangeComments {
-  private readonly _comments: PathToCommentsInfoWithPathMap;
+  private readonly _comments: {[path: string]: UIHuman[]};

-  private readonly _robotComments: PathToCommentsInfoWithPathMap;
+  private readonly _robotComments: {[path: string]: UIRobot[]};

-  private readonly _drafts: PathToCommentsInfoWithPathMap;
+  private readonly _drafts: {[path: string]: UIDraft[]};

  private readonly _changeNum: NumericChangeId;

@@ -145,9 +174,9 @@ export class ChangeComments {
   * elements of that which uses the gr-comment-api.
   */
  constructor(
-    comments: PathToCommentsInfoMap | undefined,
-    robotComments: PathToRobotCommentsInfoMap | undefined,
-    drafts: PathToCommentsInfoMap | undefined,
+    comments: {[path: string]: UIHuman[]} | undefined,
+    robotComments: {[path: string]: UIRobot[]} | undefined,
+    drafts: {[path: string]: UIDraft[]} | undefined,
    changeNum: NumericChangeId
  ) {
    this._comments = this._addPath(comments);
@@ -164,10 +193,10 @@ export class ChangeComments {
   * TODO(taoalpha): should consider changing BE to send path
   * back within CommentInfo
   */
-  _addPath(
-    comments: PathToCommentsInfoMap = {}
-  ): PathToCommentsInfoWithPathMap {
-    const updatedComments: PathToCommentsInfoWithPathMap = {};
+  _addPath<T>(
+    comments: {[path: string]: T[]} = {}
+  ): {[path: string]: Array<T & {path: string}>} {
+    const updatedComments: {[path: string]: Array<T & {path: string}>} = {};
    for (const filePath of Object.keys(comments)) {
      const allCommentsForPath = comments[filePath] || [];
      if (allCommentsForPath.length) {
@@ -191,10 +220,8 @@ export class ChangeComments {
    return this._robotComments;
  }

-  findCommentById(
-    commentId: UrlEncodedCommentId
-  ): HumanCommentInfoWithPath | RobotCommentInfoWithPath | undefined {
-    const findComment = (comments: PathToCommentsInfoWithPathMap) => {
+  findCommentById(commentId: UrlEncodedCommentId): Comment | undefined {
+    const findComment = (comments: {[path: string]: CommentBasics[]}) => {
      let comment;
      for (const path of Object.keys(comments)) {
        comment = comment || comments[path].find(c => c.id === commentId);
@@ -216,7 +243,11 @@ export class ChangeComments {
   * patchNum and basePatchNum properties to represent the range.
   */
  getPaths(patchRange?: PatchRange): CommentMap {
-    const responses = [this.comments, this.drafts, this.robotComments];
+    const responses: {[path: string]: UIComment[]}[] = [
+      this.comments,
+      this.drafts,
+      this.robotComments,
+    ];
    const commentMap: CommentMap = {};
    for (const response of responses) {
      for (const path in response) {
@@ -240,9 +271,7 @@ export class ChangeComments {
  /**
   * Gets all the comments and robot comments for the given change.
   */
-  getAllPublishedComments(
-    patchNum?: PatchSetNum
-  ): PathToCommentsInfoWithPathMap {
+  getAllPublishedComments(patchNum?: PatchSetNum) {
    return this.getAllComments(false, patchNum);
  }

@@ -263,12 +292,9 @@ export class ChangeComments {
  /**
   * Gets all the comments and robot comments for the given change.
   */
-  getAllComments(
-    includeDrafts?: boolean,
-    patchNum?: PatchSetNum
-  ): PathToCommentsInfoWithPathMap {
+  getAllComments(includeDrafts?: boolean, patchNum?: PatchSetNum) {
    const paths = this.getPaths();
-    const publishedComments: PathToCommentsInfoWithPathMap = {};
+    const publishedComments: {[path: string]: CommentBasics[]} = {};
    for (const path of Object.keys(paths)) {
      publishedComments[path] = this.getAllCommentsForPath(
        path,
@@ -282,9 +308,9 @@ export class ChangeComments {
  /**
   * Gets all the drafts for the given change.
   */
-  getAllDrafts(patchNum?: PatchSetNum): PathToCommentsInfoWithPathMap {
+  getAllDrafts(patchNum?: PatchSetNum) {
    const paths = this.getPaths();
-    const drafts: PathToCommentsInfoWithPathMap = {};
+    const drafts: {[path: string]: UIDraft[]} = {};
    for (const path of Object.keys(paths)) {
      drafts[path] = this.getAllDraftsForPath(path, patchNum);
    }
@@ -302,8 +328,8 @@ export class ChangeComments {
    path: string,
    patchNum?: PatchSetNum,
    includeDrafts?: boolean
-  ): CommentInfoWithPath[] {
-    const comments = this._comments[path] || [];
+  ): Comment[] {
+    const comments: Comment[] = this._comments[path] || [];
    const robotComments = this._robotComments[path] || [];
    let allComments = comments.concat(robotComments);
    if (includeDrafts) {
@@ -347,10 +373,7 @@ export class ChangeComments {
   * This will return a shallow copy of all drafts every time,
   * so changes on any copy will not affect other copies.
   */
-  getAllDraftsForPath(
-    path: string,
-    patchNum?: PatchSetNum
-  ): CommentInfoWithPath[] {
+  getAllDraftsForPath(path: string, patchNum?: PatchSetNum): Comment[] {
    let comments = this._drafts[path] || [];
    if (patchNum) {
      comments = comments.filter(c => patchNumEquals(c.patch_set, patchNum));
@@ -365,7 +388,7 @@ export class ChangeComments {
   *
   * // TODO(taoalpha): maybe merge in *ForPath
   */
-  getAllDraftsForFile(file: PatchSetFile): CommentInfoWithPath[] {
+  getAllDraftsForFile(file: PatchSetFile): Comment[] {
    let allDrafts = this.getAllDraftsForPath(file.path, file.patchNum);
    if (file.basePath) {
      allDrafts = allDrafts.concat(
@@ -390,9 +413,9 @@ export class ChangeComments {
    patchRange: PatchRange,
    projectConfig?: ConfigInfo
  ): TwoSidesComments {
-    let comments: CommentInfoWithPath[] = [];
-    let drafts: CommentInfoWithPath[] = [];
-    let robotComments: CommentInfoWithPath[] = [];
+    let comments: Comment[] = [];
+    let drafts: DraftInfo[] = [];
+    let robotComments: RobotCommentInfo[] = [];
    if (this.comments && this.comments[path]) {
      comments = this.comments[path];
    }
@@ -404,11 +427,10 @@ export class ChangeComments {
    }

    drafts.forEach(d => {
-      // drafts don't include robot comments
-      (d as HumanCommentInfoWithPath).__draft = true;
+      d.__draft = true;
    });

-    const all = comments
+    const all: Comment[] = comments
      .concat(drafts)
      .concat(robotComments)
      .map(c => {
@@ -450,7 +472,7 @@ export class ChangeComments {
    file: PatchSetFile,
    patchRange: PatchRange,
    projectConfig?: ConfigInfo
-  ) {
+  ): TwoSidesComments {
    const comments = this.getCommentsBySideForPath(
      file.path,
      patchRange,
@@ -476,24 +498,22 @@ export class ChangeComments {
   * also includes the file that it was left on, which was the key of the
   * originall object.
   */
-  _commentObjToArrayWithFile(
-    comments: PathToCommentsInfoWithPathMap
-  ): CommentInfoWithTwoPaths[] {
-    let commentArr: CommentInfoWithTwoPaths[] = [];
+  _commentObjToArrayWithFile<T>(comments: {
+    [path: string]: T[];
+  }): Array<T & {__path: string}> {
+    let commentArr: Array<T & {__path: string}> = [];
    for (const file of Object.keys(comments)) {
-      const commentsForFile = [];
+      const commentsForFile: Array<T & {__path: string}> = [];
      for (const comment of comments[file]) {
-        commentsForFile.push({__path: file, ...comment});
+        commentsForFile.push({...comment, __path: file});
      }
      commentArr = commentArr.concat(commentsForFile);
    }
    return commentArr;
  }

-  _commentObjToArray(
-    comments: PathToCommentsInfoWithPathMap
-  ): CommentInfoWithPath[] {
-    let commentArr: CommentInfoWithPath[] = [];
+  _commentObjToArray<T>(comments: {[path: string]: T[]}): T[] {
+    let commentArr: T[] = [];
    for (const file of Object.keys(comments)) {
      commentArr = commentArr.concat(comments[file]);
    }
@@ -527,8 +547,8 @@ export class ChangeComments {
   * Computes a number of unresolved comment threads in a given file and path.
   */
  computeUnresolvedNum(file: PatchSetFile | PatchNumOnly) {
-    let comments: CommentInfoWithPath[] = [];
-    let drafts: CommentInfoWithPath[] = [];
+    let comments: Comment[] = [];
+    let drafts: Comment[] = [];

    if (isPatchSetFile(file)) {
      comments = this.getAllCommentsForFile(file);
@@ -541,12 +561,7 @@ export class ChangeComments {

    comments = comments.concat(drafts);

-    // TODO(TS): the 'as CommentInfoWithTwoPaths[]' is completely wrong below
-    // However, this doesn't affect the final result of computeUnresolvedNum
-    // This should be fixed by removing CommentInfoWithTwoPaths later
-    const threads = this.getCommentThreads(
-      sortComments(comments) as CommentInfoWithTwoPaths[]
-    );
+    const threads = this.getCommentThreads(sortComments(comments));

    const unresolvedThreads = threads.filter(
      thread =>
@@ -568,7 +583,7 @@ export class ChangeComments {
   *
   * @param comments sorted by updated timestamp.
   */
-  getCommentThreads(comments: CommentInfoWithTwoPaths[]) {
+  getCommentThreads(comments: UIComment[]) {
    const threads: CommentThread[] = [];
    const idThreadMap: CommentIdToCommentThreadMap = {};
    for (const comment of comments) {
@@ -585,10 +600,13 @@ export class ChangeComments {
      }

      // Otherwise, this comment starts its own thread.
+      if (!comment.__path && !comment.path) {
+        throw new Error('Comment missing required "path".');
+      }
      const newThread: CommentThread = {
        comments: [comment],
        patchNum: comment.patch_set,
-        path: comment.__path,
+        path: comment.__path || comment.path!,
        line: comment.line,
        rootId: comment.id,
      };
@@ -605,7 +623,7 @@ export class ChangeComments {
   * Whether the given comment should be included in the base side of the
   * given patch range.
   */
-  _isInBaseOfPatchRange(comment: CommentInfo, range: PatchRange) {
+  _isInBaseOfPatchRange(comment: CommentBasics, range: PatchRange) {
    // If the base of the patch range is a parent of a merge, and the comment
    // appears on a specific parent then only show the comment if the parent
    // index of the comment matches that of the range.
@@ -636,7 +654,7 @@ export class ChangeComments {
   * Whether the given comment should be included in the revision side of the
   * given patch range.
   */
-  _isInRevisionOfPatchRange(comment: CommentInfo, range: PatchRange) {
+  _isInRevisionOfPatchRange(comment: CommentBasics, range: PatchRange) {
    return (
      comment.side !== CommentSide.PARENT &&
      patchNumEquals(comment.patch_set, range.patchNum)
@@ -646,7 +664,7 @@ export class ChangeComments {
  /**
   * Whether the given comment should be included in the given patch range.
   */
-  _isInPatchRange(comment: CommentInfo, range: PatchRange): boolean {
+  _isInPatchRange(comment: CommentBasics, range: PatchRange): boolean {
    return (
      this._isInBaseOfPatchRange(comment, range) ||
      this._isInRevisionOfPatchRange(comment, range)
--- a/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_test.js
@@ -17,6 +17,7 @@

 import '../../../test/common-test-setup-karma.js';
 import './gr-comment-api.js';
+import {ChangeComments} from './gr-comment-api.js';

 const basicFixture = fixtureFromElement('gr-comment-api');

@@ -216,7 +217,7 @@ suite('gr-comment-api tests', () => {
      }

      setup(() => {
-        element._changeComments._drafts = {
+        const drafts = {
          'file/one': [
            {
              id: '11',
@@ -244,7 +245,7 @@ suite('gr-comment-api tests', () => {
            },
          ],
        };
-        element._changeComments._robotComments = {
+        const robotComments = {
          'file/one': [
            {
              id: '01',
@@ -268,7 +269,7 @@ suite('gr-comment-api tests', () => {
            },
          ],
        };
-        element._changeComments._comments = {
+        const comments = {
          'file/one': [
            {
              id: '03',
@@ -305,6 +306,8 @@ suite('gr-comment-api tests', () => {
            {id: '10', patch_set: 5, line: 1, updated: makeTime(1)},
          ],
        };
+        element._changeComments =
+            new ChangeComments(comments, robotComments, drafts, 1234);
      });

      test('getPaths', () => {
@@ -405,9 +408,7 @@ suite('gr-comment-api tests', () => {
      });

      test('computeUnresolvedNum w/ non-linear thread', () => {
-        element._changeComments._drafts = {};
-        element._changeComments._robotComments = {};
-        element._changeComments._comments = {
+        const comments = {
          path: [{
            id: '9c6ba3c6_28b7d467',
            patch_set: 1,
@@ -433,6 +434,7 @@ suite('gr-comment-api tests', () => {
            unresolved: false,
          }],
        };
+        element._changeComments = new ChangeComments(comments, {}, {}, 1234);
        assert.equal(
            element._changeComments.computeUnresolvedNum(1, 'path'), 0);
      });
@@ -523,6 +525,7 @@ suite('gr-comment-api tests', () => {
                  end_line: 2,
                  end_character: 2,
                },
+                path: 'file/one',
                __path: 'file/one',
              },
            ],
@@ -538,6 +541,7 @@ suite('gr-comment-api tests', () => {
                patch_set: 2,
                side: 'PARENT',
                line: 2,
+                path: 'file/one',
                __path: 'file/one',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -553,6 +557,7 @@ suite('gr-comment-api tests', () => {
                id: '04',
                patch_set: 2,
                line: 1,
+                path: 'file/one',
                __path: 'file/one',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -562,6 +567,7 @@ suite('gr-comment-api tests', () => {
                patch_set: 2,
                unresolved: true,
                line: 1,
+                path: 'file/one',
                __path: 'file/one',
                updated: '2013-02-26 15:03:43.986000000',
              },
@@ -570,6 +576,7 @@ suite('gr-comment-api tests', () => {
                in_reply_to: '04',
                patch_set: 2,
                line: 1,
+                path: 'file/one',
                __path: 'file/one',
                __draft: true,
                updated: '2013-02-26 15:02:43.986000000',
@@ -585,6 +592,7 @@ suite('gr-comment-api tests', () => {
                id: '05',
                patch_set: 2,
                line: 2,
+                path: 'file/two',
                __path: 'file/two',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -599,6 +607,7 @@ suite('gr-comment-api tests', () => {
                id: '06',
                patch_set: 3,
                line: 2,
+                path: 'file/two',
                __path: 'file/two',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -615,6 +624,7 @@ suite('gr-comment-api tests', () => {
                side: 'PARENT',
                unresolved: true,
                line: 1,
+                path: 'file/three',
                __path: 'file/three',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -630,6 +640,7 @@ suite('gr-comment-api tests', () => {
                id: '08',
                patch_set: 3,
                line: 1,
+                path: 'file/three',
                __path: 'file/three',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -645,6 +656,7 @@ suite('gr-comment-api tests', () => {
                patch_set: 5,
                side: 'PARENT',
                line: 1,
+                path: 'file/four',
                __path: 'file/four',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -660,6 +672,7 @@ suite('gr-comment-api tests', () => {
                id: '10',
                patch_set: 5,
                line: 1,
+                path: 'file/four',
                __path: 'file/four',
                updated: '2013-02-26 15:01:43.986000000',
              },
@@ -674,6 +687,7 @@ suite('gr-comment-api tests', () => {
                id: '05',
                patch_set: 3,
                line: 1,
+                path: 'file/two',
                __path: 'file/two',
                __draft: true,
                updated: '2013-02-26 15:03:43.986000000',
@@ -690,6 +704,7 @@ suite('gr-comment-api tests', () => {
                patch_set: 2,
                side: 'PARENT',
                line: 1,
+                path: 'file/one',
                __path: 'file/one',
                __draft: true,
                updated: '2013-02-26 15:03:43.986000000',
@@ -710,6 +725,7 @@ suite('gr-comment-api tests', () => {
        let expectedComments = [
          {
            __path: 'file/one',
+            path: 'file/one',
            id: '04',
            patch_set: 2,
            line: 1,
@@ -717,6 +733,7 @@ suite('gr-comment-api tests', () => {
          },
          {
            __path: 'file/one',
+            path: 'file/one',
            id: '02',
            in_reply_to: '04',
            patch_set: 2,
@@ -726,6 +743,7 @@ suite('gr-comment-api tests', () => {
          },
          {
            __path: 'file/one',
+            path: 'file/one',
            __draft: true,
            id: '12',
            in_reply_to: '04',
@@ -742,6 +760,7 @@ suite('gr-comment-api tests', () => {
          patch_set: 2,
          side: 'PARENT',
          line: 1,
+          path: 'file/one',
          __path: 'file/one',
          __draft: true,
          updated: '2013-02-26 15:03:43.986000000',
--- a/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer.ts
+++ b/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer.ts
@@ -18,7 +18,7 @@ import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-l
 import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
 import {PolymerElement} from '@polymer/polymer/polymer-element';
 import {htmlTemplate} from './gr-coverage-layer_html';
-import {CoverageType, DiffLayer} from '../../../types/types';
+import {CoverageRange, CoverageType, DiffLayer} from '../../../types/types';
 import {customElement, property} from '@polymer/decorators';

 declare global {
@@ -45,11 +45,9 @@ export class GrCoverageLayer
  /**
   * Must be sorted by code_range.start_line.
   * Must only contain ranges that match the side.
-   *
   */
-  // TODO(TS): convert into AnnotationLayer once gr-diff-is converted
  @property({type: Array})
-  coverageRanges: any[] = [];
+  coverageRanges: CoverageRange[] = [];

  @property({type: String})
  side?: string;
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element.ts
@@ -317,9 +317,7 @@ export class GrDiffBuilderElement extends GestureEventListeners(
  }

  getSideByLineEl(lineEl: Element) {
-    return lineEl.classList.contains(GrDiffBuilder.Side.RIGHT)
-      ? Side.RIGHT
-      : Side.LEFT;
+    return lineEl.classList.contains(Side.RIGHT) ? Side.RIGHT : Side.LEFT;
  }

  emitGroup(group: GrDiffGroup, sectionEl: HTMLElement) {
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts
@@ -24,6 +24,7 @@ import {
 } from '../gr-diff/gr-diff-group';
 import {BlameInfo, DiffInfo, DiffPreferencesInfo} from '../../../types/common';
 import {Side} from '../../../constants/constants';
+import {DiffLayer} from '../../../types/types';

 /**
 * In JS, unicode code points above 0xFFFF occupy two elements of a string.
@@ -86,8 +87,7 @@ export abstract class GrDiffBuilder {
    diff: DiffInfo,
    prefs: DiffPreferencesInfo,
    outputEl: HTMLElement,
-    // TODO(TS): Replace any by a layer interface.
-    readonly layers: any[] = []
+    readonly layers: DiffLayer[] = []
  ) {
    this._diff = diff;
    this._numLinesLeft = this._diff.content
@@ -142,12 +142,6 @@ export abstract class GrDiffBuilder {
    REMOVED: 'edit_a',
  };

-  // TODO(TS): Convert to enum.
-  static readonly Side = {
-    LEFT: 'left',
-    RIGHT: 'right',
-  };
-
  // TODO(TS): Replace usages with ContextButtonType enum.
  static readonly ContextButtonType = {
    ABOVE: 'above',
@@ -480,11 +474,15 @@ export abstract class GrDiffBuilder {
        contentText.setAttribute('data-side', side);
      }

+      if (lineNumberEl) {
        for (const layer of this.layers) {
          if (typeof layer.annotate === 'function') {
            layer.annotate(contentText, lineNumberEl, line);
          }
        }
+      } else {
+        console.error('The lineNumberEl is null, skipping layer annotations.');
+      }

      td.appendChild(contentText);
    } else {
--- a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.ts
@@ -26,9 +26,8 @@ import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-l
 import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
 import {PolymerElement} from '@polymer/polymer/polymer-element';
 import {htmlTemplate} from './gr-diff-cursor_html';
-import {ScrollMode} from '../../../constants/constants';
+import {ScrollMode, Side} from '../../../constants/constants';
 import {customElement, property, observe} from '@polymer/decorators';
-import {DiffSide} from '../gr-diff/gr-diff-utils';
 import {GrDiffLineType} from '../gr-diff/gr-diff-line';
 import {PolymerSpliceChange} from '@polymer/polymer/interfaces';
 import {PolymerDomWrapper} from '../../../types/types';
@@ -83,7 +82,7 @@ export class GrDiffCursor extends GestureEventListeners(
  private _lastDisplayedNavigateToNextFileToast: number | null = null;

  @property({type: String})
-  side = DiffSide.RIGHT;
+  side = Side.RIGHT;

  @property({type: Object, notify: true, observer: '_rowChanged'})
  diffRow?: HTMLElement;
@@ -162,14 +161,14 @@ export class GrDiffCursor extends GestureEventListeners(
  }

  moveLeft() {
-    this.side = DiffSide.LEFT;
+    this.side = Side.LEFT;
    if (this._isTargetBlank()) {
      this.moveUp();
    }
  }

  moveRight() {
-    this.side = DiffSide.RIGHT;
+    this.side = Side.RIGHT;
    if (this._isTargetBlank()) {
      this.moveUp();
    }
@@ -272,7 +271,7 @@ export class GrDiffCursor extends GestureEventListeners(
    this._fixSide();
  }

-  moveToLineNumber(number: number, side: DiffSide, path?: string) {
+  moveToLineNumber(number: number, side: Side, path?: string) {
    const row = this._findRowByNumberAndFile(number, side, path);
    if (row) {
      this.side = side;
@@ -291,7 +290,7 @@ export class GrDiffCursor extends GestureEventListeners(
    }

    if (this._getViewMode() === DiffViewMode.SIDE_BY_SIDE) {
-      lineElSelector += this.side === DiffSide.LEFT ? '.left' : '.right';
+      lineElSelector += this.side === Side.LEFT ? '.left' : '.right';
    }

    return this.diffRow.querySelector(lineElSelector);
@@ -452,7 +451,7 @@ export class GrDiffCursor extends GestureEventListeners(

  _rowHasSide(row: Element) {
    const selector =
-      (this.side === DiffSide.LEFT ? '.left' : '.right') + ' + .content';
+      (this.side === Side.LEFT ? '.left' : '.right') + ' + .content';
    return !!row.querySelector(selector);
  }

@@ -478,7 +477,7 @@ export class GrDiffCursor extends GestureEventListeners(
      this._getViewMode() === DiffViewMode.SIDE_BY_SIDE &&
      this._isTargetBlank()
    ) {
-      this.side = this.side === DiffSide.LEFT ? DiffSide.RIGHT : DiffSide.LEFT;
+      this.side = this.side === Side.LEFT ? Side.RIGHT : Side.LEFT;
    }
  }

@@ -489,8 +488,8 @@ export class GrDiffCursor extends GestureEventListeners(

    const actions = this._getActionsForRow();
    return (
-      (this.side === DiffSide.LEFT && !actions.left) ||
-      (this.side === DiffSide.RIGHT && !actions.right)
+      (this.side === Side.LEFT && !actions.left) ||
+      (this.side === Side.RIGHT && !actions.right)
    );
  }

@@ -506,16 +505,8 @@ export class GrDiffCursor extends GestureEventListeners(
    if (!this.diffRow) {
      return;
    }
-    this.toggleClass(
-      LEFT_SIDE_CLASS,
-      this.side === DiffSide.LEFT,
-      this.diffRow
-    );
-    this.toggleClass(
-      RIGHT_SIDE_CLASS,
-      this.side === DiffSide.RIGHT,
-      this.diffRow
-    );
+    this.toggleClass(LEFT_SIDE_CLASS, this.side === Side.LEFT, this.diffRow);
+    this.toggleClass(RIGHT_SIDE_CLASS, this.side === Side.RIGHT, this.diffRow);
  }

  _isActionType(type: GrDiffRowType) {
@@ -601,7 +592,7 @@ export class GrDiffCursor extends GestureEventListeners(

  _findRowByNumberAndFile(
    targetNumber: number,
-    side: DiffSide,
+    side: Side,
    path?: string
  ): HTMLElement | undefined {
    let stops;
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.ts
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.js
@@ -20,8 +20,8 @@ import './gr-diff-host.js';
 import {GrDiffBuilderImage} from '../gr-diff-builder/gr-diff-builder-image.js';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation.js';
 import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import {DiffSide} from '../gr-diff/gr-diff-utils.js';
 import {sortComments} from '../gr-comment-api/gr-comment-api.js';
+import {Side} from '../../../constants/constants.js';

 const basicFixture = fixtureFromElement('gr-diff-host');

@@ -36,6 +36,8 @@ suite('gr-diff-host tests', () => {
      async getLoggedIn() { return getLoggedIn; },
    });
    element = basicFixture.instantiate();
+    element.changeNum = 123;
+    element.path = 'some/path';
    sinon.stub(element.reporting, 'time');
    sinon.stub(element.reporting, 'timeEnd');
  });
@@ -47,6 +49,8 @@ suite('gr-diff-host tests', () => {
        getDiffLayers() { return pluginLayers; },
      });
      element = basicFixture.instantiate();
+      element.changeNum = 123;
+      element.path = 'some/path';
    });
    test('plugin layers requested', () => {
      element.patchRange = {};
@@ -172,7 +176,6 @@ suite('gr-diff-host tests', () => {
      ],
    };

-    element._removeComment({});
    // Using JSON.stringify because Safari 9.1 (11601.5.17.1) doesn’t seem
    // to believe that one object deepEquals another even when they do :-/.
    assert.equal(JSON.stringify(element.comments), JSON.stringify({
@@ -249,12 +252,20 @@ suite('gr-diff-host tests', () => {
  });

  test('thread-discard handling', () => {
-    const threads = [
-      {comments: [{id: 4711}]},
-      {comments: [{id: 42}]},
-    ];
+    const threads = element._createThreads([
+      {
+        id: 4711,
+        __commentSide: 'left',
+        updated: '2015-12-20 15:01:20.396000000',
+      },
+      {
+        id: 42,
+        __commentSide: 'left',
+        updated: '2017-12-20 15:01:20.396000000',
+      },
+    ]);
    element._parentIndex = 1;
-    element.changeNum = '2';
+    element.changeNum = 2;
    element.path = 'some/path';
    element.projectName = 'Some project';
    const threadEls = threads.map(
@@ -268,8 +279,8 @@ suite('gr-diff-host tests', () => {
          return threadEl;
        });
    assert.equal(threadEls.length, 2);
-    assert.equal(threadEls[0].rootId, 4711);
-    assert.equal(threadEls[1].rootId, 42);
+    assert.equal(threadEls[0].comments[0].id, 4711);
+    assert.equal(threadEls[1].comments[0].id, 42);
    for (const threadEl of threadEls) {
      element.appendChild(threadEl);
    }
@@ -279,7 +290,7 @@ suite('gr-diff-host tests', () => {
    const attachedThreads = element.queryAllEffectiveChildren(
        'gr-comment-thread');
    assert.equal(attachedThreads.length, 1);
-    assert.equal(attachedThreads[0].rootId, 42);
+    assert.equal(attachedThreads[0].comments[0].id, 42);
  });

  suite('render reporting', () => {
@@ -393,6 +404,8 @@ suite('gr-diff-host tests', () => {
    setup(() => {
      getLoggedIn = false;
      element = basicFixture.instantiate();
+      element.changeNum = 123;
+      element.path = 'some/path';
    });

    test('reload() loads files weblinks', () => {
@@ -852,6 +865,8 @@ suite('gr-diff-host tests', () => {
  suite('blame', () => {
    setup(() => {
      element = basicFixture.instantiate();
+      element.changeNum = 123;
+      element.path = 'some/path';
    });

    test('clearBlame', () => {
@@ -933,9 +948,8 @@ suite('gr-diff-host tests', () => {
  });

  test('passes in changeNum', () => {
-    const value = '12345';
-    element.changeNum = value;
-    assert.equal(element.$.diff.changeNum, value);
+    element.changeNum = 12345;
+    assert.equal(element.$.diff.changeNum, 12345);
  });

  test('passes in noAutoRender', () => {
@@ -963,9 +977,8 @@ suite('gr-diff-host tests', () => {
  });

  test('passes in changeNum', () => {
-    const value = '12345';
-    element.changeNum = value;
-    assert.equal(element.$.diff.changeNum, value);
+    element.changeNum = 12345;
+    assert.equal(element.$.diff.changeNum, 12345);
  });

  test('passes in projectName', () => {
@@ -1016,6 +1029,7 @@ suite('gr-diff-host tests', () => {

    setup(() => {
      element = basicFixture.instantiate();
+      element.changeNum = 123;
      element.path = 'file.txt';
      element.patchRange = {basePatchNum: 1};
      reportStub = sinon.stub(element.reporting, 'reportInteraction');
@@ -1167,23 +1181,17 @@ suite('gr-diff-host tests', () => {

    assert.equal(actualThreads.length, 2);

-    assert.equal(
-        actualThreads[0].start_datetime, '2015-12-23 15:00:20.396000000');
    assert.equal(actualThreads[0].commentSide, 'left');
    assert.equal(actualThreads[0].comments.length, 2);
    assert.deepEqual(actualThreads[0].comments[0], comments[0]);
    assert.deepEqual(actualThreads[0].comments[1], comments[1]);
    assert.equal(actualThreads[0].patchNum, undefined);
-    assert.equal(actualThreads[0].rootId, 'sallys_confession');
    assert.equal(actualThreads[0].lineNum, 1);

-    assert.equal(
-        actualThreads[1].start_datetime, '2015-12-20 15:01:20.396000000');
    assert.equal(actualThreads[1].commentSide, 'left');
    assert.equal(actualThreads[1].comments.length, 1);
    assert.deepEqual(actualThreads[1].comments[0], comments[2]);
    assert.equal(actualThreads[1].patchNum, undefined);
-    assert.equal(actualThreads[1].rootId, 'new_draft');
    assert.equal(actualThreads[1].lineNum, undefined);
  });

@@ -1205,7 +1213,6 @@ suite('gr-diff-host tests', () => {

    const expectedThreads = [
      {
-        start_datetime: '2015-12-24 15:00:10.396000000',
        commentSide: 'left',
        comments: [{
          id: 'betsys_confession',
@@ -1222,7 +1229,6 @@ suite('gr-diff-host tests', () => {
          line: 1,
        }],
        patchNum: 5,
-        rootId: 'betsys_confession',
        range: {
          start_line: 1,
          start_character: 1,
@@ -1264,14 +1270,12 @@ suite('gr-diff-host tests', () => {
            id: 'sallys_confession',
            message: 'i like you, jack',
            updated: '2015-12-23 15:00:20.396000000',
-            // line: 1,
-            // __commentSide: 'left',
+            __commentSide: 'left',
          }, {
            id: 'jacks_reply',
            message: 'i like you, too',
            updated: '2015-12-24 15:01:20.396000000',
-            // __commentSide: 'left',
-            // line: 1,
+            __commentSide: 'left',
            in_reply_to: 'sallys_confession',
          },
        ];
@@ -1375,9 +1379,9 @@ suite('gr-diff-host tests', () => {
    const threads = [];
    assert.deepEqual(element._filterThreadElsForLocation(threads, line), []);
    assert.deepEqual(element._filterThreadElsForLocation(threads, line,
-        DiffSide.LEFT), []);
+        Side.LEFT), []);
    assert.deepEqual(element._filterThreadElsForLocation(threads, line,
-        DiffSide.RIGHT), []);
+        Side.RIGHT), []);
  });

  test('_filterThreadElsForLocation for line comments', () => {
@@ -1403,9 +1407,9 @@ suite('gr-diff-host tests', () => {
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line),
        [l3, r5]);
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line,
-        DiffSide.LEFT), [l3]);
+        Side.LEFT), [l3]);
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line,
-        DiffSide.RIGHT), [r5]);
+        Side.RIGHT), [r5]);
  });

  test('_filterThreadElsForLocation for file comments', () => {
@@ -1423,11 +1427,11 @@ suite('gr-diff-host tests', () => {
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line),
        [l, r]);
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line,
-        DiffSide.BOTH), [l, r]);
+        Side.BOTH), [l, r]);
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line,
-        DiffSide.LEFT), [l]);
+        Side.LEFT), [l]);
    assert.deepEqual(element._filterThreadElsForLocation(threadEls, line,
-        DiffSide.RIGHT), [r]);
+        Side.RIGHT), [r]);
  });

  suite('syntax layer with syntax_highlighting on', () => {
@@ -1441,6 +1445,8 @@ suite('gr-diff-host tests', () => {
      };
      element.patchRange = {};
      element.prefs = prefs;
+      element.changeNum = 123;
+      element.path = 'some/path';
    });

    test('gr-diff-host provides syntax highlighting layer to gr-diff', () => {
@@ -1551,6 +1557,8 @@ suite('gr-diff-host tests', () => {
        },
      });
      element = basicFixture.instantiate();
+      element.changeNum = 123;
+      element.path = 'some/path';
      const prefs = {
        line_length: 10,
        show_tabs: true,
--- a/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-processor/gr-diff-processor.ts
@@ -31,7 +31,7 @@ import {
 import {CancelablePromise, util} from '../../../scripts/util';
 import {customElement, property} from '@polymer/decorators';
 import {DiffContent} from '../../../types/common';
-import {DiffSide} from '../gr-diff/gr-diff-utils';
+import {Side} from '../../../constants/constants';

 const WHOLE_FILE = -1;

@@ -567,8 +567,8 @@ export class GrDiffProcessor extends GestureEventListeners(
    for (let i = 0; i < numLines; i++) {
      // If this line should not be collapsed.
      if (
-        this.keyLocations[DiffSide.LEFT][leftOffset + i] ||
-        this.keyLocations[DiffSide.RIGHT][rightOffset + i]
+        this.keyLocations[Side.LEFT][leftOffset + i] ||
+        this.keyLocations[Side.RIGHT][rightOffset + i]
      ) {
        // If any lines have been accumulated into the chunk leading up to
        // this non-collapse line, then add them as a chunk and start a new
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-utils.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff-utils.ts
@@ -18,17 +18,12 @@
 import {CommentRange} from '../../../types/common';
 import {FILE, LineNumber} from './gr-diff-line';

-export enum DiffSide {
-  LEFT = 'left',
-  RIGHT = 'right',
-}
-
 /**
 * Compare two ranges. Either argument may be falsy, but will only return
 * true if both are falsy or if neither are falsy and have the same position
 * values.
 */
-export function rangesEqual(a: CommentRange, b: CommentRange): boolean {
+export function rangesEqual(a?: CommentRange, b?: CommentRange): boolean {
  if (!a && !b) {
    return true;
  }
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.ts
@@ -27,7 +27,7 @@ import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-l
 import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
 import {htmlTemplate} from './gr-diff_html';
 import {FILE, LineNumber} from './gr-diff-line';
-import {DiffSide, getLineNumber, rangesEqual} from './gr-diff-utils';
+import {getLineNumber, rangesEqual} from './gr-diff-utils';
 import {getHiddenScroll} from '../../../scripts/hiddenscroll';
 import {isMergeParent, patchNumEquals} from '../../../utils/patch-set-util';
 import {customElement, observe, property} from '@polymer/decorators';
@@ -95,7 +95,7 @@ const COMMIT_MSG_LINE_LENGTH = 72;

 const RENDER_DIFF_TABLE_DEBOUNCE_NAME = 'renderDiffTable';

-interface LineOfInterest {
+export interface LineOfInterest {
  number: number;
  leftSide: boolean;
 }
@@ -534,7 +534,7 @@ export class GrDiff extends GestureEventListeners(
    this.dispatchEvent(
      new CustomEvent('line-selected', {
        detail: {
-          side: el.classList.contains('left') ? DiffSide.LEFT : DiffSide.RIGHT,
+          side: el.classList.contains('left') ? Side.LEFT : Side.RIGHT,
          number: el.getAttribute('data-value'),
          path: this.path,
        },
@@ -614,7 +614,7 @@ export class GrDiff extends GestureEventListeners(
      );
      return false;
    }
-    const patchNum = el.classList.contains(DiffSide.LEFT)
+    const patchNum = el.classList.contains(Side.LEFT)
      ? this.patchRange.basePatchNum
      : this.patchRange.patchNum;

@@ -717,7 +717,7 @@ export class GrDiff extends GestureEventListeners(
    let patchNum = this.patchRange.patchNum;

    if (
-      (lineEl.classList.contains(DiffSide.LEFT) ||
+      (lineEl.classList.contains(Side.LEFT) ||
        contentEl.classList.contains('remove')) &&
      this.patchRange.basePatchNum !== 'PARENT' &&
      !isMergeParent(this.patchRange.basePatchNum)
@@ -730,7 +730,7 @@ export class GrDiff extends GestureEventListeners(
  _getIsParentCommentByLineAndContent(lineEl: Element, contentEl: Element) {
    if (!this.patchRange) throw Error('patch range not set');
    return (
-      (lineEl.classList.contains(DiffSide.LEFT) ||
+      (lineEl.classList.contains(Side.LEFT) ||
        contentEl.classList.contains('remove')) &&
      (this.patchRange.basePatchNum === 'PARENT' ||
        isMergeParent(this.patchRange.basePatchNum))
@@ -740,7 +740,7 @@ export class GrDiff extends GestureEventListeners(
  _getCommentSideByLineAndContent(lineEl: Element, contentEl: Element): Side {
    let side = Side.RIGHT;
    if (
-      lineEl.classList.contains(DiffSide.LEFT) ||
+      lineEl.classList.contains(Side.LEFT) ||
      contentEl.classList.contains('remove')
    ) {
      side = Side.LEFT;
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.ts
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.ts
@@ -51,7 +51,7 @@ import {
  DropDownValueChangeEvent,
  GrDropdownList,
 } from '../../shared/gr-dropdown-list/gr-dropdown-list';
-import {WebLink} from '../../core/gr-navigation/gr-navigation';
+import {GeneratedWebLink} from '../../core/gr-navigation/gr-navigation';

 // Maximum length for patch set descriptions.
 const PATCH_DESC_MAX_LENGTH = 500;
@@ -63,9 +63,9 @@ export interface PatchRangeChangeDetail {

 export type PatchRangeChangeEvent = CustomEvent<PatchRangeChangeDetail>;

-interface FilesWebLinks {
-  meta_a: WebLink[];
-  meta_b: WebLink[];
+export interface FilesWebLinks {
+  meta_a: GeneratedWebLink[];
+  meta_b: GeneratedWebLink[];
 }

 export interface GrPatchRangeSelect {
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_test.js
@@ -25,6 +25,7 @@ import {RevisionInfo} from '../../shared/revision-info/revision-info.js';
 import {createCommentApiMockWithTemplateElement} from '../../../test/mocks/comment-api';
 import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 import {SPECIAL_PATCH_SET_NUM} from '../../../utils/patch-set-util.js';
+import {ChangeComments} from '../gr-comment-api/gr-comment-api.js';

 const commentApiMockElement = createCommentApiMockWithTemplateElement(
    'gr-patch-range-select-comment-api-mock', html`
@@ -355,7 +356,7 @@ suite('gr-patch-range-select tests', () => {

  test('_computePatchSetCommentsString', () => {
    // Test string with unresolved comments.
-    element.changeComments._comments = {
+    const comments = {
      foo: [{
        id: '27dcee4d_f7b77cfa',
        message: 'test',
@@ -377,6 +378,7 @@ suite('gr-patch-range-select tests', () => {
      }],
      abc: [],
    };
+    element.changeComments = new ChangeComments(comments, {}, {}, 123);

    assert.equal(element._computePatchSetCommentsString(
        element.changeComments, 1), ' (3 comments, 1 unresolved)');
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
@@ -27,10 +27,17 @@ import {
  CustomKeyboardEvent,
  KeyboardShortcutMixin,
 } from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
-import {sortComments} from '../../diff/gr-comment-api/gr-comment-api';
+import {
+  isDraft,
+  isRobot,
+  sortComments,
+  UIComment,
+  UIDraft,
+  UIRobot,
+} from '../../diff/gr-comment-api/gr-comment-api';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation';
 import {appContext} from '../../../services/app-context';
-import {CommentSide, SpecialFilePath} from '../../../constants/constants';
+import {CommentSide, Side, SpecialFilePath} from '../../../constants/constants';
 import {computeDisplayPath} from '../../../utils/path-list-util';
 import {customElement, observe, property} from '@polymer/decorators';
 import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
@@ -42,7 +49,7 @@ import {
  RepoName,
  UrlEncodedCommentId,
 } from '../../../types/common';
-import {Comment, GrComment, RobotComment} from '../gr-comment/gr-comment';
+import {GrComment} from '../gr-comment/gr-comment';
 import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces';
 import {GrStorage, StorageLocation} from '../gr-storage/gr-storage';

@@ -102,7 +109,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  changeNum?: NumericChangeId;

  @property({type: Array})
-  comments: Comment[] = [];
+  comments: UIComment[] = [];

  @property({type: Object, reflectToAttribute: true})
  range?: CommentRange;
@@ -111,7 +118,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  keyEventTarget: HTMLElement = document.body;

  @property({type: String, reflectToAttribute: true})
-  commentSide?: string;
+  commentSide?: Side;

  @property({type: String})
  patchNum?: PatchSetNum;
@@ -151,10 +158,10 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  _showActions?: boolean;

  @property({type: Object})
-  _lastComment?: Comment;
+  _lastComment?: UIComment;

  @property({type: Array})
-  _orderedComments: Comment[] = [];
+  _orderedComments: UIComment[] = [];

  @property({type: Object})
  _projectConfig?: ConfigInfo;
@@ -197,7 +204,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(

  addOrEditDraft(lineNum?: number, rangeParam?: CommentRange) {
    const lastComment = this.comments[this.comments.length - 1] || {};
-    if (lastComment.__draft) {
+    if (isDraft(lastComment)) {
      const commentEl = this._commentElWithDraftID(
        lastComment.id || lastComment.__draftID
      );
@@ -237,7 +244,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  _getDiffUrlForPath(path: string) {
    if (!this.changeNum) throw new Error('changeNum is missing');
    if (!this.projectName) throw new Error('projectName is missing');
-    if (this.comments[0].__draft) {
+    if (isDraft(this.comments[0])) {
      return GerritNav.getUrlForDiffById(
        this.changeNum,
        this.projectName,
@@ -251,14 +258,15 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  }

  _getDiffUrlForComment(
-    projectName: RepoName,
-    changeNum: NumericChangeId,
-    path: string,
-    patchNum: PatchSetNum
+    projectName?: RepoName,
+    changeNum?: NumericChangeId,
+    path?: string,
+    patchNum?: PatchSetNum
  ) {
+    if (!projectName || !changeNum || !path) return undefined;
    if (
      (this.comments.length && this.comments[0].side === 'PARENT') ||
-      this.comments[0].__draft
+      isDraft(this.comments[0])
    ) {
      return GerritNav.getUrlForDiffById(
        changeNum,
@@ -271,9 +279,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    }
    const id = this.comments[0].id;
    if (!id) throw new Error('A published comment is missing the id.');
-    if (!this.changeNum) throw new Error('changeNum is missing');
-    if (!this.projectName) throw new Error('projectName is missing');
-    return GerritNav.getUrlForComment(this.changeNum, this.projectName, id);
+    return GerritNav.getUrlForComment(changeNum, projectName, id);
  }

  _isPatchsetLevelComment(path: string) {
@@ -315,19 +321,19 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    if (this._orderedComments.length) {
      this._lastComment = this._getLastComment();
      this.unresolved = this._lastComment.unresolved;
-      this.hasDraft = this._lastComment.__draft;
-      this.isRobotComment = !!(this._lastComment as RobotComment).robot_id;
+      this.hasDraft = isDraft(this._lastComment);
+      this.isRobotComment = isRobot(this._lastComment);
    }
  }

-  _shouldDisableAction(_showActions?: boolean, _lastComment?: Comment) {
-    return !_showActions || !_lastComment || !!_lastComment.__draft;
+  _shouldDisableAction(_showActions?: boolean, _lastComment?: UIComment) {
+    return !_showActions || !_lastComment || isDraft(_lastComment);
  }

-  _hideActions(_showActions?: boolean, _lastComment?: Comment) {
+  _hideActions(_showActions?: boolean, _lastComment?: UIComment) {
    return (
      this._shouldDisableAction(_showActions, _lastComment) ||
-      !!(_lastComment as RobotComment).robot_id
+      isRobot(_lastComment)
    );
  }

@@ -371,7 +377,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    if (this._orderedComments) {
      for (let i = 0; i < this._orderedComments.length; i++) {
        const comment = this._orderedComments[i];
-        const isRobotComment = !!(comment as RobotComment).robot_id;
+        const isRobotComment = !!(comment as UIRobot).robot_id;
        // False if it's an unresolved comment under UNRESOLVED_EXPAND_COUNT.
        const resolvedThread =
          !this.unresolved ||
@@ -417,8 +423,8 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    }
  }

-  _isDraft(comment: Comment) {
-    return !!comment.__draft;
+  _isDraft(comment: UIComment) {
+    return isDraft(comment);
  }

  _processCommentReply(quote?: boolean) {
@@ -463,9 +469,9 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    const els = this.root?.querySelectorAll('gr-comment');
    if (!els) return null;
    for (const el of els) {
-      if (el.comment?.id === id || el.comment?.__draftID === id) {
-        return el;
-      }
+      const c = el.comment;
+      if (isRobot(c)) continue;
+      if (c?.id === id || (isDraft(c) && c?.__draftID === id)) return el;
    }
    return null;
  }
@@ -487,7 +493,7 @@ export class GrCommentThread extends KeyboardShortcutMixin(
  }

  _newDraft(lineNum?: number, range?: CommentRange) {
-    const d: Comment = {
+    const d: UIDraft = {
      __draft: true,
      __draftID: Math.random().toString(36),
      __date: new Date(),
@@ -529,14 +535,16 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    return isOnParent ? CommentSide.PARENT : CommentSide.REVISION;
  }

-  _computeRootId(comments: PolymerDeepPropertyChange<Comment[], unknown>) {
+  _computeRootId(comments: PolymerDeepPropertyChange<UIComment[], unknown>) {
    // Keep the root ID even if the comment was removed, so that notification
    // to sync will know which thread to remove.
    if (!comments.base.length) {
      return this.rootId;
    }
    const rootComment = comments.base[0];
-    return rootComment.id || rootComment.__draftID;
+    if (rootComment.id) return rootComment.id;
+    if (isDraft(rootComment)) return rootComment.__draftID;
+    throw new Error('Missing id in root comment.');
  }

  _handleCommentDiscard(e: Event) {
@@ -599,12 +607,12 @@ export class GrCommentThread extends KeyboardShortcutMixin(
    this.updateThreadProperties();
  }

-  _indexOf(comment: Comment | undefined, arr: Comment[]) {
+  _indexOf(comment: UIComment | undefined, arr: UIComment[]) {
    if (!comment) return -1;
    for (let i = 0; i < arr.length; i++) {
      const c = arr[i];
      if (
-        (c.__draftID && c.__draftID === comment.__draftID) ||
+        (isDraft(c) && isDraft(comment) && c.__draftID === comment.__draftID) ||
        (c.id && c.id === comment.id)
      ) {
        return i;
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -38,22 +38,27 @@ import {htmlTemplate} from './gr-comment_html';
 import {KeyboardShortcutMixin} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
 import {getRootElement} from '../../../scripts/rootElement';
 import {appContext} from '../../../services/app-context';
-import {customElement, property, observe} from '@polymer/decorators';
+import {customElement, observe, property} from '@polymer/decorators';
 import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
 import {GrTextarea} from '../gr-textarea/gr-textarea';
 import {GrStorage, StorageLocation} from '../gr-storage/gr-storage';
 import {GrOverlay} from '../gr-overlay/gr-overlay';
 import {
-  RobotCommentInfo,
-  PatchSetNum,
-  CommentInfo,
-  ConfigInfo,
  AccountDetailInfo,
  NumericChangeId,
+  ConfigInfo,
+  PatchSetNum,
 } from '../../../types/common';
 import {GrButton} from '../gr-button/gr-button';
 import {GrConfirmDeleteCommentDialog} from '../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog';
 import {GrDialog} from '../gr-dialog/gr-dialog';
+import {Side} from '../../../constants/constants';
+import {
+  isDraft,
+  UIComment,
+  UIDraft,
+  UIRobot,
+} from '../../diff/gr-comment-api/gr-comment-api';

 const STORAGE_DEBOUNCE_INTERVAL = 400;
 const TOAST_DEBOUNCE_INTERVAL = 200;
@@ -84,23 +89,6 @@ const RESPECTFUL_REVIEW_TIPS = [
  'When disagreeing, explain the advantage of your approach.',
 ];

-export interface Draft {
-  collapsed?: boolean;
-  __editing?: boolean;
-  __otherEditing?: boolean;
-  __draft?: boolean;
-  __draftID?: string;
-  __commentSide?: string;
-  __date?: Date;
-}
-
-export type Comment = Draft & CommentInfo;
-export type RobotComment = Draft & RobotCommentInfo;
-
-export function isRobotComment(c: Comment | RobotComment): c is RobotComment {
-  return (c as RobotComment).robot_id !== undefined;
-}
-
 interface CommentOverlays {
  confirmDelete?: GrOverlay | null;
  confirmDiscard?: GrOverlay | null;
@@ -117,7 +105,7 @@ export interface GrComment {

 export interface CommentEventDetail {
  patchNum?: PatchSetNum;
-  comment?: Comment | RobotComment;
+  comment?: UIComment;
 }

@customElement('gr-comment')
@@ -174,10 +162,10 @@ export class GrComment extends KeyboardShortcutMixin(
  changeNum?: NumericChangeId;

  @property({type: Object, notify: true, observer: '_commentChanged'})
-  comment?: Comment | RobotComment;
+  comment?: UIComment | UIRobot;

  @property({type: Array})
-  comments?: (Comment | RobotComment)[];
+  comments?: (UIComment | UIRobot)[];

  @property({type: Boolean, reflectToAttribute: true})
  isRobotComment = false;
@@ -235,7 +223,7 @@ export class GrComment extends KeyboardShortcutMixin(
  _messageText = '';

  @property({type: String})
-  commentSide?: string;
+  commentSide?: Side;

  @property({type: String})
  side?: string;
@@ -311,7 +299,7 @@ export class GrComment extends KeyboardShortcutMixin(
    }
  }

-  _getAuthor(comment: Comment) {
+  _getAuthor(comment: UIComment) {
    return comment.author || this._selfAccount;
  }

@@ -410,7 +398,7 @@ export class GrComment extends KeyboardShortcutMixin(
  }

  @observe('comment')
-  _isRobotComment(comment: RobotComment) {
+  _isRobotComment(comment: UIRobot) {
    this.isRobotComment = !!comment.robot_id;
  }

@@ -433,7 +421,7 @@ export class GrComment extends KeyboardShortcutMixin(
    return 'DRAFT' + (unableToSave ? '(Failed to save)' : '');
  }

-  save(opt_comment?: Comment) {
+  save(opt_comment?: UIComment) {
    let comment = opt_comment;
    if (!comment) {
      comment = this.comment;
@@ -456,7 +444,8 @@ export class GrComment extends KeyboardShortcutMixin(

        this._eraseDraftComment();
        return this.$.restAPI.getResponseObject(response).then(obj => {
-          const resComment = (obj as unknown) as Comment;
+          const resComment = (obj as unknown) as UIDraft;
+          if (!isDraft(this.comment)) throw new Error('Can only save drafts.');
          resComment.__draft = true;
          // Maintain the ephemeral draft ID for identification by other
          // elements.
@@ -495,7 +484,7 @@ export class GrComment extends KeyboardShortcutMixin(
    });
  }

-  _commentChanged(comment: Comment) {
+  _commentChanged(comment: UIComment) {
    this.editing = !!comment.__editing;
    this.resolved = !comment.unresolved;
    if (this.editing) {
@@ -513,7 +502,7 @@ export class GrComment extends KeyboardShortcutMixin(
      c =>
        c.in_reply_to &&
        c.in_reply_to === comment.id &&
-        !(c as RobotComment).robot_id
+        !(c as UIRobot).robot_id
    );
  }

@@ -587,7 +576,7 @@ export class GrComment extends KeyboardShortcutMixin(

  _computeSaveDisabled(
    draft: string,
-    comment: Comment | undefined,
+    comment: UIComment | undefined,
    resolved?: boolean
  ) {
    // If resolved state has changed and a msg exists, save should be enabled.
@@ -753,8 +742,8 @@ export class GrComment extends KeyboardShortcutMixin(
    );
  }

-  _hasNoFix(comment: Comment) {
-    return !comment || !(comment as RobotComment).fix_suggestions;
+  _hasNoFix(comment: UIComment) {
+    return !comment || !(comment as UIRobot).fix_suggestions;
  }

  _handleDiscard(e: Event) {
@@ -785,7 +774,7 @@ export class GrComment extends KeyboardShortcutMixin(

  _discardDraft() {
    if (!this.comment) return Promise.reject(new Error('undefined comment'));
-    if (!this.comment.__draft) {
+    if (!isDraft(this.comment)) {
      return Promise.reject(new Error('Cannot discard a non-draft comment.'));
    }
    this.discarding = true;
@@ -883,7 +872,7 @@ export class GrComment extends KeyboardShortcutMixin(
    this._handleFailedDraftRequest();
  }

-  _saveDraft(draft?: Comment) {
+  _saveDraft(draft?: UIComment) {
    if (!draft || this.changeNum === undefined || this.patchNum === undefined) {
      throw new Error('undefined draft or changeNum or patchNum');
    }
@@ -907,7 +896,7 @@ export class GrComment extends KeyboardShortcutMixin(
      });
  }

-  _deleteDraft(draft: Comment) {
+  _deleteDraft(draft: UIComment) {
    if (this.changeNum === undefined || this.patchNum === undefined) {
      throw new Error('undefined changeNum or patchNum');
    }
@@ -937,7 +926,7 @@ export class GrComment extends KeyboardShortcutMixin(
  _loadLocalDraft(
    changeNum: number,
    patchNum?: PatchSetNum,
-    comment?: Comment
+    comment?: UIComment
  ) {
    // Polymer 2: check for undefined
    if ([changeNum, patchNum, comment].includes(undefined)) {
@@ -1012,7 +1001,7 @@ export class GrComment extends KeyboardShortcutMixin(
    return overlay.open();
  }

-  _computeHideRunDetails(comment: RobotComment, collapsed: boolean) {
+  _computeHideRunDetails(comment: UIRobot, collapsed: boolean) {
    if (!comment) return true;
    return !(comment.robot_id && comment.url && !collapsed);
  }
--- a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-annotation-actions-js-api.ts
+++ b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-annotation-actions-js-api.ts
@@ -15,19 +15,18 @@
 * limitations under the License.
 */
 import {GrAnnotationActionsContext} from './gr-annotation-actions-context';
-import {GrDiffLine, LineNumber} from '../../diff/gr-diff/gr-diff-line';
-import {CoverageRange} from '../../../types/types';
+import {GrDiffLine} from '../../diff/gr-diff/gr-diff-line';
+import {
+  CoverageRange,
+  DiffLayer,
+  DiffLayerListener,
+} from '../../../types/types';
 import {Side} from '../../../constants/constants';
 import {PluginApi} from '../../plugins/gr-plugin-types';
+import {NumericChangeId} from '../../../types/common';

 type AddLayerFunc = (ctx: GrAnnotationActionsContext) => void;

-type LayerUpdateListener = (
-  start: LineNumber,
-  end: LineNumber,
-  side: Side
-) => void;
-
 type NotifyFunc = (
  path: string,
  start: number,
@@ -36,10 +35,10 @@ type NotifyFunc = (
 ) => void;

 export type CoverageProvider = (
-  changeNum: number,
+  changeNum: NumericChangeId,
  path: string,
-  basePatchNum: number,
-  patchNum: number
+  basePatchNum?: number,
+  patchNum?: number
 ) => Promise<Array<CoverageRange>>;

 export class GrAnnotationActionsInterface {
@@ -205,8 +204,8 @@ export class GrAnnotationActionsInterface {
  }
 }

-export class AnnotationLayer {
-  private listeners: LayerUpdateListener[] = [];
+export class AnnotationLayer implements DiffLayer {
+  private listeners: DiffLayerListener[] = [];

  /**
   * Used to create an instance of the Annotation Layer interface.
@@ -232,12 +231,12 @@ export class AnnotationLayer {
   * Should accept as arguments the line numbers for the start and end of
   * the update and the side as a string.
   */
-  addListener(fn: () => void) {
-    this.listeners.push(fn);
+  addListener(listener: DiffLayerListener) {
+    this.listeners.push(listener);
  }

-  removeListener(fn: () => void) {
-    this.listeners = this.listeners.filter(f => f !== fn);
+  removeListener(listener: DiffLayerListener) {
+    this.listeners = this.listeners.filter(f => f !== listener);
  }

  /**
@@ -271,7 +270,7 @@ export class AnnotationLayer {
   * @param end The line where the update ends.
   * @param side The side of the update. ('left' or 'right')
   */
-  notifyListeners(start: LineNumber, end: LineNumber, side: Side) {
+  notifyListeners(start: number, end: number, side: Side) {
    for (const listener of this.listeners) {
      listener(start, end, side);
    }
--- a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface-element.ts
+++ b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface-element.ts
@@ -21,10 +21,7 @@ import {getPluginLoader} from './gr-plugin-loader';
 import {patchNumEquals} from '../../../utils/patch-set-util';
 import {customElement} from '@polymer/decorators';
 import {ChangeInfo, RevisionInfo} from '../../../types/common';
-import {
-  CoverageProvider,
-  GrAnnotationActionsInterface,
-} from './gr-annotation-actions-js-api';
+import {GrAnnotationActionsInterface} from './gr-annotation-actions-js-api';
 import {GrAdminApi} from '../../plugins/gr-admin-api/gr-admin-api';
 import {
  JsApiService,
@@ -33,7 +30,7 @@ import {
  ShowRevisionActionsDetail,
 } from './gr-js-api-types';
 import {EventType, TargetElement} from '../../plugins/gr-plugin-types';
-import {HighlightJS} from '../../../types/types';
+import {DiffLayer, HighlightJS} from '../../../types/types';

 const elements: {[key: string]: HTMLElement} = {};
 const eventCallbacks: {[key: string]: EventCallback[]} = {};
@@ -248,7 +245,7 @@ export class GrJsApiInterface
  }

  getDiffLayers(path: string, changeNum: number) {
-    const layers = [];
+    const layers: DiffLayer[] = [];
    for (const cb of this._getEventCallbacks(EventType.ANNOTATE_DIFF)) {
      const annotationApi = (cb as unknown) as GrAnnotationActionsInterface;
      try {
@@ -279,7 +276,9 @@ export class GrJsApiInterface
   * provider, the first one is returned. If no plugin offers a coverage provider,
   * will resolve to null.
   */
-  getCoverageAnnotationApi(): Promise<CoverageProvider | undefined> {
+  getCoverageAnnotationApi(): Promise<
+    GrAnnotationActionsInterface | undefined
+  > {
    return getPluginLoader()
      .awaitPluginsLoaded()
      .then(
@@ -287,7 +286,7 @@ export class GrJsApiInterface
          this._getEventCallbacks(EventType.ANNOTATE_DIFF).find(cb => {
            const annotationApi = (cb as unknown) as GrAnnotationActionsInterface;
            return annotationApi.getCoverageProvider();
-          }) as CoverageProvider | undefined
+          }) as GrAnnotationActionsInterface | undefined
      );
  }

--- a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-types.ts
+++ b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-types.ts
@@ -16,6 +16,8 @@
 */
 import {ActionInfo, ChangeInfo, PatchSetNum} from '../../../types/common';
 import {EventType, TargetElement} from '../../plugins/gr-plugin-types';
+import {DiffLayer} from '../../../types/types';
+import {GrAnnotationActionsInterface} from './gr-annotation-actions-js-api';

 export interface ShowChangeDetail {
  change: ChangeInfo;
@@ -45,5 +47,8 @@ export interface JsApiService {
    origMsg: string
  ): string;
  addElement(key: TargetElement, el: HTMLElement): void;
+  getDiffLayers(path: string, changeNum: number): DiffLayer[];
+  disposeDiffLayers(path: string): void;
+  getCoverageAnnotationApi(): Promise<GrAnnotationActionsInterface | undefined>;
  // TODO(TS): Add more methods when needed for the TS conversion.
 }
--- a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
+++ b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.ts
@@ -133,6 +133,7 @@ import {
  FixId,
  FilePathToDiffInfoMap,
  ChangeViewChangeInfo,
+  BlameInfo,
 } from '../../../types/common';
 import {
  CancelConditionCallback,
@@ -2524,7 +2525,7 @@ export class GrRestApiInterface
      req.fetchOptions.headers.append('Cache-Control', 'no-cache');
    }

-    return this._getChangeURLAndFetch(req);
+    return this._getChangeURLAndFetch(req) as Promise<DiffInfo | undefined>;
  }

  getDiffComments(
@@ -2639,11 +2640,9 @@ export class GrRestApiInterface

  _setRanges(comments?: CommentInfo[]) {
    comments = comments || [];
-    comments.sort((a, b) => {
-      if (!a.updated) return 1;
-      if (!b.updated) return -1;
-      return parseDate(a.updated).valueOf() - parseDate(b.updated).valueOf();
-    });
+    comments.sort(
+      (a, b) => parseDate(a.updated).valueOf() - parseDate(b.updated).valueOf()
+    );
    for (const comment of comments) {
      this._setRange(comments, comment);
    }
@@ -3472,7 +3471,7 @@ export class GrRestApiInterface
      patchNum,
      params: base ? {base: 't'} : undefined,
      anonymizedEndpoint: '/files/*/blame',
-    });
+    }) as Promise<BlameInfo[] | undefined>;
  }

  /**
--- a/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
+++ b/polygerrit-ui/app/services/services/gr-rest-api/gr-rest-api.ts
@@ -87,9 +87,13 @@ import {
  EmailAddress,
  FixId,
  FilePathToDiffInfoMap,
+  DiffInfo,
+  BlameInfo,
+  PatchRange,
+  ImagesForDiff,
 } from '../../../types/common';
 import {ParsedChangeInfo} from '../../../elements/shared/gr-rest-api-interface/gr-reviewer-updates-parser';
-import {HttpMethod} from '../../../constants/constants';
+import {HttpMethod, IgnoreWhitespaceType} from '../../../constants/constants';

 export type ErrorCallback = (response?: Response | null, err?: Error) => void;
 export type CancelConditionCallback = () => boolean;
@@ -735,4 +739,26 @@ export interface RestApiService {
    patchNum: PatchSetNum,
    fixId: string
  ): Promise<Response>;
+
+  getDiff(
+    changeNum: NumericChangeId,
+    basePatchNum: PatchSetNum,
+    patchNum: PatchSetNum,
+    path: string,
+    whitespace?: IgnoreWhitespaceType,
+    errFn?: ErrorCallback
+  ): Promise<DiffInfo | undefined>;
+
+  getBlame(
+    changeNum: NumericChangeId,
+    patchNum: PatchSetNum,
+    path: string,
+    base?: boolean
+  ): Promise<BlameInfo[] | undefined>;
+
+  getImagesForDiff(
+    changeNum: NumericChangeId,
+    diff: DiffInfo,
+    patchRange: PatchRange
+  ): Promise<ImagesForDiff>;
 }
--- a/polygerrit-ui/app/types/common.ts
+++ b/polygerrit-ui/app/types/common.ts
@@ -1078,7 +1078,7 @@ export interface UserConfigInfo {
 */
 export interface CommentInfo extends CommentInput {
  patch_set?: PatchSetNum;
-  id?: UrlEncodedCommentId;
+  id: UrlEncodedCommentId;
  path?: string;
  side?: CommentSide;
  parent?: number;
@@ -1086,7 +1086,7 @@ export interface CommentInfo extends CommentInput {
  range?: CommentRange;
  in_reply_to?: UrlEncodedCommentId;
  message?: string;
-  updated?: Timestamp;
+  updated: Timestamp;
  author?: AccountInfo;
  tag?: string;
  unresolved?: boolean;
@@ -1876,6 +1876,18 @@ export type RecipientTypeToNotifyInfoMap = {
 */
 export type RobotCommentInput = RobotCommentInfo;

+/**
+ * This is what human, robot and draft comments can agree upon.
+ *
+ * Human, robot and saved draft comments all have a required id, but unsaved
+ * drafts do not. That is why the id is omitted from CommentInfo, such that it
+ * can be optional in Draft, but required in CommentInfo and RobotCommentInfo.
+ */
+export interface CommentBasics extends Omit<CommentInfo, 'id' | 'updated'> {
+  id?: UrlEncodedCommentId;
+  updated?: Timestamp;
+}
+
 /**
 * The RobotCommentInfo entity contains information about a robot inline comment
 * https://gerrit-review.googlesource.com/Documentation/rest-api-changes.html#robot-comment-info
--- a/polygerrit-ui/app/types/types.ts
+++ b/polygerrit-ui/app/types/types.ts
@@ -19,6 +19,7 @@ import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announce
 import {GrDiffLine} from '../elements/diff/gr-diff/gr-diff-line';
 import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer';
 import {PaperInputElement} from '@polymer/paper-input/paper-input';
+import {CommitId} from './common';

 export function notUndefined<T>(x: T | undefined): x is T {
  return x !== undefined;
@@ -28,6 +29,11 @@ export interface FixIronA11yAnnouncer extends IronA11yAnnouncer {
  requestAvailability(): void;
 }

+export interface CommitRange {
+  baseCommit: CommitId;
+  commit: CommitId;
+}
+
 export interface CoverageRange {
  type: CoverageType;
  side: Side;
--- a/polygerrit-ui/app/utils/patch-set-util.ts
+++ b/polygerrit-ui/app/utils/patch-set-util.ts
@@ -3,6 +3,7 @@ import {
  ChangeInfo,
  PatchSetNum,
  EditPatchSetNum,
+  BrandType,
 } from '../types/common';
 import {RestApiService} from '../services/services/gr-rest-api/gr-rest-api';
 import {ParsedChangeInfo} from '../elements/shared/gr-rest-api-interface/gr-reviewer-updates-parser';
@@ -81,6 +82,12 @@ export function isMergeParent(n: PatchSetNum) {
  return `${n}`[0] === '-';
 }

+export function isNumber(
+  psn: PatchSetNum
+): psn is BrandType<number, '_patchSet'> {
+  return typeof psn === 'number';
+}
+
 /**
 * Given an object of revisions, get a particular revision based on patch
 * num.