Link inspector fixes

ve.ce.Node.css
* Added prefixes for use of box-sizing

ve.ui.MWLinkInspector.js
* Whitespace

ve.ui.Inspector.css
* Corrected input width, always 100% wide now by using box-sizing

ve.ui.DialogButtonTool.js, ve.ui.Context.js
* Updated use of getViewsForNode

ve.ui.ViewRegistry.js
* Added inheritance-based prioritization for matching views with annotations and nodes

Bug: 47413

Change-Id: I286a28002c1691e58bbd7de04ed08cceb8b3bb07

modules/ve/ce/styles/ve.ce.Node.css

@@ -90,6 +90,8 @@ li.ve-ce-branchNode p.ve-ce-branchNode:first-child {
 	position: absolute;
 	border: solid 1px rgba(0,0,0,0.25);
 	z-index: 10000;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
 

modules/ve/ui/inspectors/ve.ui.MWLinkInspector.js

@@ -46,6 +46,7 @@ ve.ui.MWLinkInspector.static.linkTargetInputWidget = ve.ui.MWLinkTargetInputWidg
  */
 ve.ui.MWLinkInspector.prototype.getAnnotationFromTarget = function ( target ) {
 	var title;
+
 	// Figure out if this is an internal or external link
 	if ( ve.init.platform.getExternalLinkUrlProtocolsRegExp().test( target ) ) {
 		// External link

modules/ve/ui/styles/ve.ui.Inspector.css

@@ -44,7 +44,10 @@
 }
 
 .ve-ui-window-body .ve-ui-textInputWidget input {
-	width: 20em;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	width: 100%;
 }
 
 .ve-ui-window-body form input.ve-ui-linkInspector-location {

modules/ve/ui/tools/ve.ui.DialogButtonTool.js

@@ -59,8 +59,7 @@ ve.ui.DialogButtonTool.prototype.onClick = function () {
 ve.ui.DialogButtonTool.prototype.onUpdateState = function ( nodes ) {
 	if ( nodes.length ) {
 		this.setActive(
-			ve.ui.viewRegistry.getViewsForNode( nodes[0] )
-				.indexOf( this.constructor.static.dialog ) !== -1
+			ve.ui.viewRegistry.getViewForNode( nodes[0] ) === this.constructor.static.dialog
 		);
 	}
 };

modules/ve/ui/ve.ui.Context.js

@@ -189,7 +189,7 @@ ve.ui.Context.prototype.destroy = function () {
  * @chainable
  */
 ve.ui.Context.prototype.update = function () {
-	var i, nodes, views,
+	var i, nodes, views, view,
 		fragment = this.surface.getModel().getFragment( null, false ),
 		selection = fragment.getRange(),
 		inspector = this.inspectors.getCurrent();
@@ -208,7 +208,10 @@ ve.ui.Context.prototype.update = function () {
 			}
 		}
 		if ( nodes.length === 1 ) {
-			views = views.concat( ve.ui.viewRegistry.getViewsForNode( nodes[0].node ) );
+			view = ve.ui.viewRegistry.getViewForNode( nodes[0].node );
+			if ( view ) {
+				views.push( view );
+			}
 		}
 		for ( i = 0; i < views.length; i++ ) {
 			if ( !ve.ui.toolFactory.lookup( views[i] ) ) {

modules/ve/ui/ve.ui.ViewRegistry.js

@@ -39,6 +39,13 @@ ve.ui.ViewRegistry.prototype.isViewRelatedToModel = function ( view, model ) {
 /**
  * Get a list of views from a set of annotations.
  *
+ * The most specific view will be chosen based on inheritance - mostly. The order of being added
+ * also matters if the candidate classes aren't all in the same inheritance chain, and since object
+ * properties aren't necessarily ordered it's not predictable what the effect of ordering will be.
+ *
+ * TODO: Add tracking of order of registration using an array and prioritize the most recently
+ * registered candidate.
+ *
  * @method
  * @param {ve.dm.AnnotationSet} annotations Annotations to be inspected
  * @returns {string[]} Symbolic names of views that can be used to inspect annotations
@@ -48,42 +55,56 @@ ve.ui.ViewRegistry.prototype.getViewsForAnnotations = function ( annotations ) {
 		return [];
 	}
 
-	var i, len, annotation, name, view,
+	var i, len, annotation, name, view, candidateView, candidateViewName,
 		arr = annotations.get(),
 		matches = [];
 
 	for ( i = 0, len = arr.length; i < len; i++ ) {
 		annotation = arr[i];
+		candidateView = null;
 		for ( name in this.registry ) {
 			view = this.registry[name];
 			if ( this.isViewRelatedToModel( view, annotation ) ) {
-				matches.push( name );
-				break;
+				if ( !candidateView || view.prototype instanceof candidateView ) {
+					candidateView = view;
+					candidateViewName = name;
+				}
 			}
 		}
+		if ( candidateView ) {
+			matches.push( candidateViewName );
+		}
 	}
 	return matches;
 };
 
 /**
- * Get a list of views for a node.
+ * Get a view for a node.
+ *
+ * The most specific view will be chosen based on inheritance - mostly. The order of being added
+ * also matters if the candidate classes aren't all in the same inheritance chain, and since object
+ * properties aren't necessarily ordered it's not predictable what the effect of ordering will be.
+ *
+ * TODO: Add tracking of order of registration using an array and prioritize the most recently
+ * registered candidate.
  *
  * @method
  * @param {ve.dm.Node} node Node to be edited
- * @returns {string[]} Symbolic names of views that can be used to edit node
+ * @returns {string|undefined} Symbolic name of view that can be used to edit node
  */
-ve.ui.ViewRegistry.prototype.getViewsForNode = function ( node ) {
-	var name, view,
-		matches = [];
+ve.ui.ViewRegistry.prototype.getViewForNode = function ( node ) {
+	var name, view, candidateView, candidateViewName;
 
 	for ( name in this.registry ) {
 		view = this.registry[name];
 		if ( this.isViewRelatedToModel( view, node ) ) {
-			matches.push( name );
-			break;
+			if ( !candidateView || view.prototype instanceof candidateView ) {
+				candidateView = view;
+				candidateViewName = name;
+			}
 		}
 	}
-	return matches;
+	return candidateViewName;
 };
 
 /* Initialization */