( segments: ReadonlyArray<UrlSegment>, workDir: string, )
| 144 | value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """); |
| 145 | |
| 146 | const renderUrlBars = async ( |
| 147 | segments: ReadonlyArray<UrlSegment>, |
| 148 | workDir: string, |
| 149 | ): Promise<ReadonlyArray<{ readonly path: string; readonly segment: UrlSegment }>> => { |
| 150 | const browser = await chromium.launch(); |
| 151 | try { |
| 152 | const page = await browser.newPage({ |
| 153 | viewport: { width: GIF_WIDTH, height: CHROME_HEIGHT }, |
| 154 | deviceScaleFactor: 1, |
| 155 | }); |
| 156 | const bars: Array<{ path: string; segment: UrlSegment }> = []; |
| 157 | for (const [index, segment] of segments.entries()) { |
| 158 | const displayUrl = segment.url.replace(/^https?:\/\//, "") || "about:blank"; |
| 159 | await page.setContent(`<!doctype html> |
| 160 | <html> |
| 161 | <head> |
| 162 | <style> |
| 163 | * { box-sizing: border-box; } |
| 164 | body { |
| 165 | margin: 0; |
| 166 | width: ${GIF_WIDTH}px; |
| 167 | height: ${CHROME_HEIGHT}px; |
| 168 | background: #111318; |
| 169 | color: #d7dde8; |
| 170 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| 171 | } |
| 172 | .chrome { |
| 173 | height: ${CHROME_HEIGHT}px; |
| 174 | display: flex; |
| 175 | align-items: center; |
| 176 | gap: 10px; |
| 177 | padding: 7px 12px; |
| 178 | border-bottom: 1px solid #272c36; |
| 179 | } |
| 180 | .lights { |
| 181 | display: flex; |
| 182 | gap: 6px; |
| 183 | flex: 0 0 auto; |
| 184 | } |
| 185 | .lights i { |
| 186 | width: 10px; |
| 187 | height: 10px; |
| 188 | border-radius: 50%; |
| 189 | display: block; |
| 190 | } |
| 191 | .lights i:nth-child(1) { background: #ff5f56; } |
| 192 | .lights i:nth-child(2) { background: #ffbd2e; } |
| 193 | .lights i:nth-child(3) { background: #27c93f; } |
| 194 | .urlbar { |
| 195 | min-width: 0; |
| 196 | flex: 1 1 auto; |
| 197 | height: 26px; |
| 198 | display: flex; |
| 199 | align-items: center; |
| 200 | border: 1px solid #313846; |
| 201 | border-radius: 6px; |
| 202 | background: #0b0d12; |
| 203 | padding: 0 10px; |
no test coverage detected