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 |