symfony · ro0NL · Dec 9, 2018 · Dec 9, 2018 · Dec 9, 2018 · Dec 9, 2018
diff --git a/assets/.gitignore b/assets/.gitignore
@@ -0,0 +1,5 @@
+/build
+/node_modules
+/npm-debug.log
+/yarn-error.log
+/yarn.lock
diff --git a/assets/components/_classlist.js b/assets/components/_classlist.js
@@ -0,0 +1,33 @@
+let hasClass, removeClass, addClass, toggleClass;
+
+if ('classList' in document.documentElement) {
+    hasClass = function (el, cssClass) {
+        return el.classList.contains(cssClass);
+    };
+    removeClass = function (el, cssClass) {
+        el.classList.remove(cssClass);
+    };
+    addClass = function (el, cssClass) {
+        el.classList.add(cssClass);
+    };
+    toggleClass = function (el, cssClass) {
+        el.classList.toggle(cssClass);
+    };
+} else {
+    hasClass = function (el, cssClass) {
+        return el.className.match(new RegExp('\\b' + cssClass + '\\b'));
+    };
+    removeClass = function (el, cssClass) {
+        el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' ');
+    };
+    addClass = function (el, cssClass) {
+        if (!hasClass(el, cssClass)) {
+            el.className += " " + cssClass;
+        }
+    };
+    toggleClass = function (el, cssClass) {
+        hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass);
+    };
+}
+
+export {hasClass, removeClass, addClass, toggleClass};
diff --git a/assets/components/_event.js b/assets/components/_event.js
@@ -0,0 +1,13 @@
+let addEventListener;
+
+if (!('addEventListener' in document.createElement('div'))) {
+    addEventListener = function (element, eventName, callback) {
+        element.attachEvent('on' + eventName, callback);
+    };
+} else {
+    addEventListener = function (element, eventName, callback) {
+        element.addEventListener(eventName, callback, false);
+    };
+}
+
+export {addEventListener};
diff --git a/assets/components/_reset.css b/assets/components/_reset.css
diff --git a/assets/components/_vars.css b/assets/components/_vars.css
@@ -0,0 +1,61 @@
+:root {
+    --font-sans-serif: 'Helvetica, Arial, sans-serif';
+    --page-background: #f9f9f9;
+    --color-text: #222;
+    --color-muted: #999;
+    --color-success: #4f805d;
+    --color-warning: #a46a1f;
+    --color-error: #b0413e;
+    --tab-background: #fff;
+    --tab-color: #444;
+    --tab-active-background: #666;
+    --tab-active-color: #fafafa;
+    --tab-disabled-background: #f5f5f5;
+    --tab-disabled-color: #999;
+    --metric-value-background: #fff;
+    --metric-value-color: inherit;
+    --metric-unit-color: #999;
+    --metric-label-background: #e0e0e0;
+    --metric-label-color: inherit;
+    --table-border: #e0e0e0;
+    --table-background: #fff;
+    --table-header: #e0e0e0;
+    --shadow: 0px 0px 1px rgba(128, 128, 128, .2);
+    --border: 1px solid #e0e0e0;
+    --base-0: #fff;
+    --base-1: #f5f5f5;
+    --base-2: #e0e0e0;
+    --base-3: #ccc;
+    --base-4: #666;
+    --base-5: #444;
+    --base-6: #222;
+}
+
+.theme-dark {
+    --page-background: #36393e;
+    --color-text: #e0e0e0;
+    --color-muted: #777;
+    --tab-background: #555;
+    --tab-color: #ccc;
+    --tab-active-background: #888;
+    --tab-active-color: #fafafa;
+    --tab-disabled-background: var(--page-background);
+    --tab-disabled-color: #777;
+    --metric-value-background: #555;
+    --metric-value-color: inherit;
+    --metric-unit-color: #999;
+    --metric-label-background: #777;
+    --metric-label-color: #e0e0e0;
+    --table-border: #444;
+    --table-background: #333;
+    --table-header: #555;
+    --shadow: 0px 0px 1px rgba(32, 32, 32, .2);
+    --border: 1px solid #666;
+    --base-0: #2e3136;
+    --base-1: #444;
+    --base-2: #666;
+    --base-3: #666;
+    --base-4: #666;
+    --base-5: #e0e0e0;
+    --base-6: #f5f5f5;
+}
diff --git a/assets/components/tabs.css b/assets/components/tabs.css
@@ -0,0 +1,47 @@
+.tab-navigation {
+    margin: 0 0 1em 0;
+    padding: 0;
+}
+.tab-navigation li {
+    background: var(--tab-background);
+    border: 1px solid var(--table-border);
+    color: var(--tab-color);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    margin: 0 0 0 -1px;
+    padding: .5em .75em;
+    z-index: 1;
+}
+.tab-navigation li .badge {
+    background-color: var(--base-1);
+    color: var(--base-4);
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    margin-left: 8px;
+    min-width: 10px;
+    padding: 1px 6px;
+    text-align: center;
+    white-space: nowrap;
+}
+.tab-navigation li.disabled {
+    background: var(--tab-disabled-background);
+    color: var(--tab-disabled-color);
+}
+.tab-navigation li.active {
+    background: var(--tab-active-background);
+    color: var(--tab-active-color);
+    z-index: 1100;
+}
+.tab-navigation li.active .badge {
+    background-color: var(--base-5);
+    color: var(--base-2);
+}
+.tab-content > *:first-child {
+    margin-top: 0;
+}
+.tab-navigation li .badge.status-warning { background: var(--color-warning); color: #FFF; }
+.tab-navigation li .badge.status-error { background: var(--color-error); color: #FFF; }
+
+.sf-tabs .tab:not(:first-child) { display: none; }
diff --git a/assets/components/tabs.js b/assets/components/tabs.js
@@ -0,0 +1,75 @@
+require('./_vars.css');
+require('./tabs.css');
+
+import {hasClass, addClass, removeClass} from './_classlist';
+import {addEventListener} from './_event';
+
+export default function() {
+    var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
+
+    // create the tab navigation for each group of tabs
+    for (var i = 0; i < tabGroups.length; i++) {
+        var tabs = tabGroups[i].querySelectorAll('.tab');
+        var tabNavigation = document.createElement('ul');
+        addClass(tabNavigation, 'tab-navigation');
+
+        var selectedTabId = 'tab-' + i + '-0'; // select the first tab by default
+        for (var j = 0; j < tabs.length; j++) {
+            var tabId = 'tab-' + i + '-' + j;
+            var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
+
+            var tabNavigationItem = document.createElement('li');
+            tabNavigationItem.setAttribute('data-tab-id', tabId);
+            if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
+            if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
+            tabNavigationItem.innerHTML = tabTitle;
+            tabNavigation.appendChild(tabNavigationItem);
+
+            var tabContent = tabs[j].querySelector('.tab-content');
+            tabContent.parentElement.setAttribute('id', tabId);
+        }
+
+        tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
+        addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
+    }
+
+    // display the active tab and add the 'click' event listeners
+    for (i = 0; i < tabGroups.length; i++) {
+        tabNavigation = tabGroups[i].querySelectorAll('.tab-navigation li');
+
+        for (j = 0; j < tabNavigation.length; j++) {
+            tabId = tabNavigation[j].getAttribute('data-tab-id');
+            document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
+
+            if (hasClass(tabNavigation[j], 'active')) {
+                document.getElementById(tabId).className = 'block';
+            } else {
+                document.getElementById(tabId).className = 'hidden';
+            }
+
+            addEventListener(tabNavigation[j], 'click', function(e) {
+                var activeTab = e.target || e.srcElement;
+
+                // needed because when the tab contains HTML contents, user can click
+                // on any of those elements instead of their parent '<li>' element
+                while (activeTab.tagName.toLowerCase() !== 'li') {
+                    activeTab = activeTab.parentNode;
+                }
+
+                // get the full list of tabs through the parent of the active tab element
+                var tabNavigation = activeTab.parentNode.children;
+                for (var k = 0; k < tabNavigation.length; k++) {
+                    var tabId = tabNavigation[k].getAttribute('data-tab-id');
+                    document.getElementById(tabId).className = 'hidden';
+                    removeClass(tabNavigation[k], 'active');
+                }
+
+                addClass(activeTab, 'active');
+                var activeTabId = activeTab.getAttribute('data-tab-id');
+                document.getElementById(activeTabId).className = 'block';
+            });
+        }
+
+        tabGroups[i].setAttribute('data-processed', 'true');
+    }
+}
diff --git a/assets/entries/panels/.gitkeep b/assets/entries/panels/.gitkeep
diff --git a/assets/entries/profiler.js b/assets/entries/profiler.js
@@ -0,0 +1,8 @@
+require('../components/_reset.css');
+
+import {default as createTabs} from '../components/tabs';
+import {addEventListener} from '../components/_event';
+
+addEventListener(document, 'DOMContentLoaded', function() {
+    createTabs();
+});
diff --git a/assets/entries/toolbar.js b/assets/entries/toolbar.js
diff --git a/assets/package.json b/assets/package.json
@@ -0,0 +1,14 @@
+{
+  "devDependencies": {
+    "@symfony/webpack-encore": "^0.22.0",
+    "webpack-notifier": "^1.6.0"
+  },
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev-server": "encore dev-server",
+    "dev": "encore dev",
+    "watch": "encore dev --watch",
+    "build": "encore production --progress"
+  }
+}
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
@@ -0,0 +1,12 @@
+var Encore = require('@symfony/webpack-encore');
+
+Encore
+    .setOutputPath('build/')
+    .setPublicPath('/')
+    .addEntry('profiler', './entries/profiler.js')
+    .disableSingleRuntimeChunk() // @todo ok?
+    .cleanupOutputBeforeBuild()
+    .enableBuildNotifications()
+;
+
+module.exports = Encore.getWebpackConfig();
diff --git a/package-lock.json b/package-lock.json