From 8bcdf42762b6572f3ac4215e8623214630e52a66 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Fri, 7 Dec 2012 13:37:10 -0800
Subject: [PATCH] Simplify ".device-phone X, .device-tablet X { ... }" rules

Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }".

Test Plan: Browsed the site a bit without incident.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

Differential Revision: https://secure.phabricator.com/D4103
---
 src/view/page/PhabricatorStandardPageView.php |  8 +--
 .../rsrc/css/aphront/phabricator-nav-view.css | 21 ++----
 .../css/application/base/main-menu-view.css   | 64 +++++++------------
 .../application/base/notification-menu.css    |  3 +-
 webroot/rsrc/css/application/phame/phame.css  |  9 +--
 .../layout/phabricator-action-list-view.css   |  3 +-
 .../css/layout/phabricator-crumbs-view.css    |  3 +-
 .../rsrc/css/layout/phabricator-form-view.css | 16 ++---
 .../layout/phabricator-property-list-view.css |  9 +--
 .../css/layout/phabricator-timeline-view.css  | 12 ++--
 .../js/application/core/behavior-device.js    |  1 +
 11 files changed, 51 insertions(+), 98 deletions(-)

diff --git a/src/view/page/PhabricatorStandardPageView.php b/src/view/page/PhabricatorStandardPageView.php
index f0e41ad9f9..eca3dd00db 100644
--- a/src/view/page/PhabricatorStandardPageView.php
+++ b/src/view/page/PhabricatorStandardPageView.php
@@ -287,10 +287,10 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     // 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';
+    if (preg_match('@iPhone|iPod|(Android.*Chrome/[.0-9]* Mobile)@', $agent)) {
+      $device_guess = 'device-phone device';
+    } else if (preg_match('@iPad|(Android.*Chrome/)@', $agent)) {
+      $device_guess = 'device-tablet device';
     }
 
     $classes = array(
diff --git a/webroot/rsrc/css/aphront/phabricator-nav-view.css b/webroot/rsrc/css/aphront/phabricator-nav-view.css
index 7288b7fecf..29ac93ed51 100644
--- a/webroot/rsrc/css/aphront/phabricator-nav-view.css
+++ b/webroot/rsrc/css/aphront/phabricator-nav-view.css
@@ -32,8 +32,7 @@
   background-image: url(/rsrc/image/menu_texture.png);
 }
 
-.device-tablet .phabricator-nav-local,
-.device-phone .phabricator-nav-local {
+.device .phabricator-nav-local {
   display: none;
 }
 
@@ -58,8 +57,7 @@
   background-repeat: no-repeat;
 }
 
-.device-tablet .phabricator-nav-drag,
-.device-phone .phabricator-nav-drag {
+.device .phabricator-nav-drag {
   display: none;
 }
 
@@ -83,30 +81,25 @@
   margin-left: 2.5em !important;
 }
 
-.device-tablet .phabricator-nav-col,
-.device-phone .phabricator-nav-col {
+.device .phabricator-nav-col {
   position: absolute;
   top: 0px;
 }
 
-.device-tablet .phabricator-nav-local,
-.device-phone .phabricator-nav-local {
+.device .phabricator-nav-local {
   left: -300px;
 }
 
-.device-tablet .phabricator-nav,
-.device-phone .phabricator-nav {
+.device .phabricator-nav {
   overflow-x: hidden;
   position: relative;
 }
 
-.device-tablet .phabricator-nav-content,
-.device-phone .phabricator-nav-content {
+.device .phabricator-nav-content {
   width: 100%;
 }
 
-.device-tablet .phabricator-nav-content,
-.device-phone .phabricator-nav-content {
+.device .phabricator-nav-content {
   margin-left: 0;
   position: relative;
 }
diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css
index 035eb5636c..190462c1d9 100644
--- a/webroot/rsrc/css/application/base/main-menu-view.css
+++ b/webroot/rsrc/css/application/base/main-menu-view.css
@@ -44,6 +44,10 @@
   background: 6px 9px url(/rsrc/image/header_logo.png) no-repeat;
 }
 
+.device .phabricator-main-menu-logo {
+  display: none;
+}
+
 /* - Expand/Collapse Button ----------------------------------------------------
 
   On phones, the menu switches to a vertical layout and uses a button to expand
@@ -85,8 +89,7 @@
   display: none;
 }
 
-.device-tablet .phabricator-main-menu-expand-button,
-.device-phone .phabricator-main-menu-expand-button {
+.device .phabricator-main-menu-expand-button {
   display: block;
 }
 
@@ -124,8 +127,7 @@
   margin-left: -150px;
 }
 
-.device-tablet .phabricator-main-menu-search-target,
-.device-phone .phabricator-main-menu-search-target {
+.device .phabricator-main-menu-search-target {
   width: 100%;
   margin-left: -25px;
 
@@ -135,8 +137,7 @@
   margin: 0 8px 0 50px;
 }
 
-.device-tablet .phabricator-main-menu-search-container,
-.device-phone .phabricator-main-menu-search-container {
+.device .phabricator-main-menu-search-container {
   margin: 0 18px 0 60px;
 }
 
@@ -235,8 +236,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   display: inline-block;
 }
 
-.device-tablet .phabricator-main-menu-alerts,
-.device-phone .phabricator-main-menu-alerts {
+.device .phabricator-main-menu-alerts {
   position: absolute;
   left: 60px;
   right: 60px;
@@ -296,21 +296,17 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.device-phone .phabricator-dark-menu,
-.device-tablet .phabricator-dark-menu,
-.device-phone .phabricator-dark-menu a.phabricator-menu-item-type-link,
-.device-tablet .phabricator-dark-menu a.phabricator-menu-item-type-link {
+.device .phabricator-dark-menu,
+.device .phabricator-dark-menu a.phabricator-menu-item-type-link{
   color: #ffffff;
 }
 
-.device-phone .phabricator-dark-menu .phabricator-menu-item-view,
-.device-tablet .phabricator-dark-menu .phabricator-menu-item-view {
+.device .phabricator-dark-menu .phabricator-menu-item-view {
   display: block;
   padding: 4px 0;
 }
 
-.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label,
-.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label {
+.device .phabricator-dark-menu .phabricator-menu-item-type-label {
   text-transform: uppercase;
   font-size: 11px;
   background-color: #151719;
@@ -318,21 +314,17 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   height: 24px;
 }
 
-.device-phone .phabricator-dark-menu .phabricator-menu-item-type-spacer,
-.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-spacer {
+.device .phabricator-dark-menu .phabricator-menu-item-type-spacer {
   display: none;
 }
 
-.device-phone .phabricator-dark-menu .phabricator-menu-item-type-label
-  .phabricator-menu-item-name,
-.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-label
+.device .phabricator-dark-menu .phabricator-menu-item-type-label
   .phabricator-menu-item-name {
   display: block;
   padding: 6px 0 0;
 }
 
-.device-phone .phabricator-dark-menu .phabricator-menu-item-type-link,
-.device-tablet .phabricator-dark-menu .phabricator-menu-item-type-link {
+.device .phabricator-dark-menu .phabricator-menu-item-type-link {
   border-width: 1px 0;
   border-style: solid;
   border-color: #34373b transparent #282c2d;
@@ -357,25 +349,20 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   background-size: 26px 26px;
 }
 
-.device-phone .phabricator-core-menu,
-.device-tablet .phabricator-core-menu {
+.device .phabricator-core-menu {
   display: none;
 }
 
-.device-phone .phabricator-core-menu-expanded .phabricator-core-menu,
-.device-tablet .phabricator-core-menu-expanded .phabricator-core-menu {
+.device .phabricator-core-menu-expanded .phabricator-core-menu {
   display: block;
 }
 
-.device-phone .phabricator-core-menu .phabricator-menu-item-type-link,
-.device-tablet .phabricator-core-menu .phabricator-menu-item-type-link {
+.device .phabricator-core-menu .phabricator-menu-item-type-link {
   font-size: 15px;
   min-height: 30px;
 }
 
-.device-phone .phabricator-core-menu
-   .phabricator-menu-item-type-link .phabricator-menu-item-name,
-.device-tablet .phabricator-core-menu
+.device .phabricator-core-menu
    .phabricator-menu-item-type-link .phabricator-menu-item-name {
   margin-left: 40px;
   line-height: 28px;
@@ -409,8 +396,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   left: 6px;
 }
 
-.device-phone .phabricator-core-menu-icon,
-.device-tablet .phabricator-core-menu-icon {
+.device .phabricator-core-menu-icon {
   left: 6px;
 }
 
@@ -428,10 +414,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.device-phone .phabricator-application-menu-expanded
-  .phabricator-application-menu,
-.device-tablet .phabricator-application-menu-expanded
-  .phabricator-application-menu {
+.device .phabricator-application-menu-expanded .phabricator-application-menu {
   display: block;
   padding-top: 44px;
 }
@@ -445,10 +428,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   padding-left: 12px;
 }
 
-.device-phone .phabricator-application-menu-expanded
-  .phabricator-application-menu,
-.device-tablet .phabricator-application-menu-expanded
-  .phabricator-application-menu {
+.device .phabricator-application-menu-expanded .phabricator-application-menu {
   display: block;
   padding-top: 44px;
 }
diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css
index f72cd950a8..bd349569de 100644
--- a/webroot/rsrc/css/application/base/notification-menu.css
+++ b/webroot/rsrc/css/application/base/notification-menu.css
@@ -20,8 +20,7 @@
   border-top-width: 0;
 }
 
-.device-tablet .phabricator-notification-menu,
-.device-phone .phabricator-notification-menu {
+.device .phabricator-notification-menu {
   border-bottom: 1px solid #222222;
 }
 
diff --git a/webroot/rsrc/css/application/phame/phame.css b/webroot/rsrc/css/application/phame/phame.css
index 0d858cde0a..405791dae4 100644
--- a/webroot/rsrc/css/application/phame/phame.css
+++ b/webroot/rsrc/css/application/phame/phame.css
@@ -29,8 +29,7 @@
   padding: 0px 8px 12px 8px;
 }
 
-.device-tablet .blog-post-list,
-.device-phone .blog-post-list {
+.device .blog-post-list {
   float: none;
   width: 90%;
   margin: 16px auto;
@@ -43,8 +42,7 @@
   padding: 0px 16px 0px 16px;
 }
 
-.device-tablet .blog-post-list-full,
-.device-phone .blog-post-list-full {
+.device .blog-post-list-full {
   float: none;
   margin: 16px auto;
 }
@@ -56,8 +54,7 @@
   margin: 16px 16px 16px 0px;
 }
 
-.device-tablet .blog-detail,
-.device-phone .blog-detail {
+.device .blog-detail {
   float: none;
   margin: 16px auto;
   width: 90%;
diff --git a/webroot/rsrc/css/layout/phabricator-action-list-view.css b/webroot/rsrc/css/layout/phabricator-action-list-view.css
index 8a2d0e55f6..136504d62e 100644
--- a/webroot/rsrc/css/layout/phabricator-action-list-view.css
+++ b/webroot/rsrc/css/layout/phabricator-action-list-view.css
@@ -20,8 +20,7 @@
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
 }
 
-.device-tablet .phabricator-action-list-view,
-.device-phone .phabricator-action-list-view {
+.device .phabricator-action-list-view {
   background: #f3f3f3;
   border-top: 1px solid #dcdcdc;
   padding: .5em 0;
diff --git a/webroot/rsrc/css/layout/phabricator-crumbs-view.css b/webroot/rsrc/css/layout/phabricator-crumbs-view.css
index 930a995ab7..7cf12e036a 100644
--- a/webroot/rsrc/css/layout/phabricator-crumbs-view.css
+++ b/webroot/rsrc/css/layout/phabricator-crumbs-view.css
@@ -2,8 +2,7 @@
  * @provides phabricator-crumbs-view-css
  */
 
-.device-phone .phabricator-crumbs-view,
-.device-tablet .phabricator-crumbs-view {
+.device .phabricator-crumbs-view {
   display: none;
 }
 
diff --git a/webroot/rsrc/css/layout/phabricator-form-view.css b/webroot/rsrc/css/layout/phabricator-form-view.css
index 3c43768d18..29a61c94bd 100644
--- a/webroot/rsrc/css/layout/phabricator-form-view.css
+++ b/webroot/rsrc/css/layout/phabricator-form-view.css
@@ -14,8 +14,7 @@
 }
 
 
-.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-label,
-.device-phone .phabricator-form-view .aphront-form-control .aphront-form-label {
+.device .phabricator-form-view .aphront-form-control .aphront-form-label {
   display: block;
   float: none;
   text-align: left;
@@ -23,10 +22,7 @@
   padding: 0;
 }
 
-.device-tablet .phabricator-form-view .aphront-form-control
-  .aphront-form-caption,
-.device-phone .phabricator-form-view .aphront-form-control
-  .aphront-form-caption {
+.device .phabricator-form-view .aphront-form-control .aphront-form-caption {
   display: block;
   float: none;
   text-align: left;
@@ -34,10 +30,7 @@
   padding: 0;
 }
 
-.device-tablet .phabricator-form-view .aphront-form-control
-  .aphront-form-input,
-.device-phone .phabricator-form-view .aphront-form-control
-  .aphront-form-input {
+.device .phabricator-form-view .aphront-form-control .aphront-form-input {
   float: none;
   display: block;
   text-align: left;
@@ -46,8 +39,7 @@
   padding: 0;
 }
 
-.device-tablet .phabricator-form-view .aphront-form-control .aphront-form-error,
-.device-phone .phabricator-form-view .aphront-form-control .aphront-form-error {
+.device .phabricator-form-view .aphront-form-control .aphront-form-error {
   float: none;
   text-align: left;
   display: block;
diff --git a/webroot/rsrc/css/layout/phabricator-property-list-view.css b/webroot/rsrc/css/layout/phabricator-property-list-view.css
index afacf7d6cf..45e950ae4b 100644
--- a/webroot/rsrc/css/layout/phabricator-property-list-view.css
+++ b/webroot/rsrc/css/layout/phabricator-property-list-view.css
@@ -19,8 +19,7 @@
   padding: 1em 0 0.5em;
 }
 
-.device-tablet .phabricator-property-list-container,
-.device-phone .phabricator-property-list-container {
+.device .phabricator-property-list-container {
   padding: .5em 0;
 }
 
@@ -40,8 +39,7 @@
   margin-bottom: .5em;
 }
 
-.device-tablet .phabricator-property-list-key,
-.device-phone .phabricator-property-list-key {
+.device .phabricator-property-list-key {
   padding-left: .5em;
 }
 
@@ -57,8 +55,7 @@
   margin-bottom: .5em;
 }
 
-.device-tablet .phabricator-property-list-value,
-.device-phone .phabricator-property-list-value {
+.device .phabricator-property-list-value {
   padding-left: 1.5em;
   margin-bottom: .5em;
 }
diff --git a/webroot/rsrc/css/layout/phabricator-timeline-view.css b/webroot/rsrc/css/layout/phabricator-timeline-view.css
index b9584ec2cb..4ad083d779 100644
--- a/webroot/rsrc/css/layout/phabricator-timeline-view.css
+++ b/webroot/rsrc/css/layout/phabricator-timeline-view.css
@@ -105,8 +105,7 @@
   border-color: #009966;
 }
 
-.device-tablet .phabricator-timeline-event-view,
-.device-phone .phabricator-timeline-event-view {
+.device .phabricator-timeline-event-view {
   min-height: 25px;
   position: relative;
   margin-left: 3px;
@@ -116,21 +115,18 @@
   border-right-style: solid;
 }
 
-.device-tablet .phabricator-timeline-image,
-.device-phone .phabricator-timeline-image {
+.device .phabricator-timeline-image {
   display: none;
 }
 
-.device-tablet .phabricator-timeline-title,
-.device-phone .phabricator-timeline-title {
+.device .phabricator-timeline-title {
   line-height: 25px;
   min-height: 25px;
   background: #f7f7f7;
   padding: 0 5px;
 }
 
-.device-tablet .phabricator-timeline-spacer,
-.device-phone .phabricator-timeline-spacer {
+.device .phabricator-timeline-spacer {
   min-height: 8px;
   border-width: 0;
 }
diff --git a/webroot/rsrc/js/application/core/behavior-device.js b/webroot/rsrc/js/application/core/behavior-device.js
index 6622bc5715..d1dcdd26fe 100644
--- a/webroot/rsrc/js/application/core/behavior-device.js
+++ b/webroot/rsrc/js/application/core/behavior-device.js
@@ -39,6 +39,7 @@ JX.behavior('device', function(config) {
     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.DOM.alterClass(e, 'device', (device != 'desktop'));
 
     JX.Stratcom.invoke('phabricator-device-change', null, device);
   }