responsivedesign-child.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. /* This Source Code Form is subject to the terms of the Mozilla Public
  2. * License, v. 2.0. If a copy of the MPL was not distributed with this
  3. * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  4. "use strict";
  5. /* global content, docShell, addEventListener, addMessageListener,
  6. removeEventListener, removeMessageListener, sendAsyncMessage, Services */
  7. var global = this;
  8. // Guard against loading this frame script mutiple times
  9. (function () {
  10. if (global.responsiveFrameScriptLoaded) {
  11. return;
  12. }
  13. var Ci = Components.interfaces;
  14. const gDeviceSizeWasPageSize = docShell.deviceSizeIsPageSize;
  15. const gFloatingScrollbarsStylesheet = Services.io.newURI("chrome://devtools/skin/floating-scrollbars-responsive-design.css", null, null);
  16. var gRequiresFloatingScrollbars;
  17. var active = false;
  18. var resizeNotifications = false;
  19. addMessageListener("ResponsiveMode:Start", startResponsiveMode);
  20. addMessageListener("ResponsiveMode:Stop", stopResponsiveMode);
  21. addMessageListener("ResponsiveMode:IsActive", isActive);
  22. function debug(msg) {
  23. // dump(`RDM CHILD: ${msg}\n`);
  24. }
  25. /**
  26. * Used by tests to verify the state of responsive mode.
  27. */
  28. function isActive() {
  29. sendAsyncMessage("ResponsiveMode:IsActive:Done", { active });
  30. }
  31. function startResponsiveMode({data:data}) {
  32. debug("START");
  33. if (active) {
  34. debug("ALREADY STARTED");
  35. sendAsyncMessage("ResponsiveMode:Start:Done");
  36. return;
  37. }
  38. addMessageListener("ResponsiveMode:RequestScreenshot", screenshot);
  39. let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
  40. webProgress.addProgressListener(WebProgressListener, Ci.nsIWebProgress.NOTIFY_ALL);
  41. docShell.deviceSizeIsPageSize = true;
  42. gRequiresFloatingScrollbars = data.requiresFloatingScrollbars;
  43. if (data.notifyOnResize) {
  44. startOnResize();
  45. }
  46. // At this point, a content viewer might not be loaded for this
  47. // docshell. makeScrollbarsFloating will be triggered by onLocationChange.
  48. if (docShell.contentViewer) {
  49. makeScrollbarsFloating();
  50. }
  51. active = true;
  52. sendAsyncMessage("ResponsiveMode:Start:Done");
  53. }
  54. function onResize() {
  55. let { width, height } = content.screen;
  56. debug(`EMIT RESIZE: ${width} x ${height}`);
  57. sendAsyncMessage("ResponsiveMode:OnContentResize", {
  58. width,
  59. height,
  60. });
  61. }
  62. function bindOnResize() {
  63. content.addEventListener("resize", onResize, false);
  64. }
  65. function startOnResize() {
  66. debug("START ON RESIZE");
  67. if (resizeNotifications) {
  68. return;
  69. }
  70. resizeNotifications = true;
  71. bindOnResize();
  72. addEventListener("DOMWindowCreated", bindOnResize, false);
  73. }
  74. function stopOnResize() {
  75. debug("STOP ON RESIZE");
  76. if (!resizeNotifications) {
  77. return;
  78. }
  79. resizeNotifications = false;
  80. content.removeEventListener("resize", onResize, false);
  81. removeEventListener("DOMWindowCreated", bindOnResize, false);
  82. }
  83. function stopResponsiveMode() {
  84. debug("STOP");
  85. if (!active) {
  86. debug("ALREADY STOPPED, ABORT");
  87. return;
  88. }
  89. active = false;
  90. removeMessageListener("ResponsiveMode:RequestScreenshot", screenshot);
  91. let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
  92. webProgress.removeProgressListener(WebProgressListener);
  93. docShell.deviceSizeIsPageSize = gDeviceSizeWasPageSize;
  94. restoreScrollbars();
  95. stopOnResize();
  96. sendAsyncMessage("ResponsiveMode:Stop:Done");
  97. }
  98. function makeScrollbarsFloating() {
  99. if (!gRequiresFloatingScrollbars) {
  100. return;
  101. }
  102. let allDocShells = [docShell];
  103. for (let i = 0; i < docShell.childCount; i++) {
  104. let child = docShell.getChildAt(i).QueryInterface(Ci.nsIDocShell);
  105. allDocShells.push(child);
  106. }
  107. for (let d of allDocShells) {
  108. let win = d.contentViewer.DOMDocument.defaultView;
  109. let winUtils = win.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
  110. try {
  111. winUtils.loadSheet(gFloatingScrollbarsStylesheet, win.AGENT_SHEET);
  112. } catch (e) { }
  113. }
  114. flushStyle();
  115. }
  116. function restoreScrollbars() {
  117. let allDocShells = [docShell];
  118. for (let i = 0; i < docShell.childCount; i++) {
  119. allDocShells.push(docShell.getChildAt(i).QueryInterface(Ci.nsIDocShell));
  120. }
  121. for (let d of allDocShells) {
  122. let win = d.contentViewer.DOMDocument.defaultView;
  123. let winUtils = win.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
  124. try {
  125. winUtils.removeSheet(gFloatingScrollbarsStylesheet, win.AGENT_SHEET);
  126. } catch (e) { }
  127. }
  128. flushStyle();
  129. }
  130. function flushStyle() {
  131. // Force presContext destruction
  132. let isSticky = docShell.contentViewer.sticky;
  133. docShell.contentViewer.sticky = false;
  134. docShell.contentViewer.hide();
  135. docShell.contentViewer.show();
  136. docShell.contentViewer.sticky = isSticky;
  137. }
  138. function screenshot() {
  139. let canvas = content.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
  140. let ratio = content.devicePixelRatio;
  141. let width = content.innerWidth * ratio;
  142. let height = content.innerHeight * ratio;
  143. canvas.mozOpaque = true;
  144. canvas.width = width;
  145. canvas.height = height;
  146. let ctx = canvas.getContext("2d");
  147. ctx.scale(ratio, ratio);
  148. ctx.drawWindow(content, content.scrollX, content.scrollY, width, height, "#fff");
  149. sendAsyncMessage("ResponsiveMode:RequestScreenshot:Done", canvas.toDataURL());
  150. }
  151. var WebProgressListener = {
  152. onLocationChange(webProgress, request, URI, flags) {
  153. if (flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT) {
  154. return;
  155. }
  156. makeScrollbarsFloating();
  157. },
  158. QueryInterface: function QueryInterface(aIID) {
  159. if (aIID.equals(Ci.nsIWebProgressListener) ||
  160. aIID.equals(Ci.nsISupportsWeakReference) ||
  161. aIID.equals(Ci.nsISupports)) {
  162. return this;
  163. }
  164. throw Components.results.NS_ERROR_NO_INTERFACE;
  165. }
  166. };
  167. })();
  168. global.responsiveFrameScriptLoaded = true;
  169. sendAsyncMessage("ResponsiveMode:ChildScriptReady");