Make color/caret-color work when transition set on code-input element, and transitionend event be called as expected

Author: WebCoder49

code-input.css

@@ -24,10 +24,10 @@ code-input {
    to keep low precedence and thus overridability
    The variable names may change and are for internal use. */
   /* --code-input_highlight-text-color: Set by JS to be base text color of pre code element */
-  --code-input_no-override-color: inherit; /* Set by JS for very short time to get whether color has been overriden */
-  color: var(--code-input_no-override-color, inherit);
+  --code-input_no-override-color: revert; /* Set by JS for very short time to get whether color has been overriden */
+  color: var(--code-input_no-override-color, revert);
   /* --code-input_default-caret-color: Set by JS to be same as color property */
-  caret-color: var(--code-input_default-caret-color, black); /* Set by JS to be equal to color property */
+  caret-color: var(--code-input_default-caret-color, black); /* Set by JS to be equal to color property - currentColor won't work because it's lazily evaluated so gives transparent for the textarea */
   background-color: white;
 
   /* Normal inline styles */

code-input.js

@@ -556,20 +556,26 @@ var codeInput = {
          * return false.
          */
         isColorOverridenSyncIfNot() {
+            const oldTransition = this.style.transition;
+            this.style.transition = "unset";
             this.style.setProperty("--code-input_no-override-color", "rgb(0, 0, 0)");
             if(getComputedStyle(this).color == "rgb(0, 0, 0)") {
                 // May not be overriden
                 this.style.setProperty("--code-input_no-override-color", "rgb(255, 255, 255)");
                 if(getComputedStyle(this).color == "rgb(255, 255, 255)") {
                     // Definitely not overriden
                     this.style.removeProperty("--code-input_no-override-color");
+                    this.style.transition = oldTransition;
 
-                    this.style.setProperty("--code-input_highlight-text-color", getComputedStyle(this.getStyledHighlightingElement()).color);
-                    this.style.setProperty("--code-input_default-caret-color", getComputedStyle(this.getStyledHighlightingElement()).color);
+                    const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color;
+
+                    this.style.setProperty("--code-input_highlight-text-color", highlightedTextColor);
+                    this.style.setProperty("--code-input_default-caret-color", highlightedTextColor);
                     return false;
                 }
             }
             this.style.removeProperty("--code-input_no-override-color");
+            this.style.transition = oldTransition;
 
             return true;
         }
@@ -836,11 +842,20 @@ var codeInput = {
                 if(evt.propertyName == "color") {
                     this.syncColorCompletely();
                 }
+                if(evt.target == this.dialogContainerElement) {
+                    evt.stopPropagation();
+                    // Prevent bubbling because code-input
+                    // transitionend is separate
+                }
             };
-            // Not on this element so CSS transition property which must be set for
+            // Not on this element so CSS transition property does not override publicly-visible one
             this.dialogContainerElement.addEventListener("transitionend", thisColorChangeCallback);
             this.dialogContainerElement.addEventListener("-webkit-transitionend", thisColorChangeCallback);
 
+            // For when this code-input element has an externally-defined, different-duration transition
+            this.addEventListener("transitionend", thisColorChangeCallback);
+            this.addEventListener("-webkit-transitionend", thisColorChangeCallback);
+
             this.syncColorCompletely();
 
             this.classList.add("code-input_loaded");