Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(347)

Side by Side Diff: Source/devtools/front_end/ResponsiveDesignView.js

Issue 341543003: DevTools: make responsive design a master switch for emulation. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 6 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 unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | Source/devtools/front_end/common/Settings.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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 };
OLDNEW
« no previous file with comments | « no previous file | Source/devtools/front_end/common/Settings.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698