react-native-devtools-frontend/front_end/emulation/MediaQueryInspector.js

// Copyright 2014 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.
/**
 * @implements {SDK.SDKModelObserver<!SDK.CSSModel>}
 * @unrestricted
 */
Emulation.MediaQueryInspector = class extends UI.Widget {
  /**
   * @param {function():number} getWidthCallback
   * @param {function(number)} setWidthCallback
   */
  constructor(getWidthCallback, setWidthCallback) {
    super(true);
    this.registerRequiredCSS('emulation/mediaQueryInspector.css');
    this.contentElement.classList.add('media-inspector-view');
    this.contentElement.addEventListener('click', this._onMediaQueryClicked.bind(this), false);
    this.contentElement.addEventListener('contextmenu', this._onContextMenu.bind(this), false);
    this._mediaThrottler = new Common.Throttler(0);

    this._getWidthCallback = getWidthCallback;
    this._setWidthCallback = setWidthCallback;
    this._scale = 1;

    SDK.targetManager.observeModels(SDK.CSSModel, this);
    UI.zoomManager.addEventListener(UI.ZoomManager.Events.ZoomChanged, this._renderMediaQueries.bind(this), this);
  }

  /**
   * @override
   * @param {!SDK.CSSModel} cssModel
   */
  modelAdded(cssModel) {
    // FIXME: adapt this to multiple targets.
    if (this._cssModel)
      return;
    this._cssModel = cssModel;
    this._cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.addEventListener(
        SDK.CSSModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
  }

  /**
   * @override
   * @param {!SDK.CSSModel} cssModel
   */
  modelRemoved(cssModel) {
    if (cssModel !== this._cssModel)
      return;
    this._cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetAdded, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetRemoved, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged, this._scheduleMediaQueriesUpdate, this);
    this._cssModel.removeEventListener(
        SDK.CSSModel.Events.MediaQueryResultChanged, this._scheduleMediaQueriesUpdate, this);
    delete this._cssModel;
  }

  /**
   * @param {number} scale
   */
  setAxisTransform(scale) {
    if (Math.abs(this._scale - scale) < 1e-8)
      return;
    this._scale = scale;
    this._renderMediaQueries();
  }

  /**
   * @param {!Event} event
   */
  _onMediaQueryClicked(event) {
    const mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass('media-inspector-bar');
    if (!mediaQueryMarker)
      return;

    const model = mediaQueryMarker._model;
    if (model.section() === Emulation.MediaQueryInspector.Section.Max) {
      this._setWidthCallback(model.maxWidthExpression().computedLength());
      return;
    }
    if (model.section() === Emulation.MediaQueryInspector.Section.Min) {
      this._setWidthCallback(model.minWidthExpression().computedLength());
      return;
    }
    const currentWidth = this._getWidthCallback();
    if (currentWidth !== model.minWidthExpression().computedLength())
      this._setWidthCallback(model.minWidthExpression().computedLength());
    else
      this._setWidthCallback(model.maxWidthExpression().computedLength());
  }

  /**
   * @param {!Event} event
   */
  _onContextMenu(event) {
    if (!this._cssModel || !this._cssModel.isEnabled())
      return;

    const mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass('media-inspector-bar');
    if (!mediaQueryMarker)
      return;

    const locations = mediaQueryMarker._locations;
    const uiLocations = new Map();
    for (let i = 0; i < locations.length; ++i) {
      const uiLocation = Bindings.cssWorkspaceBinding.rawLocationToUILocation(locations[i]);
      if (!uiLocation)
        continue;
      const descriptor = String.sprintf(
          '%s:%d:%d', uiLocation.uiSourceCode.url(), uiLocation.lineNumber + 1, uiLocation.columnNumber + 1);
      uiLocations.set(descriptor, uiLocation);
    }

    const contextMenuItems = uiLocations.keysArray().sort();
    const contextMenu = new UI.ContextMenu(event);
    const subMenuItem = contextMenu.defaultSection().appendSubMenuItem(Common.UIString('Reveal in source code'));
    for (let i = 0; i < contextMenuItems.length; ++i) {
      const title = contextMenuItems[i];
      subMenuItem.defaultSection().appendItem(
          title, this._revealSourceLocation.bind(this, /** @type {!Workspace.UILocation} */ (uiLocations.get(title))));
    }
    contextMenu.show();
  }

  /**
   * @param {!Workspace.UILocation} location
   */
  _revealSourceLocation(location) {
    Common.Revealer.reveal(location);
  }

  _scheduleMediaQueriesUpdate() {
    if (!this.isShowing())
      return;
    this._mediaThrottler.schedule(this._refetchMediaQueries.bind(this));
  }

  _refetchMediaQueries() {
    if (!this.isShowing() || !this._cssModel)
      return Promise.resolve();

    return this._cssModel.mediaQueriesPromise().then(this._rebuildMediaQueries.bind(this));
  }

  /**
   * @param {!Array.<!Emulation.MediaQueryInspector.MediaQueryUIModel>} models
   * @return {!Array.<!Emulation.MediaQueryInspector.MediaQueryUIModel>}
   */
  _squashAdjacentEqual(models) {
    const filtered = [];
    for (let i = 0; i < models.length; ++i) {
      const last = filtered.peekLast();
      if (!last || !last.equals(models[i]))
        filtered.push(models[i]);
    }
    return filtered;
  }

  /**
   * @param {!Array.<!SDK.CSSMedia>} cssMedias
   */
  _rebuildMediaQueries(cssMedias) {
    let queryModels = [];
    for (let i = 0; i < cssMedias.length; ++i) {
      const cssMedia = cssMedias[i];
      if (!cssMedia.mediaList)
        continue;
      for (let j = 0; j < cssMedia.mediaList.length; ++j) {
        const mediaQuery = cssMedia.mediaList[j];
        const queryModel = Emulation.MediaQueryInspector.MediaQueryUIModel.createFromMediaQuery(cssMedia, mediaQuery);
        if (queryModel && queryModel.rawLocation())
          queryModels.push(queryModel);
      }
    }
    queryModels.sort(compareModels);
    queryModels = this._squashAdjacentEqual(queryModels);

    let allEqual = this._cachedQueryModels && this._cachedQueryModels.length === queryModels.length;
    for (let i = 0; allEqual && i < queryModels.length; ++i)
      allEqual = allEqual && this._cachedQueryModels[i].equals(queryModels[i]);
    if (allEqual)
      return;
    this._cachedQueryModels = queryModels;
    this._renderMediaQueries();

    /**
     * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} model1
     * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} model2
     * @return {number}
     */
    function compareModels(model1, model2) {
      return model1.compareTo(model2);
    }
  }

  _renderMediaQueries() {
    if (!this._cachedQueryModels || !this.isShowing())
      return;

    const markers = [];
    let lastMarker = null;
    for (let i = 0; i < this._cachedQueryModels.length; ++i) {
      const model = this._cachedQueryModels[i];
      if (lastMarker && lastMarker.model.dimensionsEqual(model)) {
        lastMarker.locations.push(model.rawLocation());
        lastMarker.active = lastMarker.active || model.active();
      } else {
        lastMarker = {active: model.active(), model: model, locations: [model.rawLocation()]};
        markers.push(lastMarker);
      }
    }

    this.contentElement.removeChildren();

    let container = null;
    for (let i = 0; i < markers.length; ++i) {
      if (!i || markers[i].model.section() !== markers[i - 1].model.section())
        container = this.contentElement.createChild('div', 'media-inspector-marker-container');
      const marker = markers[i];
      const bar = this._createElementFromMediaQueryModel(marker.model);
      bar._model = marker.model;
      bar._locations = marker.locations;
      bar.classList.toggle('media-inspector-marker-inactive', !marker.active);
      container.appendChild(bar);
    }
  }

  /**
   * @return {number}
   */
  _zoomFactor() {
    return UI.zoomManager.zoomFactor() / this._scale;
  }

  /**
   * @override
   */
  wasShown() {
    this._scheduleMediaQueriesUpdate();
  }

  /**
   * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} model
   * @return {!Element}
   */
  _createElementFromMediaQueryModel(model) {
    const zoomFactor = this._zoomFactor();
    const minWidthValue = model.minWidthExpression() ? model.minWidthExpression().computedLength() / zoomFactor : 0;
    const maxWidthValue = model.maxWidthExpression() ? model.maxWidthExpression().computedLength() / zoomFactor : 0;
    const result = createElementWithClass('div', 'media-inspector-bar');

    if (model.section() === Emulation.MediaQueryInspector.Section.Max) {
      result.createChild('div', 'media-inspector-marker-spacer');
      const markerElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-max-width');
      markerElement.style.width = maxWidthValue + 'px';
      markerElement.title = model.mediaText();
      appendLabel(markerElement, model.maxWidthExpression(), false, false);
      appendLabel(markerElement, model.maxWidthExpression(), true, true);
      result.createChild('div', 'media-inspector-marker-spacer');
    }

    if (model.section() === Emulation.MediaQueryInspector.Section.MinMax) {
      result.createChild('div', 'media-inspector-marker-spacer');
      const leftElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
      leftElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
      leftElement.title = model.mediaText();
      appendLabel(leftElement, model.minWidthExpression(), true, false);
      appendLabel(leftElement, model.maxWidthExpression(), false, true);
      result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
      const rightElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
      rightElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
      rightElement.title = model.mediaText();
      appendLabel(rightElement, model.minWidthExpression(), true, false);
      appendLabel(rightElement, model.maxWidthExpression(), false, true);
      result.createChild('div', 'media-inspector-marker-spacer');
    }

    if (model.section() === Emulation.MediaQueryInspector.Section.Min) {
      const leftElement = result.createChild(
          'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left');
      leftElement.title = model.mediaText();
      appendLabel(leftElement, model.minWidthExpression(), false, false);
      result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
      const rightElement = result.createChild(
          'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right');
      rightElement.title = model.mediaText();
      appendLabel(rightElement, model.minWidthExpression(), true, true);
    }

    function appendLabel(marker, expression, atLeft, leftAlign) {
      marker
          .createChild(
              'div',
              'media-inspector-marker-label-container ' + (atLeft ? 'media-inspector-marker-label-container-left' :
                                                                    'media-inspector-marker-label-container-right'))
          .createChild(
              'span', 'media-inspector-marker-label ' +
                  (leftAlign ? 'media-inspector-label-left' : 'media-inspector-label-right'))
          .textContent = expression.value() + expression.unit();
    }

    return result;
  }
};

/**
 * @enum {number}
 */
Emulation.MediaQueryInspector.Section = {
  Max: 0,
  MinMax: 1,
  Min: 2
};

/**
 * @unrestricted
 */
Emulation.MediaQueryInspector.MediaQueryUIModel = class {
  /**
   * @param {!SDK.CSSMedia} cssMedia
   * @param {?SDK.CSSMediaQueryExpression} minWidthExpression
   * @param {?SDK.CSSMediaQueryExpression} maxWidthExpression
   * @param {boolean} active
   */
  constructor(cssMedia, minWidthExpression, maxWidthExpression, active) {
    this._cssMedia = cssMedia;
    this._minWidthExpression = minWidthExpression;
    this._maxWidthExpression = maxWidthExpression;
    this._active = active;
    if (maxWidthExpression && !minWidthExpression)
      this._section = Emulation.MediaQueryInspector.Section.Max;
    else if (minWidthExpression && maxWidthExpression)
      this._section = Emulation.MediaQueryInspector.Section.MinMax;
    else
      this._section = Emulation.MediaQueryInspector.Section.Min;
  }

  /**
   * @param {!SDK.CSSMedia} cssMedia
   * @param {!SDK.CSSMediaQuery} mediaQuery
   * @return {?Emulation.MediaQueryInspector.MediaQueryUIModel}
   */
  static createFromMediaQuery(cssMedia, mediaQuery) {
    let maxWidthExpression = null;
    let maxWidthPixels = Number.MAX_VALUE;
    let minWidthExpression = null;
    let minWidthPixels = Number.MIN_VALUE;
    const expressions = mediaQuery.expressions();
    for (let i = 0; i < expressions.length; ++i) {
      const expression = expressions[i];
      const feature = expression.feature();
      if (feature.indexOf('width') === -1)
        continue;
      const pixels = expression.computedLength();
      if (feature.startsWith('max-') && pixels < maxWidthPixels) {
        maxWidthExpression = expression;
        maxWidthPixels = pixels;
      } else if (feature.startsWith('min-') && pixels > minWidthPixels) {
        minWidthExpression = expression;
        minWidthPixels = pixels;
      }
    }
    if (minWidthPixels > maxWidthPixels || (!maxWidthExpression && !minWidthExpression))
      return null;

    return new Emulation.MediaQueryInspector.MediaQueryUIModel(
        cssMedia, minWidthExpression, maxWidthExpression, mediaQuery.active());
  }

  /**
   * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} other
   * @return {boolean}
   */
  equals(other) {
    return this.compareTo(other) === 0;
  }

  /**
   * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} other
   * @return {boolean}
   */
  dimensionsEqual(other) {
    return this.section() === other.section() &&
        (!this.minWidthExpression() ||
         (this.minWidthExpression().computedLength() === other.minWidthExpression().computedLength())) &&
        (!this.maxWidthExpression() ||
         (this.maxWidthExpression().computedLength() === other.maxWidthExpression().computedLength()));
  }

  /**
   * @param {!Emulation.MediaQueryInspector.MediaQueryUIModel} other
   * @return {number}
   */
  compareTo(other) {
    if (this.section() !== other.section())
      return this.section() - other.section();
    if (this.dimensionsEqual(other)) {
      const myLocation = this.rawLocation();
      const otherLocation = other.rawLocation();
      if (!myLocation && !otherLocation)
        return this.mediaText().compareTo(other.mediaText());
      if (myLocation && !otherLocation)
        return 1;
      if (!myLocation && otherLocation)
        return -1;
      if (this.active() !== other.active())
        return this.active() ? -1 : 1;
      return myLocation.url.compareTo(otherLocation.url) || myLocation.lineNumber - otherLocation.lineNumber ||
          myLocation.columnNumber - otherLocation.columnNumber;
    }
    if (this.section() === Emulation.MediaQueryInspector.Section.Max)
      return other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();
    if (this.section() === Emulation.MediaQueryInspector.Section.Min)
      return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength();
    return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength() ||
        other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();
  }

  /**
   * @return {!Emulation.MediaQueryInspector.Section}
   */
  section() {
    return this._section;
  }

  /**
   * @return {string}
   */
  mediaText() {
    return this._cssMedia.text;
  }

  /**
   * @return {?SDK.CSSLocation}
   */
  rawLocation() {
    if (!this._rawLocation)
      this._rawLocation = this._cssMedia.rawLocation();
    return this._rawLocation;
  }

  /**
   * @return {?SDK.CSSMediaQueryExpression}
   */
  minWidthExpression() {
    return this._minWidthExpression;
  }

  /**
   * @return {?SDK.CSSMediaQueryExpression}
   */
  maxWidthExpression() {
    return this._maxWidthExpression;
  }

  /**
   * @return {boolean}
   */
  active() {
    return this._active;
  }
};