Fix directionality of ULS CLL and languageselect callouts

when appearing on right side of screen

Languageselect was mostly fixed in 354378, but I forgot the
settings ones, so the triangle just disappears when
switching dialogs currently. This follows up on that and
properly fixes it.

Sidebar callouts now appear toward content regardless of
where they're appearing from, or the language
directionality. Triangles are now consistently alligned to
the top of the callout (same position in languageselect and
compact language links) to avoid issues with it appearing
over a scrollbar.

Sideways callout triangles (carets) are consolidated into a
single rendering approach and mixin across compact language
links and toolbox language selector.

Bug: T161586
Change-Id: I7717e26525ac527ede486796f49083ed40ee7d4f

resources/css/ext.uls.mixins.less

@@ -0,0 +1,42 @@
+// Generate a caret by embedding in the callout.
+// Expects callout to have either selector-right or selecter-left class on it to determine directionality.
+.caret() {
+	&:before,
+	&:after {
+		border-top: 10px solid transparent;
+		border-bottom: 10px solid transparent;
+		display: inline-block;
+		/* 17px aligns nicely with the size of the search row in language selection */
+		top: 17px;
+		position: absolute;
+		content: '';
+	}
+	&.selector-right {
+		&:before {
+			/* @noflip */
+			border-left: 10px solid #c9c9c9;
+			/* @noflip */
+			right: -11px;
+		}
+		&:after {
+			/* @noflip */
+			border-left: 10px solid #fcfcfc;
+			/* @noflip */
+			right: -10px;
+		}
+	}
+	&.selector-left {
+		&:before {
+			/* @noflip */
+			border-right: 10px solid #c9c9c9;
+			/* @noflip */
+			left: -11px;
+		}
+		&:after {
+			/* @noflip */
+			border-right: 10px solid #fcfcfc;
+			/* @noflip */
+			left: -10px;
+		}
+	}
+}