| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @constructor | 6 * @constructor |
| 7 * @extends {WebInspector.Widget} | 7 * @extends {WebInspector.Widget} |
| 8 * @implements {WebInspector.TargetManager.Observer} | 8 * @implements {WebInspector.TargetManager.Observer} |
| 9 * @param {function():number} getWidthCallback | 9 * @param {function():number} getWidthCallback |
| 10 * @param {function(number)} setWidthCallback | 10 * @param {function(number)} setWidthCallback |
| 11 */ | 11 */ |
| 12 WebInspector.MediaQueryInspector = function(getWidthCallback, setWidthCallback) | 12 WebInspector.MediaQueryInspector = function(getWidthCallback, setWidthCallback) |
| 13 { | 13 { |
| 14 WebInspector.Widget.call(this, true); | 14 WebInspector.Widget.call(this, true); |
| 15 this.registerRequiredCSS("emulation/mediaQueryInspector.css"); | 15 this.registerRequiredCSS("emulation/mediaQueryInspector.css"); |
| 16 this.contentElement.classList.add("media-inspector-view"); | 16 this.contentElement.classList.add("media-inspector-view"); |
| 17 this.contentElement.addEventListener("click", this._onMediaQueryClicked.bind
(this), false); | 17 this.contentElement.addEventListener("click", this._onMediaQueryClicked.bind
(this), false); |
| 18 this.contentElement.addEventListener("contextmenu", this._onContextMenu.bind
(this), false); | 18 this.contentElement.addEventListener("contextmenu", this._onContextMenu.bind
(this), false); |
| 19 this._mediaThrottler = new WebInspector.Throttler(0); | 19 this._mediaThrottler = new WebInspector.Throttler(0); |
| 20 | 20 |
| 21 this._getWidthCallback = getWidthCallback; | 21 this._getWidthCallback = getWidthCallback; |
| 22 this._setWidthCallback = setWidthCallback; | 22 this._setWidthCallback = setWidthCallback; |
| 23 this._scale = 1; | 23 this._scale = 1; |
| 24 | 24 |
| 25 WebInspector.targetManager.observeTargets(this); | 25 WebInspector.targetManager.observeTargets(this); |
| 26 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._renderMediaQueries.bind(this), this); | 26 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._renderMediaQueries.bind(this), this); |
| 27 } | 27 }; |
| 28 | 28 |
| 29 /** | 29 /** |
| 30 * @enum {number} | 30 * @enum {number} |
| 31 */ | 31 */ |
| 32 WebInspector.MediaQueryInspector.Section = { | 32 WebInspector.MediaQueryInspector.Section = { |
| 33 Max: 0, | 33 Max: 0, |
| 34 MinMax: 1, | 34 MinMax: 1, |
| 35 Min: 2 | 35 Min: 2 |
| 36 } | 36 }; |
| 37 | 37 |
| 38 WebInspector.MediaQueryInspector.prototype = { | 38 WebInspector.MediaQueryInspector.prototype = { |
| 39 /** | 39 /** |
| 40 * @override | 40 * @override |
| 41 * @param {!WebInspector.Target} target | 41 * @param {!WebInspector.Target} target |
| 42 */ | 42 */ |
| 43 targetAdded: function(target) | 43 targetAdded: function(target) |
| 44 { | 44 { |
| 45 // FIXME: adapt this to multiple targets. | 45 // FIXME: adapt this to multiple targets. |
| 46 if (this._cssModel) | 46 if (this._cssModel) |
| (...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 151 return; | 151 return; |
| 152 this._mediaThrottler.schedule(this._refetchMediaQueries.bind(this)); | 152 this._mediaThrottler.schedule(this._refetchMediaQueries.bind(this)); |
| 153 }, | 153 }, |
| 154 | 154 |
| 155 _refetchMediaQueries: function() | 155 _refetchMediaQueries: function() |
| 156 { | 156 { |
| 157 if (!this.isShowing() || !this._cssModel) | 157 if (!this.isShowing() || !this._cssModel) |
| 158 return Promise.resolve(); | 158 return Promise.resolve(); |
| 159 | 159 |
| 160 return this._cssModel.mediaQueriesPromise() | 160 return this._cssModel.mediaQueriesPromise() |
| 161 .then(this._rebuildMediaQueries.bind(this)) | 161 .then(this._rebuildMediaQueries.bind(this)); |
| 162 }, | 162 }, |
| 163 | 163 |
| 164 /** | 164 /** |
| 165 * @param {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>} mod
els | 165 * @param {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>} mod
els |
| 166 * @return {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>} | 166 * @return {!Array.<!WebInspector.MediaQueryInspector.MediaQueryUIModel>} |
| 167 */ | 167 */ |
| 168 _squashAdjacentEqual: function(models) | 168 _squashAdjacentEqual: function(models) |
| 169 { | 169 { |
| 170 var filtered = []; | 170 var filtered = []; |
| 171 for (var i = 0; i < models.length; ++i) { | 171 for (var i = 0; i < models.length; ++i) { |
| (...skipping 165 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 337 this._cssMedia = cssMedia; | 337 this._cssMedia = cssMedia; |
| 338 this._minWidthExpression = minWidthExpression; | 338 this._minWidthExpression = minWidthExpression; |
| 339 this._maxWidthExpression = maxWidthExpression; | 339 this._maxWidthExpression = maxWidthExpression; |
| 340 this._active = active; | 340 this._active = active; |
| 341 if (maxWidthExpression && !minWidthExpression) | 341 if (maxWidthExpression && !minWidthExpression) |
| 342 this._section = WebInspector.MediaQueryInspector.Section.Max; | 342 this._section = WebInspector.MediaQueryInspector.Section.Max; |
| 343 else if (minWidthExpression && maxWidthExpression) | 343 else if (minWidthExpression && maxWidthExpression) |
| 344 this._section = WebInspector.MediaQueryInspector.Section.MinMax; | 344 this._section = WebInspector.MediaQueryInspector.Section.MinMax; |
| 345 else | 345 else |
| 346 this._section = WebInspector.MediaQueryInspector.Section.Min; | 346 this._section = WebInspector.MediaQueryInspector.Section.Min; |
| 347 } | 347 }; |
| 348 | 348 |
| 349 /** | 349 /** |
| 350 * @param {!WebInspector.CSSMedia} cssMedia | 350 * @param {!WebInspector.CSSMedia} cssMedia |
| 351 * @param {!WebInspector.CSSMediaQuery} mediaQuery | 351 * @param {!WebInspector.CSSMediaQuery} mediaQuery |
| 352 * @return {?WebInspector.MediaQueryInspector.MediaQueryUIModel} | 352 * @return {?WebInspector.MediaQueryInspector.MediaQueryUIModel} |
| 353 */ | 353 */ |
| 354 WebInspector.MediaQueryInspector.MediaQueryUIModel.createFromMediaQuery = functi
on(cssMedia, mediaQuery) | 354 WebInspector.MediaQueryInspector.MediaQueryUIModel.createFromMediaQuery = functi
on(cssMedia, mediaQuery) |
| 355 { | 355 { |
| 356 var maxWidthExpression = null; | 356 var maxWidthExpression = null; |
| 357 var maxWidthPixels = Number.MAX_VALUE; | 357 var maxWidthPixels = Number.MAX_VALUE; |
| (...skipping 11 matching lines...) Expand all Loading... |
| 369 maxWidthPixels = pixels; | 369 maxWidthPixels = pixels; |
| 370 } else if (feature.startsWith("min-") && pixels > minWidthPixels) { | 370 } else if (feature.startsWith("min-") && pixels > minWidthPixels) { |
| 371 minWidthExpression = expression; | 371 minWidthExpression = expression; |
| 372 minWidthPixels = pixels; | 372 minWidthPixels = pixels; |
| 373 } | 373 } |
| 374 } | 374 } |
| 375 if (minWidthPixels > maxWidthPixels || (!maxWidthExpression && !minWidthExpr
ession)) | 375 if (minWidthPixels > maxWidthPixels || (!maxWidthExpression && !minWidthExpr
ession)) |
| 376 return null; | 376 return null; |
| 377 | 377 |
| 378 return new WebInspector.MediaQueryInspector.MediaQueryUIModel(cssMedia, minW
idthExpression, maxWidthExpression, mediaQuery.active()); | 378 return new WebInspector.MediaQueryInspector.MediaQueryUIModel(cssMedia, minW
idthExpression, maxWidthExpression, mediaQuery.active()); |
| 379 } | 379 }; |
| 380 | 380 |
| 381 WebInspector.MediaQueryInspector.MediaQueryUIModel.prototype = { | 381 WebInspector.MediaQueryInspector.MediaQueryUIModel.prototype = { |
| 382 /** | 382 /** |
| 383 * @param {!WebInspector.MediaQueryInspector.MediaQueryUIModel} other | 383 * @param {!WebInspector.MediaQueryInspector.MediaQueryUIModel} other |
| 384 * @return {boolean} | 384 * @return {boolean} |
| 385 */ | 385 */ |
| 386 equals: function(other) | 386 equals: function(other) |
| 387 { | 387 { |
| 388 return this.compareTo(other) === 0; | 388 return this.compareTo(other) === 0; |
| 389 }, | 389 }, |
| (...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 469 return this._maxWidthExpression; | 469 return this._maxWidthExpression; |
| 470 }, | 470 }, |
| 471 | 471 |
| 472 /** | 472 /** |
| 473 * @return {boolean} | 473 * @return {boolean} |
| 474 */ | 474 */ |
| 475 active: function() | 475 active: function() |
| 476 { | 476 { |
| 477 return this._active; | 477 return this._active; |
| 478 } | 478 } |
| 479 } | 479 }; |
| OLD | NEW |