Template:ItemBox: Difference between revisions

(17 intermediate revisions by one other user not shown)

Line 8:

-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--

Measured name size (em) and stable per-item texture variety.

Measured name size (cqw) and stable per-item texture variety.

-->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--

-->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--

Line 21:

-->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--

lowGraphics=true is ~~the setting~~ for callers that place dozens of cards on

lowGraphics=true is for callers that place dozens of cards on one page (the

~~one page~~. It ~~drops~~ the paper ~~blend, which is~~ the ~~change that matters:~~

card navboxes). It swaps the paper texture from the normal-mode multiply,

~~mix-blend~~-mode ~~stops WebRender caching those regions as static tiles~~, so

which blends two images and so is re-rasterised every scrolled frame, to a

every scrolled frame re-~~rasterises and re-uploads them~~. ~~Removing it cut~~ the

transparent-paper overlay that is a single cacheable image. On the profiled

render thread's OpenGL work ~~on the profiled navbox by around 90%. It also~~

navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and

~~swaps~~ the ~~masked~~ wear ~~tint for a gradient~~ and ~~drops the~~ icon ~~mask.~~

roughly doubled the frame rate. The wear and icon masks are clips of a

~~-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-no-texture}}}}<!--~~

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

~~The same layers individually~~, ~~for testing combinations or overriding the~~

keyed off the same per-item texture-vN class, so a card keeps its paper

~~bundle above~~. ~~wearMask drops the mask from the wear tint three ways~~:

across both modes.

no - ~~tint moves behind the artwork~~, so ~~only the card stock is coloured~~

-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--

~~ramp - tint stays on top, fading in from the~~ card~~'s edges~~

~~soft - tint stays on top, uniform and lighter, with the name lifted clear~~

~~texture accepts no to drop the~~ paper ~~blend entirely, or 1, 2 or 3 to give~~

~~every card the same paper instead of one picked from the item's name~~.

-->{{#vardefine:~~lite~~|~~{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}}~~ {{#ifeq:{{{~~iconMask~~|}}}|no|itembox-~~flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3~~}}}}<!--

Links.

Line 43:

Line 38:

-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--

--><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics~~}} {{#var:lite~~}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">

--><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;">

Line 55:

Line 50:

<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</div>

</div>

<p class="itembox-name" style="font-size:{{#var:fontSize}}em;text-wrap:balance;">{{#var:displayName}}</p>

<p class="itembox-name" style="font-size:{{#var:fontSize}};text-wrap:balance;">{{#var:displayName}}</p>

</div>

Template:ItemBox: Difference between revisionsGive feedback

Vergir (talk | contribs)

@@ Line 8: / Line 8: @@
 -->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
-      Measured name size (em) and stable per-item texture variety.
+      Measured name size (cqw) and stable per-item texture variety.
 -->{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}<!--
 -->{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}<!--
@@ Line 21: / Line 21: @@
 -->{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}<!--
-      lowGraphics=true is the setting for callers that place dozens of cards on
+      lowGraphics=true is for callers that place dozens of cards on one page (the
-      one page. It drops the paper blend, which is the change that matters:
+      card navboxes). It swaps the paper texture from the normal-mode multiply,
-     mix-blend-mode stops WebRender caching those regions as static tiles, so
+      which blends two images and so is re-rasterised every scrolled frame, to a
-      every scrolled frame re-rasterises and re-uploads them. Removing it cut the
+     transparent-paper overlay that is a single cacheable image. On the profiled
-      render thread's OpenGL work on the profiled navbox by around 90%. It also
+      navbox this took the render thread's OpenGL work from ~230 ms/s to ~10 and
-      swaps the masked wear tint for a gradient and drops the icon mask.
+      roughly doubled the frame rate. The wear and icon masks are clips of a
--->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-no-texture}}}}<!--
+      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
-      The same layers individually, for testing combinations or overriding the
+      keyed off the same per-item texture-vN class, so a card keeps its paper
-      bundle above. wearMask drops the mask from the wear tint three ways:
+      across both modes.
-      no   - tint moves behind the artwork, so only the card stock is coloured
+-->{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}<!--
-     ramp - tint stays on top, fading in from the card's edges
-     soft - tint stays on top, uniform and lighter, with the name lifted clear
-     texture accepts no to drop the paper blend entirely, or 1, 2 or 3 to give
-      every card the same paper instead of one picked from the item's name.
--->{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3}}}}<!--
       Links.
@@ Line 43: / Line 38: @@
 -->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}<!--
---><div class="itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}" style="font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;">
+--><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-card">
@@ Line 55: / Line 50: @@
 				<div class="itembox-imbue-tag">{{#invoke:Lang|get_string|item_info_imbue}}</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}}em;text-wrap:balance;">{{#var:displayName}}</p>
+			<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 class="itembox-wear"></div>