rails_mini_profiler 0.4.0 → 0.7.1

data/app/javascript/js/select_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["all", "selectable"];
+
+  selectAll(event) {
+    const checked = event.target.checked;
+    this.allTarget.indeterminate = false;
+    this._setAllCheckboxes(checked);
+    this._dispatch("change", { count: this.selectedCount });
+  }
+
+  onSelected() {
+    this.allTarget.indeterminate = !!this._indeterminate;
+    this._dispatch("change", { count: this.selectedCount });
+  }
+
+  get selectedCount() {
+    return this.selected.length;
+  }
+
+  get selected() {
+    return this.selectables.filter((c) => c.checked);
+  }
+
+  get selectables() {
+    return new Array(...this.selectableTargets);
+  }
+
+  _setAllCheckboxes(checked) {
+    this.selectables.forEach((el) => {
+      const checkbox = el;
+
+      if (!checkbox.disabled) {
+        checkbox.checked = checked;
+      }
+    });
+  }
+
+  get _indeterminate() {
+    return (
+      this.selected.length !== this.selectableTargets.length &&
+      this.selected.length > 0
+    );
+  }
+
+  _dispatch(name, detail) {
+    window.dispatchEvent(
+      new CustomEvent(`rmp:select:${name}`, { bubbles: true, detail })
+    );
+  }
+}

data/app/javascript/packs/rails-mini-profiler.js

@@ -1,80 +1,96 @@
-import '../stylesheets/rails-mini-profiler.scss'
+import "../stylesheets/rails-mini-profiler.scss";
 
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css'
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
 
-function setupRequestSearch() {
-  const profiledRequestNameSearch = document.getElementById('profiled-request-search')
-  if (profiledRequestNameSearch) {
-    profiledRequestNameSearch.addEventListener('keyup', function (event) {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        document.getElementById('profiled-request-search-form').submit()
-      }
-    })
-  }
-}
+import { Application } from "@hotwired/stimulus";
+import { Dropdown } from "tailwindcss-stimulus-components";
+import Checklist from "../js/checklist_controller";
+import Selectable from "../js/select_controller";
+import Filter from "../js/filter_controller";
+import Search from "../js/search_controller";
+import Enable from "../js/enable_controller";
+import Clipboard from "../js/clipboard_controller";
+
+const application = Application.start();
+
+application.register("dropdown", Dropdown);
+application.register("checklist", Checklist);
+application.register("selectable", Selectable);
+application.register("filters", Filter);
+application.register("search", Search);
+application.register("enable", Enable);
+application.register("clipboard", Clipboard);
 
 function setupTraceSearch() {
-  const traceNameSearch = document.getElementById('trace-search')
+  const traceNameSearch = document.getElementById("trace-search");
   if (traceNameSearch) {
-    traceNameSearch.addEventListener('keyup', function (event) {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        document.getElementById('trace-form').submit()
+    traceNameSearch.addEventListener("keyup", function (event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        document.getElementById("trace-form").submit();
       }
-    })
+    });
   }
 }
 
 function setupRequestTable() {
-  const profiledRequestTable = document.getElementById('profiled-requests-table');
+  const profiledRequestTable = document.getElementById(
+    "profiled-requests-table"
+  );
   if (profiledRequestTable) {
-    const rows = profiledRequestTable.getElementsByTagName('tr')
-    for (let i = 0; i < rows.length; i++) {
-      const currentRow = profiledRequestTable.rows[i]
-      const link = currentRow.dataset.link
+    const rows = profiledRequestTable.rows;
+    for (let i = 1; i < rows.length; i++) {
+      const currentRow = profiledRequestTable.rows[i];
+      const link = currentRow.dataset.link;
       const createClickHandler = function () {
         return function () {
-          window.location.href = link
-        }
+          window.location.href = link;
+        };
+      };
+      if (link) {
+        currentRow.onclick = createClickHandler(currentRow);
       }
-      currentRow.onclick = createClickHandler(currentRow)
     }
   }
 }
 
-function setupTraceBars () {
-  const traceBars = document.querySelectorAll('.trace-bar')
+function setupTraceBars() {
+  const traceBars = document.querySelectorAll(".trace-bar");
   traceBars.forEach((bar) => {
-    const popover = bar.children[0]
+    const popover = bar.children[0];
     tippy(bar, {
-      trigger: 'click',
+      trigger: "click",
       content: popover,
-      theme: 'rmp',
-      maxWidth: '700px',
-      placement: 'bottom',
+      theme: "rmp",
+      maxWidth: "700px",
+      placement: "bottom",
       interactive: true,
-      onShow (instance) {
-        instance.popper.querySelector('.popover-close').addEventListener('click', () => {
-          instance.hide()
-        })
+      onShow(instance) {
+        instance.popper
+          .querySelector(".popover-close")
+          .addEventListener("click", () => {
+            instance.hide();
+          });
       },
-      onHide (instance) {
-        instance.popper.querySelector('.popover-close').removeEventListener('click', () => {
-          instance.hide()
-        })
+      onHide(instance) {
+        instance.popper
+          .querySelector(".popover-close")
+          .removeEventListener("click", () => {
+            instance.hide();
+          });
       },
-    })
-  })
+    });
+  });
 }
 
-
 // Trace Bar Popovers
-document.addEventListener('DOMContentLoaded', () => {
-  setupRequestTable();
-  setupRequestSearch();
-  setupTraceBars();
-  setupTraceSearch();
-}, false)
-
+document.addEventListener(
+  "DOMContentLoaded",
+  () => {
+    setupRequestTable();
+    setupTraceBars();
+    setupTraceSearch();
+  },
+  false
+);

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

@@ -0,0 +1,59 @@
+button,
+.button {
+  display: inline-block;
+  padding: 0.5em 0.5em;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: center;
+  text-decoration: none;
+
+  &:disabled {
+    background: var(--grey-200);
+    cursor: not-allowed;
+  }
+}
+
+.btn-red {
+  background: var(--red-500);
+  color: white;
+  font-weight: 600;
+  outline: none;
+
+  &:hover {
+    background: var(--red-600);
+  }
+}
+
+.btn-grey {
+  background: var(--grey-200);
+
+  &:hover {
+    background: var(--grey-100);
+  }
+}
+
+.btn-white {
+  border: 1px solid var(--grey-200);
+  background: white;
+
+  &:hover {
+    background: var(--grey-100);
+  }
+}
+
+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;
+  }
+}

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

@@ -0,0 +1,103 @@
+.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);
+  }
+}

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

@@ -0,0 +1,10 @@
+input[type=submit] {
+  display: inline-block;
+  padding: 0.5em 0.5em;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: center;
+  text-decoration: none;
+}

data/app/javascript/stylesheets/{navbar.scss → components/navbar.scss}

@@ -1,13 +1,10 @@
 .header {
-  margin: 0;
-  padding: 1.5rem 0;
-
   display: flex;
   justify-content: center;
-
-  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
-
+  padding: 1.5rem 0;
+  margin: 0;
   background: var(--primary);
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
 }
 
 .header a {
@@ -16,16 +13,14 @@
 }
 
 .nav {
-  width: var(--main-width);
-
   display: flex;
+  width: var(--main-width);
   justify-content: space-between;
 }
 
 .home {
   display: flex;
   align-items: center;
-
   text-decoration: none;
 }
 
@@ -40,11 +35,10 @@
 }
 
 .header-links {
-  margin: 0;
-  padding: 0;
-  list-style: none;
   display: flex;
   align-items: center;
-
+  padding: 0;
+  margin: 0;
   font-weight: 700;
+  list-style: none;
 }

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

@@ -0,0 +1,7 @@
+.page-header {
+  padding: 2.5rem 0 2.5rem;
+}
+
+.page-header h1 {
+  font-size: 28px;
+}

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

@@ -9,18 +9,12 @@
 .pagy-nav > .page.active,
 .pagy-nav > .page > a {
   padding: 0.5rem 1rem;
-
-  color: var(--grey-900);
-
-  background: white;
   border: 1px solid var(--border-color);
   border-right: none;
-  text-decoration: none;
+  background: white;
+  color: var(--grey-900);
   cursor: pointer;
-
-  &:hover {
-    background: var(--grey-100);
-  }
+  text-decoration: none;
 }
 
 .pagy-nav > .page.prev a,
@@ -30,15 +24,15 @@
 
 .pagy-nav > .page.next a,
 .pagy-nav > .page.next.disabled {
-  border-radius: 0 5px 5px 0;
   border-right: 1px solid var(--border-color);
+  border-radius: 0 5px 5px 0;
 }
 
 .pagy-nav > .page.active {
-  cursor: default;
-  background: var(--red-500);
   border-color: var(--red-500);
+  background: var(--red-500);
   color: white;
+  cursor: default;
 
   &:hover {
     background: var(--red-500);
@@ -46,9 +40,16 @@
 }
 
 .pagy-nav > .page.disabled {
-  cursor: default;
   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/placeholder.scss

@@ -0,0 +1,36 @@
+.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-text h2 {
+  padding-bottom: 1rem;
+}
+
+.placeholder-link {
+  color: var(--grey-400);
+
+  &:visited {
+    color: var(--grey-400);
+  }
+
+  &:hover {
+    color: var(--grey-900);
+  }
+}

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

@@ -0,0 +1,55 @@
+.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 {
+  color: var(--grey-500);
+}
+
+.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;
+}
+
+.request-path {
+  overflow: hidden;
+  max-width: 280px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,93 @@
+.trace {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.25em 0;
+  list-style: none;
+}
+
+.trace:nth-child(odd) {
+  background: var(--grey-100);
+}
+
+.trace .trace-bar {
+  position: relative;
+  height: 16px;
+  padding: 0;
+  margin: 0;
+  background: linear-gradient(to top right, var(--grey-500), var(--grey-400));
+  cursor: pointer;
+}
+
+.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 {
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 0.5em;
+  margin: 0;
+  color: var(--grey-400);
+  font-size: 14px;
+  text-align: right;
+  text-overflow: ellipsis;
+}
+
+.trace-payload {
+  margin: 0;
+}
+
+.sequel-trace-query {
+  overflow: auto;
+  max-height: 100px;
+  padding: 1em 1em;
+  background: var(--grey-100);
+  white-space: pre-wrap;
+}
+
+.sequel-trace-binds {
+  overflow: auto;
+  max-height: 100px;
+  padding: 0.5em 1em;
+  margin: 0 0 1em 0;
+  background: var(--grey-50);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.backtrace {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5em;
+  background: var(--grey-100);
+}
+
+.backtrace button {
+  overflow: auto;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  background: none;
+  color: var(--grey-500);
+}
+
+.backtrace button svg {
+  width: 20px;
+  height: 20px;
+}

data/app/javascript/stylesheets/flamegraph.scss

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