Source/devtools/front_end/toolbox/MediaQueryInspector.js - Issue 526423002: [DevTools] Combine media queries preview by sections.

Unified Diff: Source/devtools/front_end/toolbox/MediaQueryInspector.js

Issue 526423002: [DevTools] Combine media queries preview by sections. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: fixed comments, less height Created 6 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« Source/devtools/front_end/responsiveDesignView.css ('K') | « Source/devtools/front_end/responsiveDesignView.css ('k') | Source/devtools/front_end/toolbox/ResponsiveDesignView.js » ('j') | Source/devtools/front_end/toolbox/ResponsiveDesignView.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: Source/devtools/front_end/toolbox/MediaQueryInspector.js

diff --git a/Source/devtools/front_end/toolbox/MediaQueryInspector.js b/Source/devtools/front_end/toolbox/MediaQueryInspector.js

index 31e2cfcf6b420e23439ae1174169a85c48d1b5dc..564bd93d4cb53d473c3e92200a81caa74f08fd70 100644

--- a/Source/devtools/front_end/toolbox/MediaQueryInspector.js

+++ b/Source/devtools/front_end/toolbox/MediaQueryInspector.js

@@ -13,18 +13,12 @@ WebInspector.MediaQueryInspector = function()

this.element.classList.add("media-inspector-view", "media-inspector-view-empty");

this.element.addEventListener("click", this._onMediaQueryClicked.bind(this), false);

this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);

- this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);

this._mediaThrottler = new WebInspector.Throttler(100);

- this._translateZero = 0;

this._offset = 0;

this._scale = 1;

this._lastReportedCount = 0;

- this._rulerDecorationLayer = document.createElementWithClass("div", "fill");

- this._rulerDecorationLayer.classList.add("media-inspector-ruler-decoration");

- this._rulerDecorationLayer.addEventListener("click", this._onRulerDecorationClicked.bind(this), false);

WebInspector.targetManager.observeTargets(this);

WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._renderMediaQueries.bind(this), this);

@@ -39,6 +33,9 @@ WebInspector.MediaQueryInspector.Section = {

Min: 2

}

+WebInspector.MediaQueryInspector.SectionHeight = 14;

+WebInspector.MediaQueryInspector.SectionMargin = 2;

lushnikov 2014/09/05 12:48:06 You don't need to hard-code these css computed sty

dgozman 2014/09/05 13:41:13 Done.

WebInspector.MediaQueryInspector.Events = {

HeightUpdated: "HeightUpdated",

CountUpdated: "CountUpdated"

@@ -74,75 +71,33 @@ WebInspector.MediaQueryInspector.prototype = {

/**

- * @return {!Element}

- */

- rulerDecorationLayer: function()

- {

- return this._rulerDecorationLayer;

- },

- /**

- * @return {!Array.<number>}

+ * @return {number}

- _mediaQueryThresholds: function()

+ cssHeight: function()

lushnikov 2014/09/05 12:48:06 you don't need this method; all clients could simp

dgozman 2014/09/05 13:41:13 Done. Nice catch, thanks!

{

if (!this._cachedQueryModels)

- return [];

- var thresholds = [];

+ return 0;

+ var availableSections = [false, false, false];

for (var i = 0; i < this._cachedQueryModels.length; ++i) {

var model = this._cachedQueryModels[i];

- if (model.minWidthExpression())

- thresholds.push(model.minWidthExpression().computedLength());

- if (model.maxWidthExpression())

- thresholds.push(model.maxWidthExpression().computedLength());

- }

- thresholds.sortNumbers();

- return thresholds;

- },

- /**

- * @param {!Event} event

- */

- _onRulerDecorationClicked: function(event)

- {

- var thresholdElement = event.target.enclosingNodeOrSelfWithClass("media-inspector-threshold-serif");

- if (!thresholdElement)

- return;

- WebInspector.settings.showMediaQueryInspector.set(true);

- var revealValue = thresholdElement._value;

- for (var mediaQueryContainer = this.element.firstChild; mediaQueryContainer; mediaQueryContainer = mediaQueryContainer.nextSibling) {

- var model = mediaQueryContainer._model;

- if ((model.minWidthExpression() && Math.abs(model.minWidthExpression().computedLength() - revealValue) === 0)

- || (model.maxWidthExpression() && Math.abs(model.maxWidthExpression().computedLength() - revealValue) === 0)) {

- mediaQueryContainer.scrollIntoViewIfNeeded(false);

- var hasRunningAnimation = mediaQueryContainer.classList.contains("media-inspector-marker-highlight-1") || mediaQueryContainer.classList.contains("media-inspector-marker-highlight-2");

- mediaQueryContainer.classList.toggle("media-inspector-marker-highlight-1");

- if (hasRunningAnimation)

- mediaQueryContainer.classList.toggle("media-inspector-marker-highlight-2");

- return;

- }

+ availableSections[model.section()] = true;

}

- },

- /**

- * @param {!Event} event

- */

- _onAnimationEnd: function(event)

- {

- event.target.classList.remove("media-inspector-marker-highlight-1");

- event.target.classList.remove("media-inspector-marker-highlight-2");

+ var sectionCount = 0;

+ for (var i = 0; i < availableSections.length; ++i)

+ sectionCount += availableSections[i] ? 1 : 0;

+ return sectionCount * WebInspector.MediaQueryInspector.SectionHeight + (sectionCount + 1) * WebInspector.MediaQueryInspector.SectionMargin;

/**

- * @param {number} translate

* @param {number} offset

* @param {number} scale

- setAxisTransform: function(translate, offset, scale)

+ setAxisTransform: function(offset, scale)

{

- if (this._translateZero === translate && this._offset === offset && Math.abs(this._scale - scale) < 1e-8)

+ if (this._offset === offset && Math.abs(this._scale - scale) < 1e-8)

return;

- this._translateZero = translate;

this._offset = offset;

this._scale = scale;

this._renderMediaQueries();

@@ -162,8 +117,8 @@ WebInspector.MediaQueryInspector.prototype = {

_onMediaQueryClicked: function(event)

{

- var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");

- if (!mediaQueryMarkerContainer)

+ var mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker");

+ if (!mediaQueryMarker)

return;

/**

@@ -175,7 +130,7 @@ WebInspector.MediaQueryInspector.prototype = {

WebInspector.overridesSupport.settings.emulateResolution.set(true);

}

- var model = mediaQueryMarkerContainer._model;

+ var model = mediaQueryMarker._model;

if (model.section() === WebInspector.MediaQueryInspector.Section.Max) {

setWidth(model.maxWidthExpression().computedLength());

return;

@@ -196,11 +151,11 @@ WebInspector.MediaQueryInspector.prototype = {

_onContextMenu: function(event)

{

- var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");

- if (!mediaQueryMarkerContainer)

+ var mediaQueryMarker = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker");

+ if (!mediaQueryMarker)

return;

- var locations = mediaQueryMarkerContainer._locations;

+ var locations = mediaQueryMarker._locations;

var contextMenu = new WebInspector.ContextMenu(event);

var subMenuItem = contextMenu.appendSubMenuItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Reveal in source code" : "Reveal In Source Code"));

for (var i = 0; i < locations.length; ++i) {

@@ -276,7 +231,7 @@ WebInspector.MediaQueryInspector.prototype = {

for (var j = 0; j < cssMedia.mediaList.length; ++j) {

var mediaQuery = cssMedia.mediaList[j];

var queryModel = WebInspector.MediaQueryInspector.MediaQueryUIModel.createFromMediaQuery(cssMedia, mediaQuery);

- if (queryModel)

+ if (queryModel && queryModel.uiLocation())

queryModels.push(queryModel);

}

@@ -306,14 +261,11 @@ WebInspector.MediaQueryInspector.prototype = {

{

if (!this._cachedQueryModels)

return;

- this._renderRulerDecorations();

var markers = [];

var lastMarker = null;

for (var i = 0; i < this._cachedQueryModels.length; ++i) {

var model = this._cachedQueryModels[i];

- if (!model.uiLocation())

- continue;

if (lastMarker && lastMarker.model.dimensionsEqual(model)) {

lastMarker.locations.push(model.uiLocation());

lastMarker.active = lastMarker.active || model.active();

@@ -335,97 +287,132 @@ WebInspector.MediaQueryInspector.prototype = {

if (!this.isShowing())

return;

- var heightChanges = this.element.children.length !== markers.length;

+ var oldChildrenCount = this.element.children.length;

var scrollTop = this.element.scrollTop;

this.element.removeChildren();

+ var container = null;

for (var i = 0; i < markers.length; ++i) {

+ if (!i || markers[i].model.section() !== markers[i - 1].model.section()) {

+ container = this.element.createChild("div", "media-inspector-marker-container");

+ container.style.height = WebInspector.MediaQueryInspector.SectionHeight + "px";

lushnikov 2014/09/05 12:48:06 your container height depends on font size. You sh

+ container.style.margin = WebInspector.MediaQueryInspector.SectionMargin + "px 0";

+ var handler = this._onMarkerContainerMouseMove.bind(this);

+ container.addEventListener("mousemove", handler, false);

+ container.addEventListener("mouseout", handler, false);

+ }

var marker = markers[i];

- var bar = this._createElementFromMediaQueryModel(marker.model);

+ var bar = this._createElementFromMediaQueryModel(/** @type {!Element} */ (container), marker.model);

bar._model = marker.model;

bar._locations = marker.locations;

bar.classList.toggle("media-inspector-marker-inactive", !marker.active);

- this.element.appendChild(bar);

}

this.element.scrollTop = scrollTop;

this.element.classList.toggle("media-inspector-view-empty", !this.element.children.length);

- if (heightChanges)

+ if (this.element.children.length != oldChildrenCount)

this.dispatchEventToListeners(WebInspector.MediaQueryInspector.Events.HeightUpdated);

/**

- * @return {number}

+ * @param {!Event} event

- _zoomFactor: function()

+ _onMarkerContainerMouseMove: function(event)

{

- return WebInspector.zoomManager.zoomFactor() / this._scale;

+ var mediaQueryMarkerContainer = event.target.enclosingNodeOrSelfWithClass("media-inspector-marker-container");

+ if (!mediaQueryMarkerContainer)

+ return;

+ var children = mediaQueryMarkerContainer.children;

+ if (!children.length)

+ return;

+ for (var i = children.length - 1; i >= 0; --i) {

+ if (children[i].containsEventPoint(event)) {

+ this._highlightMarkerInContainer(children[i], mediaQueryMarkerContainer);

+ return;

+ }

+ this._highlightMarkerInContainer(null, mediaQueryMarkerContainer);

- _renderRulerDecorations: function()

+ /**

+ * @param {?Element} marker

+ * @param {!Element} container

+ */

+ _highlightMarkerInContainer: function(marker, container)

{

- this._rulerDecorationLayer.removeChildren();

- var zoomFactor = this._zoomFactor();

- var thresholds = this._mediaQueryThresholds();

- for (var i = 0; i < thresholds.length; ++i) {

- var thresholdElement = this._rulerDecorationLayer.createChild("div", "media-inspector-threshold-serif");

- thresholdElement.title = thresholds[i] + "px";

- thresholdElement._value = thresholds[i];

- thresholdElement.style.left = (thresholds[i] - this._offset) / zoomFactor + "px";

+ var children = container.children;

+ var found = !marker;

+ for (var i = children.length - 1; i >= 0; --i) {

+ if (found) {

+ children[i].classList.remove("media-inspector-marker-highlight");

+ children[i].classList.remove("media-inspector-marker-under-highlighted");

+ } else if (children[i] === marker) {

+ children[i].classList.add("media-inspector-marker-highlight");

+ children[i].classList.remove("media-inspector-marker-under-highlighted");

+ found = true;

+ } else {

+ children[i].classList.remove("media-inspector-marker-highlight");

+ children[i].classList.add("media-inspector-marker-under-highlighted");

+ }

}

+ /**

+ * @return {number}

+ */

+ _zoomFactor: function()

+ {

+ return WebInspector.zoomManager.zoomFactor() / this._scale;

+ },

wasShown: function()

{

this._renderMediaQueries();

/**

+ * @param {!Element} container

* @param {!WebInspector.MediaQueryInspector.MediaQueryUIModel} model

* @return {!Element}

- _createElementFromMediaQueryModel: function(model)

+ _createElementFromMediaQueryModel: function(container, model)

{

var zoomFactor = this._zoomFactor();

var minWidthValue = model.minWidthExpression() ? model.minWidthExpression().computedLength() : 0;

const styleClassPerSection = [

- "media-inspector-marker-container-max-width",

- "media-inspector-marker-container-min-max-width",

- "media-inspector-marker-container-min-width"

+ "media-inspector-marker-max-width",

+ "media-inspector-marker-min-max-width",

+ "media-inspector-marker-min-width"

];

- var container = document.createElementWithClass("div", "media-inspector-marker-container hbox");

- container.classList.add(styleClassPerSection[model.section()]);

var markerElement = container.createChild("div", "media-inspector-marker");

- var leftPixelValue = minWidthValue ? (minWidthValue - this._offset) / zoomFactor + this._translateZero : 0;

+ var leftPixelValue = minWidthValue ? (minWidthValue - this._offset) / zoomFactor : 0;

markerElement.style.left = leftPixelValue + "px";

+ markerElement.classList.add(styleClassPerSection[model.section()]);

var widthPixelValue = null;

if (model.maxWidthExpression() && model.minWidthExpression())

widthPixelValue = (model.maxWidthExpression().computedLength() - minWidthValue) / zoomFactor;

else if (model.maxWidthExpression())

- widthPixelValue = (model.maxWidthExpression().computedLength() - this._offset) / zoomFactor + this._translateZero;

+ widthPixelValue = (model.maxWidthExpression().computedLength() - this._offset) / zoomFactor;

else

markerElement.style.right = "0";

if (typeof widthPixelValue === "number")

markerElement.style.width = widthPixelValue + "px";

- var maxLabelFiller = container.createChild("div", "media-inspector-max-label-filler");

if (model.maxWidthExpression()) {

- maxLabelFiller.style.maxWidth = Math.max(widthPixelValue + leftPixelValue, 0) + "px";

- var label = container.createChild("span", "media-inspector-marker-label media-inspector-max-label");

- label.textContent = model.maxWidthExpression().computedLength() + "px";

+ var labelClass = model.section() === WebInspector.MediaQueryInspector.Section.MinMax ? "media-inspector-label-left" : "media-inspector-label-right";

+ var labelContainer = markerElement.createChild("div", "media-inspector-marker-label-container media-inspector-marker-label-container-right");

+ labelContainer.createChild("div", "media-inspector-marker-serif");

+ labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.maxWidthExpression().computedLength() + "px";

}

if (model.minWidthExpression()) {

- var minLabelFiller = maxLabelFiller.createChild("div", "media-inspector-min-label-filler");

- minLabelFiller.style.maxWidth = Math.max(leftPixelValue, 0) + "px";

- var label = minLabelFiller.createChild("span", "media-inspector-marker-label media-inspector-min-label");

- label.textContent = model.minWidthExpression().computedLength() + "px";

+ var labelClass = model.section() === WebInspector.MediaQueryInspector.Section.MinMax ? "media-inspector-label-right" : "media-inspector-label-left";

+ var labelContainer = markerElement.createChild("div", "media-inspector-marker-label-container media-inspector-marker-label-container-left");

+ labelContainer.createChild("div", "media-inspector-marker-serif");

+ labelContainer.createChild("span", "media-inspector-marker-label " + labelClass).textContent = model.minWidthExpression().computedLength() + "px";

}

- return container;

+ return markerElement;

__proto__: WebInspector.View.prototype

@@ -527,10 +514,10 @@ WebInspector.MediaQueryInspector.MediaQueryUIModel.prototype = {

return myLocation.uiSourceCode.uri().compareTo(otherLocation.uiSourceCode.uri()) || myLocation.lineNumber - otherLocation.lineNumber || myLocation.columnNumber - otherLocation.columnNumber;

}

if (this.section() === WebInspector.MediaQueryInspector.Section.Max)

- return this.maxWidthExpression().computedLength() - other.maxWidthExpression().computedLength();

+ return other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();

if (this.section() === WebInspector.MediaQueryInspector.Section.Min)

return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength();

- return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength() || this.maxWidthExpression().computedLength() - other.maxWidthExpression().computedLength();

+ return this.minWidthExpression().computedLength() - other.minWidthExpression().computedLength() || other.maxWidthExpression().computedLength() - this.maxWidthExpression().computedLength();

/**