diff --git a/Plugin/View/AliasHints.php b/Plugin/View/AliasHints.php new file mode 100644 index 0000000..5b22838 --- /dev/null +++ b/Plugin/View/AliasHints.php @@ -0,0 +1,26 @@ +getLayout(); + $name = $block->getNameInLayout(); + $childName = $layout->getChildName($name, $alias); + + return + "". + $html. + ""; + } +} diff --git a/Plugin/View/LayoutHints.php b/Plugin/View/LayoutHints.php index 39d1270..b60e017 100644 --- 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 index 0fc2b51..87be2d2 100644 --- a/etc/di.xml +++ b/etc/di.xml @@ -5,4 +5,8 @@ + + + + diff --git a/view/base/web/js/LayoutHints.js b/view/base/web/js/LayoutHints.js index d23cc6f..2f706d4 100644 --- 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 index ace77aa..8f6b0be 100644 --- 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 () {
Class: ${layout.block.class}
Template: ${layout.block.template}
` - } - if (layout.moduleName) { - content += '

${layout.moduleName}

' + if (layout.block.cacheLifetime) { + content += `
Cache Lifetime: ${layout.block.cacheLifetime}
` + } } return layout.elements.map(element => {