Bug 1190738 - Merging Loop CSS for checkboxes, r=dmose
☠☠ backed out by a97f5b00b772 ☠ ☠
authorDavid Critchley <david@priologic.com>
Thu, 17 Sep 2015 19:58:53 -0700
changeset 295751 18f5bcaab8ec30077bec8f37e439f1cc0c3e32f4
parent 295750 a5cd5359543605af4f0d3db125f06e2bc2013702
child 295752 a97f5b00b7727d6fadeea03b778dd10e3024d625
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose
bugs1190738
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1190738 - Merging Loop CSS for checkboxes, r=dmose
browser/components/loop/content/css/panel.css
browser/components/loop/content/shared/css/common.css
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/ui/ui-showcase.js
browser/components/loop/ui/ui-showcase.jsx
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -360,36 +360,16 @@ html[dir="rtl"] .tab-view li:nth-child(2
   margin-bottom: .5rem;
   display: block;
 }
 
 .new-room-view > .context > .context-enabled > input {
   -moz-margin-start: 0;
 }
 
-.new-room-view > .context > .checkbox-wrapper {
-  height: 2rem;
-  margin-bottom: .5em;
-  line-height: 2rem;
-}
-
-.new-room-view > .context > .checkbox-wrapper > .checkbox {
-  border-color: #d8d8d8;
-  background-color: #fff;
-}
-
-.new-room-view > .context > .checkbox-wrapper > .checkbox.checked {
-  background-image: url("../shared/img/check.svg#check-blue");
-}
-
-.new-room-view > .context > .checkbox-wrapper > label {
-  color: #333;
-  font-size: 1.1rem;
-}
-
 .new-room-view > .btn {
   flex: 1;
   height: 3rem;
   display: block;
   font-size: 1.2rem;
   margin: 7px 15px 0 15px;
   padding: .5rem 1rem;
   border-radius: 4px;
--- a/browser/components/loop/content/shared/css/common.css
+++ b/browser/components/loop/content/shared/css/common.css
@@ -479,33 +479,37 @@ html[dir="rtl"] .dropdown-menu {
   margin: 2px -2px 1px -2px;
   border-top: 1px solid #dedede;
   background-color: #fff;
 }
 
 /* Custom checkbox */
 
 .checkbox-wrapper {
+  height: 2rem;
+  margin-bottom: .5rem;
+  width: 100%;
+  line-height: 2.2rem;
   -moz-user-select: none;
   user-select: none;
 }
 
 .checkbox {
   float: left;
   width: 2rem;
   height: 2rem;
-  -moz-margin-end: .5em;
-  margin-top: .1em;
+  -moz-margin-end: .5rem;
+  margin-top: .1rem;
   border: 1px solid #999;
-  border-radius: 3px;
+  border-radius: .3rem;
   cursor: pointer;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
-  background-size: 1em 1em;
+  background-size: 2rem;
 }
 
 html[dir="rtl"] .checkbox {
   float: right;
 }
 
 .checkbox.checked {
   background-image: url("../img/check.svg#check");
@@ -526,16 +530,20 @@ html[dir="rtl"] .checkbox {
 
 .checkbox-label.ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   text-align: left;
 }
 
+.checkbox-wrapper > checkbox-label {
+  font-size: 1.1rem;
+}
+
 html[dir="rtl"] .checkbox-label.ellipsis {
   text-align: right;
 }
 
 /* ContextUrlView classes */
 
 .context-content {
   color: black;
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -1019,27 +1019,31 @@ body[platform="win"] .share-service-drop
 }
 
 .room-context > .error-display-area.error {
   margin: 1em 0 .5em 0;
   text-align: center;
   text-shadow: 1px 1px 0 rgba(0,0,0,.3);
 }
 
-.room-context > .checkbox-wrapper {
-  margin-bottom: .5em;
-  width: 100%;
+.new-room-view > .context > .checkbox-wrapper .checkbox {
+  border-color: #d8d8d8;
+  background-color: #fff;
+}
+
+.new-room-view > .context > .checkbox-wrapper .checkbox.checked {
+  background-image: url("../img/check.svg#check-blue");
+}
+
+.new-room-view > .context > .checkbox-wrapper > label {
+  color: #333;
 }
 
 .room-context-label {
   margin-bottom: 1em;
-}
-
-.room-context-label,
-.room-context > .checkbox-wrapper > label {
   color: #fff;
 }
 
 .room-context-comment {
   color: #707070;
 }
 
 .room-context-comment {
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@@ -24,16 +24,17 @@
   var GettingStartedView = loop.panel.GettingStartedView;
   // 1.2. Conversation Window
   var AcceptCallView = loop.conversationViews.AcceptCallView;
   var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
   var OngoingConversationView = loop.conversationViews.OngoingConversationView;
   var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
   var RoomFailureView = loop.roomViews.RoomFailureView;
   var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
+  var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
 
   // 2. Standalone webapp
   var HomeView = loop.webapp.HomeView;
   var UnsupportedBrowserView  = loop.webapp.UnsupportedBrowserView;
   var UnsupportedDeviceView   = loop.webapp.UnsupportedDeviceView;
   var StandaloneRoomView      = loop.standaloneRoomViews.StandaloneRoomView;
 
   // 3. Shared components
@@ -1385,16 +1386,33 @@
                   localPosterUrl: "sample-img/video-screen-local.png", 
                   mozLoop: navigator.mozLoop, 
                   onCallTerminated: function(){}, 
                   roomState: ROOM_STATES.INIT, 
                   roomStore: invitationRoomStore})
               )
             ), 
 
+            React.createElement(FramedExample, {height: 278.6, 
+                           onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate, 
+                           summary: "Desktop room Edit Context w/Error", 
+                           width: 298}, 
+              React.createElement("div", {className: "fx-embedded room-invitation-overlay"}, 
+                React.createElement(DesktopRoomEditContextView, {
+                  dispatcher: dispatcher, 
+                  error: {}, 
+                  mozLoop: navigator.mozLoop, 
+                  onClose: function(){}, 
+                  roomData: {}, 
+                  savingContext: false, 
+                  show: true}
+                   )
+              )
+            ), 
+
             React.createElement(FramedExample, {dashed: true, 
                            height: 394, 
                            onContentsRendered: desktopRoomStoreLoading.activeRoomStore.forcedUpdate, 
                            summary: "Desktop room conversation (loading)", 
                            width: 298}, 
               /* Hide scrollbars here. Rotating loading div overflows and causes
                scrollbars to appear */
               React.createElement("div", {className: "fx-embedded overflow-hidden"}, 
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@@ -24,16 +24,17 @@
   var GettingStartedView = loop.panel.GettingStartedView;
   // 1.2. Conversation Window
   var AcceptCallView = loop.conversationViews.AcceptCallView;
   var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
   var OngoingConversationView = loop.conversationViews.OngoingConversationView;
   var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
   var RoomFailureView = loop.roomViews.RoomFailureView;
   var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
+  var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
 
   // 2. Standalone webapp
   var HomeView = loop.webapp.HomeView;
   var UnsupportedBrowserView  = loop.webapp.UnsupportedBrowserView;
   var UnsupportedDeviceView   = loop.webapp.UnsupportedDeviceView;
   var StandaloneRoomView      = loop.standaloneRoomViews.StandaloneRoomView;
 
   // 3. Shared components
@@ -1385,16 +1386,33 @@
                   localPosterUrl="sample-img/video-screen-local.png"
                   mozLoop={navigator.mozLoop}
                   onCallTerminated={function(){}}
                   roomState={ROOM_STATES.INIT}
                   roomStore={invitationRoomStore} />
               </div>
             </FramedExample>
 
+            <FramedExample height={278.6}
+                           onContentsRendered={invitationRoomStore.activeRoomStore.forcedUpdate}
+                           summary="Desktop room Edit Context w/Error"
+                           width={298}>
+              <div className="fx-embedded room-invitation-overlay">
+                <DesktopRoomEditContextView
+                  dispatcher={dispatcher}
+                  error={{}}
+                  mozLoop={navigator.mozLoop}
+                  onClose={function(){}}
+                  roomData={{}}
+                  savingContext={false}
+                  show={true}
+                   />
+              </div>
+            </FramedExample>
+
             <FramedExample dashed={true}
                            height={394}
                            onContentsRendered={desktopRoomStoreLoading.activeRoomStore.forcedUpdate}
                            summary="Desktop room conversation (loading)"
                            width={298}>
               {/* Hide scrollbars here. Rotating loading div overflows and causes
                scrollbars to appear */}
               <div className="fx-embedded overflow-hidden">