Skip to content

Commit

Permalink
Version 0.0.13 - Adding Styling to Jambox
Browse files Browse the repository at this point in the history
  • Loading branch information
scottykaye authored Mar 1, 2023
2 parents 37c2f19 + 8714b9f commit 6f24047
Show file tree
Hide file tree
Showing 8 changed files with 205 additions and 103 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Attempt to ping a currently running jambox server

#### `shutdown`

`yanr jam-server shutdown`
`yarn jam-server shutdown`

Attempt to shutdown a currently running jambox server

Expand Down
70 changes: 54 additions & 16 deletions ext/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,19 @@
</script>
<main class="Container">
<h1>Jambox</h1>
<div class="Box">
<button
<h1>📻 Jambox 📻</h1>
<div>
<button
type='button'
class="Button"
on:click={() =>
store.update((state) => reducer(state, { type: 'clear' }))}
>Clear</button
>
<button
class="Button"
type='button'
on:click={() => {
chrome.tabs.query(
{ active: true, currentWindow: true },
Expand All @@ -53,29 +58,62 @@
);
}}>Refresh</button
>
<div class="Align-Bottom">
<div>
Network Requests Are Blocked: {$store.config.blockNetworkRequests
? 'yes'
: 'no'}
</div>
</div>
</div>
<div>
Network Requests Are Blocked: <span class="Highlight Text">{$store.config.blockNetworkRequests
? 'yes'
: 'no'}
</span>
</div>
</div>
<Waterfall data={$store} />
</main>
<style>
.Container {
padding: 0 10px;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.Highlight {
padding: 2px 5px;
background: var(--textColor);
color: var(--backgroundColor);
}
.Text {
font-weight: bold;
}
.Box {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 10px;
flex-direction: column;
gap: 20px;
}
.Align-Bottom {
display: flex;
align-items: flex-end;
.Button {
background-color: var(--textColor);
color: var(--backgroundColor);
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
outline: 0;
border: 2px solid transparent;
}
.Button:hover {
background-color: var(--backgroundColor);
color: var(--textColor);
border-color: var(--textColor);
}
.Button:focus-visible {
background-color: var(--backgroundColor);
color: var(--textColor);
border-color: var(--textColor);
}
.Button:active {
border-color: MediumSlateBlue;
color: MediumSlateBlue;
}
</style>
8 changes: 2 additions & 6 deletions ext/Modal.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,10 @@
.modal {
position: fixed;
top: 10%;
left: 5%;
width: calc(100vw - 2em);
max-width: 62em;
max-height: calc(100vh - 4em);
inset: 10%;
overflow: auto;
padding: 1em;
border-radius: 0.2em;
background: white;
background: var(--backgroundColor);
}
</style>
46 changes: 28 additions & 18 deletions ext/RequestInfo.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@
<div class="Wrapper">
<ul>
<li>
<div>URL</div>
<div>{url.toString()}</div>
<div class="Columns">URL</div>
<div class="Columns">{url.toString()}</div>
</li>
{#if response?.statusCode}
<li>
<div>Status Code</div>
<div>{response.statusCode}</div>
<div class="Columns">Status Code</div>
<div class="Columns">{response.statusCode}</div>
</li>
{/if}
<li>
<div>Cached</div>
<div>{request.cached ? 'yes' : 'no'}</div>
<div class="Columns">Cached</div>
<div class="Columns">{request.cached ? 'yes' : 'no'}</div>
</li>
<li>
<div>Staged</div>
<div>{request.staged ? 'yes' : 'no'}</div>
<div class="Columns">Staged</div>
<div class="Columns">{request.staged ? 'yes' : 'no'}</div>
</li>
</ul>
</div>
Expand All @@ -38,8 +38,8 @@
<ul>
{#each Object.entries(reqHeaders) as [key, value]}
<li>
<div>{key}</div>
<div>{value}</div>
<div class="Columns">{key}</div>
<div class="Columns">{value}</div>
</li>
{/each}
</ul>
Expand All @@ -49,8 +49,8 @@
<ul>
{#each Object.entries(resHeaders) as [key, value]}
<li>
<div>{key}</div>
<div>{value}</div>
<div class="Columns">{key}</div>
<div class="Columns">{value}</div>
</li>
{/each}
</ul>
Expand All @@ -60,15 +60,25 @@
ul {
list-style-type: none;
padding: 5px;
border: 1px solid #aaa;
border: 1px solid var(--borderColor);
}
li {
display: flex;
flex-direction: row;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
li:nth-child(odd) {
background-color: #efefef;
background-color: var(--stripeA);
}
.Columns {
padding: 2px;
word-wrap: break-word;
overflow: auto;
}
.Columns:nth-child(odd) {
grid-column: 1;
}
.Columns:nth-child(even) {
grid-column: 2 / 4;
}
</style>
30 changes: 14 additions & 16 deletions ext/Row.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
let font, fill, sizeText, cacheColor;
$: {
font = `${statusCode ? '' : 'italic '}10px sans-serif`;
font = `${statusCode ? '' : 'italic '} 1rem sans-serif`;
fill = statusCode && statusCode >= 400 ? '#a35' : 'black';
sizeText = (() => {
Expand Down Expand Up @@ -82,46 +82,44 @@
opacity={statusCode ? 1 : 0.5}
>
<rect
width={rowWidth}
height={rowHeight + rowPadding - 1}
fill={index % 2 ? '#efefef' : '#fff'}
width="100%"
strokeWidth={1}
stroke={hover ? '#000' : '#fff'}
style={`height: calc(100% + ${rowPadding - 1}px); fill: ${index % 2 ? 'var(--stripeA)' : 'var(--stripeB)'}; stroke: ${hover ? 'var(---backgroundColor)' : 'var(---textColor)'};`}
/>
<rect width={2} height={rowHeight} fill={cacheColor} />
<rect width={2} height="100%" fill={cacheColor} />
<text
x={5}
x="5"
y={0}
dx={0}
dy={rowHeight}
style="font: {font}; fill: {fill};"
style={`padding: 5px; font: ${font}; fill: ${statusCode && statusCode >= 400 || aborted ? 'var(--aborted)' : 'var(--textColor)'}`}
textAnchor="start"
>
{title}
</text>
<text
x={198}
x="250"
y={0}
dy={rowHeight}
style="font: {font}; fill: {fill};"
style={`padding: 5px; font: ${font}; fill: ${statusCode && statusCode >= 400 || aborted ? 'var(--aborted)' : 'var(--textColor)'}`}
textAnchor="start"
>
{statusCode ?? 'pending'}
</text>
<text
x={220}
x="315"
y={0}
dy={rowHeight}
style="font: {font}; fill: {fill};"
style={`padding: 5px; font: ${font}; fill: ${statusCode && statusCode >= 400 || aborted ? 'var(--aborted)' : 'var(--textColor)'}`}
textAnchor="start"
>
{contentType ?? ''}
</text>
<text
x={250}
x="370"
y={0}
dy={rowHeight}
style="font: {font}; fill: {fill};"
style={`padding: 5px; font: ${font}; fill: ${statusCode && statusCode >= 400 || aborted ? 'var(--aborted)' : 'var(--textColor)'}`}
textAnchor="start"
>
{sizeText}
Expand All @@ -136,15 +134,15 @@
})}
</title>
<rect
x={(start - minTime) / scaleFactor}
x={`${((start - minTime) / scaleFactor) + 435}`}
y={6}
width={received}
height={rowHeight - 12}
style="fill: #e94;"
/>
{#if duration}
<rect
x={(start - minTime) / scaleFactor + received}
x={`${((start - minTime) / scaleFactor + received) + 435}`}
y={2}
rx={1}
width={duration / scaleFactor}
Expand Down
Loading

0 comments on commit 6f24047

Please sign in to comment.