Make images look better, account for e82629895b38 in MW core

Prevent images from getting double borders due to slugs,
and prevent extraneous margins from piling up in captions.

Also add the ve-ce-mwBlockImageNode class which shockingly
wasn't being set (only ve-ce-mwBlockImageNode-TYPE was set).

Change-Id: I86b95aa0c0def92a9790b7cdb4b05837fb8f65e2

modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js

@@ -48,7 +48,7 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode( model, config ) {
 	this.$figure = this.$( '<figure>' )
 		.appendTo( this.$element )
 		.append( this.$a )
-		.addClass( 've-ce-mwBlockImageNode-type-' + type )
+		.addClass( 've-ce-mwBlockImageNode ve-ce-mwBlockImageNode-type-' + type )
 		// 'typeof' should appear with the proper Parsoid-generated
 		// type. The model deals with converting it
 		.attr( 'typeof', this.typeToRdfa[ type ] );

modules/ve-mw/ce/styles/nodes/ve.ce.MWBlockImageNode.css

@@ -10,3 +10,13 @@
 figure[typeof~='mw:Image'].mw-halign-center + .ve-ce-protectedNode-shield {
 	display: none;
 }
+
+/* Override border on shields for images */
+.ve-ce-mwBlockImageNode .ve-ce-protectedNode-shield {
+	border: none;
+}
+
+/* Override paragraph margins inside of captions */
+.ve-ce-mwBlockImageNode figcaption p {
+	margin: 0 !important;
+}

modules/ve-mw/ce/styles/nodes/ve.ce.MWInlineImageNode.css

@@ -9,3 +9,7 @@
 	display: inline-block;
 }
 
+/* Override border on shields for images */
+.ve-ce-mwInlineImageNode .ve-ce-protectedNode-shield {
+	border: none;
+}