1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-11 01:12:41 +01:00
phorge-phorge/webroot/rsrc/css/application/differential/changeset-view.css
epriestley a74545c9da Provide a rough, unstable API for reporting coverage into Diffusion
Summary:
Ref T4994. This stuff works:

  - You can dump a blob of coverage information into `diffusion.updatecoverage`. This wipes existing coverage information and replaces it.
  - It shows up when viewing files.
  - It shows up when viewing commits.

This stuff does not work:

  - When viewing files, the Javascript hover interaction isn't tied in yet.
  - We always show this information, even if you're behind the commit where it was generated.
  - You can't do incremental updates.
  - There's no aggregation at the file (this file has 90% coverage), diff (the changes in this commit are 90% covered), or directory (the code in this directory has 90% coverage) levels yet.
  - This is probably not the final form of the UI, storage, or API, so you should expect occasional changes over time. I've marked the method as "Unstable" for now.

Test Plan:
  - Ran `save_lint.php` to check for collateral damage; it worked fine.
  - Ran `save_lint.php` on a new branch to check creation.
  - Published some fake coverage information.
  - Viewed an affected commit.
  - Viewed an affected file.

{F151915}

{F151916}

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: jhurwitz, epriestley, zeeg

Maniphest Tasks: T5044, T4994

Differential Revision: https://secure.phabricator.com/D9022
2014-05-17 16:10:54 -07:00

490 lines
10 KiB
CSS

/**
* @provides differential-changeset-view-css
*/
.differential-changeset {
position: relative;
margin: 0;
padding-top: 32px;
overflow-x: auto;
}
.device-phone .differential-changeset {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.differential-diff {
background: #fff;
width: 100%;
min-width: 780px;
border-top: 1px solid {$lightblueborder};
border-bottom: 1px solid {$lightblueborder};
table-layout: fixed;
}
.differential-diff col.num {
width: 45px;
}
.differential-diff col.left,
.differential-diff col.right {
width: 49.25%;
}
.differential-diff col.copy {
width: 0.5%;
}
.differential-diff col.cov {
width: 1%;
}
.differential-diff td {
/*
Disable ligatures in Firefox. Firefox 3 has fancypants ligature support, but
it gets applied to monospaced fonts, which sucks because it means that the
"fi" ligature only takes up one character, e.g. It's probably the font's
fault that it even specifies ligatures (seriously, what the hell?) but
that's hard to fix and this is "easy" to "fix": custom letter spacing
disables ligatures, as long as it's at least 0.008333-repeating pixels of
custom letter spacing. I have no idea where this number comes from, but note
that .83333.. = 5/6. -epriestley
*/
letter-spacing: 0.0083334px;
vertical-align: top;
white-space: pre-wrap;
word-wrap: break-word;
padding: 0 8px 1px;
line-height: 16px;
}
.differential-diff td .zwsp {
position: absolute;
width: 0;
}
.differential-diff th {
text-align: right;
padding: 2px 6px 0px 0px;
vertical-align: top;
background: {$lightbluebackground};
color: {$bluetext};
cursor: pointer;
border-right: 1px solid {$thinblueborder};
font-size: 11px;
overflow: hidden;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.differential-changeset-immutable .differential-diff th {
cursor: auto;
}
.differential-diff td.old {
background: #ffd0d0;
}
.differential-diff td.new {
background: #d0ffd0;
}
.differential-diff td.old-rebase {
background: #ffeeee;
}
.differential-diff td.new-rebase {
background: #eeffee;
}
.differential-diff td.old-full,
.differential-diff td.old span.bright {
background: #ffaaaa;
}
.differential-diff td.new-full,
.differential-diff td.new span.bright {
background: #aaffaa;
}
.differential-diff td.copy {
min-width: 0.5%;
width: 0.5%;
padding: 0;
}
.differential-diff td.new-copy,
.differential-diff td.new-copy span.bright {
background: {$lightyellow};
}
.differential-diff td.new-move,
.differential-diff td.new-move span.bright {
background: {$yellow};
}
.differential-diff td.comment {
background: #dddddd;
}
.differential-diff td.cov {
padding: 0;
}
.diffusion-source td.cov {
padding: 0 8px;
}
td.cov-U {
background: #dd8866;
}
td.cov-C {
background: #66bbff;
}
td.cov-N {
background: #ddeeff;
}
td.cov-X {
background: #aa00aa;
}
td.cov-I {
background: {$lightgreybackground};
}
.differential-diff td.source-cov-C,
.differential-diff td.source-cov-C span.bright {
background: #cceeff;
}
.differential-diff td.source-cov-U,
.differential-diff td.source-cov-U span.bright {
background: #ffbb99;
}
.differential-diff td.source-cov-N,
.differential-diff td.source-cov-N span.bright {
background: #f3f6ff;
}
.differential-diff td.show-more,
.differential-diff th.show-context-line,
.differential-diff td.show-context,
.differential-diff td.differential-shield {
background: {$lightbluebackground};
padding: 12px 0;
border-top: 1px solid {$thinblueborder};
border-bottom: 1px solid {$thinblueborder};
}
.differential-diff td.show-more,
.differential-diff td.differential-shield {
font-family: "Helvetica Neue", "Arial", sans-serif;
font-size: 12px;
white-space: normal;
}
.differential-diff td.show-more {
text-align: center;
color: {$bluetext};
}
.differential-diff th.show-context-line {
padding-right: 6px;
}
.differential-diff td.show-context {
padding-left: 14px;
}
.differential-diff td.differential-shield {
text-align: center;
}
.differential-diff td.differential-shield a {
font-weight: bold;
}
.differential-diff .differential-image-diff {
background-image: url(/rsrc/image/checker_light.png);
}
.differential-diff .differential-image-diff:hover {
background-image: url(/rsrc/image/checker_dark.png);
}
.differential-meta-notice {
border-top: 1px solid {$yellow};
border-bottom: 1px solid {$yellow};
background-color: {$lightyellow};
padding: 12px;
}
.differential-meta-notice + .differential-diff {
border-top: none;
}
.differential-changeset h1 {
font-size: 15px;
padding: 2px 0 12px 12px;
line-height: 18px;
}
.device-phone .differential-changeset h1 {
word-break: break-word;
margin-right: 8px;
}
.differential-reticle {
background: {$lightyellow};
border: 1px solid {$yellow};
position: absolute;
opacity: 0.5;
top: 0px;
left: 0px;
}
.differential-inline-comment,
.differential-inline-comment-edit {
background: #ffffee;
border: 1px solid #ccccaa;
font-family: "Helvetica Neue", "Arial", sans-serif;
font-size: 12px;
margin: 6px 0px;
padding: 8px 10px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
white-space: normal;
}
.differential-inline-comment-edit .aphront-form-control-textarea {
padding: 0;
}
.differential-inline-comment-unsaved-draft {
background: #f1f1f1;
border: 1px dashed {$greytext};
}
.differential-inline-comment-head {
font-weight: bold;
color: #333333;
border-bottom: 1px solid rgba(204,204,170,0.37);
padding-bottom: 4px;
margin-bottom: 8px;
}
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
border-bottom: 1px solid #aaaaaa;
}
.differential-inline-comment-synthetic {
background: {$lightblue};
border: 1px solid {$blue};
}
.differential-inline-comment-synthetic .differential-inline-comment-head {
border-bottom: 1px solid {$blueborder};
}
.differential-inline-comment-links,
.differential-inline-comment-line {
font-weight: normal;
font-style: italic;
color: {$greytext};
float: right;
white-space: nowrap;
}
.differential-inline-comment-links {
margin-left: 8px;
font-style: normal;
}
.differential-inline-comment-edit-body .aphront-form-input {
margin: 0;
width: 100%;
}
.differential-changeset-buttons {
float: right;
margin-right: 16px;
}
.device-phone .differential-changeset-buttons {
float: none;
margin: 0 0 8px 4px;
}
.differential-changeset-buttons a.button {
margin-left: 8px;
}
.differential-property-table {
width: auto;
margin: 12px auto;
background: #e3e3e3;
}
.differential-property-table th {
text-align: right;
width: 10em;
font-weight: bold;
color: {$greytext};
white-space: nowrap;
padding: 4px 8px;
border-right: 1px solid {$greytext};
}
.differential-property-table td {
padding: 4px 8px;
width: 35em;
}
.differential-property-table td em {
color: {$lightgreytext};
}
.differential-property-table tr.property-table-header th,
.differential-property-table tr.property-table-header td {
text-align: center;
font-weight: bold;
border-bottom: 1px solid {$greytext};
}
.differential-property-table td.oval {
background: #ffd0d0;
}
.differential-property-table td.nval {
background: #d0ffd0;
}
.differential-property-table tr.property-table-header td.oval {
background: #ffaaaa;
}
.differential-property-table tr.property-table-header td.nval {
background: #aaffaa;
}
.differential-inline-undo {
padding: 4px;
text-align: center;
background: #ffeeaa;
margin: 3px 0 1px;
font: 12px;
color: 444444;
}
.differential-inline-undo a {
font-weight: bold;
}
.differential-inline-comment-edit {
padding: 10px;
}
.differential-inline-comment-edit-buttons {
padding: 4px 0 0 0;
}
.differential-inline-comment-edit-buttons button {
float: right;
margin-left: 6px;
}
.differential-inline-comment-edit-title {
font-weight: bold;
color: #333333;
padding-bottom: 2px;
margin-bottom: 6px;
}
/* When the inline editor is active, disable all the other inline comment links
on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
issues where you open up multiple editors and run into problems with
assumptions about modalness. They are disabled explicitly by the JS, but
render them in a disabled state as well.
*/
.inline-editor-active .differential-inline-comment-links a,
.inline-editor-active .differential-inline-comment-links a:hover,
.inline-editor-active .differential-inline-comment-links a:active {
color: {$lightgreytext};
cursor: normal;
text-decoration: none;
}
/* Create a wide band of color behind the inline edit interface so it is easy
to find by skimming the page while scrolling.
*/
tr.inline-comment-splint {
background: #f9f1d5;
}
tr.differential-inline-hidden {
display: none;
}
tr.differential-inline-loading {
opacity: 0.5;
}
/* In the document, the anchor is positioned inside the inline comment, but
this makes the browser jump into the comment so the top isn't visible.
Instead, artificially position it a bit above the comment so we'll jump a
bit before the comment. This allows us to see the entire comment (and
generally the commented-on lines, at least in the case of one or two-line
comments) after the jump.
*/
.differential-inline-comment-anchor {
position: absolute;
display: block;
margin-top: -72px;
}
.differential-loading {
border-top: 1px solid {$yellow};
border-bottom: 1px solid {$yellow};
background-color: {$lightyellow};
padding: 12px;
text-align: center;
}
.differential-collapse-undo {
background: #FFE;
color: #000;
padding: 1em 0em;
border: 1px solid #CCA;
text-align: center;
background-color: #FFE;
}
.differential-collapse-undo a {
font-weight: bold;
}
.differential-file-icon-header .phui-icon-view {
display: inline-block;
margin: 0 4px 2px 0;
vertical-align: middle;
}
.device-phone .differential-file-icon-header .phui-icon-view {
display: none;
}