Display the file name in metadata panel

This patch adds the file name to the metadata panel, after the license
item. The namespace prefix is included and set to a static 'File:'.

The Title class already converts underscore to spaces.

The icon is from @Pginer-WMF.

PS: This has been a frequent annoyance for me, I'm glad to be working
on this patch!

Bug: T76680
Change-Id: I7d1f4ce67a6776ac017f8afe49cb3102b267af5c

resources/mmv/ui/img/file.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 18.999999 13.999999"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata8"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs6" />
+
+<g
+   transform="translate(-503,-378)"
+   id="g3"><g
+     id="g5"><path
+       d="m 516,378 h -13 v 14 h 19 v -8 h -6 v -6 z m 4.5,12.3 0,-0.3 h -15.1 l 4.5,-5.5 0.7,-0.1 4.2,4.5 2.3,-1.5 3.4,2.9 z"
+       id="path7"
+       style="fill:#bbbbbb" /></g><polygon
+     points="521.8,382.5 517.3,382.5 517.3,378 "
+     id="polygon9"
+     style="fill:#bbbbbb" /></g></svg>

resources/mmv/ui/mmv.ui.metadataPanel.js

@@ -153,6 +153,10 @@
 		this.$licenseLi.addClass( 'empty' );
 		this.$permissionLink.hide();
 
+		this.$filename.empty();
+		this.$filenamePrefix.empty();
+		this.$filenameLi.addClass( 'empty' );
+
 		this.$username.empty();
 		this.$usernameLi.addClass( 'empty' );
 
@@ -298,6 +302,7 @@
 			.appendTo( this.$imageLinkDiv );
 
 		this.initializeLicense();
+		this.initializeFilename();
 		this.initializeUploader();
 		this.initializeDatetime();
 		this.initializeLocation();
@@ -337,6 +342,23 @@
 			} );
 	};
 
+	/**
+	 * Initializes the filename element.
+	 */
+	MPP.initializeFilename = function () {
+		this.$filenameLi = $( '<li>' )
+			.addClass( 'mw-mmv-filename-li empty' )
+			.appendTo( this.$imageLinks );
+
+		this.$filenamePrefix = $( '<span>' )
+			.addClass( 'mw-mmv-filename-prefix' )
+			.appendTo( this.$filenameLi );
+
+		this.$filename = $( '<span>' )
+			.addClass( 'mw-mmv-filename' )
+			.appendTo( this.$filenameLi );
+	};
+
 	/**
 	 * Initializes the upload date/time element.
 	 */
@@ -483,6 +505,17 @@
 		this.$datetimeLi.removeClass( 'empty' );
 	};
 
+	/**
+	 * Sets the file name in the panel.
+	 * @param {string} filename The file name to set, without prefix
+	 */
+	MPP.setFileName = function ( filename ) {
+		this.$filenamePrefix.text( 'File:' );
+		this.$filename.text( filename );
+
+		this.$filenameLi.removeClass( 'empty' );
+	};
+
 	/**
 	 * Set source and author.
 	 * @param {string} attribution Custom attribution string
@@ -716,6 +749,8 @@
 
 		this.setLicense( imageData.license, imageData.descriptionUrl );
 
+		this.setFileName( imageData.title.getMainText() );
+
 		// these handle text truncation and should be called when everything that can push text down
 		// (e.g. floated buttons) has already been laid out
 		this.setTitle( image, imageData );

resources/mmv/ui/mmv.ui.metadataPanel.less

@@ -201,6 +201,11 @@
 			background-image: url(img/pd.svg);
 		}
 
+		&.mw-mmv-filename-li:before {
+			/* @embed */
+			background-image: url(img/file.svg);
+		}
+
 		&.mw-mmv-datetime-li:before {
 			/* @embed */
 			background-image: url(img/time.svg);
@@ -229,6 +234,11 @@
 	text-align: right;
 }
 
+.mw-mmv-filename-prefix {
+	padding-right: 4px;
+	cursor: text;
+}
+
 .mw-mmv-title-para,
 .mw-mmv-credit,
 .mw-mmv-image-desc {