starling-devex 0.1.2

Starling: a local dev orchestrator with a central daemon, shared named-URL proxy, and a k9s-style TUI (a Rust port of Tilt + portless)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

// We're using CSS here because thousands of `LogLine` in a view can really slow rendering.
// (styled-components wraps each React component with another, adding non-trivial overhead.)
@import "constants";

:root {
  // to enable easy programmatic control of font scaling, the LogPaneRoot defines
  // the absolute font size, and then scaling is controlled via a CSS variable, which
  // is attached at the root so that it can be trivially manipulated via JS
  // WARNING: this is relied upon by LogsFontSize component!
  --log-font-scale: 100%;
}

.LogLine {
  display: flex;
  position: relative;
  font-size: var(--log-font-scale);

  &.is-highlighted {
    background-color: rgba($color-blue, $translucent);
  }

  &.is-buildEvent-init {
    background-color: $color-gray-30;
    text-align: right;
    padding-right: $spacing-unit;
    border-top: 1px solid rgba($color-gray-50, $translucent);
    border-bottom: 1px solid $color-blue-dark;
    
    &.is-sticky {
      position: sticky;
      top: 0;
      z-index: 1;
    }
  }
  &.is-buildEvent-fallback {
    background-color: $color-gray-darker;
  }

  &.is-startOfAlert {
    margin-top: $spacing-unit * 1.5;
  }
  &.is-endOfAlert {
    padding-bottom: $spacing-unit * 0.5;
    margin-bottom: $spacing-unit * 0.5;
    border-bottom: 1px solid $color-gray-darker;
  }
}

.LogLine:not(.is-buildEvent) + .LogLine.is-buildEvent {
  margin-top: 8px;
}
.LogLine.is-buildEvent + .LogLine:not(.is-buildEvent) > .LogLine-content,
.LogLine.is-buildEvent + .LogLine:not(.is-buildEvent) > .logLinePrefix {
  padding-top: 8px;
}

// Make spacing around "header" text more generous for legibility
// We avoid padding on the parent .LogLine, lest we squish .logLinePrefix
.LogLine.is-buildEvent-init .LogLine-content {
  padding-top: 4px;
  padding-bottom: 4px;
}
.LogLine:not(.is-buildEvent-fallback) + .LogLine.is-buildEvent-fallback .LogLine-content {
  padding-top: 8px;
}
.LogLine.is-buildEvent-fallback .LogLine-content {
  padding-bottom: 8px;
}
.LogLine.is-buildEvent-fallback + .LogLine.is-buildEvent-fallback .LogLine-content {
  margin-top: -8px;
}

.LogLine-alertNav {
  position: absolute;
  display: block;
  color: $color-gray-lightest;
  position: absolute;
  top: $spacing-unit * -1;
  left: $spacing-unit * 0.5;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color 300ms ease, border-color 300ms ease;
  padding: 4px $spacing-unit * 0.25;
  
  &:hover {
    color: $color-blue;
    border-color: $color-blue;
  }
}

.logLinePrefix {
  user-select: none;
  width: $tabnav-width;
  box-sizing: border-box;
  background-color: $color-gray-darker;
  color: $color-gray-lightest;
  padding-left: $spacing-unit * 0.5;
  padding-right: $spacing-unit * 0.5;
  text-align: right;
  flex-shrink: 0;
  
  // Truncate long text:
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  .LogLine.is-contextChange > & {
    // Border shouldn't add height:
    margin-top: -$logLine-separator-height;
    border-top: $logLine-separator-height solid $color-gray-30;
  }
  .LogLine.is-buildEvent-init > & {
    visibility: hidden;
  }
}


.LogLine-content {
  white-space: pre-wrap;
  padding-left: $spacing-unit * 0.6;
  flex: 1;
  border-left: $logLine-separator-height solid $color-gray-30;
  overflow-wrap: anywhere;

  // A left border draws your eye to notable log lines
  // Placed right of the prefix, so it's always just next to the log text
  .LogLine.is-warning & {
    border-left: $logLine-gutter-width solid $color-yellow;
  }
  .LogLine.is-error & {
    border-left: $logLine-gutter-width solid $color-red;
  }
  .LogLine.is-buildEvent-fallback & {
    border-left: $logLine-gutter-width solid $color-blue-dark;
  }
}