rails_mini_profiler 0

data/app/javascript/stylesheets/components/page_header/page_header.scss

@@ -0,0 +1,3 @@
+.page-header {
+  padding: 2rem 0 2rem;
+}

data/app/javascript/stylesheets/components/pagination.scss

@@ -0,0 +1,55 @@
+.pagy-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1em 0;
+}
+
+.pagy-nav > .page.disabled,
+.pagy-nav > .page.active,
+.pagy-nav > .page > a {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  border-right: none;
+  background: white;
+  color: var(--grey-900);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.pagy-nav > .page.prev a,
+.pagy-nav > .page.prev.disabled {
+  border-radius: 5px 0 0 5px;
+}
+
+.pagy-nav > .page.next a,
+.pagy-nav > .page.next.disabled {
+  border-right: 1px solid var(--border-color);
+  border-radius: 0 5px 5px 0;
+}
+
+.pagy-nav > .page.active {
+  border-color: var(--red-500);
+  background: var(--red-500);
+  color: white;
+  cursor: default;
+
+  &:hover {
+    background: var(--red-500);
+  }
+}
+
+.pagy-nav > .page.disabled {
+  color: var(--grey-500);
+  cursor: default;
+
+  &:hover {
+    background: white;
+  }
+}
+
+.pagy-nav > .page.disabled:hover,
+.pagy-nav > .page.active:hover,
+.pagy-nav > .page > a:hover {
+  background: var(--grey-100);
+}

data/app/javascript/stylesheets/components/profiled_request_table/placeholder.scss

@@ -0,0 +1,33 @@
+
+.placeholder {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2rem;
+}
+
+.placeholder-image {
+  width: 30%;
+  height: 30%;
+  -webkit-filter: grayscale(1) brightness(2.5);
+}
+
+.placeholder-text {
+  padding: 1rem 0;
+  color: var(--grey-400);
+  text-align: center;
+}
+
+.placeholder-link {
+  color: var(--grey-400);
+
+  &:visited {
+    color: var(--grey-400);
+  }
+
+  &:hover {
+    color: var(--grey-900);
+  }
+}

data/app/javascript/stylesheets/components/profiled_request_table/profiled_request_table.scss

@@ -0,0 +1,179 @@
+.table {
+  width: 100%;
+  border: hidden 1px var(--border-color);
+
+  /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
+  border-collapse: collapse;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px var(--border-color);
+  table-layout: fixed;
+}
+
+.table th,
+.table td {
+  padding: 0.5rem 1rem;
+}
+
+.table thead tr {
+  border: hidden 1px var(--border-color);
+  box-shadow: 0 0 0 1px var(--border-color);
+  color: var(--grey-400);
+}
+
+.table tr:nth-child(even) {
+  background: var(--grey-50);
+}
+
+.table thead th {
+  font-weight: 400;
+}
+
+.table-filter-icon {
+  width: 14px;
+  margin-left: 0.5rem;
+}
+
+.table tbody tr:not(.no-row) {
+  border: solid 1px var(--border-color);
+  color: var(--grey-700);
+  cursor: pointer;
+}
+
+.table tbody tr:not(.no-row):hover {
+  background: var(--grey-100);
+}
+
+.request-checkbox {
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+}
+
+.dropdown-body {
+  padding: 0.33rem 0.5rem;
+}
+
+.dropdown-search-field {
+  padding: 0.5rem 0.5rem;
+  border: 1px solid var(--grey-400);
+  border-radius: 5px;
+  color: var(--grey-700);
+}
+
+.dropdown-toggle {
+  display: flex;
+  align-items: center;
+  color: inherit;
+
+  &:hover {
+    color: var(--grey-900);
+  }
+}
+
+.dropdown-container {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  overflow: hidden;
+  min-width: 240px;
+  box-sizing: border-box;
+  flex-direction: column;
+  border: 1px solid var(--grey-200);
+  margin-top: 0.3em;
+  background: white;
+  border-radius: 5px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  color: var(--grey-400);
+  cursor: default;
+}
+
+.dropdown-search {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-search button {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-entry {
+  display: flex;
+  padding: 0.33rem 1rem;
+  text-decoration: none;
+
+  &:hover {
+    background: var(--grey-100);
+    color: var(--grey-900);
+  }
+}
+
+.dropdown-entry input {
+  margin-right: 0.5em;
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--grey-200);
+  background: var(--grey-100);
+  font-size: 0.833rem;
+  text-align: left;
+}
+
+.dropdown-header button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--grey-500);
+  font-size: 0.833rem;
+  outline: none;
+  text-decoration: underline;
+
+  &:hover {
+    box-shadow: none;
+    color: var(--grey-900);
+  }
+}
+
+.dropdown-footer {
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  background: var(--red-500);
+  border-radius: 0;
+  color: white;
+  font-weight: 600;
+  outline: none;
+
+  &:hover {
+    background: var(--red-600);
+  }
+}
+
+.dropdown-search-button {
+  display: inline-block;
+  padding: 0.5em 0.5em;
+  border: none;
+  background: var(--red-500);
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover {
+    background: var(--red-600);
+  }
+}
+
+.request-path {
+  overflow: hidden;
+  max-width: 280px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/app/javascript/stylesheets/flamegraph.scss

@@ -0,0 +1,10 @@
+#wrapper {
+  width: 100%;
+  height: 100vh;
+}
+
+#speedscope-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}

data/app/javascript/stylesheets/flashes.scss

@@ -0,0 +1,15 @@
+.flash {
+  padding: 1rem 1rem;
+  margin-top: 1rem;
+  border-radius: 5px;
+}
+
+.flash-error {
+  background: var(--red-500);
+  color: white;
+}
+
+.flash-notice {
+  background: var(--green-400);
+  color: white;
+}

data/app/javascript/stylesheets/navbar.scss

@@ -0,0 +1,44 @@
+.header {
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem 0;
+  margin: 0;
+  background: var(--primary);
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+.header a {
+  color: white;
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  width: var(--main-width);
+  justify-content: space-between;
+}
+
+.home {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.home-logo {
+  width: 64px;
+  height: 64px;
+}
+
+.home-title {
+  padding: 0 0 0 1rem;
+  margin: 0;
+}
+
+.header-links {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  font-weight: 700;
+  list-style: none;
+}

data/app/javascript/stylesheets/profiled_requests.scss

@@ -0,0 +1,89 @@
+@import 'components/profiled_request_table/placeholder';
+@import 'components/profiled_request_table/profiled_request_table';
+
+main {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.main-section {
+  width: var(--main-width);
+}
+
+.search-field {
+  box-sizing: border-box;
+  padding: 0.5rem;
+  border: 1px solid var(--grey-400);
+  border-radius: 5px;
+}
+
+.request-details-data {
+  display: flex;
+  padding: 1rem 0;
+}
+
+.request-details-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 1rem;
+  margin: 0;
+}
+
+.data-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  margin-right: 3rem;
+  list-style: none;
+}
+
+.data-item small {
+  color: var(--grey-400);
+}
+
+.data-item span {
+  margin: 0.25rem 0;
+}
+
+[class*='request-status-2'],
+[class*='request-method-get'] {
+  background: var(--green-400) !important;
+  color: white;
+}
+
+[class*='request-status-4'],
+[class*='request-method-put'],
+[class*='request-method-patch'] {
+  background: var(--yellow-400) !important;
+  color: white;
+}
+
+[class*='request-status-5'],
+[class*='request-method-delete'] {
+  background: var(--red-500) !important;
+  color: white;
+}
+
+.flamegraph-button button {
+  background: var(--grey-200);
+}
+
+.clear-action button {
+  background: var(--red-500);
+  color: white;
+  font-weight: 600;
+
+  &:hover {
+    background: var(--red-600);
+  }
+}
+
+.profiled-requests-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}

data/app/javascript/stylesheets/rails-mini-profiler.scss

@@ -0,0 +1,205 @@
+@import 'flashes';
+@import 'flamegraph';
+@import 'navbar';
+@import 'profiled_requests';
+@import 'traces';
+@import 'components/pagination';
+@import 'components/page_header/page_header';
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: 'Open Sans', monospace;
+
+  --grey-50: #f9fafb;
+  --grey-100: #f3f4f6;
+  --grey-200: #e5e7eb;
+  --grey-400: #9ca3af;
+  --grey-500: #6b7280;
+  --grey-700: #374151;
+  --grey-900: #111827;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --yellow-400: #fbbf24;
+  --yellow-500: #fbbf24;
+  --yellow-600: #d97706;
+  --yellow-700: #b45309;
+  --green-300: #6ee7b7;
+  --green-400: #34d399;
+  --green-500: #10b981;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --main-width: 1056px;
+  --primary: var(--red-600);
+  --border-color: var(--grey-200);
+  --text-color: var(--grey-900);
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: var(--text-color);
+}
+
+button,
+.button {
+  display: inline-block;
+  padding: 0.5em 0.5em;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: center;
+  text-decoration: none;
+
+  &:disabled {
+    background: var(--grey-200);
+    cursor: not-allowed;
+  }
+}
+
+button:hover {
+  box-shadow: 0 0.25rem 0.25rem 0 var(--grey-50);
+}
+
+button.none {
+  padding: 0;
+  border: none;
+  background: none;
+  outline: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+/* --------------------------------------- */
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.hidden {
+  display: none;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+/* --------------------------------------- */
+
+.pill {
+  padding: 0.1rem 0.4rem;
+  margin: 0.2rem 0;
+  background: var(--grey-200);
+  border-radius: 5px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.1rem;
+}
+
+/* --------------------------------------- */
+
+.popover {
+  display: flex;
+  width: 600px;
+  flex-direction: column;
+  padding: 1em;
+  color: black;
+}
+
+.popover-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 1em;
+}
+
+.popover-description {
+  padding: 0;
+  margin: 0;
+}
+
+.popover-close {
+  padding: 0;
+  background: transparent;
+  color: var(--grey-400);
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.popover-body {
+  padding: 1em 0;
+}
+
+.popover-footer {
+  border-top: 1px solid var(--grey-50);
+}
+
+.tippy-box[data-theme~='rmp'] {
+  background: white;
+  border-radius: 5px;
+  box-shadow: 8px 0 30px 4px rgba(0, 0, 0, 0.2), 8px 4px 10px 0 rgba(0, 0, 0, 0.05);
+  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
+}
+
+.tippy-box[data-theme~='rmp'][data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: white;
+}
+
+.tippy-box[data-theme~='rmp'][data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: white;
+}
+
+.tippy-box[data-theme~='rmp'][data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: white;
+}
+
+.tippy-box[data-theme~='rmp'][data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: white;
+}