From 59949bf8115093593c1d77c5f0a63003e6ea247d Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Wed, 25 Jul 2012 11:51:27 -0700
Subject: [PATCH] Add "device" JS/CSS for reactive stuff

Summary:
As we work through @chad's redesign, one thing I want to do is improve the tablet/mobile experience.

Add a "device" behavior which sets a "device-phone", "device-tablet" or "device-desktop" class on the root div. The behavior (device names, width triggers) is mostly based on Bootstrap.

Also adds a preview viewport=meta tag, which makes the iPhone not scale the page like crazy and is a desirable end state, but currently makes the app less usable since things get cut off.

Test Plan:
Added some classes like this:

	.device-desktop {
	  background: blue;
	}
	.device-tablet {
	  background: orange;
	}
	.device-phone {
	  background: yellow;
	}

...and loaded the site on a desktop, iPad and iPhone. Resized the window. Got the right background color in all cases.

Reviewers: btrahan, chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D3063
---
 conf/default.conf.php                         |  8 ++++
 src/__celerity_resource_map__.php             | 13 ++++++
 src/view/page/PhabricatorStandardPageView.php | 40 +++++++++++++++++--
 .../js/application/core/behavior-device.js    | 38 ++++++++++++++++++
 4 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 webroot/rsrc/js/application/core/behavior-device.js

diff --git a/conf/default.conf.php b/conf/default.conf.php
index 45b6eaa42e..df6f076915 100644
--- a/conf/default.conf.php
+++ b/conf/default.conf.php
@@ -1230,4 +1230,12 @@ return array(
   // only enable it when debugging.
   'debug.profile-every-request'  => false,
 
+
+// -- Previews  ------------------------------------------------------------- //
+
+  // Turn on to enable the "viewport" meta tag. This is a preview feature which
+  // will improve the usability of Phabricator on phones and tablets once it
+  // is ready.
+  'preview.viewport-meta-tag' => false,
+
 );
diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 35ae5c8dc1..d81b865a09 100644
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -939,6 +939,19 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/behavior-dark-console-ajax.js',
   ),
+  'javelin-behavior-device' =>
+  array(
+    'uri' => '/res/bec84986/rsrc/js/application/core/behavior-device.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'javelin-dom',
+      3 => 'javelin-vector',
+    ),
+    'disk' => '/rsrc/js/application/core/behavior-device.js',
+  ),
   'javelin-behavior-differential-accept-with-errors' =>
   array(
     'uri' => '/res/ba5144c5/rsrc/js/application/differential/behavior-accept-with-errors.js',
diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php
index fcbcebaac6..cb4a88ac30 100644
--- a/src/view/page/PhabricatorStandardPageView.php
+++ b/src/view/page/PhabricatorStandardPageView.php
@@ -223,7 +223,18 @@ final class PhabricatorStandardPageView extends AphrontPageView {
       }
     }
 
+    $viewport_tag = null;
+    if (PhabricatorEnv::getEnvConfig('preview.viewport-meta-tag')) {
+      $viewport_tag = phutil_render_tag(
+        'meta',
+        array(
+          'name' => 'viewport',
+          'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
+        ));
+    }
+
     $head =
+      $viewport_tag.
       '<script type="text/javascript">'.
         $framebust.
         'window.__DEV__=1;'.
@@ -514,14 +525,37 @@ final class PhabricatorStandardPageView extends AphrontPageView {
         '</div>';
     }
 
+    Javelin::initBehavior('device', array('id' => 'base-page'));
+    $agent = idx($_SERVER, 'HTTP_USER_AGENT');
+
+    // Try to guess the device resolution based on UA strings to avoid a flash
+    // of incorrectly-styled content.
+    $device_guess = 'device-desktop';
+    if (preg_match('/iPhone|iPod/', $agent)) {
+      $device_guess = 'device-phone';
+    } else if (preg_match('/iPad/', $agent)) {
+      $device_guess = 'device-tablet';
+    }
+
+    $classes = array(
+      'phabricator-standard-page',
+      $admin_class,
+      $device_guess,
+    );
+    $classes = implode(' ', $classes);
+
     return
       ($console ? '<darkconsole />' : null).
       $developer_warning.
-      '<div class="phabricator-standard-page '.$admin_class.'">'.
+      phutil_render_tag(
+        'div',
+        array(
+          'id' => 'base-page',
+          'class' => $classes,
+        ),
         $header_chrome.
         $this->bodyContent.
-        '<div style="clear: both;"></div>'.
-      '</div>'.
+        '<div style="clear: both;"></div>').
       $footer_chrome;
   }
 
diff --git a/webroot/rsrc/js/application/core/behavior-device.js b/webroot/rsrc/js/application/core/behavior-device.js
new file mode 100644
index 0000000000..920d7569c7
--- /dev/null
+++ b/webroot/rsrc/js/application/core/behavior-device.js
@@ -0,0 +1,38 @@
+/**
+ * @provides javelin-behavior-device
+ * @requires javelin-behavior
+ *           javelin-stratcom
+ *           javelin-dom
+ *           javelin-vector
+ */
+
+JX.behavior('device', function(config) {
+
+  var current;
+
+  function onresize() {
+    var v = JX.Vector.getViewport();
+
+    var device = 'desktop';
+    if (v.x <= 768) {
+      device = 'tablet';
+    }
+    if (v.x <= 480) {
+      device = 'phone';
+    }
+
+    if (device == current) {
+      return;
+    }
+
+    current = device;
+
+    var e = JX.$(config.id);
+    JX.DOM.alterClass(e, 'device-phone', (device == 'phone'));
+    JX.DOM.alterClass(e, 'device-tablet', (device == 'tablet'));
+    JX.DOM.alterClass(e, 'device-desktop', (device == 'desktop'));
+  }
+
+  JX.Stratcom.listen('resize', null, onresize);
+  onresize();
+});