Сделан набросок дебаг-бара для светлой темы

Author: ggrachdev

assets/DebugBar/js/initializer.js

@@ -1,5 +1,37 @@
-var GDB = {
-    
+var Ggrach = {
+    DebugBar: {
+        init: function () {
+            document.addEventListener('DOMContentLoaded', function () {
+                if (Ggrach.Utils.User.isAdmin())
+                {
+                    var parent = document.querySelector("body");
+                    var debugBarWrapper = document.createElement("section");
+                    debugBarWrapper.classList.add('ggrach__debug_bar');
+
+                    parent.prepend(debugBarWrapper);
+
+                    for (var typeNotice in GgrachDebuggerLogProvider)
+                    {
+                        var arrNotices = GgrachDebuggerLogProvider[typeNotice];
+                        var viewTypeNotice = document.createElement("div");
+                        viewTypeNotice.classList.add('ggrach__debug_bar__item');
+                        viewTypeNotice.classList.add('type-notice-' + typeNotice);
+                        viewTypeNotice.innerHTML = arrNotices.length;
+                        debugBarWrapper.prepend(viewTypeNotice);
+                    }
+                }
+            });
+        }
+    }
+};
+
+Ggrach.Utils = {
+    User: {
+        isAdmin: function () {
+            return document.getElementById('panel') &&
+                document.getElementById('bx-panel-admin-tab');
+        }
+    }
 };
 
-console.log(12345);
+Ggrach.DebugBar.init();

assets/DebugBar/themes/dark/dark.css assets/DebugBar/themes/dark/theme.cssassets/DebugBar/themes/dark/dark.css renamed to assets/DebugBar/themes/dark/theme.css

@@ -0,0 +1,37 @@
+.ggrach__debug_bar {
+    width: 100% !important;
+    position: fixed !important;
+    bottom: 0 !important;
+    height: 30px !important;
+    z-index: 9999 !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+.ggrach__debug_bar > .ggrach__debug_bar__item {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 30px !important;
+    min-width: 30px !important;
+    cursor: pointer !important;
+    font-size: 16px !important;
+}
+
+.type-notice-notice {
+    background-color: #93c7ec !important;
+}
+
+.type-notice-warning {
+    background-color: #d8ff00 !important;
+}
+
+.type-notice-error {
+    background-color: red !important;
+}
+
+.type-notice-success {
+    background-color: green !important;
+}

assets/DebugBar/themes/general.css

@@ -0,0 +1,5 @@
+.ggrach__debug_bar {
+    background: rgb(246,246,246) !important;
+    background: linear-gradient(180deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 46%) !important;
+    border-top: 1px solid #b3b3b3 !important;
+}

assets/DebugBar/themes/light/light.css

@@ -0,0 +1,11 @@
+<?php
+
+// Добавляем дебаг-бар
+AddEventHandler("main", "OnEndBufferContent", "GgrachAddDebugBar");
+
+function GgrachAddDebugBar(&$content)
+{
+    $logData = '<script> var GgrachDebuggerLogProvider = '.CUtil::PhpToJSObject(GD()->getLog()).'; </script>';
+    $content = \str_replace('</body>', $logData.'</body>', $content);
+}
+

assets/DebugBar/themes/light/theme.css

@@ -1,6 +1,7 @@
 <?php
 
 // Need include this file in init.php
+// include 'BitrixDebugger/initializer.php';
 
 use Bitrix\Main\Loader;
 use Bitrix\Main\Page\Asset;
@@ -36,26 +37,33 @@
  */
 $GD->setShowModes(['code', 'debug_bar']);
 
-global $USER;
-
-if ($USER && $USER->IsAdmin()) {
-    Asset::getInstance()->addJs($ggrachDebuggerRootPath . "/assets/DebugBar/js/initializer.js");
-    Asset::getInstance()->addCss($ggrachDebuggerRootPath . "/assets/DebugBar/themes/${$ggrachDebugBarConfigurator->getColorTheme()}/fix.css");
+function GD() {
+    global $GD;
+    return $GD;
 }
 
+
+Asset::getInstance()->addJs($ggrachDebuggerRootPath . "/assets/DebugBar/js/initializer.js");
+Asset::getInstance()->addCss($ggrachDebuggerRootPath . '/assets/DebugBar/themes/general.css');
+Asset::getInstance()->addCss($ggrachDebuggerRootPath . '/assets/DebugBar/themes/'.$ggrachDebugBarConfigurator->getColorTheme().'/theme.css');
+
 /**
  * Пример дебага:
  * 
- * $GD->notice("Моя переменная', 'Моя переменная 2');
- * $GD->error('Моя переменная', 'Моя переменная 2');
- * $GD->warning('Моя переменная', 'Моя переменная 2');
- * $GD->success('Моя переменная', 'Моя переменная 2');
+ * GD()->notice('Моя переменная', 'Моя переменная 2');
+ * GD()->error('Моя переменная', 'Моя переменная 2');
+ * GD()->warning('Моя переменная', 'Моя переменная 2');
+ * GD()->success('Моя переменная', 'Моя переменная 2');
  * 
  * Залогировать в файлы
- * $GD->noticeLog("Моя переменная', 'Моя переменная 2');
- * $GD->errorLog('Моя переменная', 'Моя переменная 2');
- * $GD->warningLog('Моя переменная', 'Моя переменная 2');
- * $GD->successLog('Моя переменная', 'Моя переменная 2');
+ * GD()->noticeLog('Моя переменная', 'Моя переменная 2');
+ * GD()->errorLog('Моя переменная', 'Моя переменная 2');
+ * GD()->warningLog('Моя переменная', 'Моя переменная 2');
+ * GD()->successLog('Моя переменная', 'Моя переменная 2');
  * 
  */
 include 'inizializer_alias.php';
+
+if (\GGrach\BitrixDebugger\Validator\ShowModeDebuggerValidator::needShowInDebugBar($GD)) {
+    include 'events.php';
+}

events.php

@@ -145,7 +145,13 @@ public function debug($typeNotice, ...$item) {
     protected function noticeRaw(string $type, $arLogItems) {
 
         if (ShowModeDebuggerValidator::needShowInDebugBar($this)) {
-            $this->log = array_merge($this->log, $arLogItems);
+            
+            if(!\array_key_exists($type, $this->getLog()))
+            {
+               $this->log[$type] = []; 
+            }
+            
+            $this->log[$type] = array_merge($this->getLog()[$type], $arLogItems);
         }
 
         if (ShowModeDebuggerValidator::needShowInCode($this)) {