Improve aliased containers inspecting

kingfisherdirect · Sep 19, 2024 · 7d6dcf6 · 7d6dcf6
1 parent bd7f8fa
commit 7d6dcf6
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 12 deletions.
diff --git a/Plugin/View/AliasHints.php b/Plugin/View/AliasHints.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace KingfisherDirect\BetterDebugHints\Plugin\View;
+
+use Magento\Framework\View\Element\AbstractBlock;
+
+class AliasHints
+{
+    public function aroundGetChildHtml(AbstractBlock $block, \Closure $proceed, string $alias = '', $useCache = true)
+    {
+        $html = $proceed($alias, $useCache);
+
+        if (!$alias || !$html) {
+            return $html;
+        }
+
+        $layout = $block->getLayout();
+        $name = $block->getNameInLayout();
+        $childName = $layout->getChildName($name, $alias);
+
+        return
+            "<script type='text/mage-debug' data-mage-debug-position='start' data-mage-debug='$childName'></script>".
+            $html.
+            "<script type='text/mage-debug' data-mage-debug-position='end' data-mage-debug='$childName'></script>";
+    }
+}
diff --git a/Plugin/View/LayoutHints.php b/Plugin/View/LayoutHints.php
@@ -132,7 +132,8 @@ private function getBlockInfo(AbstractBlock $block)
             'template' => $block->getTemplateFile(),
             'moduleName' => $block->getModuleName(),
             'nameInLayout' => $block->getNameInLayout(),
-            'cacheKeyInfo' => @$block->getCacheKeyInfo()
+            'cacheKeyInfo' => @$block->getCacheKeyInfo(),
+            'cacheLifetime' => $block->getCacheLifetime()
         ];
     }
 

diff --git a/etc/di.xml b/etc/di.xml
@@ -5,4 +5,8 @@
         <plugin name="KingfisherDirect_BetterDebugHints::layoutHints" type="KingfisherDirect\BetterDebugHints\Plugin\View\LayoutHints"/>
     </type>
 
+    <type name="Magento\Framework\View\Element\AbstractBlock">
+        <plugin name="KingfisherDirect_BetterDebugHints::aliasHints" type="KingfisherDirect\BetterDebugHints\Plugin\View\AliasHints"/>
+    </type>
+
 </config>
diff --git a/view/base/web/js/LayoutHints.js b/view/base/web/js/LayoutHints.js
@@ -69,7 +69,7 @@ define([
         }
 
         inspect (element) {
-            var inspectable = this.findInspectable(element)
+            var { element: inspectable } = this.findInspectable(element)
 
             if (!inspectable) {
                 console.error("No element found")
@@ -88,7 +88,7 @@ define([
                         continue
                     }
 
-                    return element
+                    return { element, debugger: type }
                 }
             } while (element = element.parentElement)
         }
@@ -106,7 +106,7 @@ define([
             highlights.clear()
 
             var elementUnderMouse = document.elementsFromPoint(event.clientX, event.clientY).shift()
-            var closestHighlightable = this.findInspectable(elementUnderMouse)
+            var { element: closestHighlightable } = this.findInspectable(elementUnderMouse)
 
             if (!closestHighlightable) {
                 return
@@ -162,10 +162,8 @@ define([
 
                 const highlightOverlay = highlights.create(highlightedEl, content)
 
-                if (highlightedEl === element) {
-                    highlightOverlay.addEventListener("click", event => this.onClickHighlight(element, event))
-                    highlightOverlay.addEventListener("contextmenu", event => this.onRightClickHighlight(element, event))
-                }
+                highlightOverlay.addEventListener("click", event => this.onClickHighlight(element, event))
+                highlightOverlay.addEventListener("contextmenu", event => this.onRightClickHighlight(element, event))
             }
         }
 
@@ -198,11 +196,23 @@ define([
             highlights.clear()
             this.removeMouseTracker()
 
+            const inspectable = this.findInspectable(element)
+
+            // offload parent element searching to current debugger
+            const parentInspectables = inspectable && typeof this.debuggers[inspectable.debugger]?.parentInspectableElements === 'function'
+                ? this.debuggers[inspectable.debugger].parentInspectableElements(element)
+                : []
+
+            // only consider it it's parent in debugger, but sibbling in HTML DOM
+            if (parentInspectables[0] && parentInspectables[0].parentElement === element.parentElement) {
+                return this.highlight(parentInspectables[0])
+            }
+
             if (!element.parentElement) {
                 return
             }
 
-            var parentInspectable = this.findInspectable(element.parentElement)
+            var { element: parentInspectable } = this.findInspectable(element.parentElement)
 
             if (!parentInspectable) {
                 return

diff --git a/view/base/web/js/debug/MageLayoutDebugger.js b/view/base/web/js/debug/MageLayoutDebugger.js
@@ -100,6 +100,16 @@ define([], function () {
             return { layout: element.mageLayout }
         }
 
+        parentInspectableElements (element) {
+            const inspectable = element.mageLayout
+
+            if (!inspectable || !inspectable.parent) {
+                return
+            }
+
+            return inspectable.parent.elements
+        }
+
         getHighlightsData (element) {
             const layout = element.mageLayout
             const badges = layout.name ? [layout.name] : layout.handles
@@ -120,10 +130,10 @@ define([], function () {
                     <div>Class: <code style="background: transparent">${layout.block.class}</code></div>
                     <div>Template: <code style="background: transparent">${layout.block.template}</code></div>
                 `
-            }
 
-            if (layout.moduleName) {
-                content += '<p><small>${layout.moduleName}</small></p>'
+                if (layout.block.cacheLifetime) {
+                    content += `<div>Cache Lifetime: <code style="background: transparent">${layout.block.cacheLifetime}</code></div>`
+                }
             }
 
             return layout.elements.map(element => {