435c79a4c6
In order to speed up file list processing for large numbers of files, event handlers have been removed on a per-line basis and instead are listened for in a parent container that handles them according to the click target. With a sample of 1300 files, the dom-repeat after clicking 'show all' gets rendered 25% faster. Bug: Issue 5612 Change-Id: Idc1ba6e0810d5d4c6f36e76667c3748becc1358a
382 lines
12 KiB
HTML
382 lines
12 KiB
HTML
<!--
|
|
Copyright (C) 2015 The Android Open Source Project
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
|
|
<link rel="import" href="../../../behaviors/gr-patch-set-behavior/gr-patch-set-behavior.html">
|
|
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
|
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../../core/gr-reporting/gr-reporting.html">
|
|
<link rel="import" href="../../diff/gr-diff/gr-diff.html">
|
|
<link rel="import" href="../../diff/gr-diff-cursor/gr-diff-cursor.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
|
<link rel="import" href="../../shared/gr-cursor-manager/gr-cursor-manager.html">
|
|
<link rel="import" href="../../shared/gr-linked-text/gr-linked-text.html">
|
|
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
|
<link rel="import" href="../../shared/gr-select/gr-select.html">
|
|
|
|
<dom-module id="gr-file-list">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
padding: .1em .25em;
|
|
}
|
|
header {
|
|
display: flex;
|
|
font-weight: bold;
|
|
justify-content: space-between;
|
|
margin-bottom: .5em;
|
|
}
|
|
.rightControls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-weight: normal;
|
|
justify-content: flex-end;
|
|
}
|
|
.separator {
|
|
margin: 0 .25em;
|
|
}
|
|
.reviewed,
|
|
.status {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
}
|
|
.reviewed,
|
|
.status {
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 1.5em;
|
|
}
|
|
.file-row:hover {
|
|
background-color: #f5fafd;
|
|
}
|
|
.row.selected {
|
|
background-color: #ebf5fb;
|
|
}
|
|
.path {
|
|
flex: 1;
|
|
padding-left: .35em;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.path:hover :first-child {
|
|
text-decoration: underline;
|
|
}
|
|
.path,
|
|
.path div {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.oldPath {
|
|
color: #999;
|
|
}
|
|
.comments,
|
|
.stats {
|
|
text-align: right;
|
|
}
|
|
.comments {
|
|
min-width: 10em;
|
|
}
|
|
.stats {
|
|
min-width: 7em;
|
|
}
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
.row:not(.header) .stats,
|
|
.total-stats {
|
|
font-family: var(--monospace-font-family);
|
|
}
|
|
.added {
|
|
color: #388E3C;
|
|
}
|
|
.removed {
|
|
color: #D32F2F;
|
|
}
|
|
.drafts {
|
|
color: #C62828;
|
|
font-weight: bold;
|
|
}
|
|
.show-hide {
|
|
margin-left: .4em;
|
|
}
|
|
.fileListButton {
|
|
margin: .5em;
|
|
}
|
|
.totalChanges {
|
|
justify-content: flex-end;
|
|
padding-right: 2.6em;
|
|
text-align: right;
|
|
}
|
|
.expandInline {
|
|
padding-right: .25em;
|
|
}
|
|
.warning {
|
|
color: #666;
|
|
}
|
|
input.show-hide {
|
|
display: none;
|
|
}
|
|
label.show-hide {
|
|
color: #00f;
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: .8em;
|
|
min-width: 2em;
|
|
margin-top: .1em;
|
|
}
|
|
gr-diff {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
|
display: block;
|
|
margin: .25em 0 1em;
|
|
}
|
|
.patchSetSelect {
|
|
max-width: 8em;
|
|
}
|
|
.truncatedFileName {
|
|
display: none;
|
|
}
|
|
.expanded .fullFileName {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
@media screen and (max-width: 50em) {
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
.mobile {
|
|
display: block;
|
|
}
|
|
.row.selected {
|
|
background-color: transparent;
|
|
}
|
|
.stats {
|
|
display: none;
|
|
}
|
|
.reviewed,
|
|
.status {
|
|
justify-content: flex-start;
|
|
}
|
|
.comments {
|
|
min-width: initial;
|
|
}
|
|
.expanded .fullFileName,
|
|
.truncatedFileName {
|
|
display: block;
|
|
}
|
|
.expanded .truncatedFileName,
|
|
.fullFileName {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<header>
|
|
<div>Files</div>
|
|
<div class="rightControls">
|
|
<template is="dom-if"
|
|
if="[[_fileListActionsVisible(_shownFiles.*, _maxFilesForBulkActions)]]">
|
|
<gr-button link on-tap="_expandAllDiffs">Show diffs</gr-button>
|
|
<span class="separator">/</span>
|
|
<gr-button link on-tap="_collapseAllDiffs">Hide diffs</gr-button>
|
|
</template>
|
|
<template is="dom-if"
|
|
if="[[!_fileListActionsVisible(_shownFiles.*, _maxFilesForBulkActions)]]">
|
|
<div class="warning">
|
|
Bulk actions disabled because there are too many files.
|
|
</div>
|
|
</template>
|
|
<span class="separator">/</span>
|
|
<select
|
|
id="modeSelect"
|
|
is="gr-select"
|
|
bind-value="{{diffViewMode}}">
|
|
<option value="SIDE_BY_SIDE">Side By Side</option>
|
|
<option value="UNIFIED_DIFF">Unified</option>
|
|
</select>
|
|
<span class="separator">/</span>
|
|
<label>
|
|
Diff against
|
|
<select id="patchChange" bind-value="{{_diffAgainst}}" is="gr-select"
|
|
class="patchSetSelect" on-change="_handlePatchChange">
|
|
<option value="PARENT">Base</option>
|
|
<template
|
|
is="dom-repeat"
|
|
items="[[_computePatchSets(revisions.*, patchRange.*)]]"
|
|
as="patchNum">
|
|
<option value$="[[patchNum.num]]"
|
|
disabled$="[[_computePatchSetDisabled(patchNum.num, patchRange.patchNum)]]">
|
|
[[patchNum.num]]
|
|
[[patchNum.desc]]
|
|
</option>
|
|
</template>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<div on-tap="_handleFileListTap">
|
|
<template is="dom-repeat"
|
|
items="[[_shownFiles]]"
|
|
id="files"
|
|
as="file"
|
|
initial-count="[[_fileListIncrement]]">
|
|
<div class="file-row row">
|
|
<div class="reviewed" hidden$="[[!_loggedIn]]" hidden>
|
|
<input type="checkbox" checked="[[file.isReviewed]]"
|
|
data-path$="[[file.__path]]"
|
|
class="reviewed" aria-label="Reviewed checkbox">
|
|
</div>
|
|
<div class$="[[_computeClass('status', file.__path)]]"
|
|
tabindex="0"
|
|
aria-label$="[[_computeFileStatusLabel(file.status)]]">
|
|
[[_computeFileStatus(file.status)]]
|
|
</div>
|
|
<a class$="[[_computePathClass(file.__path, _expandedFilePaths.*)]]"
|
|
href$="[[_computeDiffURL(changeNum, patchRange, file.__path)]]"
|
|
data-path$="[[file.__path]]">
|
|
<div title$="[[_computeFileDisplayName(file.__path)]]"
|
|
class="fullFileName">
|
|
[[_computeFileDisplayName(file.__path)]]
|
|
</div>
|
|
<div title$="[[_computeFileDisplayName(file.__path)]]"
|
|
class="truncatedFileName">
|
|
[[_computeTruncatedFileDisplayName(file.__path)]]
|
|
</div>
|
|
<div class="oldPath" hidden$="[[!file.old_path]]" hidden
|
|
title$="[[file.old_path]]">
|
|
[[file.old_path]]
|
|
</div>
|
|
</a>
|
|
<div class="comments desktop">
|
|
<span class="drafts">
|
|
[[_computeDraftsString(drafts, patchRange.patchNum, file.__path)]]
|
|
</span>
|
|
[[_computeCommentsString(comments, patchRange.patchNum, file.__path)]]
|
|
[[_computeUnresolvedString(comments, drafts, patchRange.patchNum, file.__path)]]
|
|
</div>
|
|
<div class="comments mobile">
|
|
<span class="drafts">
|
|
[[_computeDraftsStringMobile(drafts, patchRange.patchNum,
|
|
file.__path)]]
|
|
</span>
|
|
[[_computeCommentsStringMobile(comments, patchRange.patchNum,
|
|
file.__path)]]
|
|
</div>
|
|
<div class$="[[_computeClass('stats', file.__path)]]">
|
|
<span
|
|
class="added"
|
|
tabindex="0"
|
|
aria-label$="[[file.lines_inserted]] lines added"
|
|
hidden$=[[file.binary]]>
|
|
+[[file.lines_inserted]]
|
|
</span>
|
|
<span
|
|
class="removed"
|
|
tabindex="0"
|
|
aria-label$="[[file.lines_deleted]] lines removed"
|
|
hidden$=[[file.binary]]>
|
|
-[[file.lines_deleted]]
|
|
</span>
|
|
<span class$="[[_computeBinaryClass(file.size_delta)]]"
|
|
hidden$=[[!file.binary]]>
|
|
[[_formatBytes(file.size_delta)]]
|
|
[[_formatPercentage(file.size, file.size_delta)]]
|
|
</span>
|
|
</div>
|
|
<div class="show-hide" hidden$="[[_userPrefs.expand_inline_diffs]]">
|
|
<label class="show-hide" data-path$="[[file.__path]]"
|
|
data-expand=true>
|
|
<input type="checkbox" class="show-hide"
|
|
checked$="[[_isFileExpanded(file.__path, _expandedFilePaths.*)]]"
|
|
data-path$="[[file.__path]]" data-expand=true>
|
|
[[_computeShowHideText(file.__path, _expandedFilePaths.*)]]
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<gr-diff
|
|
no-auto-render
|
|
hidden="[[!_isFileExpanded(file.__path, _expandedFilePaths.*)]]"
|
|
project="[[change.project]]"
|
|
commit="[[change.current_revision]]"
|
|
change-num="[[changeNum]]"
|
|
patch-range="[[patchRange]]"
|
|
path="[[file.__path]]"
|
|
prefs="[[_diffPrefs]]"
|
|
project-config="[[projectConfig]]"
|
|
view-mode="[[_getDiffViewMode(diffViewMode, _userPrefs)]]"></gr-diff>
|
|
</template>
|
|
</div>
|
|
<div class$="row totalChanges [[_computeExpandInlineClass(_userPrefs)]]">
|
|
<div class="total-stats" hidden$="[[_hideChangeTotals]]">
|
|
<span
|
|
class="added"
|
|
tabindex="0"
|
|
aria-label$="[[_patchChange.inserted]] lines added">
|
|
+[[_patchChange.inserted]]
|
|
</span>
|
|
<span
|
|
class="removed"
|
|
tabindex="0"
|
|
aria-label$="[[_patchChange.deleted]] lines removed">
|
|
-[[_patchChange.deleted]]
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class$="row totalChanges [[_computeExpandInlineClass(_userPrefs)]]">
|
|
<div class="total-stats" hidden$="[[_hideBinaryChangeTotals]]">
|
|
<span class="added" aria-label="Total lines added">
|
|
[[_formatBytes(_patchChange.size_delta_inserted)]]
|
|
[[_formatPercentage(_patchChange.total_size,
|
|
_patchChange.size_delta_inserted)]]
|
|
</span>
|
|
<span class="removed" aria-label="Total lines removed">
|
|
[[_formatBytes(_patchChange.size_delta_deleted)]]
|
|
[[_formatPercentage(_patchChange.total_size,
|
|
_patchChange.size_delta_deleted)]]
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<gr-button
|
|
class="fileListButton"
|
|
id="incrementButton"
|
|
hidden$="[[_computeFileListButtonHidden(_numFilesShown, _files)]]"
|
|
link on-tap="_incrementNumFilesShown">
|
|
[[_computeIncrementText(_numFilesShown, _files)]]
|
|
</gr-button>
|
|
<gr-button
|
|
class="fileListButton"
|
|
id="showAllButton"
|
|
hidden$="[[_computeFileListButtonHidden(_numFilesShown, _files)]]"
|
|
link on-tap="_showAllFiles">
|
|
[[_computeShowAllText(_files)]]
|
|
</gr-button>
|
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
|
<gr-storage id="storage"></gr-storage>
|
|
<gr-diff-cursor id="diffCursor"></gr-diff-cursor>
|
|
<gr-cursor-manager
|
|
id="fileCursor"
|
|
scroll-behavior="keep-visible"
|
|
cursor-target-class="selected"></gr-cursor-manager>
|
|
<gr-reporting id="reporting"></gr-reporting>
|
|
</template>
|
|
<script src="gr-file-list.js"></script>
|
|
</dom-module>
|