feat(selection): by default nothing is selectable.

Summary:
Now all elements by default have selection set to inherit with the root
level body object set to no selection.

This makes everything (except input elements) not selectable by default.

You can explicitly set the css class or use the new `.selectable` class.

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1355

internal_packages/account-sidebar/stylesheets/account-sidebar.less

@@ -7,7 +7,6 @@
   overflow: auto;
 
   background-color: @source-list-bg;
-  -webkit-user-select: none;
 
   .item {
     color: @text-color-subtle;

internal_packages/calendar-bar/stylesheets/calendar-bar.less

@@ -9,7 +9,6 @@
   box-shadow: @standard-shadow-up;
   z-index:2; // allows shadow over other elements
   position: relative;
-  -webkit-user-select: none;
 
   .marker {
     position: absolute;

internal_packages/composer/stylesheets/composer.less

@@ -28,7 +28,6 @@
     width: 100%;
     background: transparent;
     border-bottom: 0;
-    -webkit-user-select:none;
 
     .composer-action-bar-content {
       width: 100%;

internal_packages/inbox-activity-bar/stylesheets/activity-bar.less

@@ -2,7 +2,6 @@
 
 .activity-bar {
   -webkit-font-smoothing: auto;
-  -webkit-user-select:none;
   background-color: rgba(80,80,80,1);
   border-top:1px solid rgba(0,0,0,0.7);
   color:white;

internal_packages/message-list/lib/message-item.cjsx

@@ -54,7 +54,7 @@ MessageItem = React.createClass
       <header className="message-header">
 
         <div className="message-header-right">
-          <MessageTimestamp className="message-time"
+          <MessageTimestamp className="message-time selectable"
                             isDetailed={@state.detailedHeaders}
                             date={@props.message.date} />
 

internal_packages/message-list/lib/message-participants.cjsx

@@ -69,12 +69,12 @@ MessageParticipants = React.createClass
         else comma = ","
 
         if c.name?.length > 0 and c.name isnt c.email
-          <div key={c.email} className="participant">
+          <div key={c.email} className="participant selectable">
             <span className="participant-primary" onClick={@_selectPlainText}>{c.name}</span>&nbsp;
             <span className="participant-secondary" onClick={@_selectBracketedText}><{c.email}>{comma}</span>&nbsp;
           </div>
         else
-          <div key={c.email} className="participant">
+          <div key={c.email} className="participant selectable">
             <span className="participant-primary" onClick={@_selectCommaText}>{c.email}{comma}</span>&nbsp;
           </div>
       )

internal_packages/message-list/stylesheets/message-list.less

@@ -78,7 +78,6 @@
   .messages-wrap {
     flex: 4;
     overflow-y: auto;
-    -webkit-user-select:none;
     opacity:0;
     transition: opacity 0s;
     &.has-reply-area {
@@ -96,18 +95,15 @@
 
     margin: 0 auto;
     padding: @spacing-standard 0 @spacing-double 0;
-    -webkit-user-select:none;
 
     &:first-child { padding-top: 0; }
 
     &.collapsed {
       padding-bottom: 0;
       background-color: darken(@background-primary, 3%);
-      -webkit-user-select:none;
       .message-header {
         padding-top: 0;
         padding-bottom: 5px;
-        -webkit-user-select:none;
       }
       .snippet {
         cursor: default;
@@ -148,7 +144,6 @@
     border-bottom: 1px solid @border-color-divider;
     padding-bottom: @spacing-standard;
     padding-top: 5px;
-    -webkit-user-select:auto;
 
     .message-actions-wrap {
       width: 100%;
@@ -161,7 +156,6 @@
       height: 22px;
       border: 1px solid @border-color-divider;
       border-radius: 11px;
-      -webkit-user-select:none;
 
       z-index: 4;
       margin-top: 0.35em;
@@ -239,7 +233,6 @@
     color: @text-color-very-subtle;
     border-top: 1px solid @border-color-divider;
     background: @background-primary;
-    -webkit-user-select:none;
     z-index: 10;
 
     &:hover {

internal_packages/message-templates/stylesheets/message-templates.less

@@ -22,7 +22,6 @@
     font-size: @font-size-small;
     display:inline-block;
     margin:auto;
-    -webkit-user-select:none;
 }
 
 .compose-body #contenteditable {

internal_packages/onboarding/stylesheets/onboarding.less

@@ -24,7 +24,6 @@
   height:100%;
   background-color: #f0f0f0;
   -webkit-animation: fadein 0.8s;
-  -webkit-user-select:none;
   text-align: center;
 
   iframe, webview {

internal_packages/search-bar/stylesheets/search-bar.less

@@ -6,7 +6,6 @@
   order: -100;
   overflow: visible;
   z-index: 100;
-  -webkit-user-select: none;
   width:450px;
   margin-top: (50px - 30px) / 2;
   margin-left: 12px;

internal_packages/thread-list/stylesheets/thread-list.less

@@ -9,7 +9,6 @@
   order: 3;
   flex: 1;
   overflow: auto;
-  -webkit-user-select: none;
   -webkit-font-smoothing: subpixel-antialiased;
   position: relative;
 

static/index.less

@@ -10,6 +10,7 @@
 @import "buttons";
 @import "workspace";
 @import "resizable";
+@import "selection";
 @import "utilities";
 
 @import "components/popover";

static/selection.less

@@ -0,0 +1,16 @@
+* {
+  -webkit-user-select: inherit;
+  user-select: inherit;
+}
+body {
+  -webkit-user-select: none;
+  user-select: none;
+}
+input, textarea, *[contenteditable], {
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+.selectable {
+  -webkit-user-select: auto;
+  user-select: auto;
+}

static/workspace.less

@@ -123,7 +123,6 @@ body.is-blurred {
 .sheet-toolbar {
   position: relative;
   -webkit-app-region: drag;
-  -webkit-user-select:none;
   background: @toolbar-background-color;
   border-bottom: 1px solid @border-color-divider;
   width:  100%;