JavaScript Profiler Experiment

_locales/en_US/messages.json

@@ -7,7 +7,7 @@
   "linkHelpHref": { "message": "https://gbaptista.github.io/luminous/doc/en-US" },
 
   "checkboxInjectionEnabledGeneral": { "message": "all websites" },
-  "checkboxShowCodeDetails": { "message": "show code details" },
+  "checkboxShowCodeDetails": { "message": "code details" },
 
   "titleHandleEvent": { "message": "triggered events (handleEvent)" },
   "titleAddEventListener": { "message": "attached events (addEventListener)" },
@@ -90,5 +90,10 @@
   "settingsNoRecordsText": { "message": "no records found" },
   "settingsReportClearAllButtonText": { "message": "clear all records" },
   "checkboxZoomIn": { "message": "zoom in" },
-  "checkboxApplyToDefault": { "message": "apply actions to default rules" }
+  "checkboxApplyToDefault": { "message": "apply actions to default rules" },
+
+  "checkboxShowPerformanceMetrics": { "message": "performance metrics" },
+  "sortByText": { "message": "sort by" },
+  "sortByCallsText": { "message": "executions" },
+  "sortByTimeText": { "message": "time spent" }
 }

_locales/es/messages.json

@@ -7,7 +7,7 @@
   "linkHelpHref": { "message": "https://gbaptista.github.io/luminous/doc/es" },
 
   "checkboxInjectionEnabledGeneral": { "message": "todas las webs" },
-  "checkboxShowCodeDetails": { "message": "mostrar detalles de código" },
+  "checkboxShowCodeDetails": { "message": "detalles de código" },
 
   "titleHandleEvent": { "message": "eventos activados (handleEvent)" },
   "titleAddEventListener": { "message": "eventos ligados (addEventListener)" },
@@ -90,5 +90,10 @@
   "settingsNoRecordsText": { "message": "ningún registro encontrado" },
   "settingsReportClearAllButtonText": { "message": "limpiar todos los registros" },
   "checkboxZoomIn": { "message": "acercarse" },
-  "checkboxApplyToDefault": { "message": "aplicar a las reglas estándar" }
+  "checkboxApplyToDefault": { "message": "aplicar a las reglas estándar" },
+
+  "checkboxShowPerformanceMetrics": { "message": "métricas de rendimiento" },
+  "sortByText": { "message": "ordenar por" },
+  "sortByCallsText": { "message": "ejecuciones" },
+  "sortByTimeText": { "message": "tiempo" }
 }

_locales/pt_BR/messages.json

@@ -7,7 +7,7 @@
   "linkHelpHref": { "message": "https://gbaptista.github.io/luminous" },
 
   "checkboxInjectionEnabledGeneral": { "message": "todos os sites" },
-  "checkboxShowCodeDetails": { "message": "mostrar detalhes do código" },
+  "checkboxShowCodeDetails": { "message": "detalhes do código" },
 
   "titleHandleEvent": { "message": "eventos disparados (handleEvent)" },
   "titleAddEventListener": { "message": "eventos adicionados (addEventListener)" },
@@ -90,5 +90,10 @@
   "settingsNoRecordsText": { "message": "nenhum registro encontrado" },
   "settingsReportClearAllButtonText": { "message": "limpar todos os registros" },
   "checkboxZoomIn": { "message": "aumentar zoom" },
-  "checkboxApplyToDefault": { "message": "aplicar ações às regras padrões" }
+  "checkboxApplyToDefault": { "message": "aplicar ações às regras padrões" },
+
+  "checkboxShowPerformanceMetrics": { "message": "métricas de desempenho" },
+  "sortByText": { "message": "ordenar por" },
+  "sortByCallsText": { "message": "execuções" },
+  "sortByTimeText": { "message": "tempo gasto" }
 }

css/popup/popup.css

@@ -82,6 +82,24 @@ html, body {
   color: #FFF;
 }
 
+.interceptions .calls .execution_time {
+  position: absolute;
+  bottom:-5px;
+  left: 50%;
+  margin-left: -20px;
+  width: 40px;
+  padding: 2px 0;
+  text-align: center;
+  background-color: #8D8E87;
+  color: #FFF;
+  font-style: italic;
+}
+
+.zoom-in .interceptions .calls .execution_time {
+  margin-left: -29px;
+  width: 58px;
+}
+
 .interceptions .calls .allowed {
   border-left:4px solid #20b203;
   left: 10px;

css/settings/settings.css

@@ -3,10 +3,18 @@ html, body {
   text-rendering: optimizeLegibility;
 }
 
+.clear {
+  clear: both;
+}
+
 body {
   padding-top: 20px;
 }
 
+.bold {
+  font-weight: bold;
+}
+
 .alert {
   font-style: italic;
 }

html/demo-page.html

@@ -254,6 +254,13 @@
 
         my_request();
 
+        setTimeout(function(param) {
+          var time = performance.now();
+          while((performance.now() - time) < 1500) {
+            'lor123em'.replace(/\d.*/, '');
+          }
+        }, 0);
+
       }, 500); })();
     </script>
   </body>

html/popup/templates/counters.html

@@ -11,6 +11,9 @@ <h2>{{web_apis_title}}:</h2>
       <div class="calls {{#disabled_class}}WebAPIs,{{name}}{{/disabled_class}}" title="{{title_for_tooltip}}" data-kind="WebAPIs" data-type="{{name}}">
         <span class="name">{{name}}</span>
         <span class="allowed" style="background-color:{{allowed_color}};">{{allowed}}</span>
+        {{#show_performance_metrics}}
+          <span class="execution_time">{{execution_time}}</span>
+        {{/show_performance_metrics}}
         <span class="blocked" style="background-color:{{blocked_color}};">{{blocked}}</span>
       </div>
     {{/web_apis_calls}}
@@ -26,6 +29,9 @@ <h2>{{handle_event_title}}:</h2>
       <div class="calls {{#disabled_class}}handleEvent,{{name}}{{/disabled_class}}" title="{{title_for_tooltip}}" data-kind="handleEvent" data-type="{{name}}">
         <span class="name">{{name}}</span>
         <span class="allowed" style="background-color:{{allowed_color}};">{{allowed}}</span>
+        {{#show_performance_metrics}}
+          <span class="execution_time">{{execution_time}}</span>
+        {{/show_performance_metrics}}
         <span class="blocked" style="background-color:{{blocked_color}};">{{blocked}}</span>
       </div>
     {{/handle_event_calls}}
@@ -41,6 +47,9 @@ <h2>{{add_event_listener_title}}:</h2>
       <div class="calls {{#disabled_class}}addEventListener,{{name}}{{/disabled_class}}" title="{{title_for_tooltip}}" data-kind="addEventListener" data-type="{{name}}">
         <span class="name">{{name}}</span>
         <span class="allowed" style="background-color:{{allowed_color}};">{{allowed}}</span>
+        {{#show_performance_metrics}}
+          <span class="execution_time">{{execution_time}}</span>
+        {{/show_performance_metrics}}
         <span class="blocked" style="background-color:{{blocked_color}};">{{blocked}}</span>
       </div>
     {{/add_event_listener_calls}}

html/popup/templates/options.html

@@ -38,6 +38,11 @@
       <input type="checkbox" name="zoom_in" value="true" {{#zoom_in}} checked {{/zoom_in}} />
     </label>
     <br class="clear-floats">
+    <label>
+      {{show_performance_metrics_title}}
+      <input type="checkbox" name="show_performance_metrics" value="true" {{#show_performance_metrics}} checked {{/show_performance_metrics}} />
+    </label>
+    <br class="clear-floats">
     <label>
       {{show_code_details_title}}
       <input type="checkbox" name="show_code_details" value="true" {{#show_code_details}} checked {{/show_code_details}} />

html/settings/reports/charts.html

@@ -14,6 +14,7 @@
     <script src="../../../js/utils/load_template.js" type="text/javascript"></script>
     <script src="../../../js/settings/settings.js" type="text/javascript"></script>
     <script src="../../../vendor/dexiejs/dexie.js" type="text/javascript"></script>
+    <script src="../../../js/utils/numbers.js" type="text/javascript"></script>
     <script src="../../../js/settings/reports/charts.js" type="text/javascript"></script>
   </head>
   <body>
@@ -31,6 +32,7 @@
           </div>
 
           <span id="used"></span><button id="clear" class="locale btn btn-warning" data-locale="settingsReportClearAllButtonText"></button>
+          | <span class="locale" data-locale="sortByText">sort by</span>: <a href="?sort_by=calls" class="sort_by_calls locale" data-locale="sortByCallsText"></a> - <a href="?sort_by=execution_time" class="sort_by_execution_time locale" data-locale="sortByTimeText"></a>
           |
           <div id="form" class="form-data-collection"></div>
           <br><br>

html/settings/templates/popup/form.html

@@ -22,6 +22,13 @@
         {{apply_to_default_title}}
       </label>
     </div>
+
+    <div class="form-check form-check-inline">
+      <label class="form-check-label"><div class="form-check form-check-inline">
+        <input class="form-check-input" type="checkbox" data-namespace="popup" name="show_performance_metrics" value="true" {{#show_performance_metrics}} checked {{/show_performance_metrics}}>
+        {{show_performance_metrics_title}}
+      </label>
+    </div>
   </div>
 </div>
 <br>

html/settings/templates/reports/form.html

@@ -1,4 +1,4 @@
-<div class="form-check">
+<div class="form-check form-check-inline">
   <label class="form-check-label">
     <input class="form-check-input" type="checkbox" data-namespace="reports" name="collect_data" value="true" {{#collect_data}} checked {{/collect_data}}>
     {{collect_data_title}}

html/settings/templates/reports/tables/executions.html

@@ -12,6 +12,7 @@
           <tr>
             <td>{{name}}</td>
             <td>{{calls}}</td>
+            <td>{{execution_time}}</td>
           </tr>
         {{/items}}
       </tbody>

js/background/reports.js

@@ -1,7 +1,7 @@
 var db = new Dexie('luminous');
 
 db.version(1).stores({
-  reports: 'id,key,domain,kind,[domain+kind],code,allowed,blocked,calls'
+  reports: 'id,key,domain,kind,[domain+kind],code,allowed,blocked,calls,execution_time'
 });
 
 db.open().then(function() {
@@ -10,10 +10,14 @@ db.open().then(function() {
       var put = false;
 
       if(report) {
-        if(data.allowed > report.allowed || data.blocked > report.blocked || data.calls > report.calls) {
+        if(
+          data.allowed > report.allowed || data.blocked > report.blocked || data.calls > report.calls
+          || data.execution_time > report.execution_time
+        ) {
           if(data.allowed < report.allowed) data['allowed'] = report.allowed;
           if(data.blocked < report.blocked) data['blocked'] = report.blocked;
           if(data.calls < report.calls) data['calls'] = report.calls;
+          if(data.execution_time < report.execution_time) data['execution_time'] = report.execution_time;
 
           put = true;
         }
@@ -49,9 +53,12 @@ db.open().then(function() {
                         var blocked = local_data[tab.id]['counters'][kind][code]['blocked'];
                         var calls = allowed + blocked;
 
+                        var execution_time = local_data[tab.id]['counters'][kind][code]['execution_time'];
+
                         update_report({
                           id: key, domain: domain, kind: kind, code: code,
-                          allowed: allowed, blocked: blocked, calls: calls
+                          allowed: allowed, blocked: blocked, calls: calls,
+                          execution_time: execution_time
                         });
                       }
                     }
@@ -73,7 +80,7 @@ db.open().then(function() {
 
       set_reports_for_tab(tab_ids);
     });
-  }, 2000);
+  }, 500);
 
   var set_tab_reports = function(activeInfo) {
     chrome.tabs.get(parseInt(activeInfo.tabId), function(tab) {