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.VBox} | 7 * @extends {WebInspector.VBox} |
8 * @implements {WebInspector.OverridesSupport.PageResizer} | 8 * @implements {WebInspector.OverridesSupport.PageResizer} |
9 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder | 9 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder |
10 */ | 10 */ |
(...skipping 29 matching lines...) Expand all Loading... |
40 this._heightSlider = this._heightSliderContainer.createChild("div", "respons
ive-design-slider-thumb"); | 40 this._heightSlider = this._heightSliderContainer.createChild("div", "respons
ive-design-slider-thumb"); |
41 this._heightSlider.createChild("div", "responsive-design-thumb-handle"); | 41 this._heightSlider.createChild("div", "responsive-design-thumb-handle"); |
42 this._createResizer(this._heightSlider, true); | 42 this._createResizer(this._heightSlider, true); |
43 | 43 |
44 this._inspectedPagePlaceholder = inspectedPagePlaceholder; | 44 this._inspectedPagePlaceholder = inspectedPagePlaceholder; |
45 inspectedPagePlaceholder.show(this.element); | 45 inspectedPagePlaceholder.show(this.element); |
46 | 46 |
47 this._enabled = false; | 47 this._enabled = false; |
48 | 48 |
49 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._onZoomChanged, this); | 49 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._onZoomChanged, this); |
50 WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._respo
nsiveDesignEnabledChanged, this); | 50 WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._respon
siveDesignEnabledChanged, this); |
51 this._responsiveDesignEnabledChanged(); | 51 this._responsiveDesignEnabledChanged(); |
52 this._overridesWarningUpdated(); | 52 this._overridesWarningUpdated(); |
53 }; | 53 }; |
54 | 54 |
55 // Measured in DIP. | 55 // Measured in DIP. |
56 WebInspector.ResponsiveDesignView.SliderWidth = 19; | 56 WebInspector.ResponsiveDesignView.SliderWidth = 19; |
57 WebInspector.ResponsiveDesignView.RulerWidth = 22; | 57 WebInspector.ResponsiveDesignView.RulerWidth = 22; |
58 | 58 |
59 WebInspector.ResponsiveDesignView.prototype = { | 59 WebInspector.ResponsiveDesignView.prototype = { |
60 _invalidateCache: function() | 60 _invalidateCache: function() |
61 { | 61 { |
62 delete this._cachedScale; | 62 delete this._cachedScale; |
63 delete this._cachedCssCanvasWidth; | 63 delete this._cachedCssCanvasWidth; |
64 delete this._cachedCssCanvasHeight; | 64 delete this._cachedCssCanvasHeight; |
65 delete this._cachedCssHeight; | 65 delete this._cachedCssHeight; |
66 delete this._cachedCssWidth; | 66 delete this._cachedCssWidth; |
67 delete this._cachedZoomFactor; | 67 delete this._cachedZoomFactor; |
68 delete this._availableSize; | 68 delete this._availableSize; |
69 }, | 69 }, |
70 | 70 |
71 _responsiveDesignEnabledChanged: function() | 71 _responsiveDesignEnabledChanged: function() |
72 { | 72 { |
73 var enabled = WebInspector.settings.responsiveDesign.enabled.get(); | 73 var enabled = WebInspector.settings.responsiveDesignEnabled.get(); |
74 if (enabled && !this._enabled) { | 74 if (enabled && !this._enabled) { |
75 this._invalidateCache(); | 75 this._invalidateCache(); |
76 this._ignoreResize = true; | 76 this._ignoreResize = true; |
77 this._enabled = true; | 77 this._enabled = true; |
78 this._inspectedPagePlaceholder.clearMinimumSizeAndMargins(); | 78 this._inspectedPagePlaceholder.clearMinimumSizeAndMargins(); |
79 this._inspectedPagePlaceholder.show(this._pageContainer); | 79 this._inspectedPagePlaceholder.show(this._pageContainer); |
80 this._responsiveDesignContainer.show(this.element); | 80 this._responsiveDesignContainer.show(this.element); |
81 this.update(this._dipWidth || 0, this._dipHeight || 0, this._scale |
| 0); | 81 this.update(this._dipWidth || 0, this._dipHeight || 0, this._scale |
| 0); |
82 delete this._ignoreResize; | 82 delete this._ignoreResize; |
83 } else if (!enabled && this._enabled) { | 83 } else if (!enabled && this._enabled) { |
(...skipping 289 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
373 _createToolbar: function() | 373 _createToolbar: function() |
374 { | 374 { |
375 var toolbarElement = this._responsiveDesignContainer.element.createChild
("div", "responsive-design-toolbar"); | 375 var toolbarElement = this._responsiveDesignContainer.element.createChild
("div", "responsive-design-toolbar"); |
376 this._toolbarSection = toolbarElement.createChild("div", "responsive-des
ign-composite-section hbox"); | 376 this._toolbarSection = toolbarElement.createChild("div", "responsive-des
ign-composite-section hbox"); |
377 | 377 |
378 this._expandedDeviceSection = document.createElementWithClass("div", "re
sponsive-design-composite-section vbox"); | 378 this._expandedDeviceSection = document.createElementWithClass("div", "re
sponsive-design-composite-section vbox"); |
379 this._expandedScreenTouchSection = document.createElementWithClass("div"
, "responsive-design-composite-section hbox"); | 379 this._expandedScreenTouchSection = document.createElementWithClass("div"
, "responsive-design-composite-section hbox"); |
380 this._expandedNetworkSection = document.createElementWithClass("div", "r
esponsive-design-composite-section vbox solid"); | 380 this._expandedNetworkSection = document.createElementWithClass("div", "r
esponsive-design-composite-section vbox solid"); |
381 | 381 |
382 this._expandSection = document.createElementWithClass("div", "responsive
-design-section vbox"); | 382 this._expandSection = document.createElementWithClass("div", "responsive
-design-section vbox"); |
383 WebInspector.settings.responsiveDesign.toolbarExpanded = WebInspector.se
ttings.createSetting("responsiveDesign.toolbarExpanded", false); | 383 this.toolbarExpandedSetting = WebInspector.settings.createSetting("respo
nsiveDesignToolbarExpanded", false); |
384 this._expandButton = this._expandSection.createChild("div", "responsive-
design-expand"); | 384 this._expandButton = this._expandSection.createChild("div", "responsive-
design-expand"); |
385 this._expandButton.createChild("div", "responsive-design-icon responsive
-design-icon-expand"); | 385 this._expandButton.createChild("div", "responsive-design-icon responsive
-design-icon-expand"); |
386 this._expandButton.createChild("span"); | 386 this._expandButton.createChild("span"); |
387 this._expandButton.addEventListener("click", this._toggleToolbarExpanded
.bind(this), false); | 387 this._expandButton.addEventListener("click", this._toggleToolbarExpanded
.bind(this), false); |
388 WebInspector.settings.responsiveDesign.toolbarExpanded.addChangeListener
(this._toolbarExpandedChanged, this); | 388 this.toolbarExpandedSetting.addChangeListener(this._toolbarExpandedChang
ed, this); |
389 | 389 |
390 // Device | 390 // Device |
391 this._deviceSection = document.createElementWithClass("div", "responsive
-design-section"); | 391 this._deviceSection = document.createElementWithClass("div", "responsive
-design-section"); |
392 this._deviceSection.appendChild(WebInspector.SettingsUI.createSettingChe
ckbox(WebInspector.UIString("Device"), WebInspector.overridesSupport.settings.em
ulateDevice, true)); | 392 this._deviceSection.appendChild(WebInspector.SettingsUI.createSettingChe
ckbox(WebInspector.UIString("Device"), WebInspector.overridesSupport.settings.em
ulateDevice, true)); |
393 this._deviceSection.appendChild(WebInspector.overridesSupport.createDevi
ceSelect(document)); | 393 this._deviceSection.appendChild(WebInspector.overridesSupport.createDevi
ceSelect(document)); |
394 | 394 |
395 // Screen | 395 // Screen |
396 this._screenSection = document.createElementWithClass("div", "responsive
-design-section responsive-design-screen-section"); | 396 this._screenSection = document.createElementWithClass("div", "responsive
-design-section responsive-design-screen-section"); |
397 var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebI
nspector.overridesSupport.settings.emulateDevice); | 397 var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebI
nspector.overridesSupport.settings.emulateDevice); |
398 this._screenSection.appendChild(fieldsetElement); | 398 this._screenSection.appendChild(fieldsetElement); |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
442 trimmed = trimmed.substring(0, 40) + "..."; | 442 trimmed = trimmed.substring(0, 40) + "..."; |
443 networkCheckbox.title = WebInspector.UIString("Limit for ") + tr
immed; | 443 networkCheckbox.title = WebInspector.UIString("Limit for ") + tr
immed; |
444 } | 444 } |
445 } | 445 } |
446 | 446 |
447 this._toolbarExpandedChanged(); | 447 this._toolbarExpandedChanged(); |
448 }, | 448 }, |
449 | 449 |
450 _toggleToolbarExpanded: function() | 450 _toggleToolbarExpanded: function() |
451 { | 451 { |
452 WebInspector.settings.responsiveDesign.toolbarExpanded.set(!WebInspector
.settings.responsiveDesign.toolbarExpanded.get()); | 452 this.toolbarExpandedSetting.set(!this.toolbarExpandedSetting.get()); |
453 }, | 453 }, |
454 | 454 |
455 _toolbarExpandedChanged: function() | 455 _toolbarExpandedChanged: function() |
456 { | 456 { |
457 var expanded = WebInspector.settings.responsiveDesign.toolbarExpanded.ge
t(); | 457 var expanded = this.toolbarExpandedSetting.get(); |
458 this._expandButton.classList.toggle("expanded", expanded); | 458 this._expandButton.classList.toggle("expanded", expanded); |
459 this._expandButton.querySelector("span").textContent = WebInspector.UISt
ring(expanded ? "Collapse" : "Expand"); | 459 this._expandButton.querySelector("span").textContent = WebInspector.UISt
ring(expanded ? "Collapse" : "Expand"); |
460 | 460 |
461 if (expanded) { | 461 if (expanded) { |
462 this._expandedScreenTouchSection.setChildren([this._screenSection, t
his._touchSection]); | 462 this._expandedScreenTouchSection.setChildren([this._screenSection, t
his._touchSection]); |
463 this._expandedDeviceSection.setChildren([this._deviceSection, this._
expandedScreenTouchSection]); | 463 this._expandedDeviceSection.setChildren([this._deviceSection, this._
expandedScreenTouchSection]); |
464 this._expandedNetworkSection.setChildren([this._networkSection, this
._userAgentSection]); | 464 this._expandedNetworkSection.setChildren([this._networkSection, this
._userAgentSection]); |
465 this._toolbarSection.setChildren([this._expandSection, this._expande
dDeviceSection, this._expandedNetworkSection]); | 465 this._toolbarSection.setChildren([this._expandSection, this._expande
dDeviceSection, this._expandedNetworkSection]); |
466 } else { | 466 } else { |
467 this._toolbarSection.setChildren([this._expandSection, this._deviceS
ection, this._networkSection]); | 467 this._toolbarSection.setChildren([this._expandSection, this._deviceS
ection, this._networkSection]); |
468 } | 468 } |
469 | 469 |
470 this.onResize(); | 470 this.onResize(); |
471 }, | 471 }, |
472 | 472 |
473 _overridesWarningUpdated: function() | 473 _overridesWarningUpdated: function() |
474 { | 474 { |
475 var message = WebInspector.overridesSupport.warningMessage(); | 475 var message = WebInspector.overridesSupport.warningMessage(); |
476 if (this._warningMessage.textContent === message) | 476 if (this._warningMessage.textContent === message) |
477 return; | 477 return; |
478 this._warningMessage.classList.toggle("hidden", !message); | 478 this._warningMessage.classList.toggle("hidden", !message); |
479 this._warningMessage.textContent = message; | 479 this._warningMessage.textContent = message; |
480 this._invalidateCache(); | 480 this._invalidateCache(); |
481 this.onResize(); | 481 this.onResize(); |
482 }, | 482 }, |
483 | 483 |
484 __proto__: WebInspector.VBox.prototype | 484 __proto__: WebInspector.VBox.prototype |
485 }; | 485 }; |
OLD | NEW |