rails_mini_profiler 0.1.0

data/app/assets/stylesheets/rails_mini_profiler/application.css

@@ -0,0 +1,164 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  --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: #F59E0B;
+
+  --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);
+
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: var(--text-color)
+}
+
+h1 {
+  padding: 2rem 0 1rem;
+}
+
+button {
+  border: none;
+  border-radius: .25rem;
+  padding: 0.5em .5em;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+button:hover {
+  box-shadow: 0 .25rem .25rem 0 var(--grey-50);
+}
+
+/* --------------------------------------- */
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* --------------------------------------- */
+
+.pill {
+  margin: .2rem 0;
+  padding: .1rem .4rem;
+  border-radius: 5px;
+
+  font-size: .9rem;
+  font-weight: 600;
+  letter-spacing: .1rem;
+
+  background: var(--grey-200);
+}
+
+/* --------------------------------------- */
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+  padding: 1em;
+  color: black;
+}
+
+.popover-header {
+  display: flex;
+  padding-bottom: 1em;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.popover-description {
+  margin: 0;
+  padding: 0;
+}
+
+.popover-close {
+  background: transparent;
+  padding: 0;
+  font-weight: 700;
+  font-size: 20px;
+  color: var(--grey-400);
+}
+
+.popover-body {
+  padding: 1em 0;
+}
+
+.popover-footer {
+  border-top: 1px solid var(--grey-50);
+}
+
+.tippy-box[data-theme~='rmp'] {
+  background: white;
+  box-shadow: 8px 0 30px 4px rgba(0, 0, 0, .2), 8px 4px 10px 0 rgba(0, 0, 0, .05);
+  border-radius: 3px;
+
+  transition: all cubic-bezier(.19,1,.22,1) .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;
+}

data/app/assets/stylesheets/rails_mini_profiler/flamegraph.css

@@ -0,0 +1,14 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+#wrapper {
+  height: 100vh;
+  width: 100%;
+}
+
+#speedscope-iframe {
+  width: 100%;
+  height: 100%;
+  border: none; }

data/app/assets/stylesheets/rails_mini_profiler/flashes.css

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

data/app/assets/stylesheets/rails_mini_profiler/navbar.css

@@ -0,0 +1,50 @@
+.header {
+  margin: 0;
+  padding: 1.5rem 0;
+
+  display: flex;
+  justify-content: center;
+
+  box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
+
+  background: var(--primary);
+}
+
+.header a {
+  color:white;
+  text-decoration: none;
+}
+
+.nav {
+  width: var(--main-width);
+
+  display: flex;
+  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 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+
+  font-weight: 700;
+}

data/app/assets/stylesheets/rails_mini_profiler/profiled_requests.css

@@ -0,0 +1,180 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+
+main {
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+}
+
+.main-section {
+  width: var(--main-width);
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 450px;
+}
+
+.placeholder-image {
+  height: 30%;
+  width: 30%;
+  -webkit-filter: grayscale(1) brightness(2.5);
+}
+
+.placeholder-text {
+  text-align: center;
+  color: var(--grey-400);
+}
+
+.profiled-requests-actions {
+  display: flex;
+  padding: 1rem 0;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-field {
+  padding: 0.5rem .5rem;
+  border-radius: .25em;
+
+  border: 1px solid var(--grey-400);
+  color: var(--grey-700) ;
+}
+
+.clear-action button {
+  background: var(--red-500);
+  color: white;
+}
+
+.table {
+  width: 100%;
+  /* Hack to get table row borders, see https://stackoverflow.com/a/2586780/2553104 */
+  border-collapse: collapse;
+  border-radius: 5px;
+  border: hidden 1px var(--border-color);
+  box-shadow: 0 0 0 1px var(--border-color);
+}
+
+.table thead tr {
+  color: var(--grey-400);
+}
+
+.table thead th {
+  font-weight: 400;
+}
+
+.table tr {
+  border: solid 1px var(--border-color);
+  color: var(--grey-700);
+  cursor: pointer;
+}
+
+.table tr:nth-child(even) {
+  background: var(--grey-50);
+}
+
+.table tbody tr:hover {
+  background: var(--grey-100);
+}
+
+.table th,
+.table td {
+  padding: 0.5rem 1rem;
+}
+
+.request-path {
+  max-width: 300px;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.request-buttons {
+  z-index: 1;
+  text-align: right;
+}
+
+.request-buttons a {
+  text-decoration: none;
+  padding: 0 .25rem;
+  color: var(--grey-700);
+}
+
+.request-buttons a:active,
+.request-buttons a:focus-visible,
+.request-buttons a:hover {
+  color: var(--blue-500);
+}
+
+.request-buttons a.link-disabled {
+  cursor: default;
+  pointer-events: none;
+  text-decoration: none;
+  color: var(--grey-200);
+}
+
+.request-details-data {
+  display: flex;
+
+  margin: 0;
+  padding: 0;
+}
+
+.data-item {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  list-style: none;
+
+  margin-right: 3rem;
+  padding: 0;
+}
+
+.data-item small {
+  color: var(--grey-400);
+}
+
+.data-item span {
+  margin: .25rem 0;
+}
+
+[class*='request-status-2'],
+[class*='request-method-get'] {
+  color: white;
+  background: var(--green-400) !important;
+}
+
+[class*='request-status-4'],
+[class*='request-method-put'],
+[class*='request-method-patch'] {
+  color: white;
+  background: var(--yellow-400) !important;
+}
+
+[class*='request-status-5'],
+[class*='request-method-delete'] {
+  color: white;
+  background: var(--red-500) !important;
+}
+
+.request-details-actions {
+  margin: 0;
+  padding: 2em 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flamegraph-button button {
+  background: var(--grey-200);
+}

data/app/assets/stylesheets/rails_mini_profiler/traces.css

@@ -0,0 +1,87 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+.trace-list {
+  margin: 0;
+  padding: 0;
+}
+
+.trace {
+  list-style: none;
+  display: flex;
+  padding: .25em 0;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.trace:nth-child(odd) {
+  background: var(--grey-100);
+}
+
+.trace .trace-bar {
+  position: relative;
+  margin: 0;
+  height: 16px;
+  padding: 0;
+  cursor: pointer;
+  background: linear-gradient(to top right, var(--grey-500), var(--grey-400));
+}
+
+.instantiation-trace .trace-bar {
+  background: linear-gradient(to top right, var(--green-400), var(--green-300));
+}
+
+.sequel-trace .trace-bar {
+  background: linear-gradient(to top right, var(--green-500), var(--green-400));
+}
+
+.controller-trace .trace-bar {
+  background: linear-gradient(to top right, var(--yellow-500), var(--yellow-400));
+}
+
+.render-template-trace .trace-bar,
+.render-partial-trace .trace-bar {
+  background: linear-gradient(to top right, var(--blue-500), var(--blue-400));
+}
+
+.trace-name {
+  margin: 0;
+  box-sizing: border-box;
+  padding: 0 .5em;
+  overflow: hidden;
+  font-size: 14px;
+  text-align: right;
+  text-overflow: ellipsis;
+  color: var(--grey-400)
+}
+
+.trace-payload {
+  margin: 0;
+}
+
+.sequel-trace-query {
+  padding: 1em 1em;
+  background: var(--grey-100);
+  overflow: auto;
+  max-height: 100px;
+  white-space: pre-wrap;
+}
+
+.sequel-trace-binds {
+  margin: 0 0 1em 0;
+  padding: .5em 0;
+  font-size: 12px;
+  overflow: auto;
+  max-height: 100px;
+  white-space: pre-wrap;
+  background: var(--grey-50);
+}
+
+.trace-table {
+  margin-top: 1em;
+  width: 100%;
+  border-collapse: collapse;
+  border: hidden 1px var(--border-color);
+}