From fb63cf0351d82b8821ea81951b6fe146d459185a Mon Sep 17 00:00:00 2001 From: kenjis Date: Fri, 27 May 2022 15:50:13 +0900 Subject: [PATCH] style: replace tabs with space in Views --- app/Views/errors/html/debug.css | 214 +-- app/Views/errors/html/debug.js | 172 ++- app/Views/errors/html/error_404.php | 150 +-- app/Views/errors/html/error_exception.php | 606 ++++----- app/Views/errors/html/production.php | 20 +- app/Views/welcome_message.php | 520 ++++---- app/index.html | 2 +- system/Debug/Toolbar/Views/_config.tpl | 86 +- system/Debug/Toolbar/Views/toolbar.js | 1360 ++++++++++---------- system/Debug/Toolbar/Views/toolbar.tpl.php | 416 +++--- 10 files changed, 1772 insertions(+), 1774 deletions(-) diff --git a/app/Views/errors/html/debug.css b/app/Views/errors/html/debug.css index 384d66d95f..98f54dbc8a 100644 --- a/app/Views/errors/html/debug.css +++ b/app/Views/errors/html/debug.css @@ -1,197 +1,197 @@ :root { - --main-bg-color: #fff; - --main-text-color: #555; - --dark-text-color: #222; - --light-text-color: #c7c7c7; - --brand-primary-color: #E06E3F; - --light-bg-color: #ededee; - --dark-bg-color: #404040; + --main-bg-color: #fff; + --main-text-color: #555; + --dark-text-color: #222; + --light-text-color: #c7c7c7; + --brand-primary-color: #E06E3F; + --light-bg-color: #ededee; + --dark-bg-color: #404040; } body { - height: 100%; - background: var(--main-bg-color); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; - color: var(--main-text-color); - font-weight: 300; - margin: 0; - padding: 0; + height: 100%; + background: var(--main-bg-color); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + color: var(--main-text-color); + font-weight: 300; + margin: 0; + padding: 0; } h1 { - font-weight: lighter; - letter-spacing: 0.8; - font-size: 3rem; - color: var(--dark-text-color); - margin: 0; + font-weight: lighter; + letter-spacing: 0.8; + font-size: 3rem; + color: var(--dark-text-color); + margin: 0; } h1.headline { - margin-top: 20%; - font-size: 5rem; + margin-top: 20%; + font-size: 5rem; } .text-center { - text-align: center; + text-align: center; } p.lead { - font-size: 1.6rem; + font-size: 1.6rem; } .container { - max-width: 75rem; - margin: 0 auto; - padding: 1rem; + max-width: 75rem; + margin: 0 auto; + padding: 1rem; } .header { - background: var(--light-bg-color); - color: var(--dark-text-color); + background: var(--light-bg-color); + color: var(--dark-text-color); } .header .container { - padding: 1rem 1.75rem 1.75rem 1.75rem; + padding: 1rem 1.75rem 1.75rem 1.75rem; } .header h1 { - font-size: 2.5rem; - font-weight: 500; + font-size: 2.5rem; + font-weight: 500; } .header p { - font-size: 1.2rem; - margin: 0; - line-height: 2.5; + font-size: 1.2rem; + margin: 0; + line-height: 2.5; } .header a { - color: var(--brand-primary-color); - margin-left: 2rem; - display: none; - text-decoration: none; + color: var(--brand-primary-color); + margin-left: 2rem; + display: none; + text-decoration: none; } .header:hover a { - display: inline; + display: inline; } .footer { - background: var(--dark-bg-color); - color: var(--light-text-color); + background: var(--dark-bg-color); + color: var(--light-text-color); } .footer .container { - border-top: 1px solid #e7e7e7; - margin-top: 1rem; - text-align: center; + border-top: 1px solid #e7e7e7; + margin-top: 1rem; + text-align: center; } .source { - background: #343434; - color: var(--light-text-color); - padding: 0.5em 1em; - border-radius: 5px; - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 0.85rem; - margin: 0; - overflow-x: scroll; + background: #343434; + color: var(--light-text-color); + padding: 0.5em 1em; + border-radius: 5px; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 0.85rem; + margin: 0; + overflow-x: scroll; } .source span.line { - line-height: 1.4; + line-height: 1.4; } .source span.line .number { - color: #666; + color: #666; } .source .line .highlight { - display: block; - background: var(--dark-text-color); - color: var(--light-text-color); + display: block; + background: var(--dark-text-color); + color: var(--light-text-color); } .source span.highlight .number { - color: #fff; + color: #fff; } .tabs { - list-style: none; - list-style-position: inside; - margin: 0; - padding: 0; - margin-bottom: -1px; + list-style: none; + list-style-position: inside; + margin: 0; + padding: 0; + margin-bottom: -1px; } .tabs li { - display: inline; + display: inline; } .tabs a:link, .tabs a:visited { - padding: 0rem 1rem; - line-height: 2.7; - text-decoration: none; - color: var(--dark-text-color); - background: var(--light-bg-color); - border: 1px solid rgba(0,0,0,0.15); - border-bottom: 0; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - display: inline-block; + padding: 0rem 1rem; + line-height: 2.7; + text-decoration: none; + color: var(--dark-text-color); + background: var(--light-bg-color); + border: 1px solid rgba(0,0,0,0.15); + border-bottom: 0; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: inline-block; } .tabs a:hover { - background: var(--light-bg-color); - border-color: rgba(0,0,0,0.15); + background: var(--light-bg-color); + border-color: rgba(0,0,0,0.15); } .tabs a.active { - background: var(--main-bg-color); - color: var(--main-text-color); + background: var(--main-bg-color); + color: var(--main-text-color); } .tab-content { - background: var(--main-bg-color); - border: 1px solid rgba(0,0,0,0.15); + background: var(--main-bg-color); + border: 1px solid rgba(0,0,0,0.15); } .content { - padding: 1rem; + padding: 1rem; } .hide { - display: none; + display: none; } .alert { - margin-top: 2rem; - display: block; - text-align: center; - line-height: 3.0; - background: #d9edf7; - border: 1px solid #bcdff1; - border-radius: 5px; - color: #31708f; + margin-top: 2rem; + display: block; + text-align: center; + line-height: 3.0; + background: #d9edf7; + border: 1px solid #bcdff1; + border-radius: 5px; + color: #31708f; } ul, ol { - line-height: 1.8; + line-height: 1.8; } table { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } th { - text-align: left; - border-bottom: 1px solid #e7e7e7; - padding-bottom: 0.5rem; + text-align: left; + border-bottom: 1px solid #e7e7e7; + padding-bottom: 0.5rem; } td { - padding: 0.2rem 0.5rem 0.2rem 0; + padding: 0.2rem 0.5rem 0.2rem 0; } tr:hover td { - background: #f1f1f1; + background: #f1f1f1; } td pre { - white-space: pre-wrap; + white-space: pre-wrap; } .trace a { - color: inherit; + color: inherit; } .trace table { - width: auto; + width: auto; } .trace tr td:first-child { - min-width: 5em; - font-weight: bold; + min-width: 5em; + font-weight: bold; } .trace td { - background: var(--light-bg-color); - padding: 0 1rem; + background: var(--light-bg-color); + padding: 0 1rem; } .trace td pre { - margin: 0; + margin: 0; } .args { - display: none; + display: none; } diff --git a/app/Views/errors/html/debug.js b/app/Views/errors/html/debug.js index 2b4d063815..99199cac87 100644 --- a/app/Views/errors/html/debug.js +++ b/app/Views/errors/html/debug.js @@ -1,118 +1,116 @@ -// Tabs - var tabLinks = new Array(); var contentDivs = new Array(); function init() { - // Grab the tab links and content divs from the page - var tabListItems = document.getElementById('tabs').childNodes; - console.log(tabListItems); - for (var i = 0; i < tabListItems.length; i ++) - { - if (tabListItems[i].nodeName == "LI") - { - var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); - var id = getHash(tabLink.getAttribute('href')); - tabLinks[id] = tabLink; - contentDivs[id] = document.getElementById(id); - } - } + // Grab the tab links and content divs from the page + var tabListItems = document.getElementById('tabs').childNodes; + console.log(tabListItems); + for (var i = 0; i < tabListItems.length; i ++) + { + if (tabListItems[i].nodeName == "LI") + { + var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); + var id = getHash(tabLink.getAttribute('href')); + tabLinks[id] = tabLink; + contentDivs[id] = document.getElementById(id); + } + } - // Assign onclick events to the tab links, and - // highlight the first tab - var i = 0; + // Assign onclick events to the tab links, and + // highlight the first tab + var i = 0; - for (var id in tabLinks) - { - tabLinks[id].onclick = showTab; - tabLinks[id].onfocus = function () { - this.blur() - }; - if (i == 0) - { - tabLinks[id].className = 'active'; - } - i ++; - } + for (var id in tabLinks) + { + tabLinks[id].onclick = showTab; + tabLinks[id].onfocus = function () { + this.blur() + }; + if (i == 0) + { + tabLinks[id].className = 'active'; + } + i ++; + } - // Hide all content divs except the first - var i = 0; + // Hide all content divs except the first + var i = 0; - for (var id in contentDivs) - { - if (i != 0) - { - console.log(contentDivs[id]); - contentDivs[id].className = 'content hide'; - } - i ++; - } + for (var id in contentDivs) + { + if (i != 0) + { + console.log(contentDivs[id]); + contentDivs[id].className = 'content hide'; + } + i ++; + } } function showTab() { - var selectedId = getHash(this.getAttribute('href')); + var selectedId = getHash(this.getAttribute('href')); - // Highlight the selected tab, and dim all others. - // Also show the selected content div, and hide all others. - for (var id in contentDivs) - { - if (id == selectedId) - { - tabLinks[id].className = 'active'; - contentDivs[id].className = 'content'; - } - else - { - tabLinks[id].className = ''; - contentDivs[id].className = 'content hide'; - } - } + // Highlight the selected tab, and dim all others. + // Also show the selected content div, and hide all others. + for (var id in contentDivs) + { + if (id == selectedId) + { + tabLinks[id].className = 'active'; + contentDivs[id].className = 'content'; + } + else + { + tabLinks[id].className = ''; + contentDivs[id].className = 'content hide'; + } + } - // Stop the browser following the link - return false; + // Stop the browser following the link + return false; } function getFirstChildWithTagName(element, tagName) { - for (var i = 0; i < element.childNodes.length; i ++) - { - if (element.childNodes[i].nodeName == tagName) - { - return element.childNodes[i]; - } - } + for (var i = 0; i < element.childNodes.length; i ++) + { + if (element.childNodes[i].nodeName == tagName) + { + return element.childNodes[i]; + } + } } function getHash(url) { - var hashPos = url.lastIndexOf('#'); - return url.substring(hashPos + 1); + var hashPos = url.lastIndexOf('#'); + return url.substring(hashPos + 1); } function toggle(elem) { - elem = document.getElementById(elem); + elem = document.getElementById(elem); - if (elem.style && elem.style['display']) - { - // Only works with the "style" attr - var disp = elem.style['display']; - } - else if (elem.currentStyle) - { - // For MSIE, naturally - var disp = elem.currentStyle['display']; - } - else if (window.getComputedStyle) - { - // For most other browsers - var disp = document.defaultView.getComputedStyle(elem, null).getPropertyValue('display'); - } + if (elem.style && elem.style['display']) + { + // Only works with the "style" attr + var disp = elem.style['display']; + } + else if (elem.currentStyle) + { + // For MSIE, naturally + var disp = elem.currentStyle['display']; + } + else if (window.getComputedStyle) + { + // For most other browsers + var disp = document.defaultView.getComputedStyle(elem, null).getPropertyValue('display'); + } - // Toggle the state of the "display" style - elem.style.display = disp == 'block' ? 'none' : 'block'; + // Toggle the state of the "display" style + elem.style.display = disp == 'block' ? 'none' : 'block'; - return false; + return false; } diff --git a/app/Views/errors/html/error_404.php b/app/Views/errors/html/error_404.php index 56818c7503..f81717fdd0 100644 --- a/app/Views/errors/html/error_404.php +++ b/app/Views/errors/html/error_404.php @@ -1,84 +1,84 @@ - - 404 Page Not Found + + 404 Page Not Found - + -
-

404 - File Not Found

+
+

404 - File Not Found

-

- - - - Sorry! Cannot seem to find the page you were looking for. - -

-
+

+ + + + Sorry! Cannot seem to find the page you were looking for. + +

+
diff --git a/app/Views/errors/html/error_exception.php b/app/Views/errors/html/error_exception.php index 6cb520a591..77e963b292 100644 --- a/app/Views/errors/html/error_exception.php +++ b/app/Views/errors/html/error_exception.php @@ -2,87 +2,87 @@ - - + + - <?= esc($title) ?> - + <?= esc($title) ?> + - + - -
-
-

getCode() ? ' #' . $exception->getCode() : '') ?>

-

- getMessage())) ?> - getMessage())) ?>" - rel="noreferrer" target="_blank">search → -

-
-
+ +
+
+

getCode() ? ' #' . $exception->getCode() : '') ?>

+

+ getMessage())) ?> + getMessage())) ?>" + rel="noreferrer" target="_blank">search → +

+
+
- -
-

at line

+ +
+

at line

- -
- -
- -
+ +
+ +
+ +
-
+
- + -
+
- -
+ +
-
    - $row) : ?> +
      + $row) : ?> -
    1. -

      - - - +

      + + + - - {PHP internal code} - + + {PHP internal code} + - - -   —   - - - ( arguments ) -

      - + + +   —   + + + ( arguments ) +
      +
      - $value) : ?> - - - - - + + + + + -
      name : "#{$key}") ?>
      name : "#{$key}") ?>
      -
      - - () - - + +
+ + () + + - -   —   () - -

+ +   —   () + +

- - -
- -
- - + + +
+ +
+ + - - + + -
+
- -
- - +
+ + -

$

+

$

- - - - - - - - - $value) : ?> - - - - - - -
KeyValue
- - - -
- -
+ + + + + + + + + $value) : ?> + + + + + + +
KeyValue
+ + + +
+ +
- + - - - -

Constants

+ + + +

Constants

- - - - - - - - - $value) : ?> - - - - - - -
KeyValue
- - - -
- -
- -
+ + + + + + + + + $value) : ?> + + + + + + +
KeyValue
+ + + +
+ +
+ +
- -
- + +
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
PathgetUri()) ?>
HTTP MethodgetMethod())) ?>
IP AddressgetIPAddress()) ?>
Is AJAX Request?isAJAX() ? 'yes' : 'no' ?>
Is CLI Request?isCLI() ? 'yes' : 'no' ?>
Is Secure Request?isSecure() ? 'yes' : 'no' ?>
User AgentgetUserAgent()->getAgentString()) ?>
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + - -
PathgetUri()) ?>
HTTP MethodgetMethod())) ?>
IP AddressgetIPAddress()) ?>
Is AJAX Request?isAJAX() ? 'yes' : 'no' ?>
Is CLI Request?isCLI() ? 'yes' : 'no' ?>
Is Secure Request?isSecure() ? 'yes' : 'no' ?>
User AgentgetUserAgent()->getAgentString()) ?>
+ + - - - + + - + -

$

+

$

- - - - - - - - - $value) : ?> - - - - - - -
KeyValue
- - - -
- -
+ + + + + + + + + $value) : ?> + + + + + + +
KeyValue
+ + + +
+ +
- + - + -
- No $_GET, $_POST, or $_COOKIE Information to show. -
+
+ No $_GET, $_POST, or $_COOKIE Information to show. +
- + - getHeaders(); ?> - + getHeaders(); ?> + -

Headers

+

Headers

- - - - - - - - - - + + + + + + + + + - - - - - - - - -
HeaderValue
HeaderValue
getName(), 'html') ?>getValueLine(), 'html') ?>
+ + + getName(), 'html') ?> + getValueLine(), 'html') ?> + + + + + - -
+ +
- - + setStatusCode(http_response_code()); ?> -
- - - - - -
Response StatusgetStatusCode() . ' - ' . $response->getReasonPhrase()) ?>
+
+ + + + + +
Response StatusgetStatusCode() . ' - ' . $response->getReasonPhrase()) ?>
- getHeaders(); ?> - - + getHeaders(); ?> + + -

Headers

+

Headers

- - - - - - - - - $value) : ?> - - - - - - -
HeaderValue
getHeaderLine($name), 'html') ?>
+ + + + + + + + + $value) : ?> + + + + + + +
HeaderValue
getHeaderLine($name), 'html') ?>
- -
+ +
- -
- + +
+ -
    - -
    2. - -
-
+
    + +
    2. + +
+
- -
+ +
- - - - - - - - - - - - - - - -
Memory Usage
Peak Memory Usage:
Memory Limit:
+ + + + + + + + + + + + + + + +
Memory Usage
Peak Memory Usage:
Memory Limit:
-
+
-
+
-
+ -
-
+
+
-

- Displayed at — - PHP: — - CodeIgniter: -

+

+ Displayed at — + PHP: — + CodeIgniter: +

-
-
+
+
diff --git a/app/Views/errors/html/production.php b/app/Views/errors/html/production.php index cca49c2ed9..9faa4a15b7 100644 --- a/app/Views/errors/html/production.php +++ b/app/Views/errors/html/production.php @@ -1,24 +1,24 @@ - - + + - Whoops! + Whoops! - + -
+
-

Whoops!

+

Whoops!

-

We seem to have hit a snag. Please try again later...

+

We seem to have hit a snag. Please try again later...

-
+
diff --git a/app/Views/welcome_message.php b/app/Views/welcome_message.php index b982f58aa1..c66a9615c6 100644 --- a/app/Views/welcome_message.php +++ b/app/Views/welcome_message.php @@ -1,229 +1,229 @@ - - Welcome to CodeIgniter 4! - - - + + Welcome to CodeIgniter 4! + + + - + - +
-
- -
+
+ +
-
+
-

Welcome to CodeIgniter

+

Welcome to CodeIgniter

-

The small framework with powerful features

+

The small framework with powerful features

-
+
@@ -231,91 +231,91 @@
-

About this page

+

About this page

-

The page you are looking at is being generated dynamically by CodeIgniter.

+

The page you are looking at is being generated dynamically by CodeIgniter.

-

If you would like to edit this page you will find it located at:

+

If you would like to edit this page you will find it located at:

- 
app/Views/welcome_message.php
+ 
app/Views/welcome_message.php
-

The corresponding controller for this page can be found at:

+

The corresponding controller for this page can be found at:

- 
app/Controllers/Home.php
+ 
app/Controllers/Home.php
-
+
-

Go further

+

Go further

-

- - Learn -

+

+ + Learn +

-

The User Guide contains an introduction, tutorial, a number of "how to" - guides, and then reference documentation for the components that make up - the framework. Check the User Guide !

+

The User Guide contains an introduction, tutorial, a number of "how to" + guides, and then reference documentation for the components that make up + the framework. Check the User Guide !

-

- - Discuss -

+

+ + Discuss +

-

CodeIgniter is a community-developed open source project, with several - venues for the community members to gather and exchange ideas. View all - the threads on CodeIgniter's forum, or chat on Slack !

+

CodeIgniter is a community-developed open source project, with several + venues for the community members to gather and exchange ideas. View all + the threads on CodeIgniter's forum, or chat on Slack !

-

- - Contribute -

+

+ + Contribute +

-

CodeIgniter is a community driven project and accepts contributions - of code and documentation from the community. Why not - - join us ?

+

CodeIgniter is a community driven project and accepts contributions + of code and documentation from the community. Why not + + join us ?

-
+
diff --git a/app/index.html b/app/index.html index b702fbc396..69df4e1dff 100644 --- a/app/index.html +++ b/app/index.html @@ -1,7 +1,7 @@ - 403 Forbidden + 403 Forbidden diff --git a/system/Debug/Toolbar/Views/_config.tpl b/system/Debug/Toolbar/Views/_config.tpl index 3934cf62eb..b6c7e0c3d8 100644 --- a/system/Debug/Toolbar/Views/_config.tpl +++ b/system/Debug/Toolbar/Views/_config.tpl @@ -1,48 +1,48 @@

- Read the CodeIgniter docs... + Read the CodeIgniter docs...

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeIgniter Version:{ ciVersion }
PHP Version:{ phpVersion }
PHP SAPI:{ phpSAPI }
Environment:{ environment }
Base URL: - { if $baseURL == '' } -
- The $baseURL should always be set manually to prevent possible URL personification from external parties. -
- { else } - { baseURL } - { endif } -
Timezone:{ timezone }
Locale:{ locale }
Content Security Policy Enabled:{ if $cspEnabled } Yes { else } No { endif }
CodeIgniter Version:{ ciVersion }
PHP Version:{ phpVersion }
PHP SAPI:{ phpSAPI }
Environment:{ environment }
Base URL: + { if $baseURL == '' } +
+ The $baseURL should always be set manually to prevent possible URL personification from external parties. +
+ { else } + { baseURL } + { endif } +
Timezone:{ timezone }
Locale:{ locale }
Content Security Policy Enabled:{ if $cspEnabled } Yes { else } No { endif }
diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index 3bd05d5e95..7805a99dda 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -4,684 +4,684 @@ var ciDebugBar = { - toolbarContainer : null, - toolbar : null, - icon : null, - - init : function () { - this.toolbarContainer = document.getElementById('toolbarContainer'); - this.toolbar = document.getElementById('debug-bar'); - this.icon = document.getElementById('debug-icon'); - - ciDebugBar.createListeners(); - ciDebugBar.setToolbarState(); - ciDebugBar.setToolbarPosition(); - ciDebugBar.setToolbarTheme(); - ciDebugBar.toggleViewsHints(); - ciDebugBar.routerLink(); - - document.getElementById('debug-bar-link').addEventListener('click', ciDebugBar.toggleToolbar, true); - document.getElementById('debug-icon-link').addEventListener('click', ciDebugBar.toggleToolbar, true); - - // Allows to highlight the row of the current history request - var btn = this.toolbar.querySelector('button[data-time="' + localStorage.getItem('debugbar-time') + '"]'); - ciDebugBar.addClass(btn.parentNode.parentNode, 'current'); - - historyLoad = this.toolbar.getElementsByClassName('ci-history-load'); - - for (var i = 0; i < historyLoad.length; i++) - { - historyLoad[i].addEventListener('click', function () { - loadDoc(this.getAttribute('data-time')); - }, true); - } - - // Display the active Tab on page load - var tab = ciDebugBar.readCookie('debug-bar-tab'); - if (document.getElementById(tab)) - { - var el = document.getElementById(tab); - el.style.display = 'block'; - ciDebugBar.addClass(el, 'active'); - tab = document.querySelector('[data-tab=' + tab + ']'); - if (tab) - { - ciDebugBar.addClass(tab.parentNode, 'active'); - } - } - }, - - createListeners : function () { - var buttons = [].slice.call(this.toolbar.querySelectorAll('.ci-label a')); - - for (var i = 0; i < buttons.length; i++) - { - buttons[i].addEventListener('click', ciDebugBar.showTab, true); - } - - // Hook up generic toggle via data attributes `data-toggle="foo"` - var links = this.toolbar.querySelectorAll('[data-toggle]'); - for (var i = 0; i < links.length; i++) - { - links[i].addEventListener('click', ciDebugBar.toggleRows, true); - } - }, - - showTab: function () { - // Get the target tab, if any - var tab = document.getElementById(this.getAttribute('data-tab')); - - // If the label have not a tab stops here - if (! tab) - { - return; - } - - // Remove debug-bar-tab cookie - ciDebugBar.createCookie('debug-bar-tab', '', -1); - - // Check our current state. - var state = tab.style.display; - - // Hide all tabs - var tabs = document.querySelectorAll('#debug-bar .tab'); - - for (var i = 0; i < tabs.length; i++) - { - tabs[i].style.display = 'none'; - } - - // Mark all labels as inactive - var labels = document.querySelectorAll('#debug-bar .ci-label'); - - for (var i = 0; i < labels.length; i++) - { - ciDebugBar.removeClass(labels[i], 'active'); - } - - // Show/hide the selected tab - if (state != 'block') - { - tab.style.display = 'block'; - ciDebugBar.addClass(this.parentNode, 'active'); - // Create debug-bar-tab cookie to persistent state - ciDebugBar.createCookie('debug-bar-tab', this.getAttribute('data-tab'), 365); - } - }, - - addClass : function (el, className) { - if (el.classList) - { - el.classList.add(className); - } - else - { - el.className += ' ' + className; - } - }, - - removeClass : function (el, className) { - if (el.classList) - { - el.classList.remove(className); - } - else - { - el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); - } - }, - - /** - * Toggle display of another object based on - * the data-toggle value of this object - * - * @param event - */ - toggleRows : function(event) { - if(event.target) - { - let row = event.target.closest('tr'); - let target = document.getElementById(row.getAttribute('data-toggle')); - target.style.display = target.style.display === 'none' ? 'table-row' : 'none'; - } - }, - - /** - * Toggle display of a data table - * - * @param obj - */ - toggleDataTable : function (obj) { - if (typeof obj == 'string') - { - obj = document.getElementById(obj + '_table'); - } - - if (obj) - { - obj.style.display = obj.style.display === 'none' ? 'block' : 'none'; - } - }, - - /** - * Toggle display of timeline child elements - * - * @param obj - */ - toggleChildRows : function (obj) { - if (typeof obj == 'string') - { - par = document.getElementById(obj + '_parent') - obj = document.getElementById(obj + '_children'); - } - - if (par && obj) - { - obj.style.display = obj.style.display === 'none' ? '' : 'none'; - par.classList.toggle('timeline-parent-open'); - } - }, - - - //-------------------------------------------------------------------- - - /** - * Toggle tool bar from full to icon and icon to full - */ - toggleToolbar : function () { - var open = ciDebugBar.toolbar.style.display != 'none'; - - ciDebugBar.icon.style.display = open == true ? 'inline-block' : 'none'; - ciDebugBar.toolbar.style.display = open == false ? 'inline-block' : 'none'; - - // Remember it for other page loads on this site - ciDebugBar.createCookie('debug-bar-state', '', -1); - ciDebugBar.createCookie('debug-bar-state', open == true ? 'minimized' : 'open' , 365); - }, - - /** - * Sets the initial state of the toolbar (open or minimized) when - * the page is first loaded to allow it to remember the state between refreshes. - */ - setToolbarState: function () { - var open = ciDebugBar.readCookie('debug-bar-state'); - - ciDebugBar.icon.style.display = open != 'open' ? 'inline-block' : 'none'; - ciDebugBar.toolbar.style.display = open == 'open' ? 'inline-block' : 'none'; - }, - - toggleViewsHints: function () { - // Avoid toggle hints on history requests that are not the initial - if (localStorage.getItem('debugbar-time') != localStorage.getItem('debugbar-time-new')) - { - var a = document.querySelector('a[data-tab="ci-views"]'); - a.href = '#'; - return; - } - - var nodeList = []; // [ Element, NewElement( 1 )/OldElement( 0 ) ] - var sortedComments = []; - var comments = []; - - var getComments = function () { - var nodes = []; - var result = []; - var xpathResults = document.evaluate( "//comment()[starts-with(., ' DEBUG-VIEW')]", document, null, XPathResult.ANY_TYPE, null); - var nextNode = xpathResults.iterateNext(); - while ( nextNode ) - { - nodes.push( nextNode ); - nextNode = xpathResults.iterateNext(); - } - - // sort comment by opening and closing tags - for (var i = 0; i < nodes.length; ++i) - { - // get file path + name to use as key - var path = nodes[i].nodeValue.substring( 18, nodes[i].nodeValue.length - 1 ); - - if ( nodes[i].nodeValue[12] === 'S' ) // simple check for start comment - { - // create new entry - result[path] = [ nodes[i], null ]; - } - else if (result[path]) - { - // add to existing entry - result[path][1] = nodes[i]; - } - } - - return result; - }; - - // find node that has TargetNode as parentNode - var getParentNode = function ( node, targetNode ) { - if ( node.parentNode === null ) - { - return null; - } - - if ( node.parentNode !== targetNode ) - { - return getParentNode( node.parentNode, targetNode ); - } - - return node; - }; - - // define invalid & outer ( also invalid ) elements - const INVALID_ELEMENTS = [ 'NOSCRIPT', 'SCRIPT', 'STYLE' ]; - const OUTER_ELEMENTS = [ 'HTML', 'BODY', 'HEAD' ]; - - var getValidElementInner = function ( node, reverse ) { - // handle invalid tags - if ( OUTER_ELEMENTS.indexOf( node.nodeName ) !== -1 ) - { - for (var i = 0; i < document.body.children.length; ++i) - { - var index = reverse ? document.body.children.length - ( i + 1 ) : i; - var element = document.body.children[index]; - - // skip invalid tags - if ( INVALID_ELEMENTS.indexOf( element.nodeName ) !== -1 ) - { - continue; - } - - return [ element, reverse ]; - } - - return null; - } - - // get to next valid element - while ( node !== null && INVALID_ELEMENTS.indexOf( node.nodeName ) !== -1 ) - { - node = reverse ? node.previousElementSibling : node.nextElementSibling; - } - - // return non array if we couldnt find something - if ( node === null ) - { - return null; - } - - return [ node, reverse ]; - }; - - // get next valid element ( to be safe to add divs ) - // @return [ element, skip element ] or null if we couldnt find a valid place - var getValidElement = function ( nodeElement ) { - if (nodeElement) - { - if ( nodeElement.nextElementSibling !== null ) - { - return getValidElementInner( nodeElement.nextElementSibling, false ) - || getValidElementInner( nodeElement.previousElementSibling, true ); - } - if ( nodeElement.previousElementSibling !== null ) - { - return getValidElementInner( nodeElement.previousElementSibling, true ); - } - } - - // something went wrong! -> element is not in DOM - return null; - }; - - function showHints() - { - // Had AJAX? Reset view blocks - sortedComments = getComments(); - - for (var key in sortedComments) - { - var startElement = getValidElement( sortedComments[key][0] ); - var endElement = getValidElement( sortedComments[key][1] ); - - // skip if we couldnt get a valid element - if ( startElement === null || endElement === null ) - { - continue; - } - - // find element which has same parent as startelement - var jointParent = getParentNode( endElement[0], startElement[0].parentNode ); - if ( jointParent === null ) - { - // find element which has same parent as endelement - jointParent = getParentNode( startElement[0], endElement[0].parentNode ); - if ( jointParent === null ) - { - // both tries failed - continue; - } - else - { - startElement[0] = jointParent; - } - } - else - { - endElement[0] = jointParent; - } - - var debugDiv = document.createElement( 'div' ); // holder - var debugPath = document.createElement( 'div' ); // path - var childArray = startElement[0].parentNode.childNodes; // target child array - var parent = startElement[0].parentNode; - var start, end; - - // setup container - debugDiv.classList.add( 'debug-view' ); - debugDiv.classList.add( 'show-view' ); - debugPath.classList.add( 'debug-view-path' ); - debugPath.innerText = key; - debugDiv.appendChild( debugPath ); - - // calc distance between them - // start - for (var i = 0; i < childArray.length; ++i) - { - // check for comment ( start & end ) -> if its before valid start element - if ( childArray[i] === sortedComments[key][1] || - childArray[i] === sortedComments[key][0] || - childArray[i] === startElement[0] ) - { - start = i; - if ( childArray[i] === sortedComments[key][0] ) - { - start++; // increase to skip the start comment - } - break; - } - } - // adjust if we want to skip the start element - if ( startElement[1] ) - { - start++; - } - - // end - for (var i = start; i < childArray.length; ++i) - { - if ( childArray[i] === endElement[0] ) - { - end = i; - // dont break to check for end comment after end valid element - } - else if ( childArray[i] === sortedComments[key][1] ) - { - // if we found the end comment, we can break - end = i; - break; - } - } - - // move elements - var number = end - start; - if ( endElement[1] ) - { - number++; - } - for (var i = 0; i < number; ++i) - { - if ( INVALID_ELEMENTS.indexOf( childArray[start] ) !== -1 ) - { - // skip invalid childs that can cause problems if moved - start++; - continue; - } - debugDiv.appendChild( childArray[start] ); - } - - // add container to DOM - nodeList.push( parent.insertBefore( debugDiv, childArray[start] ) ); - } - - ciDebugBar.createCookie('debug-view', 'show', 365); - ciDebugBar.addClass(btn, 'active'); - } - - function hideHints() - { - for (var i = 0; i < nodeList.length; ++i) - { - var index; - - // find index - for (var j = 0; j < nodeList[i].parentNode.childNodes.length; ++j) - { - if ( nodeList[i].parentNode.childNodes[j] === nodeList[i] ) - { - index = j; - break; - } - } - - // move child back - while ( nodeList[i].childNodes.length !== 1 ) - { - nodeList[i].parentNode.insertBefore( nodeList[i].childNodes[1], nodeList[i].parentNode.childNodes[index].nextSibling ); - index++; - } - - nodeList[i].parentNode.removeChild( nodeList[i] ); - } - nodeList.length = 0; - - ciDebugBar.createCookie('debug-view', '', -1); - ciDebugBar.removeClass(btn, 'active'); - } - - var btn = document.querySelector('[data-tab=ci-views]'); - - // If the Views Collector is inactive stops here - if (! btn) - { - return; - } - - btn.parentNode.onclick = function () { - if (ciDebugBar.readCookie('debug-view')) - { - hideHints(); - } - else - { - showHints(); - } - }; - - // Determine Hints state on page load - if (ciDebugBar.readCookie('debug-view')) - { - showHints(); - } - }, - - setToolbarPosition: function () { - var btnPosition = this.toolbar.querySelector('#toolbar-position'); - - if (ciDebugBar.readCookie('debug-bar-position') === 'top') - { - ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top'); - } - - btnPosition.addEventListener('click', function () { - var position = ciDebugBar.readCookie('debug-bar-position'); - - ciDebugBar.createCookie('debug-bar-position', '', -1); - - if (!position || position === 'bottom') - { - ciDebugBar.createCookie('debug-bar-position', 'top', 365); - ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top'); - } - else - { - ciDebugBar.createCookie('debug-bar-position', 'bottom', 365); - ciDebugBar.removeClass(ciDebugBar.icon, 'fixed-top'); - ciDebugBar.removeClass(ciDebugBar.toolbar, 'fixed-top'); - } - }, true); - }, - - setToolbarTheme: function () { - var btnTheme = this.toolbar.querySelector('#toolbar-theme'); - var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; - var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches; - - // If a cookie is set with a value, we force the color scheme - if (ciDebugBar.readCookie('debug-bar-theme') === 'dark') - { - ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); - ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); - } - else if (ciDebugBar.readCookie('debug-bar-theme') === 'light') - { - ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); - } - - btnTheme.addEventListener('click', function () { - var theme = ciDebugBar.readCookie('debug-bar-theme'); - - if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) - { - // If there is no cookie, and "prefers-color-scheme" is set to "dark" - // It means that the user wants to switch to light mode - ciDebugBar.createCookie('debug-bar-theme', 'light', 365); - ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); - } - else - { - if (theme === 'dark') - { - ciDebugBar.createCookie('debug-bar-theme', 'light', 365); - ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); - } - else - { - // In any other cases: if there is no cookie, or the cookie is set to - // "light", or the "prefers-color-scheme" is "light"... - ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); - ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); - ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); - } - } - }, true); - }, - - /** - * Helper to create a cookie. - * - * @param name - * @param value - * @param days - */ - createCookie : function (name,value,days) { - if (days) - { - var date = new Date(); - - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - - var expires = "; expires=" + date.toGMTString(); - } - else - { - var expires = ""; - } - - document.cookie = name + "=" + value + expires + "; path=/; samesite=Lax"; - }, - - readCookie : function (name) { - var nameEQ = name + "="; - var ca = document.cookie.split(';'); - - for (var i = 0; i < ca.length; i++) - { - var c = ca[i]; - while (c.charAt(0) == ' ') - { - c = c.substring(1,c.length); - } - if (c.indexOf(nameEQ) == 0) - { - return c.substring(nameEQ.length,c.length); - } - } - return null; - }, - - trimSlash: function (text) { - return text.replace(/^\/|\/$/g, ''); - }, - - routerLink: function () { - var row, _location; - var rowGet = this.toolbar.querySelectorAll('td[data-debugbar-route="GET"]'); - var patt = /\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/; - - for (var i = 0; i < rowGet.length; i++) - { - row = rowGet[i]; - if (!/\/\(.+?\)/.test(rowGet[i].innerText)) - { - row.style = 'cursor: pointer;'; - row.setAttribute('title', location.origin + '/' + ciDebugBar.trimSlash(row.innerText)); - row.addEventListener('click', function (ev) { - _location = location.origin + '/' + ciDebugBar.trimSlash(ev.target.innerText); - var redirectWindow = window.open(_location, '_blank'); - redirectWindow.location; - }); - } - else - { - row.innerHTML = '
' + row.innerText + '
' - + '
' - + row.innerText.replace(patt, '') - + '' - + '
'; - } - } - - rowGet = this.toolbar.querySelectorAll('td[data-debugbar-route="GET"] form'); - for (var i = 0; i < rowGet.length; i++) - { - row = rowGet[i]; - - row.addEventListener('submit', function (event) { - event.preventDefault() - var inputArray = [], t = 0; - var input = event.target.querySelectorAll('input[type=text]'); - var tpl = event.target.getAttribute('data-debugbar-route-tpl'); - - for (var n = 0; n < input.length; n++) - { - if (input[n].value.length > 0) - { - inputArray.push(input[n].value); - } - } - - if (inputArray.length > 0) - { - _location = location.origin + '/' + tpl.replace(/\?/g, function () { - return inputArray[t++] - }); - - var redirectWindow = window.open(_location, '_blank'); - redirectWindow.location; - } - }) - } - } + toolbarContainer : null, + toolbar : null, + icon : null, + + init : function () { + this.toolbarContainer = document.getElementById('toolbarContainer'); + this.toolbar = document.getElementById('debug-bar'); + this.icon = document.getElementById('debug-icon'); + + ciDebugBar.createListeners(); + ciDebugBar.setToolbarState(); + ciDebugBar.setToolbarPosition(); + ciDebugBar.setToolbarTheme(); + ciDebugBar.toggleViewsHints(); + ciDebugBar.routerLink(); + + document.getElementById('debug-bar-link').addEventListener('click', ciDebugBar.toggleToolbar, true); + document.getElementById('debug-icon-link').addEventListener('click', ciDebugBar.toggleToolbar, true); + + // Allows to highlight the row of the current history request + var btn = this.toolbar.querySelector('button[data-time="' + localStorage.getItem('debugbar-time') + '"]'); + ciDebugBar.addClass(btn.parentNode.parentNode, 'current'); + + historyLoad = this.toolbar.getElementsByClassName('ci-history-load'); + + for (var i = 0; i < historyLoad.length; i++) + { + historyLoad[i].addEventListener('click', function () { + loadDoc(this.getAttribute('data-time')); + }, true); + } + + // Display the active Tab on page load + var tab = ciDebugBar.readCookie('debug-bar-tab'); + if (document.getElementById(tab)) + { + var el = document.getElementById(tab); + el.style.display = 'block'; + ciDebugBar.addClass(el, 'active'); + tab = document.querySelector('[data-tab=' + tab + ']'); + if (tab) + { + ciDebugBar.addClass(tab.parentNode, 'active'); + } + } + }, + + createListeners : function () { + var buttons = [].slice.call(this.toolbar.querySelectorAll('.ci-label a')); + + for (var i = 0; i < buttons.length; i++) + { + buttons[i].addEventListener('click', ciDebugBar.showTab, true); + } + + // Hook up generic toggle via data attributes `data-toggle="foo"` + var links = this.toolbar.querySelectorAll('[data-toggle]'); + for (var i = 0; i < links.length; i++) + { + links[i].addEventListener('click', ciDebugBar.toggleRows, true); + } + }, + + showTab: function () { + // Get the target tab, if any + var tab = document.getElementById(this.getAttribute('data-tab')); + + // If the label have not a tab stops here + if (! tab) + { + return; + } + + // Remove debug-bar-tab cookie + ciDebugBar.createCookie('debug-bar-tab', '', -1); + + // Check our current state. + var state = tab.style.display; + + // Hide all tabs + var tabs = document.querySelectorAll('#debug-bar .tab'); + + for (var i = 0; i < tabs.length; i++) + { + tabs[i].style.display = 'none'; + } + + // Mark all labels as inactive + var labels = document.querySelectorAll('#debug-bar .ci-label'); + + for (var i = 0; i < labels.length; i++) + { + ciDebugBar.removeClass(labels[i], 'active'); + } + + // Show/hide the selected tab + if (state != 'block') + { + tab.style.display = 'block'; + ciDebugBar.addClass(this.parentNode, 'active'); + // Create debug-bar-tab cookie to persistent state + ciDebugBar.createCookie('debug-bar-tab', this.getAttribute('data-tab'), 365); + } + }, + + addClass : function (el, className) { + if (el.classList) + { + el.classList.add(className); + } + else + { + el.className += ' ' + className; + } + }, + + removeClass : function (el, className) { + if (el.classList) + { + el.classList.remove(className); + } + else + { + el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); + } + }, + + /** + * Toggle display of another object based on + * the data-toggle value of this object + * + * @param event + */ + toggleRows : function(event) { + if(event.target) + { + let row = event.target.closest('tr'); + let target = document.getElementById(row.getAttribute('data-toggle')); + target.style.display = target.style.display === 'none' ? 'table-row' : 'none'; + } + }, + + /** + * Toggle display of a data table + * + * @param obj + */ + toggleDataTable : function (obj) { + if (typeof obj == 'string') + { + obj = document.getElementById(obj + '_table'); + } + + if (obj) + { + obj.style.display = obj.style.display === 'none' ? 'block' : 'none'; + } + }, + + /** + * Toggle display of timeline child elements + * + * @param obj + */ + toggleChildRows : function (obj) { + if (typeof obj == 'string') + { + par = document.getElementById(obj + '_parent') + obj = document.getElementById(obj + '_children'); + } + + if (par && obj) + { + obj.style.display = obj.style.display === 'none' ? '' : 'none'; + par.classList.toggle('timeline-parent-open'); + } + }, + + + //-------------------------------------------------------------------- + + /** + * Toggle tool bar from full to icon and icon to full + */ + toggleToolbar : function () { + var open = ciDebugBar.toolbar.style.display != 'none'; + + ciDebugBar.icon.style.display = open == true ? 'inline-block' : 'none'; + ciDebugBar.toolbar.style.display = open == false ? 'inline-block' : 'none'; + + // Remember it for other page loads on this site + ciDebugBar.createCookie('debug-bar-state', '', -1); + ciDebugBar.createCookie('debug-bar-state', open == true ? 'minimized' : 'open' , 365); + }, + + /** + * Sets the initial state of the toolbar (open or minimized) when + * the page is first loaded to allow it to remember the state between refreshes. + */ + setToolbarState: function () { + var open = ciDebugBar.readCookie('debug-bar-state'); + + ciDebugBar.icon.style.display = open != 'open' ? 'inline-block' : 'none'; + ciDebugBar.toolbar.style.display = open == 'open' ? 'inline-block' : 'none'; + }, + + toggleViewsHints: function () { + // Avoid toggle hints on history requests that are not the initial + if (localStorage.getItem('debugbar-time') != localStorage.getItem('debugbar-time-new')) + { + var a = document.querySelector('a[data-tab="ci-views"]'); + a.href = '#'; + return; + } + + var nodeList = []; // [ Element, NewElement( 1 )/OldElement( 0 ) ] + var sortedComments = []; + var comments = []; + + var getComments = function () { + var nodes = []; + var result = []; + var xpathResults = document.evaluate( "//comment()[starts-with(., ' DEBUG-VIEW')]", document, null, XPathResult.ANY_TYPE, null); + var nextNode = xpathResults.iterateNext(); + while ( nextNode ) + { + nodes.push( nextNode ); + nextNode = xpathResults.iterateNext(); + } + + // sort comment by opening and closing tags + for (var i = 0; i < nodes.length; ++i) + { + // get file path + name to use as key + var path = nodes[i].nodeValue.substring( 18, nodes[i].nodeValue.length - 1 ); + + if ( nodes[i].nodeValue[12] === 'S' ) // simple check for start comment + { + // create new entry + result[path] = [ nodes[i], null ]; + } + else if (result[path]) + { + // add to existing entry + result[path][1] = nodes[i]; + } + } + + return result; + }; + + // find node that has TargetNode as parentNode + var getParentNode = function ( node, targetNode ) { + if ( node.parentNode === null ) + { + return null; + } + + if ( node.parentNode !== targetNode ) + { + return getParentNode( node.parentNode, targetNode ); + } + + return node; + }; + + // define invalid & outer ( also invalid ) elements + const INVALID_ELEMENTS = [ 'NOSCRIPT', 'SCRIPT', 'STYLE' ]; + const OUTER_ELEMENTS = [ 'HTML', 'BODY', 'HEAD' ]; + + var getValidElementInner = function ( node, reverse ) { + // handle invalid tags + if ( OUTER_ELEMENTS.indexOf( node.nodeName ) !== -1 ) + { + for (var i = 0; i < document.body.children.length; ++i) + { + var index = reverse ? document.body.children.length - ( i + 1 ) : i; + var element = document.body.children[index]; + + // skip invalid tags + if ( INVALID_ELEMENTS.indexOf( element.nodeName ) !== -1 ) + { + continue; + } + + return [ element, reverse ]; + } + + return null; + } + + // get to next valid element + while ( node !== null && INVALID_ELEMENTS.indexOf( node.nodeName ) !== -1 ) + { + node = reverse ? node.previousElementSibling : node.nextElementSibling; + } + + // return non array if we couldnt find something + if ( node === null ) + { + return null; + } + + return [ node, reverse ]; + }; + + // get next valid element ( to be safe to add divs ) + // @return [ element, skip element ] or null if we couldnt find a valid place + var getValidElement = function ( nodeElement ) { + if (nodeElement) + { + if ( nodeElement.nextElementSibling !== null ) + { + return getValidElementInner( nodeElement.nextElementSibling, false ) + || getValidElementInner( nodeElement.previousElementSibling, true ); + } + if ( nodeElement.previousElementSibling !== null ) + { + return getValidElementInner( nodeElement.previousElementSibling, true ); + } + } + + // something went wrong! -> element is not in DOM + return null; + }; + + function showHints() + { + // Had AJAX? Reset view blocks + sortedComments = getComments(); + + for (var key in sortedComments) + { + var startElement = getValidElement( sortedComments[key][0] ); + var endElement = getValidElement( sortedComments[key][1] ); + + // skip if we couldnt get a valid element + if ( startElement === null || endElement === null ) + { + continue; + } + + // find element which has same parent as startelement + var jointParent = getParentNode( endElement[0], startElement[0].parentNode ); + if ( jointParent === null ) + { + // find element which has same parent as endelement + jointParent = getParentNode( startElement[0], endElement[0].parentNode ); + if ( jointParent === null ) + { + // both tries failed + continue; + } + else + { + startElement[0] = jointParent; + } + } + else + { + endElement[0] = jointParent; + } + + var debugDiv = document.createElement( 'div' ); // holder + var debugPath = document.createElement( 'div' ); // path + var childArray = startElement[0].parentNode.childNodes; // target child array + var parent = startElement[0].parentNode; + var start, end; + + // setup container + debugDiv.classList.add( 'debug-view' ); + debugDiv.classList.add( 'show-view' ); + debugPath.classList.add( 'debug-view-path' ); + debugPath.innerText = key; + debugDiv.appendChild( debugPath ); + + // calc distance between them + // start + for (var i = 0; i < childArray.length; ++i) + { + // check for comment ( start & end ) -> if its before valid start element + if ( childArray[i] === sortedComments[key][1] || + childArray[i] === sortedComments[key][0] || + childArray[i] === startElement[0] ) + { + start = i; + if ( childArray[i] === sortedComments[key][0] ) + { + start++; // increase to skip the start comment + } + break; + } + } + // adjust if we want to skip the start element + if ( startElement[1] ) + { + start++; + } + + // end + for (var i = start; i < childArray.length; ++i) + { + if ( childArray[i] === endElement[0] ) + { + end = i; + // dont break to check for end comment after end valid element + } + else if ( childArray[i] === sortedComments[key][1] ) + { + // if we found the end comment, we can break + end = i; + break; + } + } + + // move elements + var number = end - start; + if ( endElement[1] ) + { + number++; + } + for (var i = 0; i < number; ++i) + { + if ( INVALID_ELEMENTS.indexOf( childArray[start] ) !== -1 ) + { + // skip invalid childs that can cause problems if moved + start++; + continue; + } + debugDiv.appendChild( childArray[start] ); + } + + // add container to DOM + nodeList.push( parent.insertBefore( debugDiv, childArray[start] ) ); + } + + ciDebugBar.createCookie('debug-view', 'show', 365); + ciDebugBar.addClass(btn, 'active'); + } + + function hideHints() + { + for (var i = 0; i < nodeList.length; ++i) + { + var index; + + // find index + for (var j = 0; j < nodeList[i].parentNode.childNodes.length; ++j) + { + if ( nodeList[i].parentNode.childNodes[j] === nodeList[i] ) + { + index = j; + break; + } + } + + // move child back + while ( nodeList[i].childNodes.length !== 1 ) + { + nodeList[i].parentNode.insertBefore( nodeList[i].childNodes[1], nodeList[i].parentNode.childNodes[index].nextSibling ); + index++; + } + + nodeList[i].parentNode.removeChild( nodeList[i] ); + } + nodeList.length = 0; + + ciDebugBar.createCookie('debug-view', '', -1); + ciDebugBar.removeClass(btn, 'active'); + } + + var btn = document.querySelector('[data-tab=ci-views]'); + + // If the Views Collector is inactive stops here + if (! btn) + { + return; + } + + btn.parentNode.onclick = function () { + if (ciDebugBar.readCookie('debug-view')) + { + hideHints(); + } + else + { + showHints(); + } + }; + + // Determine Hints state on page load + if (ciDebugBar.readCookie('debug-view')) + { + showHints(); + } + }, + + setToolbarPosition: function () { + var btnPosition = this.toolbar.querySelector('#toolbar-position'); + + if (ciDebugBar.readCookie('debug-bar-position') === 'top') + { + ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top'); + } + + btnPosition.addEventListener('click', function () { + var position = ciDebugBar.readCookie('debug-bar-position'); + + ciDebugBar.createCookie('debug-bar-position', '', -1); + + if (!position || position === 'bottom') + { + ciDebugBar.createCookie('debug-bar-position', 'top', 365); + ciDebugBar.addClass(ciDebugBar.icon, 'fixed-top'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'fixed-top'); + } + else + { + ciDebugBar.createCookie('debug-bar-position', 'bottom', 365); + ciDebugBar.removeClass(ciDebugBar.icon, 'fixed-top'); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'fixed-top'); + } + }, true); + }, + + setToolbarTheme: function () { + var btnTheme = this.toolbar.querySelector('#toolbar-theme'); + var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches; + + // If a cookie is set with a value, we force the color scheme + if (ciDebugBar.readCookie('debug-bar-theme') === 'dark') + { + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); + } + else if (ciDebugBar.readCookie('debug-bar-theme') === 'light') + { + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); + } + + btnTheme.addEventListener('click', function () { + var theme = ciDebugBar.readCookie('debug-bar-theme'); + + if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) + { + // If there is no cookie, and "prefers-color-scheme" is set to "dark" + // It means that the user wants to switch to light mode + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); + } + else + { + if (theme === 'dark') + { + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); + } + else + { + // In any other cases: if there is no cookie, or the cookie is set to + // "light", or the "prefers-color-scheme" is "light"... + ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); + } + } + }, true); + }, + + /** + * Helper to create a cookie. + * + * @param name + * @param value + * @param days + */ + createCookie : function (name,value,days) { + if (days) + { + var date = new Date(); + + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + + var expires = "; expires=" + date.toGMTString(); + } + else + { + var expires = ""; + } + + document.cookie = name + "=" + value + expires + "; path=/; samesite=Lax"; + }, + + readCookie : function (name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + + for (var i = 0; i < ca.length; i++) + { + var c = ca[i]; + while (c.charAt(0) == ' ') + { + c = c.substring(1,c.length); + } + if (c.indexOf(nameEQ) == 0) + { + return c.substring(nameEQ.length,c.length); + } + } + return null; + }, + + trimSlash: function (text) { + return text.replace(/^\/|\/$/g, ''); + }, + + routerLink: function () { + var row, _location; + var rowGet = this.toolbar.querySelectorAll('td[data-debugbar-route="GET"]'); + var patt = /\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/; + + for (var i = 0; i < rowGet.length; i++) + { + row = rowGet[i]; + if (!/\/\(.+?\)/.test(rowGet[i].innerText)) + { + row.style = 'cursor: pointer;'; + row.setAttribute('title', location.origin + '/' + ciDebugBar.trimSlash(row.innerText)); + row.addEventListener('click', function (ev) { + _location = location.origin + '/' + ciDebugBar.trimSlash(ev.target.innerText); + var redirectWindow = window.open(_location, '_blank'); + redirectWindow.location; + }); + } + else + { + row.innerHTML = '
' + row.innerText + '
' + + '
' + + row.innerText.replace(patt, '') + + '' + + '
'; + } + } + + rowGet = this.toolbar.querySelectorAll('td[data-debugbar-route="GET"] form'); + for (var i = 0; i < rowGet.length; i++) + { + row = rowGet[i]; + + row.addEventListener('submit', function (event) { + event.preventDefault() + var inputArray = [], t = 0; + var input = event.target.querySelectorAll('input[type=text]'); + var tpl = event.target.getAttribute('data-debugbar-route-tpl'); + + for (var n = 0; n < input.length; n++) + { + if (input[n].value.length > 0) + { + inputArray.push(input[n].value); + } + } + + if (inputArray.length > 0) + { + _location = location.origin + '/' + tpl.replace(/\?/g, function () { + return inputArray[t++] + }); + + var redirectWindow = window.open(_location, '_blank'); + redirectWindow.location; + } + }) + } + } }; diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php index 077fc9f070..0e73076f0e 100644 --- a/system/Debug/Toolbar/Views/toolbar.tpl.php +++ b/system/Debug/Toolbar/Views/toolbar.tpl.php @@ -19,250 +19,250 @@ */ ?>
- - - + + +
-
- ↕ - 🔅 - - - - ms   MB - - +
+ ↕ + 🔅 + + + + ms   MB + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - Vars - - + + + + Vars + + -

- - - - - - -

+

+ + + + + + +

- - - - -
+ + + + +
- -
- - - - - - - - - - - - - renderTimeline($collectors, $startTime, $segmentCount, $segmentDuration, $styles) ?> - -
NAMECOMPONENTDURATION ms
-
+ +
+ + + + + + + + + + + + + renderTimeline($collectors, $startTime, $segmentCount, $segmentDuration, $styles) ?> + +
NAMECOMPONENTDURATION ms
+
- - - - -
-

+ + + + +
+

- setData($c['display'])->render("_{$c['titleSafe']}.tpl") ?> -
- - - + setData($c['display'])->render("_{$c['titleSafe']}.tpl") ?> +
+ + + - -
+ +
- - - $items) : ?> + + + $items) : ?> - -

- + +

+ - + - - - $value) : ?> - - - - - - -
+ + + $value) : ?> + + + + + + +
- -

No data to display.

- - - + +

No data to display.

+ + + - - -

Session User Data

- + + +

Session User Data

+ - - - - - $value) : ?> - - - - - - -
- -

No data to display.

- - -

Session doesn't seem to be active.

- + + + + + $value) : ?> + + + + + + +
+ +

No data to display.

+ + +

Session doesn't seem to be active.

+ -

Request ( )

+

Request ( )

- - -

$_GET

- + + +

$_GET

+ - - - $value) : ?> - - - - - - -
- + + + $value) : ?> + + + + + + +
+ - - -

$_POST

- + + +

$_POST

+ - - - $value) : ?> - - - - - - -
- + + + $value) : ?> + + + + + + +
+ - - -

Headers

- + + +

Headers

+ - - - $value) : ?> - - - - - - -
- + + + $value) : ?> + + + + + + +
+ - - -

Cookies

- + + +

Cookies

+ - - - $value) : ?> - - - - - - - - + + + $value) : ?> + + + + + + + + -

Response - ( ) -

+

Response + ( ) +

- - -

Headers

- + + +

Headers

+ - - - $value) : ?> - - - - - - -
- -
+ + + $value) : ?> + + + + + + +
+ +
- -
-

System Configuration

+ +
+

System Configuration

- setData($config)->render('_config.tpl') ?> -
+ setData($config)->render('_config.tpl') ?> +