fc40190c29
Till now, log viewer was rendered in handlebars, which was the simplest
solution, but it had a major drawback - every append to log caused it to
rerender which was not efficient and memory consuming.
The new approach is to make Travis.Log interpret the log and send lines
with instructions to the view, so for example if view should add a line,
it gets something like:
{ number: 1, content: '$ bundle install' }
Such approach is required to handle cases where data coming from pusher
is not actually a new line. For example output containing dots from
tests needs to be appended:
$ rake
....
Such output could be sent to client in 2 chunks: "$ rake\n.." and "..".
In such situation we would need to send 3 instructions:
{ number: 1, content: '$ rake' }
{ number: 2, content: '..' }
{ number: 2, content: '..', append: true }
The third instruction can come much later, because tests can take a
while to run, so we can't assume that each line will come in one piece.
The other scenario is \r, for example when showing progress:
\rDownloading: 10%
\rDownloading: 50%
\rDownloading: 100%
Such input should be changed into such instructions:
{ number: 1, content: 'Downloading: 10%' }
{ number: 1, content: 'Downloading: 50%', replace: true }
{ number: 1, content: 'Downloading: 100%', replace: true }
Travis.Log also supports folds, for example on bundle install, the code
was rewritten to make folds management simpler.
123 lines
2.5 KiB
Sass
123 lines
2.5 KiB
Sass
@import "_mixins/all"
|
|
|
|
pre#log
|
|
position: relative
|
|
clear: left
|
|
min-height: 12px
|
|
margin-top: 25px
|
|
margin-top: 1em
|
|
padding: 15px 0
|
|
color: $color-text-log
|
|
font-family: monospace
|
|
font-size: $font-size-log
|
|
line-height: $line-height-log
|
|
white-space: pre-wrap
|
|
word-wrap: break-word
|
|
background-color: $color-bg-log
|
|
border: 1px solid $color-border-log
|
|
@include border-radius(4px)
|
|
overflow-x: scroll
|
|
|
|
p
|
|
padding: 0 15px 0 50px
|
|
margin: 0
|
|
min-height: 16px
|
|
&:hover
|
|
background-color: $color-bg-log-highlight
|
|
&.highlight
|
|
background-color: $color-bg-log-highlight
|
|
a
|
|
margin-left: -40px
|
|
margin-right: 10px
|
|
cursor: pointer
|
|
|
|
.fold
|
|
height: 16px
|
|
overflow: hidden
|
|
background: $color-bg-log-fold inline-image('ui/log.fold.closed.2.png') no-repeat 99.5% 2px
|
|
cursor: pointer
|
|
&.open
|
|
height: auto
|
|
background-image: inline-image('ui/log.fold.open.2.png')
|
|
&.show-first-line:not(.open)
|
|
height: 36px
|
|
p:not(:first-child):not(:last-child)
|
|
display: none
|
|
|
|
#log.loading
|
|
padding: 25px 0 0 10px
|
|
|
|
#log::-webkit-scrollbar
|
|
height: 10px
|
|
width: 10px
|
|
|
|
#log::-webkit-scrollbar-button:start:decrement,
|
|
#log::-webkit-scrollbar-button:end:increment
|
|
display: none
|
|
|
|
#log::-webkit-scrollbar-track-piece
|
|
background: #444
|
|
-webkit-border-radius: 4px
|
|
|
|
#log::-webkit-scrollbar-thumb:horizontal
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#85888E), to(#55585E))
|
|
-webkit-border-radius: 4px
|
|
width: 25px
|
|
|
|
#log #tail
|
|
z-index: 99
|
|
position: absolute
|
|
display: block
|
|
top: 0
|
|
right: 2px
|
|
margin: 13px 10px 0 0
|
|
padding: 0 2px 0 3px
|
|
color: #666
|
|
text-shadow: 1px 1px 0px #fff
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
|
font-size: $font-size-tiny
|
|
line-height: 14px
|
|
text-decoration: none
|
|
white-space: nowrap
|
|
border: 1px solid #bbb
|
|
border-top-color: #ddd
|
|
border-bottom-color: #bbb
|
|
@include border-radius(8px)
|
|
@include background(linear-gradient(#fff, #e0e0e0))
|
|
|
|
label
|
|
display: none
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
padding: 1px 4px 1px 6px
|
|
label
|
|
display: inline
|
|
|
|
.status
|
|
display: inline-block
|
|
margin-right: 1px
|
|
width: 8px
|
|
height: 8px
|
|
background-color: #aaa
|
|
@include border-radius(4px)
|
|
@include box-shadow(white 1px 1px 2px)
|
|
|
|
&.active .status
|
|
background-color: #6b0
|
|
|
|
#main
|
|
.sponsor
|
|
float: left
|
|
margin-top: 0
|
|
color: #999
|
|
.to-top
|
|
float: right
|
|
margin-right: 2px
|
|
padding-right: 16px
|
|
color: #999
|
|
background: inline-image('ui/to-top.png') no-repeat right 6px
|
|
|
|
|
|
|