rails_mini_profiler 0.2.1 → 0.3.0

data/app/{assets/stylesheets/rails_mini_profiler/profiled_requests.css → javascript/stylesheets/profiled_requests.scss}

@@ -1,9 +1,3 @@
-/*
-  Place all the styles related to the matching controller here.
-  They will automatically be included in application.css.
-*/
-
-
 main {
   width: 100%;
 
@@ -133,7 +127,7 @@ main {
 .data-item {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
   list-style: none;
 
   margin-right: 3rem;

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

@@ -0,0 +1,175 @@
+@import 'flashes';
+@import 'flamegraph';
+@import 'navbar';
+@import 'profiled_requests';
+@import 'traces';
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  font-style: normal;
+}
+
+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', monospace;
+
+}
+
+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/traces.css → javascript/stylesheets/traces.scss}

@@ -1,8 +1,3 @@
-/*
-  Place all the styles related to the matching controller here.
-  They will automatically be included in application.css.
-*/
-
 .trace-list {
   margin: 0;
   padding: 0;

data/app/presenters/rails_mini_profiler/profiled_request_presenter.rb

@@ -23,11 +23,11 @@ module RailsMiniProfiler
 
       if model.flamegraph.present?
         link_to(flamegraph_path(model.id), title: 'Show Flamegraph') do
-          inline_svg_tag('rails_mini_profiler/graph.svg')
+          inline_svg('graph.svg')
         end
       else
         link_to(flamegraph_path(model.id), title: 'No Flamegraph present for this request', class: 'link-disabled') do
-          inline_svg_tag('rails_mini_profiler/graph.svg')
+          inline_svg('graph.svg')
         end
       end
     end

data/app/views/layouts/rails_mini_profiler/application.html.erb

@@ -1,13 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Rails Mini Profiler</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= javascript_include_tag "rails_mini_profiler" %>
-  <%= stylesheet_link_tag "rails_mini_profiler/application", media: "all" %>
-</head>
+<%= render 'rails_mini_profiler/shared/head' %>
 <body>
 
 <%= render 'rails_mini_profiler/shared/navbar' %>

data/app/views/layouts/rails_mini_profiler/flamegraph.html.erb

@@ -1,13 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Rails Mini Profiler</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= javascript_include_tag "rails_mini_profiler" %>
-  <%= stylesheet_link_tag "rails_mini_profiler/application", media: "all" %>
-</head>
+<%= render 'rails_mini_profiler/shared/head' %>
 <body>
 
 <main>

data/app/views/rails_mini_profiler/badge.html.erb

@@ -32,6 +32,6 @@
   }
 </style>
 <a id="rails-mini-profiler-badge" href="<%= profiled_request_path(@profiled_request.id) %>" data-turbolinks="false" title="View performance data">
-  <%= inline_svg_tag('rails_mini_profiler/logo_variant', id: "rails-mini-profiler-badge-icon") %>
+  <%= inline_svg('logo_variant.svg', id: "rails-mini-profiler-badge-icon") %>
   <%= (@profiled_request.duration.to_f / 100).round %>ms
 </a>

data/app/views/rails_mini_profiler/profiled_requests/index.html.erb

@@ -1,6 +1,6 @@
 <% if @profiled_requests.empty? %>
   <section class="placeholder">
-    <%= inline_svg_tag('rails_mini_profiler/logo_variant', class: 'placeholder-image') %>
+    <%= inline_svg('logo_variant.svg', class: 'placeholder-image') %>
     <div class="placeholder-text">
       <h2> There is nothing here yet! </h2>
       <p>Send some requests to your app for them to show up here</p>
@@ -43,11 +43,11 @@
         <td class=""><%= profiled_request.created_at %></td>
         <td class="request-buttons">
           <%= link_to(profiled_request_path(profiled_request.id), title: 'Show Details') do %>
-            <%= inline_svg_tag('rails_mini_profiler/show.svg', options = {}) %>
+            <%= inline_svg('show.svg', options = {}) %>
           <% end %>
           <%= profiled_request.flamegraph_icon %>
           <%= link_to(profiled_request_path(profiled_request.id), title: 'Delete Request', method: :delete) do %>
-            <%= inline_svg_tag('rails_mini_profiler/delete.svg') %>
+            <%= inline_svg('delete.svg') %>
           <% end %>
         </td>
       </tr>

data/app/views/rails_mini_profiler/shared/_head.erb

@@ -0,0 +1,13 @@
+<head>
+  <title>Rails Mini Profiler</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <% if defined?(Webpacker::Engine) %>
+    <%= javascript_pack_tag "rails-mini-profiler" %>
+    <%= stylesheet_pack_tag 'rails-mini-profiler' %>
+  <% else %>
+    <%= javascript_include_tag "rails_mini_profiler" %>
+    <%= stylesheet_link_tag "rails_mini_profiler/application", media: "all" %>
+  <%end %>
+</head>

data/app/views/rails_mini_profiler/shared/_navbar.html.erb

@@ -1,7 +1,7 @@
 <header class="header">
   <nav class="nav">
     <a class="home" href="<%= profiled_requests_path %>">
-      <%= inline_svg_tag('rails_mini_profiler/logo', class: 'home-logo') %>
+      <%= inline_svg('logo.svg', class: 'home-logo') %>
       <h1 class="home-title">Rails Mini Profiler </h1>
     </a>
     <ul class="header-links">

data/lib/generators/rails_mini_profiler/install_generator.rb

@@ -11,10 +11,23 @@ module RailsMiniProfiler
       #
       # Updates the routes file to mount the engine, adds an initializer and copies a migration.
       desc 'Install rails-mini-profiler'
+
       def install
         route("mount RailsMiniProfiler::Engine => '/rails_mini_profiler'")
         template 'rails_mini_profiler.rb.erb', 'config/initializers/rails_mini_profiler.rb'
         system('rails rails_mini_profiler:install:migrations')
+        webpacker_install if defined?(Webpacker::Engine)
+      end
+
+      private
+
+      def webpacker_install
+        run 'yarn add @rails-mini-profiler/assets'
+        webpack_config = YAML.load_file(Rails.root.join('config', 'webpacker.yml'))[Rails.env]
+        destination = Rails.root.join(webpack_config['source_path'],
+                                      webpack_config['source_entry_path'],
+                                      'rails-mini-profiler.js')
+        template('rails_mini_profiler.js.erb', destination)
       end
     end
   end

data/lib/generators/rails_mini_profiler/templates/rails_mini_profiler.js.erb

@@ -0,0 +1,13 @@
+import "@rails-mini-profiler/assets"
+
+// Import styles
+import "@rails-mini-profiler/assets/dist/rails-mini-profiler.css";
+
+// Import images
+//
+// You may simplify this when using a glob loader (e.g glob-import-loader)
+<%- Dir.chdir(RailsMiniProfiler::Engine.root.join('app/javascript/images')) do -%>
+  <%- Dir.glob('**/*').each do |file| -%>
+import "@rails-mini-profiler/assets/dist/images/<%= file %>";
+  <%- end -%>
+<%- end -%>

data/lib/rails_mini_profiler/badge.rb

@@ -1,11 +1,14 @@
 # frozen_string_literal: true
 
+require_relative '../../app/helpers/rails_mini_profiler/application_helper'
+
 module RailsMiniProfiler
   # Wraps functionality to render an interactive badge on top of HTML responses
   #
   # @api private
   class Badge
     include InlineSvg::ActionView::Helpers
+    include RailsMiniProfiler::ApplicationHelper
     include Engine.routes.url_helpers
 
     # @param request_context [RequestContext] The current request context
@@ -60,7 +63,7 @@ module RailsMiniProfiler
       template.result(binding)
     end
 
-    # Transform the configuration position into CSS styles
+    # Transform the configuration position into CSS style positions
     #
     # @return String The badge position as CSS style
     def css_position

data/lib/rails_mini_profiler/engine.rb

@@ -12,7 +12,11 @@ module RailsMiniProfiler
     end
 
     initializer 'rails_mini_profiler.assets.precompile', group: :all do |app|
-      app.config.assets.precompile += %w[rails_mini_profiler.js rails_mini_profiler/application.css]
+      app.config.assets.precompile += %w[
+        rails_mini_profiler.js
+        rails_mini_profiler/application.css
+        vendor/assets/images
+      ]
     end
 
     config.generators do |g|

data/lib/rails_mini_profiler/version.rb

@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
 module RailsMiniProfiler
-  VERSION = '0.2.1'
+  # This needs to be double quoted for release-please
+  #
+  # See https://github.com/googleapis/release-please/issues/1018
+  VERSION = "0.3.0" # rubocop:disable Style/StringLiterals
 end

data/vendor/assets/images/bookmark.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Iconly/Bulk/Bookmark</title>
+    <g id="Iconly/Bulk/Bookmark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Bookmark" transform="translate(4.000000, 2.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M7.99117971,16.6215262 L1.49944873,19.8641008 C1.00920819,20.1302192 0.397682727,19.9525481 0.123484013,19.4643313 C0.043404087,19.3108374 0.00105752372,19.1402321 -5.24025268e-14,18.9668404 L-5.24025268e-14,11.7088036 C-5.24025268e-14,12.4283887 0.405733186,12.872577 1.47298787,13.3700679 L7.99117971,16.6215262 Z" id="Bookmark-2" opacity="0.400000006"></path>
+            <path d="M11.0694598,0 C13.7772878,0 15.9735391,1.06605192 16,3.79336809 L16,3.79336809 L16,18.9668404 C15.998918,19.1374024 15.9565307,19.3051222 15.876516,19.4554476 C15.7479482,19.7006536 15.5259405,19.8826876 15.2614691,19.959752 C14.9969977,20.0368164 14.7127851,20.0022901 14.4740904,19.8641008 L14.4740904,19.8641008 L7.99117971,16.6215262 L1.47298787,13.3700679 C0.405733186,12.872577 8.17124146e-14,12.4283887 8.17124146e-14,11.7088036 L8.17124146e-14,11.7088036 L8.17124146e-14,3.79336809 C8.17124146e-14,1.06605192 2.19625138,0 4.8952591,0 L4.8952591,0 Z M11.7486218,6.04096089 L4.22491731,6.04096089 C3.79137074,6.04096089 3.4399118,6.39494927 3.4399118,6.83161607 C3.4399118,7.26828286 3.79137074,7.62227124 4.22491731,7.62227124 L4.22491731,7.62227124 L11.7486218,7.62227124 C12.1821684,7.62227124 12.5336273,7.26828286 12.5336273,6.83161607 C12.5336273,6.39494927 12.1821684,6.04096089 11.7486218,6.04096089 L11.7486218,6.04096089 Z"></path>
+        </g>
+    </g>
+</svg>

data/vendor/assets/images/chart.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Iconly/Bulk/Chart</title>
+    <g id="Iconly/Bulk/Chart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Chart" transform="translate(2.000000, 2.000000)" fill="currentColor" fill-rule="nonzero">
+            <path d="M14.6755556,0 L5.33333333,0 C1.92888889,0 0,1.92888889 0,5.33333333 L0,14.6666667 C0,18.0711111 1.92888889,20 5.33333333,20 L14.6755556,20 C18.08,20 20,18.0711111 20,14.6666667 L20,5.33333333 C20,1.92888889 18.08,0 14.6755556,0" id="Fill-1" opacity="0.400000006"></path>
+            <path d="M5.36871111,7.36897778 C4.91537778,7.36897778 4.54204444,7.74231111 4.54204444,8.20453333 L4.54204444,15.0756444 C4.54204444,15.5289778 4.91537778,15.9023111 5.36871111,15.9023111 C5.83093333,15.9023111 6.20426667,15.5289778 6.20426667,15.0756444 L6.20426667,8.20453333 C6.20426667,7.74231111 5.83093333,7.36897778 5.36871111,7.36897778" id="Fill-4"></path>
+            <path d="M10.0353778,4.08897778 C9.58204444,4.08897778 9.20871111,4.46231111 9.20871111,4.92453333 L9.20871111,15.0756444 C9.20871111,15.5289778 9.58204444,15.9023111 10.0353778,15.9023111 C10.4976,15.9023111 10.8709333,15.5289778 10.8709333,15.0756444 L10.8709333,4.92453333 C10.8709333,4.46231111 10.4976,4.08897778 10.0353778,4.08897778" id="Fill-6"></path>
+            <path d="M14.6399111,10.9956444 C14.1776889,10.9956444 13.8043556,11.3689778 13.8043556,11.8312 L13.8043556,15.0756444 C13.8043556,15.5289778 14.1776889,15.9023111 14.6310222,15.9023111 C15.0932444,15.9023111 15.4665778,15.5289778 15.4665778,15.0756444 L15.4665778,11.8312 C15.4665778,11.3689778 15.0932444,10.9956444 14.6399111,10.9956444" id="Fill-8"></path>
+        </g>
+    </g>
+</svg>

data/vendor/assets/images/delete.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Iconly/Bulk/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Delete" transform="translate(3.000000, 2.000000)" fill="currentColor" fill-rule="nonzero">
+            <path d="M16.6432894,7.4884379 C16.6432894,7.55643552 16.1103307,14.2971996 15.8059218,17.1341003 C15.6153015,18.8750394 14.492976,19.9310024 12.8094878,19.9610014 C11.5159931,19.9900003 10.2497298,20 9.00389021,20 C7.68121893,20 6.38772423,19.9900003 5.13215907,19.9610014 C3.50507888,19.9220027 2.38178085,18.8450404 2.2008861,17.1341003 C1.88772423,14.2871999 1.36449103,7.55643552 1.35476551,7.4884379 C1.34503998,7.28344508 1.41117355,7.0884519 1.54538578,6.93045743 C1.67765291,6.78446254 1.86827318,6.69646562 2.06861898,6.69646562 L15.9391614,6.69646562 C16.1385347,6.69646562 16.3194294,6.78446254 16.4623946,6.93045743 C16.5956343,7.0884519 16.6627404,7.28344508 16.6432894,7.4884379" id="Fill-1" opacity="0.400000006"></path>
+            <path d="M18,3.97686081 C18,3.56587519 17.67614,3.24388646 17.2871191,3.24388646 L14.371407,3.24388646 C13.77815,3.24388646 13.2626972,2.82190123 13.1304301,2.22692206 L12.9670413,1.49794757 C12.7384915,0.616978406 11.9497515,-1.50990331e-14 11.0647288,-1.50990331e-14 L6.93624379,-1.50990331e-14 C6.04149557,-1.50990331e-14 5.26053598,0.616978406 5.0232332,1.54594589 L4.87054247,2.22792202 C4.73730279,2.82190123 4.22185001,3.24388646 3.62956559,3.24388646 L0.713853469,3.24388646 C0.323859952,3.24388646 0,3.56587519 0,3.97686081 L0,4.35684751 C0,4.75783348 0.323859952,5.08982186 0.713853469,5.08982186 L17.2871191,5.08982186 C17.67614,5.08982186 18,4.75783348 18,4.35684751 L18,3.97686081 Z" id="Fill-4"></path>
+        </g>
+    </g>
+</svg>

data/vendor/assets/images/graph.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="Iconly/Bulk/Graph" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Graph" transform="translate(2.000000, 2.000000)" fill="currentColor" fill-rule="nonzero">
+      <path d="M8.152754,3.55552761 C8.20368413,3.65919399 8.237323,3.77020981 8.2523868,3.88433813 L8.53082191,8.02425688 L8.53082191,8.02425688 L8.66903307,10.1050779 C8.67046167,10.3190591 8.7040335,10.5316649 8.76866587,10.7360386 C8.9355965,11.1325559 9.33716333,11.3845716 9.77405142,11.3669994 L16.4313342,10.9315476 C16.7196104,10.9267943 16.9980001,11.0346143 17.2052401,11.2312807 C17.3779401,11.3951693 17.4894372,11.6095651 17.524563,11.8401601 L17.5363525,11.9801866 C17.260866,15.7948982 14.4591587,18.9766559 10.6523561,19.797994 C6.84555351,20.6193322 2.94186389,18.8842999 1.06070995,15.534895 C0.518387516,14.5618191 0.179650312,13.4922526 0.0643819183,12.388978 C0.0162285779,12.0623771 -0.00497451535,11.7324952 0.000979225624,11.4025464 C-0.00496594783,7.31273376 2.90747021,3.77695779 6.98433295,2.92456686 C7.47500829,2.84816493 7.95602805,3.10792111 8.152754,3.55552761 Z"
+            id="Path"></path>
+      <path d="M10.8700123,0.000819186003 C15.42989,0.11682655 19.2623146,3.39578782 20,7.81229094 L19.9929553,7.84487576 L19.9929553,7.84487576 L19.9728274,7.89227188 L19.9756317,8.0223616 C19.9651826,8.19471218 19.8986437,8.36053991 19.7839681,8.49448471 C19.6645145,8.63401054 19.5013145,8.72903004 19.3215929,8.76590816 L19.2119951,8.78094898 L11.5312118,9.27860816 C11.2757261,9.30380455 11.0213466,9.22142251 10.8313499,9.05195453 C10.6730193,8.91073121 10.5717997,8.72009233 10.543203,8.5146766 L10.0276622,0.845062436 C10.0186901,0.819128783 10.0186901,0.791015148 10.0276622,0.765081496 C10.0347061,0.553672114 10.127765,0.353839855 10.2860482,0.210229821 C10.4443315,0.0666197874 10.6546487,-0.00880036929 10.8700123,0.000819186003 Z"
+            id="Path" opacity="0.400000006"></path>
+    </g>
+  </g>
+</svg>