fix(ui): Fix renaming of UI base class protected members

This fixes the renaming of the protected members of SettingsMenu and
RangeElement, both of which are useful to apps building custom UI
plugins.

In order for those app-level plugins to access the protected members
of the base class, they needed to be part of an external interface.
Otherwise the compiler would rename them.

Closes shaka-project#2923

Change-Id: I2edb9f1428789fac1e6c60ec6a68b20cdd249ae5

ui/externs/ui.js

@@ -233,3 +233,127 @@ shaka.extern.IUIElement.Factory = class {
    */
   create(rootElement, controls) {}
 };
+
+
+/**
+ * Interface for UI range elements.  UI range elements should inherit from the
+ * concrete base class shaka.ui.RangeElement.  The members defined in this
+ * extern's constructor are all available from the base class, and are defined
+ * here to keep the compiler from renaming them.
+ *
+ * @extends {shaka.extern.IUIElement}
+ * @interface
+ * @exportDoc
+ */
+shaka.extern.IUIRangeElement = class {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   * @param {!Array.<string>} containerClassNames
+   * @param {!Array.<string>} barClassNames
+   */
+  constructor(parent, controls, containerClassNames, barClassNames) {
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.container;
+
+    /**
+     * @protected {!HTMLInputElement}
+     * @exportDoc
+     */
+    this.bar;
+  }
+
+  /**
+   * @param {number} min
+   * @param {number} max
+   */
+  setRange(min, max) {}
+
+  /**
+   * Called when user interaction begins.
+   * To be overridden by subclasses.
+   */
+  onChangeStart() {}
+
+  /**
+   * Called when a new value is set by user interaction.
+   * To be overridden by subclasses.
+   */
+  onChange() {}
+
+  /**
+   * Called when user interaction ends.
+   * To be overridden by subclasses.
+   */
+  onChangeEnd() {}
+
+  /** @return {number} */
+  getValue() {}
+
+  /** @param {number} value */
+  setValue(value) {}
+};
+
+/**
+ * Interface for UI settings menus.  UI settings menus should inherit from the
+ * concrete base class shaka.ui.SettingsMenu.  The members defined in this
+ * extern's constructor are all available from the base class, and are defined
+ * here to keep the compiler from renaming them.
+ *
+ * @extends {shaka.extern.IUIElement}
+ * @interface
+ * @exportDoc
+ */
+shaka.extern.IUISettingsMenu = class {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   * @param {string} iconText
+   */
+  constructor(parent, controls, iconText) {
+    /**
+     * @protected {!HTMLButtonElement}
+     * @exportDoc
+     */
+    this.button;
+
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.icon;
+
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.nameSpan;
+
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.currentSelection;
+
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.menu;
+
+    /**
+     * @protected {!HTMLButtonElement}
+     * @exportDoc
+     */
+    this.backButton;
+
+    /**
+     * @protected {!HTMLElement}
+     * @exportDoc
+     */
+    this.backSpan;
+  }
+};

ui/range_element.js

@@ -22,7 +22,7 @@ goog.requireType('shaka.ui.Controls');
  * updated at the same time.  This can happen when seeking during playback or
  * when casting.
  *
- * @extends {shaka.ui.Element}
+ * @implements {shaka.extern.IUIRangeElement}
  * @export
  */
 shaka.ui.RangeElement = class extends shaka.ui.Element {
@@ -106,8 +106,8 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
   }
 
   /**
-   * @param {number} min
-   * @param {number} max
+   * @override
+   * @export
    */
   setRange(min, max) {
     this.bar.min = min;
@@ -117,27 +117,39 @@ shaka.ui.RangeElement = class extends shaka.ui.Element {
   /**
    * Called when user interaction begins.
    * To be overridden by subclasses.
+   * @override
+   * @export
    */
   onChangeStart() {}
 
   /**
    * Called when a new value is set by user interaction.
    * To be overridden by subclasses.
+   * @override
+   * @export
    */
   onChange() {}
 
   /**
    * Called when user interaction ends.
    * To be overridden by subclasses.
+   * @override
+   * @export
    */
   onChangeEnd() {}
 
-  /** @return {number} */
+  /**
+   * @override
+   * @export
+   */
   getValue() {
     return parseFloat(this.bar.value);
   }
 
-  /** @param {number} value */
+  /**
+   * @override
+   * @export
+   */
   setValue(value) {
     // The user interaction overrides any external values being pushed in.
     if (this.isChanging_) {

ui/settings_menu.js

@@ -17,6 +17,7 @@ goog.requireType('shaka.ui.Controls');
 
 /**
  * @extends {shaka.ui.Element}
+ * @implements {shaka.extern.IUISettingsMenu}
  * @export
  */
 shaka.ui.SettingsMenu = class extends shaka.ui.Element {