Bug 1319950 - Wrap dPR state in object for consistency. r=gl

MozReview-Commit-ID: ERiDO14wGUz

--HG--
extra : rebase_source : 97d52933efb35758f8c6916be75a59a06cfe25f0

devtools/client/responsive.html/app.js

@@ -35,7 +35,7 @@ let App = createClass({
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     dispatch: PropTypes.func.isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     location: Types.location.isRequired,
     networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
@@ -148,7 +148,7 @@ let App = createClass({
     } = this;
 
     let selectedDevice = "";
-    let selectedPixelRatio = 0;
+    let selectedPixelRatio = { value: 0 };
 
     if (viewports.length) {
       selectedDevice = viewports[0].device;

devtools/client/responsive.html/components/dpr-selector.js

@@ -34,9 +34,9 @@ module.exports = createClass({
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     selectedDevice: PropTypes.string.isRequired,
-    selectedPixelRatio: PropTypes.number.isRequired,
+    selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     onChangeViewportPixelRatio: PropTypes.func.isRequired,
   },
 
@@ -93,7 +93,7 @@ module.exports = createClass({
     } else {
       title = getStr("responsive.devicePixelRatio");
 
-      if (selectedPixelRatio) {
+      if (selectedPixelRatio.value) {
         selectorClass += " selected";
       }
     }
@@ -117,7 +117,7 @@ module.exports = createClass({
       "DPR",
       dom.select(
         {
-          value: selectedPixelRatio || displayPixelRatio,
+          value: selectedPixelRatio.value || displayPixelRatio,
           disabled: isDisabled,
           onChange: this.onSelectChange,
           onFocus: this.onFocusChange,

devtools/client/responsive.html/components/global-toolbar.js

@@ -17,11 +17,11 @@ module.exports = createClass({
 
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
-    displayPixelRatio: PropTypes.number.isRequired,
+    displayPixelRatio: Types.pixelRatio.value.isRequired,
     networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     selectedDevice: PropTypes.string.isRequired,
-    selectedPixelRatio: PropTypes.number.isRequired,
+    selectedPixelRatio: PropTypes.shape(Types.pixelRatio).isRequired,
     touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
     onChangeNetworkThrottling: PropTypes.func.isRequired,
     onChangeViewportPixelRatio: PropTypes.func.isRequired,

devtools/client/responsive.html/reducers/viewports.js

@@ -20,7 +20,9 @@ const INITIAL_VIEWPORT = {
   device: "",
   width: 320,
   height: 480,
-  pixelRatio: 0,
+  pixelRatio: {
+    value: 0,
+  },
 };
 
 let reducers = {
@@ -45,14 +47,16 @@ let reducers = {
     });
   },
 
-  [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, {id, pixelRatio }) {
+  [CHANGE_VIEWPORT_PIXEL_RATIO](viewports, { id, pixelRatio }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
       return Object.assign({}, viewport, {
-        pixelRatio,
+        pixelRatio: {
+          value: pixelRatio
+        },
       });
     });
   },

devtools/client/responsive.html/test/unit/test_change_viewport_pixel_ratio.js

@@ -17,6 +17,6 @@ add_task(function* () {
   dispatch(changeViewportPixelRatio(0, NEW_PIXEL_RATIO));
 
   let viewport = getState().viewports[0];
-  equal(viewport.pixelRatio, NEW_PIXEL_RATIO,
+  equal(viewport.pixelRatio.value, NEW_PIXEL_RATIO,
     `Viewport's pixel ratio changed to ${NEW_PIXEL_RATIO}`);
 });

devtools/client/responsive.html/types.js

@@ -10,6 +10,15 @@ const { createEnum } = require("devtools/client/shared/enum");
 // React PropTypes are used to describe the expected "shape" of various common
 // objects that get passed down as props to components.
 
+/* GLOBAL */
+
+/**
+ * The location of the document displayed in the viewport(s).
+ */
+exports.location = PropTypes.string;
+
+/* DEVICE */
+
 /**
  * A single device that can be displayed in the viewport.
  */
@@ -85,32 +94,10 @@ exports.devices = {
 
 };
 
-/**
- * The location of the document displayed in the viewport(s).
- */
-exports.location = PropTypes.string;
+/* VIEWPORT */
 
 /**
- * The progression of the screenshot
- */
-exports.screenshot = {
-
-  isCapturing: PropTypes.bool,
-
-};
-
-/**
- * Touch simulation.
- */
-exports.touchSimulation = {
-
-  // Whether or not touch simulation is enabled
-  enabled: PropTypes.bool,
-
-};
-
-/**
- * Network throttling.
+ * Network throttling state for a given viewport.
  */
 exports.networkThrottling = {
 
@@ -122,6 +109,26 @@ exports.networkThrottling = {
 
 };
 
+/**
+ * Device pixel ratio for a given viewport.
+ */
+const pixelRatio = exports.pixelRatio = {
+
+  // The device pixel ratio value
+  value: PropTypes.number,
+
+};
+
+/**
+ * Touch simulation state for a given viewport.
+ */
+exports.touchSimulation = {
+
+  // Whether or not touch simulation is enabled
+  enabled: PropTypes.bool,
+
+};
+
 /**
  * A single viewport displaying a document.
  */
@@ -130,7 +137,7 @@ exports.viewport = {
   // The id of the viewport
   id: PropTypes.number,
 
-  // The currently selected device applied to the viewport.
+  // The currently selected device applied to the viewport
   device: PropTypes.string,
 
   // The width of the viewport
@@ -139,4 +146,19 @@ exports.viewport = {
   // The height of the viewport
   height: PropTypes.number,
 
+  // The devicePixelRatio of the viewport
+  pixelRatio: PropTypes.shape(pixelRatio),
+
+};
+
+/* ACTIONS IN PROGRESS */
+
+/**
+ * The progression of the screenshot.
+ */
+exports.screenshot = {
+
+  // Whether screenshot capturing is in progress
+  isCapturing: PropTypes.bool,
+
 };