Docs: Fixed properties layout. (#32156)

* Docs: Fixed properties layout.

* Design tweaks.

* Fixed #WebGLRenderer.~Options link.

* Ignore empty returns.

* Design tweaks.

* Clean up,

utils/docs/template/publish.js

@@ -113,7 +113,7 @@ function addParamAttributes( params ) {
 
 		if ( param.type && param.type.names && param.type.names.length ) {
 
-			const escapedTypes = param.type.names.map( name => htmlsafe( name ) );
+			const escapedTypes = param.type.names.map( name => linkto( name, htmlsafe( name ) ) );
 			itemName += ' : <span class="param-type">' + escapedTypes.join( ' | ' ) + '</span>';
 
 		}

utils/docs/template/static/scripts/page.js

@@ -30,10 +30,16 @@ if ( typeof hljs !== 'undefined' ) {
 
 	document.addEventListener( 'click', function ( event ) {
 
-		const target = event.target.closest( 'a[href^="#"]' );
+		const target = event.target.closest( 'a' );
 
 		if ( ! target || ! target.hash ) return;
 
+		// Check if it's a same-page link (either starting with # or pointing to current page)
+		const href = target.getAttribute( 'href' );
+		const isSamePageLink = href.startsWith( '#' ) || ( target.hostname === window.location.hostname && target.pathname === window.location.pathname );
+
+		if ( ! isSamePageLink ) return;
+
 		const hash = target.hash.substring( 1 );
 		const newHash = ( hash !== className ) ? `#${className}.${hash}` : `#${hash}`;
 		const targetWindow = ( window.parent !== window ) ? window.parent : window;

utils/docs/template/static/styles/page.css

@@ -204,6 +204,16 @@ body table td {
 	border-bottom: var(--border-style);
 }
 
+body table table th,
+body table table td {
+	border-bottom: none;
+}
+
+body table tr:last-child th,
+body table tr:last-child td {
+	border-bottom: none;
+}
+
 body table th {
 	text-decoration: none;
 }
@@ -213,23 +223,23 @@ body table td:first-child {
 }
 
 body table code {
-	padding: 0px;
 	margin: 0px;
 	width: auto;
 }
 
-body table.params td.name {
-	min-width: 150px;
-	white-space: nowrap;
-}
-
 body table.props td.name,
-body table.props td.type {
-	white-space: nowrap;
+body table.params td.name {
+	width: 150px;
+	word-break: keep-all;
 }
 
 body table p {
 	margin: 0;
+	margin-top: 10px;
+}
+
+body table td p:first-child {
+	margin-top: 0;
 }
 
 body strong {

utils/docs/template/tmpl/details.tmpl

@@ -13,7 +13,6 @@
 		var properties = data.properties;
 		if (properties && properties.length && properties.forEach && !data.hideconstructor) {
 	?>
-						<h5 class="subsection-title">Properties:</h5>
 						<?js= this.partial('properties.tmpl', data) ?>
 	<?js } ?>
 	<?js if (data.overrides || data.deprecated || (data.see && see.length)) { ?>

utils/docs/template/tmpl/members.tmpl

@@ -9,18 +9,10 @@
 					<?js } ?>
 					<?js if (data.description) { ?>
 					<div class="description">
-						<?js
-							var desc = data.description;
-							if (typeof data.defaultvalue !== 'undefined') {
-								var defaultText = '<br/>Default is <code>' + self.htmlsafe(data.defaultvalue) + '</code>.';
-								// If description ends with </p>, insert default before closing tag
-								if (desc.trim().endsWith('</p>')) {
-									desc = desc.trim().slice(0, -4) + defaultText + '</p>';
-								} else {
-									desc = desc + defaultText;
-								}
-							}
-						?><?js= desc ?>
+						<?js= data.description ?>
+						<?js if (typeof data.defaultvalue !== 'undefined') { ?>
+						<p>Default is <code><?js= self.htmlsafe(data.defaultvalue) ?></code>.</p>
+						<?js } ?>
 					</div>
 					<?js } ?>
 					<?js= this.partial('details.tmpl', data) ?>

utils/docs/template/tmpl/method.tmpl

@@ -41,7 +41,7 @@
 							<?js }); ?>
 						</ul>
 						<?js } ?>
-						<?js if (data.returns && returns.length) { ?>
+						<?js if (data.returns && returns.length && returns.some(function(r) { return r.description; })) { ?>
 							<?js if (returns.length > 1) { ?>
 						<h5>Returns:</h5>
 						<ul>

utils/docs/template/tmpl/params.tmpl

@@ -55,23 +55,19 @@
 								?>
 								<tr>
 									<?js if (params.hasName) {?>
-									<td class="name"><code><?js= param.name ?></code></td>
+									<td class="name">
+										<strong><?js= param.name ?></strong>
+									</td>
 									<?js } ?>
-									<td class="description last"><?js
-										var desc = param.description;
-										if (typeof param.defaultvalue !== 'undefined') {
-											var defaultText = '<br/>Default is <code>' + self.htmlsafe(param.defaultvalue) + '</code>.';
-											// If description ends with </p>, insert default before closing tag
-											if (desc.trim().endsWith('</p>')) {
-												desc = desc.trim().slice(0, -4) + defaultText + '</p>';
-											} else {
-												desc = desc + defaultText;
-											}
-										}
-									?><?js= desc ?><?js if (param.subparams) { ?>
-										<h6>Properties</h6>
+									<td class="description last">
+										<?js= param.description ?>
+										<?js if (typeof param.defaultvalue !== 'undefined') { ?>
+										<p>Default is <code><?js= self.htmlsafe(param.defaultvalue) ?></code>.</p>
+										<?js } ?>
+										<?js if (param.subparams) { ?>
 										<?js= self.partial('params.tmpl', param.subparams) ?>
-									<?js } ?></td>
+										<?js } ?>
+									</td>
 								</tr>
 								<?js }); ?>
 							</tbody>

utils/docs/template/tmpl/properties.tmpl

@@ -40,26 +40,6 @@
 ?>
 
 <table class="props">
-	<thead>
-	<tr>
-		<?js if (props.hasName) {?>
-		<th>Name</th>
-		<?js } ?>
-
-		<th>Type</th>
-
-		<?js if (props.hasAttributes) {?>
-		<th>Attributes</th>
-		<?js } ?>
-
-		<?js if (props.hasDefault) {?>
-		<th>Default</th>
-		<?js } ?>
-
-		<th class="last">Description</th>
-	</tr>
-	</thead>
-
 	<tbody>
 	<?js
 		var self = this;
@@ -69,38 +49,30 @@
 
 		<tr>
 			<?js if (props.hasName) {?>
-				<td class="name"><code><?js= prop.name ?></code></td>
-			<?js } ?>
-
-			<td class="type">
-			<?js if (prop.type && prop.type.names) {?>
-				<?js= self.partial('type.tmpl', prop.type.names) ?>
-			<?js } ?>
-			</td>
+				<td class="name">
+					<strong><?js= prop.name ?></strong>
 
-			<?js if (props.hasAttributes) {?>
-				<td class="attributes">
-				<?js if (prop.optional) { ?>
-					&lt;optional><br>
-				<?js } ?>
+					<?js if (prop.type && prop.type.names) {?>
+						<br><?js= self.partial('type.tmpl', prop.type.names) ?>
+					<?js } ?>
 
-				<?js if (prop.nullable) { ?>
-					&lt;nullable><br>
-				<?js } ?>
 				</td>
 			<?js } ?>
 
-			<?js if (props.hasDefault) {?>
-				<td class="default">
-				<?js if (typeof prop.defaultvalue !== 'undefined') { ?>
-					<?js= self.htmlsafe(prop.defaultvalue) ?>
+			<td class="description last">
+				<?js= prop.description ?>
+
+				<?js if (props.hasDefault) {?>
+					<?js if (typeof prop.defaultvalue !== 'undefined') { ?>
+						<p>Default is <code><?js= self.htmlsafe(prop.defaultvalue) ?></code>.</p>
+					<?js } ?>
 				<?js } ?>
-				</td>
-			<?js } ?>
 
-			<td class="description last"><?js= prop.description ?><?js if (prop.subprops) { ?>
-				<h6>Properties</h6><?js= self.partial('properties.tmpl', prop) ?>
-			<?js } ?></td>
+				<?js if (prop.subprops) { ?>
+					<h6>Properties</h6>
+					<?js= self.partial('properties.tmpl', prop) ?>
+				<?js } ?>
+			</td>
 		</tr>
 
 	<?js }); ?>