Demo/bin/Debug/front_end/emulation/ResponsiveDesignView.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

// 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.

/**
 * @constructor
 * @extends {WebInspector.VBox}
 * @implements {WebInspector.OverridesSupport.PageResizer}
 * @implements {WebInspector.TargetManager.Observer}
 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
 */
WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
{
    WebInspector.VBox.call(this);
    this.setMinimumSize(150, 150);
    this.element.classList.add("responsive-design-view");
    this.registerRequiredCSS("emulation/responsiveDesignView.css");

    this._showMediaQueryInspectorSetting = WebInspector.settings.createSetting("showMediaQueryInspector", false);

    this._responsiveDesignContainer = new WebInspector.VBox();
    this._uiInitialized = false;

    this._inspectedPagePlaceholder = inspectedPagePlaceholder;
    inspectedPagePlaceholder.show(this.element);

    this._enabled = false;
    this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 };
    this._drawContentsSize = true;
    this._deviceInsets = new Insets(0, 0, 0, 0);
    this._viewportChangedThrottler = new WebInspector.Throttler(0);
    this._pageScaleFactorThrottler = new WebInspector.Throttler(50);

    WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
    WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
    WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Page);
    this._emulationEnabledChanged();
};

// Measured in DIP.
WebInspector.ResponsiveDesignView.RulerWidth = 26;
WebInspector.ResponsiveDesignView.RulerHeight = 22;
WebInspector.ResponsiveDesignView.RulerTopHeight = 11;
WebInspector.ResponsiveDesignView.RulerBottomHeight = 9;

WebInspector.ResponsiveDesignView.prototype = {
    _ensureUIInitialized: function()
    {
        if (this._uiInitialized)
            return;

        this._uiInitialized = true;

        this._createToolbar();

        this._canvasContainer = new WebInspector.Widget();
        this._canvasContainer.element.classList.add("responsive-design");
        this._canvasContainer.show(this._responsiveDesignContainer.element);

        this._canvas = this._canvasContainer.element.createChild("canvas", "fill responsive-design-canvas");