DevTools: extract modules (with extensions)

third_party/WebKit/Source/devtools/front_end/components/FilmStripView.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 Components.FilmStripView = class extends UI.HBox {
   constructor() {
     super(true);
-    this.registerRequiredCSS('components_lazy/filmStripView.css');
+    this.registerRequiredCSS('components/filmStripView.css');
     this.contentElement.classList.add('film-strip-view');
     this._statusLabel = this.contentElement.createChild('div', 'label');
     this.reset();
     this.setMode(Components.FilmStripView.Modes.TimeBased);
   }
 
   /**
    * @param {!Element} imageElement
    * @param {?string} data
    */
   static _setImageData(imageElement, data) {
     if (data)
       imageElement.src = 'data:image/jpg;base64,' + data;
   }
 
   /**
    * @param {string} mode
    */
   setMode(mode) {
     this._mode = mode;
     this.contentElement.classList.toggle('time-based', mode === Components.FilmStripView.Modes.TimeBased);
     this.update();
   }
 
   /**
-   * @param {!Components.FilmStripModel} filmStripModel
+   * @param {!SDK.FilmStripModel} filmStripModel
    * @param {number} zeroTime
    * @param {number} spanTime
    */
   setModel(filmStripModel, zeroTime, spanTime) {
     this._model = filmStripModel;
     this._zeroTime = zeroTime;
     this._spanTime = spanTime;
     var frames = filmStripModel.frames();
     if (!frames.length) {
       this.reset();
       return;
     }
     this.update();
   }
 
   /**
-   * @param {!Components.FilmStripModel.Frame} frame
+   * @param {!SDK.FilmStripModel.Frame} frame
    * @return {!Promise<!Element>}
    */
   createFrameElement(frame) {
     var time = frame.timestamp;
     var element = createElementWithClass('div', 'frame');
     element.title = Common.UIString('Doubleclick to zoom image. Click to view preceding requests.');
     element.createChild('div', 'time').textContent = Number.millisToString(time - this._zeroTime);
     var imageElement = element.createChild('div', 'thumbnail').createChild('img');
     element.addEventListener(
         'mousedown', this._onMouseEvent.bind(this, Components.FilmStripView.Events.FrameSelected, time), false);
     element.addEventListener(
         'mouseenter', this._onMouseEvent.bind(this, Components.FilmStripView.Events.FrameEnter, time), false);
     element.addEventListener(
         'mouseout', this._onMouseEvent.bind(this, Components.FilmStripView.Events.FrameExit, time), false);
     element.addEventListener('dblclick', this._onDoubleClick.bind(this, frame), false);
 
     return frame.imageDataPromise()
         .then(Components.FilmStripView._setImageData.bind(null, imageElement))
         .then(returnElement);
     /**
      * @return {!Element}
      */
     function returnElement() {
       return element;
     }
   }
 
   /**
    * @param {number} time
-   * @return {!Components.FilmStripModel.Frame}
+   * @return {!SDK.FilmStripModel.Frame}
    */
   frameByTime(time) {
     /**
      * @param {number} time
-     * @param {!Components.FilmStripModel.Frame} frame
+     * @param {!SDK.FilmStripModel.Frame} frame
      * @return {number}
      */
     function comparator(time, frame) {
       return time - frame.timestamp;
     }
     // Using the first frame to fill the interval between recording start
     // and a moment the frame is taken.
     var frames = this._model.frames();
     var index = Math.max(frames.upperBound(time, comparator) - 1, 0);
     return frames[index];
@@ skipping 63 matching lines @@
 
   /**
    * @param {string} eventName
    * @param {number} timestamp
    */
   _onMouseEvent(eventName, timestamp) {
     this.dispatchEventToListeners(eventName, timestamp);
   }
 
   /**
-   * @param {!Components.FilmStripModel.Frame} filmStripFrame
+   * @param {!SDK.FilmStripModel.Frame} filmStripFrame
    */
   _onDoubleClick(filmStripFrame) {
     new Components.FilmStripView.Dialog(filmStripFrame, this._zeroTime);
   }
 
   reset() {
     this._zeroTime = 0;
     this.contentElement.removeChildren();
     this.contentElement.appendChild(this._statusLabel);
   }
@@ skipping 17 matching lines @@
   TimeBased: 'TimeBased',
   FrameBased: 'FrameBased'
 };
 
 
 /**
  * @unrestricted
  */
 Components.FilmStripView.Dialog = class extends UI.VBox {
   /**
-   * @param {!Components.FilmStripModel.Frame} filmStripFrame
+   * @param {!SDK.FilmStripModel.Frame} filmStripFrame
    * @param {number=} zeroTime
    */
   constructor(filmStripFrame, zeroTime) {
     super(true);
-    this.registerRequiredCSS('components_lazy/filmStripDialog.css');
+    this.registerRequiredCSS('components/filmStripDialog.css');
     this.contentElement.classList.add('filmstrip-dialog');
     this.contentElement.tabIndex = 0;
 
     this._frames = filmStripFrame.model().frames();
     this._index = filmStripFrame.index;
     this._zeroTime = zeroTime || filmStripFrame.model().zeroTime();
 
     this._imageElement = this.contentElement.createChild('img');
     var footerElement = this.contentElement.createChild('div', 'filmstrip-dialog-footer');
     footerElement.createChild('div', 'flex-auto');
@@ skipping 76 matching lines @@
    * @return {!Promise<undefined>}
    */
   _render() {
     var frame = this._frames[this._index];
     this._timeLabel.textContent = Number.millisToString(frame.timestamp - this._zeroTime);
     return frame.imageDataPromise()
         .then(Components.FilmStripView._setImageData.bind(null, this._imageElement))
         .then(this._resize.bind(this));
   }
 };