Use upstream pulsating dot

Bug: T226719
Depends-On: Ibd035ea48b7d0316a7627a91623ff6116ccbae31
Change-Id: Iedf88e9c5ac8efa809ccb25f2081eff9946da395

extension.json

@@ -1580,6 +1580,7 @@
 				"mediawiki.util",
 				"mediawiki.jqueryMsg",
 				"mediawiki.storage",
+				"mediawiki.pulsatingdot",
 				"jquery.cookie",
 				"mediawiki.notify",
 				"mediawiki.skinning.content.parsoid",

modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css

@@ -9,42 +9,15 @@
 	cursor: pointer;
 }
 
-.ve-ui-pulsatingDot {
+.ve-ui-educationPopup > .mw-pulsating-dot {
 	position: absolute;
 	bottom: 0;
 	left: 50%;
 	z-index: 1;
 }
 
-.ve-ui-pulsatingDot:before,
-.ve-ui-pulsatingDot:after {
-	content: '';
-	display: block;
-	position: absolute;
-	border-radius: 50%;
-	background-color: #36c;
-}
-
-.ve-ui-pulsatingDot:before {
-	width: 36px;
-	height: 36px;
-	top: -18px;
-	left: -18px;
-	opacity: 0;
-	-webkit-animation: pulse 3s ease-out;
-	-moz-animation: pulse 3s ease-out;
-	animation: pulse 3s ease-out;
-	-webkit-animation-iteration-count: infinite;
-	-moz-animation-iteration-count: infinite;
-	animation-iteration-count: infinite;
-}
-
-.ve-ui-pulsatingDot:after {
-	/* Use whole pixel values to improve rendering (T214203) */
-	width: 12px;
-	height: 12px;
-	top: -6px;
-	left: -6px;
+.ve-ui-educationPopup.oo-ui-widget-disabled > .mw-pulsating-dot {
+	display: none;
 }
 
 .ve-ui-educationPopup-shield {
@@ -55,10 +28,6 @@
 	left: 0;
 }
 
-.oo-ui-widget-disabled .ve-ui-pulsatingDot {
-	display: none;
-}
-
 .ve-ui-educationPopup-dismiss {
 	margin-top: 0.5em;
 }
@@ -79,84 +48,3 @@
 .ve-ui-educationPopup .oo-ui-popupWidget-body p {
 	line-height: 1.2em;
 }
-
-@-webkit-keyframes pulse {
-	0% {
-		transform: scale( 0 );
-		opacity: 0;
-	}
-
-	25% {
-		transform: scale( 0 );
-		opacity: 0.1;
-	}
-
-	50% {
-		transform: scale( 0.1 );
-		opacity: 0.3;
-	}
-
-	75% {
-		transform: scale( 0.5 );
-		opacity: 0.5;
-	}
-
-	100% {
-		transform: scale( 1 );
-		opacity: 0;
-	}
-}
-
-@-moz-keyframes pulse {
-	0% {
-		transform: scale( 0 );
-		opacity: 0;
-	}
-
-	25% {
-		transform: scale( 0 );
-		opacity: 0.1;
-	}
-
-	50% {
-		transform: scale( 0.1 );
-		opacity: 0.3;
-	}
-
-	75% {
-		transform: scale( 0.5 );
-		opacity: 0.5;
-	}
-
-	100% {
-		transform: scale( 1 );
-		opacity: 0;
-	}
-}
-
-@keyframes pulse {
-	0% {
-		transform: scale( 0 );
-		opacity: 0;
-	}
-
-	25% {
-		transform: scale( 0 );
-		opacity: 0.1;
-	}
-
-	50% {
-		transform: scale( 0.1 );
-		opacity: 0.3;
-	}
-
-	75% {
-		transform: scale( 0.5 );
-		opacity: 0.5;
-	}
-
-	100% {
-		transform: scale( 1 );
-		opacity: 0;
-	}
-}

modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js

@@ -63,7 +63,7 @@ ve.ui.MWEducationPopupTool = function VeUiMwEducationPopupTool( config ) {
 	} );
 
 	this.shownEducationPopup = false;
-	this.$pulsatingDot = $( '<div>' ).addClass( 've-ui-pulsatingDot' );
+	this.$pulsatingDot = $( '<div>' ).addClass( 'mw-pulsating-dot' );
 	$shield = $( '<div>' ).addClass( 've-ui-educationPopup-shield' );
 	this.$element
 		.addClass( 've-ui-educationPopup' )