Merge pull request #128 from alphagov/design-mode

Add design mode component

Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 
 gem 'rake'
-gem 'jasmine', '~> 2.9'
+gem 'jasmine'

Gemfile.lock

@@ -1,22 +1,22 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    jasmine (2.9.0)
-      jasmine-core (>= 2.9.0, < 3.0.0)
+    jasmine (3.4.0)
+      jasmine-core (~> 3.4.0)
       phantomjs
       rack (>= 1.2.1)
       rake
-    jasmine-core (2.9.1)
+    jasmine-core (3.4.0)
     phantomjs (2.1.1.0)
-    rack (2.0.3)
-    rake (12.3.0)
+    rack (2.0.7)
+    rake (12.3.2)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  jasmine (~> 2.9)
+  jasmine
   rake
 
 BUNDLED WITH
-   1.16.1
+   1.16.2

spec/javascripts/design_mode_component_spec.js

@@ -0,0 +1,39 @@
+"use strict";
+describe("Toggling design mode", function () {
+  var $bannerEl;
+  var designModeComponent;
+
+  beforeEach(function () {
+    // Mock addListener function to call toggleDesignMode trigger when initialized
+    window.chrome = {
+      runtime: {
+        onMessage: {
+          addListener: function(callback) {
+            callback({ trigger: 'toggleDesignMode' })
+          }
+        },
+        sendMessage: function(){}
+      }
+    };
+    designModeComponent = new DesignModeComponent;
+    $bannerEl = $("#govuk-chrome-toolkit-design-mode-banner");
+  });
+
+  it("shows design mode banner", function () {
+    expect($bannerEl.text()).toMatch(/You are in design mode./);
+  });
+
+  it("removes the banner when toggled off", function () {
+    designModeComponent.toggleDesignMode();
+    expect($bannerEl.parent()).toHaveLength(0);
+  });
+
+  it("design mode is on when toggled on", function () {
+    expect(window.document.designMode).toEqual("on");
+  });
+
+  it("design mode is off when toggled off", function () {
+    designModeComponent.toggleDesignMode();
+    expect(window.document.designMode).toEqual("off");
+  });
+});

spec/javascripts/support/jasmine.yml

@@ -6,7 +6,8 @@ src_files:
   - src/popup/environment.js
   - src/popup/extract_path.js
   - src/popup/external_links.js
-  - src/highlight-component.js
+  - src/components/highlight-component/highlight-component.js
+  - src/components/design-mode-component/design-mode-component.js
 
 helpers:
   - support/helpers.js

src/components/design-mode-component/design-mode-component.css

@@ -0,0 +1,15 @@
+.govuk-panel.design-mode-component__banner {
+  color: #fff;
+  background-color: #005ea5;
+  margin-bottom: 0;
+  padding: 10px;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0; /* required */
+  z-index: 100;
+}
+
+.govuk-panel.design-mode-component__banner .govuk-panel__body {
+  font-size: 20px;
+  font-weight: bold;
+}

src/components/design-mode-component/design-mode-component.js

@@ -0,0 +1,40 @@
+"use strict";
+
+function DesignModeComponent() {
+  this.state = false;
+  chrome.runtime.onMessage.addListener(function (request) {
+    if (request.trigger == "toggleDesignMode") {
+      this.toggleDesignMode();
+    }
+  }.bind(this));
+}
+
+DesignModeComponent.prototype.toggleDesignMode = function () {
+  this.state = !this.state;
+
+  window.document.designMode = this.state ? "on" : "off";
+  this.toggleDesignModeBanner();
+  this.sendState();
+}
+
+DesignModeComponent.prototype.toggleDesignModeBanner = function() {
+  var id = "govuk-chrome-toolkit-design-mode-banner";
+  if (this.state) {
+    $('body').prepend("\
+      <div class=\"govuk-panel design-mode-component__banner\" id=\""+ id + "\">\
+        <div class=\"govuk-panel__body\">\
+          You are in design mode.\
+        </div>\
+      </div>\
+    ");
+  } else {
+    $("#"+id).remove();
+  }
+}
+
+DesignModeComponent.prototype.sendState = function() {
+  chrome.runtime.sendMessage({
+    action: "designModeState",
+    designModeState: this.state
+  });
+};

src/manifest.json

@@ -3,16 +3,20 @@
   "name": "GOV.UK Browser Extension",
   "description": "Switch between GOV.UK environments and content",
   "homepage_url": "https://github.com/alphagov/govuk-browser-extension",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "content_scripts": [
     {
       "matches": ["https://*.gov.uk/*"],
       "js": [
         "popup/lib/jquery.min.js",
         "popup/lib/mustache.min.js",
-        "highlight-component.js"
+        "components/highlight-component/highlight-component.js",
+        "components/design-mode-component/design-mode-component.js"
       ],
-      "css": ["highlight-component.css"]
+      "css": [
+        "components/highlight-component/highlight-component.css",
+        "components/design-mode-component/design-mode-component.css"
+      ]
     }
   ],
   "icons": {

src/popup.html

@@ -36,6 +36,9 @@
       <li>
         <a href='#' id='highlight-meta-tags'>Show meta tags</a>
       </li>
+      <li>
+        <a href='#' id='toggle-design-mode'>Turn on design mode</a>
+      </li>
       {{#abTests}}
         <li>
           <span class='ab-test-name'>A/B test: <strong>{{testName}}</strong></span>

src/popup/popup.js

@@ -9,6 +9,10 @@ var Popup = Popup || {};
       code: "window.highlightComponent = window.highlightComponent || new HighlightComponent; undefined;"
     });
 
+    chrome.tabs.executeScript(null, {
+      code: "window.designModeComponent = window.designModeComponent || new DesignModeComponent; undefined;"
+    });
+
     chrome.tabs.executeScript(null, {
       file: "fetch-page-data.js"
     });
@@ -52,6 +56,16 @@ var Popup = Popup || {};
     }
   });
 
+  chrome.runtime.onMessage.addListener(function (request, _sender) {
+    if (request.action == "designModeState") {
+      var toggleLink = $("#toggle-design-mode");
+      if (request.designModeState)
+        toggleLink.text("Turn off design mode");
+      else
+        toggleLink.text("Turn on design mode");
+    }
+  });
+
   // Render the popup.
   function renderPopup(location, host, origin, pathname, renderingApplication, windowHeight, abTestBuckets) {
     // Creates a view object with the data and render a template with it.
@@ -86,6 +100,10 @@ var Popup = Popup || {};
     chrome.tabs.executeScript(null, {
       code: "window.highlightComponent.sendState(); undefined;"
     });
+
+    chrome.tabs.executeScript(null, {
+      code: "window.designModeComponent.sendState(); undefined;"
+    });
   }
 
   function setupClicks(currentUrl) {
@@ -122,20 +140,17 @@ var Popup = Popup || {};
 
     $('#highlight-components').on('click', function(e) {
       e.preventDefault();
-
-      chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
-        var govukTab = tabs[0];
-        chrome.tabs.sendMessage(govukTab.id, { trigger: 'toggleComponents' });
-      });
+      sendChromeTabMessage('toggleComponents');
     });
 
     $('#highlight-meta-tags').on('click', function(e) {
       e.preventDefault();
+      sendChromeTabMessage('toggleMetaTags');
+    });
 
-      chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
-        var govukTab = tabs[0];
-        chrome.tabs.sendMessage(govukTab.id, { trigger: 'toggleMetaTags' });
-      });
+    $('#toggle-design-mode').on('click', function(e) {
+      e.preventDefault();
+      sendChromeTabMessage('toggleDesignMode');
     });
   }
 
@@ -181,4 +196,12 @@ var Popup = Popup || {};
       abTests: abTests
     }
   }
+
+  function sendChromeTabMessage(trigger) {
+    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+      var govukTab = tabs[0];
+      chrome.tabs.sendMessage(govukTab.id, { trigger: trigger });
+    });
+  }
+
 }());