Initial commit

Helper/Config.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Copyright (c) 2016, H&O E-commerce specialisten B.V.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+ * following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+ *    disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+ *    following disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+ * INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+namespace KingfisherDirect\BetterDebugHints\Helper;
+
+use Magento\Developer\Helper\Data as DeveloperHelper;
+use Magento\Framework\App\Helper\AbstractHelper;
+use Magento\Framework\App\Helper\Context;
+use Magento\Framework\App\State as AppState;
+use Magento\Store\Model\StoreManagerInterface;
+
+class Config extends AbstractHelper
+{
+    /** @var AppState $appState */
+    private $appState;
+
+    /** @var StoreManagerInterface $storeManager */
+    private $storeManager;
+
+    /** @var DeveloperHelper $developerHelper */
+    private $developerHelper;
+
+    /**
+     * @param Context               $context
+     * @param AppState              $appState
+     * @param StoreManagerInterface $storeManager
+     * @param DeveloperHelper       $developerHelper
+     */
+    public function __construct(
+        Context $context,
+        AppState $appState,
+        StoreManagerInterface $storeManager,
+        DeveloperHelper $developerHelper
+    ) {
+        parent::__construct($context);
+
+        $this->appState = $appState;
+        $this->storeManager = $storeManager;
+        $this->developerHelper = $developerHelper;
+    }
+
+    /**
+     * Check if the hints can be displayed.
+     *
+     * It will check if the url parameter is present.
+     * For production mode it will also check if the IP-address is in Developer Client Restrictions.
+     *
+     * @return bool
+     */
+    public function isHintEnabled()
+    {
+        $isParamPresent = $this->_request->getParam('ath', false) === '1';
+
+        if ($isParamPresent) {
+            $applicationMode = $this->appState->getMode();
+            $storeId = $this->storeManager->getStore()->getId();
+
+            if ($applicationMode !== AppState::MODE_PRODUCTION || $this->developerHelper->isDevAllowed($storeId)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+}

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2022 Kingfisher Direct Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Plugin/View/LayoutHints.php

@@ -0,0 +1,146 @@
+<?php
+
+namespace KingfisherDirect\BetterDebugHints\Plugin\View;
+
+use KingfisherDirect\BetterDebugHints\Helper\Config;
+use Magento\Framework\Interception\InterceptorInterface;
+use Magento\Framework\View\Element\AbstractBlock;
+use Magento\Framework\View\Layout;
+use Magento\Framework\View\Layout\Element;
+
+class LayoutHints
+{
+    private Layout $layout;
+    private Config $config;
+
+    public function __construct(Layout $layout, Config $config)
+    {
+        $this->layout = $layout;
+        $this->config = $config;
+    }
+
+    public function aroundRenderElement(Layout $layout, \Closure $proceed, string $name, $useCache = true): string
+    {
+        $html = $proceed($name, $useCache);
+
+        if (!$this->config->isHintEnabled()) {
+            return $html;
+        }
+
+        if ($layout->getElementProperty($name, Element::CONTAINER_OPT_HTML_TAG)) {
+            $label = "";
+
+            if ($layout->getElementProperty($name, Element::CONTAINER_OPT_LABEL)) {
+                $label = " data-mage-debug-label='$label'";
+            }
+
+            $html = preg_replace("@^(<[a-z0-9\-\_]+)[\s>]@i", "\${1} data-mage-debug='$name'$label ", $html);
+        }
+
+        if ($name === 'root') {
+            $html .= $this->getRootScript();
+        }
+
+        return
+            "<script type='text/mage-debug' data-mage-debug-position='start' data-mage-debug='$name'></script>".
+            $html.
+            "<script type='text/mage-debug' data-mage-debug-position='end' data-mage-debug='$name'></script>";
+    }
+
+    private function getRootScript(): string
+    {
+        $structure = $this->getStructure();
+        $structureJson = json_encode($structure);
+
+        return <<<HTML
+            <script>
+                window.layoutStructure = {$structureJson};
+
+                require(['KingfisherDirect_BetterDebugHints/js/layoutHints'], function (layoutHints) {
+                    window.layout = layoutHints(window.layoutStructure);
+                });
+            </script>
+        HTML;
+    }
+
+    private function getStructure($name = 'root'): array
+    {
+        $result = [];
+
+        if ($name === 'root') {
+            $result['handles'] = $this->layout->getUpdate()->getHandles();
+        }
+
+        if ($label = $this->layout->getElementProperty($name, Element::CONTAINER_OPT_LABEL)) {
+            $result['label'] = $label;
+        }
+
+        $alias = $this->layout->getElementAlias($name);
+
+        if ($alias && $alias !== $name) {
+            $result['alias'] = $alias;
+        }
+
+        $childNames = $this->layout->getChildNames($name);
+
+        if (count($childNames) > 0) {
+            $result['children'] = [];
+        }
+
+        foreach ($childNames as $child) {
+            $result['children'][$child] = $this->getStructure($child);
+        }
+
+        $block = $this->layout->getBlock($name);
+
+        if ($block) {
+            $result['block'] = $this->getBlockInfo($block);
+        }
+
+        return $result;
+    }
+
+    private function getBlockInfo(AbstractBlock $block)
+    {
+        return [
+            'class' => $this->getBlockClass($block),
+            'template' => $block->getTemplateFile(),
+            'moduleName' => $block->getModuleName(),
+            'nameInLayout' => $block->getNameInLayout(),
+            'cacheKeyInfo' => @$block->getCacheKeyInfo()
+        ];
+    }
+
+    /**
+     * Copyright (c) 2016, H&O E-commerce specialisten B.V.
+     * All rights reserved.
+     *
+     * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+     * following conditions are met:
+     *
+     * 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the
+     *    following disclaimer.
+     *
+     * 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+     *    following disclaimer in the documentation and/or other materials provided with the distribution.
+     *
+     * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
+     * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+     * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+     * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+     * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+     * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
+     * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+     */
+    private function getBlockClass(AbstractBlock $block)
+    {
+        $className = get_class($block);
+
+        if ($block instanceof InterceptorInterface) {
+            $reflector = new \ReflectionClass($block); //@codingStandardsIgnoreLine
+            $className = $reflector->getParentClass()->getName();
+        }
+
+        return $className;
+    }
+}

README.md

@@ -0,0 +1,38 @@
+# Better Debug Hints
+
+> Improved Magento 2 debug hints for layout and blocks
+
+_Nice GIF Here_
+
+This module does not change any element styles or does not add any extra styles
+for highlighting them, therefore **enabling hints does not affect website look,
+feel nor behaviour.**
+
+## Installation
+
+```sh
+composer require --dev kingfisherdirect/magento2-better-debug-hints
+```
+
+## Usage
+
+Open your Magento page with an extra GET parameter `?ath=1`. For example:
+`https://localhost/?ath=1`.
+
+**Element Picker**
+
+1. Press `` ` `` (backtick key, above tab)
+2. Move your mouse on top of any html element
+3. Click on it to get debug information in browser console
+4. Right click on highlighted element to nagivate to it's direct parent
+5. `ESC` to disable picker
+
+**Console Helper**
+
+Use `layout()` function to investigate any HTML element. To inspect currently selected element in inspector use `layout($0)`
+
+## Credits
+
+https://github.com/ho-nl/magento2-Ho_Templatehints
+
+After starting work on this module I realised there is an existing one that seems quite good. Few ideas were taken out of that module.

composer.json

@@ -0,0 +1,20 @@
+{
+    "name": "kingfisherdirect/magento2-better-debug-hints",
+    "type": "magento2-module",
+    "license": "MIT",
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "KingfisherDirect\\BetterDebugHints\\": ""
+        }
+    },
+    "authors": [
+        {
+            "name": "Kamil",
+            "email": "[email protected]"
+        }
+    ],
+    "require": {}
+}

etc/di.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+
+    <type name="Magento\Framework\View\Layout">
+        <plugin name="KingfisherDirect_BetterDebugHints::layoutHints" type="KingfisherDirect\BetterDebugHints\Plugin\View\LayoutHints"/>
+    </type>
+
+</config>

etc/module.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="KingfisherDirect_BetterDebugHints">
+        <sequence>
+            <module name="Magento_Developer"/>
+        </sequence>
+    </module>
+</config>

registration.php

@@ -0,0 +1,7 @@
+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'KingfisherDirect_BetterDebugHints',
+    __DIR__
+);