text: /*
   * Copyright (C) 2015 Apple Inc. All rights reserved.
   *
   * Redistribution and use in source and binary forms, with or without
   * modification, are permitted provided that the following conditions
   * are met:
   * 1. Redistributions of source code must retain the above copyright
   *    notice, this list of conditions and the following disclaimer.
   * 2. Redistributions in binary form must reproduce the above copyright
   *    notice, this list of conditions and the following disclaimer in the
   *    documentation and/or other materials provided with the distribution.
   *
   * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
   * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
   * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
   * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
   * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
   * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
   * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
   * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
   * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
   * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
   * THE POSSIBILITY OF SUCH DAMAGE.
   */
  
  WebInspector.VisualStyleTimingEditor = class VisualStyleTimingEditor extends WebInspector.VisualStyleKeywordPicker
  {
      constructor(propertyNames, text, possibleValues, layoutReversed)
      {
          super(propertyNames, text, possibleValues, layoutReversed);
  
          this.element.classList.add("timing-editor");
  
          this._customValueOptionElement = document.createElement("option");
          this._customValueOptionElement.value = "custom";
          this._customValueOptionElement.text = WebInspector.UIString("Custom");
          this._keywordSelectElement.appendChild(this._customValueOptionElement);
  
          this._bezierSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier);
          this._bezierSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._bezierSwatchValueChanged, this);
          this.contentElement.appendChild(this._bezierSwatch.element);
      }
  
      // Protected
  
      parseValue(text)
      {
          return /(cubic-bezier\(.+\))/.exec(text);
      }
  
      get bezierValue()
      {
          let bezier = this._bezierSwatch.value;
          if (!bezier)
              return null;
  
          return bezier.toString();
      }
  
      set bezierValue(text)
      {
          let bezier = WebInspector.CubicBezier.fromString(text);
          this._bezierSwatch.value = bezier;
      }
  
      // Private
  
      _getValue()
      {
          return this._customValueOptionElement.selected ? this.bezierValue : super._getValue();
      }
  
      _setValue(value)
      {
          this.bezierValue = value;
          if (this.valueIsSupportedKeyword(value)) {
              super._setValue(value);
              this.contentElement.classList.remove("bezier-value");
              return;
          }
  
          let bezier = this.bezierValue;
          this._customValueOptionElement.selected = !!bezier;
          this.contentElement.classList.toggle("bezier-value", !!bezier);
          this.specialPropertyPlaceholderElement.hidden = !!bezier;
          if (!bezier)
              super._setValue(value);
      }
  
      _generateSynthesizedValue()
      {
          return this._customValueOptionElement.selected ? this.bezierValue : super._generateSynthesizedValue();
      }
  
      _handleKeywordChanged()
      {
          super._handleKeywordChanged();
          let customOptionSelected = this._customValueOptionElement.selected;
          this.contentElement.classList.toggle("bezier-value", !!customOptionSelected);
          this.specialPropertyPlaceholderElement.hidden = !!customOptionSelected;
          if (customOptionSelected)
              this.bezierValue = "linear";
      }
  
      _bezierSwatchValueChanged(event)
      {
          this._valueDidChange();
      }
  };
  