refactor(core): clean up inner header implementation

This is a part of the header refactor
* Add hover and active state for title button
* Clean up DOM structure
* Clean up unnessecary styles
* Clean up HTML class names

resources/skins.citizen.preferences/skins.citizen.preferences.js

@@ -312,7 +312,7 @@ function storageAvailable( type ) {
 function initPref( window ) {
 	if ( storageAvailable( 'localStorage' ) ) {
 		if ( typeof window.mw !== 'undefined' ) {
-			const headerTools = document.getElementById( 'mw-header-tools' ),
+			const headerTools = document.querySelector( '.citizen-header__end' ),
 				container = document.createElement( 'div' ),
 				button = document.createElement( 'button' );
 

resources/skins.citizen.styles/Header.less

@@ -1,9 +1,6 @@
 .citizen-header {
 	--margin-header-item: 8px;
-	--margin-header-item--corner: ~'calc( var( --padding-page ) / 2 )';
 	--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';
-	--width-button-base: ~'calc(var(--size-icon) + var(--padding-page))';
-	--width-button-corner: ~'calc(var(--size-icon) + var(--padding-page) * 2)';
 
 	--size-button--header: ~'calc( var( --height-header ) - 1rem )';
 	--size-icon--header: 1.25rem;
@@ -21,6 +18,7 @@
 
 	&:before {
 		position: absolute;
+		z-index: -1;
 		top: 0;
 		right: 0;
 		bottom: ~'calc( var( --height-header ) / -2 )';
@@ -66,6 +64,68 @@
 			background-color: var( --background-color-quiet--active );
 		}
 	}
+
+	&__inner {
+		display: flex;
+		min-width: 0;
+		flex-grow: 1;
+		justify-content: space-between;
+	}
+
+	&__start,
+	&__end {
+		display: flex;
+		align-items: center;
+	}
+
+	&__start {
+		min-width: 0;
+	}
+
+	&__title {
+		display: flex;
+		min-width: 0;
+		height: var( --size-button--header );
+		align-items: center;
+		padding: 0 0.5rem;
+		border-radius: var( --border-radius--small );
+		color: var( --color-base--emphasized );
+		font-weight: 500;
+		white-space: nowrap;
+
+		> div {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&:hover {
+			background-color: var( --background-color-quiet--hover );
+			color: var( --color-base--emphasized );
+		}
+
+		&:active {
+			background-color: var( --background-color-quiet--active );
+			color: var( --color-base--emphasized );
+		}
+
+		&--page {
+			display: none;
+		}
+	}
+}
+
+.skin-citizen--titlehidden {
+	.citizen-header {
+		&__title {
+			&--site {
+				display: none;
+			}
+
+			&--page {
+				display: grid;
+			}
+		}
+	}
 }
 
 .mw-header {
@@ -96,10 +156,6 @@
 	}
 }
 
-#mw-header-tools {
-	display: inherit;
-}
-
 // User icon bar
 #p-personal-extra {
 	ul {

resources/skins.citizen.styles/Search.less

@@ -78,7 +78,7 @@
 	}
 
 	&:focus-within {
-		.citizen-search__icon {
+		.citizen-search__icon:after {
 			opacity: var( --opacity-icon-base--hover );
 		}
 	}

templates/Header.mustache

@@ -1,17 +1,19 @@
  {{!
 	string msg-citizen-drawer-toggle The label used by the drawer button.
+	string msg-citizen-jumptotop Jump to top title text
 }}
 <header class="mw-header citizen-header">
 	{{>Header__checkboxHack}}
 	{{#data-drawer}}{{>Drawer}}{{/data-drawer}}
-	{{! .citizen-header__inner }}
-	<div id="mw-header-siteinfo">
-		<a id="header-sitetitle" class="mw-wiki-title" {{{html-mainpage-attributes}}}>{{>Wordmark}}</a>
-		<a id="header-pagetitle" href="#top" title="{{msg-citizen-jumptotop}}">{{{html-title}}}</a>
+	<div class="citizen-header__inner">
+		<div class="citizen-header__start">
+			<a class="citizen-header__title citizen-header__title--site" {{{html-mainpage-attributes}}}>{{>Wordmark}}</a>
+			<a class="citizen-header__title citizen-header__title--page" href="#top" title="{{msg-citizen-jumptotop}}"><div>{{{html-title}}}</div></a>
 		</div>
-	<div id="mw-header-tools">
+		<div class="citizen-header__end">
 			{{#data-extratools}}{{>Menu}}{{/data-extratools}}
 			{{#data-personal-menu}}{{>PersonalMenu}}{{/data-personal-menu}}
 		</div>
+	</div>
 	{{#data-search-box}}{{>Search}}{{/data-search-box}}
 </header>

templates/Wordmark.mustache

@@ -7,6 +7,6 @@
 	src="{{src}}" width="{{width}}" height="{{height}}">
 {{/wordmark}}
 {{^wordmark}}
-<span class="mw-logo-wordmark">{{msg-sitetitle}}</span>
+<div class="mw-logo-wordmark">{{msg-sitetitle}}</div>
 {{/wordmark}}
 {{/data-logos}}