Template:ItemBox: Difference between revisionsGive feedback
Restore the icon mask and real masked wear on the lowGraphics path, keeping only texture off, to measure whether the masks affect scroll caching (with help from vergir-bot LLM) |
Make the name area a query container so the measured name size can be emitted in cqw (with help from vergir-bot LLM) |
||
| (8 intermediate revisions by one other user not shown) | |||
| Line 8: | Line 8: | ||
-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | -->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!-- | ||
Measured name size ( | Measured name size (cqw) and stable per-item texture variety. | ||
-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | -->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!-- | ||
-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!-- | -->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!-- | ||
| Line 21: | Line 21: | ||
-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!-- | ||
lowGraphics=true is | lowGraphics=true is for callers that place dozens of cards on one page (the | ||
card navboxes). It swaps the paper texture from the normal-mode multiply, | |||
which blends two images and so is re-rasterised every scrolled frame, to a | |||
transparent-paper overlay that is a single cacheable image. On the profiled | |||
navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and | |||
roughly doubled the frame rate. The wear and icon masks are clips of a | |||
single image, not blends, so they cache once rasterised and stay at full | |||
detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and | |||
keyed off the same per-item texture-vN class, so a card keeps its paper | |||
across both modes. | |||
-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!-- | |||
-->{{#vardefine: | |||
Links. | Links. | ||
| Line 50: | Line 38: | ||
-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | -->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!-- | ||
--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics | --><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;"> | ||
<div class="itembox-background"> | <div class="itembox-background"> | ||
<div class="itembox-card"> | <div class="itembox-card"> | ||
| Line 62: | Line 50: | ||
<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div> | <div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div> | ||
</div> | </div> | ||
<div class="itembox-name-area"> | <!-- container-type is inline because TemplateStyles strips it; the name's cqw size measures against this box. --> | ||
<p class="itembox-name" style="font-size:{{#var:fontSize}} | <div class="itembox-name-area" style="container-type: inline-size;"> | ||
<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p> | |||
</div> | </div> | ||
<div class="itembox-wear"></div> | <div class="itembox-wear"></div> | ||