Merge remote-tracking branch 'origin/open933' into open933-frontend-b

# Conflicts:
#	platform/features/conductor-v2/res/sass/time-conductor.scss
#	platform/features/conductor/res/sass/time-conductor.scss

main.js

@@ -90,7 +90,9 @@ define([
     './platform/features/pages/bundle',
     './platform/features/plot/bundle',
     './platform/features/timeline/bundle',
+    //'./platform/features/conductor/bundle',
     './platform/features/conductor-v2/bundle',
+    './platform/features/conductor-v2-compatibility/bundle',
     './platform/features/table/bundle',
     './platform/forms/bundle',
     './platform/identity/bundle',
@@ -101,8 +103,7 @@ define([
     './platform/entanglement/bundle',
     './platform/search/bundle',
     './platform/status/bundle',
-    './platform/commonUI/regions/bundle',
-    './example/msl/bundle'
+    './platform/commonUI/regions/bundle'
 ], function (Main, legacyRegistry) {
     return {
         legacyRegistry: legacyRegistry,

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -101,5 +101,6 @@
 <glyph unicode="&#xe621;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
 <glyph unicode="&#xe622;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
 <glyph unicode="&#xe623;" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
+<glyph unicode="&#xe624;" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>

platform/commonUI/general/res/sass/_constants.scss

@@ -48,7 +48,6 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (25px, 6px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;

platform/commonUI/general/res/sass/_icons.scss

@@ -30,6 +30,7 @@
 
 .ui-symbol {
     font-family: 'symbolsfont';
+    -webkit-font-smoothing: antialiased;
 	&.type-icon {
 		color: $colorObjHdrIc;
 	}

platform/commonUI/general/res/sass/_main.scss

@@ -41,7 +41,6 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/messages";
-@import "controls/time-conductor";
 @import "mobile/controls/menus";
 
 /********************************* FORMS */

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
-    <form class="l-time-conductor-inputs-holder l-flex-row flex-elem"
+    <form class="l-time-range-inputs-holder l-flex-row flex-elem"
           ng-submit="trCtrl.updateBoundsFromForm()">
         <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
         <span class="l-time-range-inputs-elem l-flex-row flex-elem">
@@ -86,7 +86,7 @@
         </div>
     </div>
 
-    <div class="l-time-conductor-ticks flex-elem">
+    <div class="l-time-range-ticks-holder flex-elem">
         <div class="l-time-range-ticks">
             <div
                 ng-repeat="tick in ticks track by $index"

platform/features/conductor-v2-compatibility/bundle.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    "./src/ConductorTelemetryDecorator",
+    "./src/ConductorRepresenter",
+    'legacyRegistry'
+], function (
+    ConductorTelemetryDecorator,
+    ConductorRepresenter,
+    legacyRegistry
+) {
+
+    legacyRegistry.register("platform/features/conductor-v2-compatibility", {
+        "extensions": {
+            "representers": [
+                {
+                    "implementation": ConductorRepresenter,
+                    "depends": [
+                        "timeConductor"
+                    ]
+                }
+            ],
+            "components": [
+                {
+                    "type": "decorator",
+                    "provides": "telemetryService",
+                    "implementation": ConductorTelemetryDecorator,
+                    "depends": [
+                        "timeConductor"
+                    ]
+                }
+            ]
+        }
+    });
+});

platform/features/conductor-v2-compatibility/src/ConductorRepresenter.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        function ConductorRepresenter(
+            conductor,
+            scope,
+            element
+        ) {
+            this.conductor = conductor;
+            this.scope = scope;
+            this.element = element;
+
+            this.boundsListener = this.boundsListener.bind(this);
+            this.timeSystemListener = this.timeSystemListener.bind(this);
+        }
+
+        ConductorRepresenter.prototype.boundsListener = function (bounds) {
+            this.scope.$broadcast('telemetry:display:bounds', {
+                start: bounds.start,
+                end: bounds.end,
+                domain: this.conductor.timeSystem().metadata.key
+            }, this.conductor.follow());
+        };
+
+        ConductorRepresenter.prototype.timeSystemListener = function (timeSystem) {
+            var bounds = this.conductor.bounds();
+            this.scope.$broadcast('telemetry:display:bounds', {
+                start: bounds.start,
+                end: bounds.end,
+                domain: timeSystem.metadata.key
+            });
+        };
+
+        // Handle a specific representation of a specific domain object
+        ConductorRepresenter.prototype.represent = function represent(representation) {
+            if (representation.key === 'browse-object') {
+                this.destroy();
+
+                this.conductor.on("bounds", this.boundsListener);
+                this.conductor.on("timeSystem", this.timeSystemListener);
+            }
+        };
+
+        ConductorRepresenter.prototype.destroy = function destroy() {
+            this.conductor.off("bounds", this.boundsListener);
+            this.conductor.off("timeSystem", this.timeSystemListener);
+        };
+
+        return ConductorRepresenter;
+    }
+);
+

platform/features/conductor-v2-compatibility/src/ConductorTelemetryDecorator.js

@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    function () {
+
+        /**
+         * Decorates the `telemetryService` such that requests are
+         * mediated by the time conductor. This is a modified version of the
+         * decorator used in the old TimeConductor that integrates with the
+         * new TimeConductor API.
+         *
+         * @constructor
+         * @memberof platform/features/conductor
+         * @implements {TelemetryService}
+         * @param {platform/features/conductor.TimeConductor} conductor
+         *        the service which exposes the global time conductor
+         * @param {TelemetryService} telemetryService the decorated service
+         */
+        function ConductorTelemetryDecorator(conductor, telemetryService) {
+            this.conductor = conductor;
+            this.telemetryService = telemetryService;
+        }
+
+        ConductorTelemetryDecorator.prototype.amendRequests = function (requests) {
+            var bounds = this.conductor.bounds(),
+                timeSystem = this.conductor.timeSystem();
+
+            function amendRequest(request) {
+                request = request || {};
+                request.start = bounds.start;
+                request.end = bounds.end;
+                request.domain = timeSystem.metadata.key;
+                return request;
+            }
+
+            return (requests || []).map(amendRequest);
+        };
+
+        ConductorTelemetryDecorator.prototype.requestTelemetry = function (requests) {
+            return this.telemetryService
+                .requestTelemetry(this.amendRequests(requests));
+        };
+
+        ConductorTelemetryDecorator.prototype.subscribe = function (callback, requests) {
+            return this.telemetryService
+                .subscribe(callback, requests);
+        };
+
+        return ConductorTelemetryDecorator;
+    }
+);

platform/features/conductor-v2/bundle.js

@@ -68,6 +68,11 @@ define([
                     ]
                 }
             ],
+            "stylesheets": [
+                {
+                    "stylesheetUrl": "css/time-conductor.css"
+                }
+            ],
             "representations": [
                 {
                     "key": "time-conductor",

platform/features/conductor-v2/res/sass/_constants.scss

@@ -0,0 +1,3 @@
+$ueTimeConductorH: (25px, 15px, 20px);
+$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
+$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00

platform/features/conductor-v2/res/sass/time-conductor.scss

@@ -1,3 +1,34 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@import "bourbon";
+@import "../../../../commonUI/general/res/sass/constants";
+@import "../../../../commonUI/general/res/sass/mixins";
+@import "../../../../commonUI/general/res/sass/mobile/constants";
+@import "../../../../commonUI/general/res/sass/mobile/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+@import "../../../../commonUI/general/res/sass/icons";
+@import "constants";
+
 @mixin toiLineHovEffects() {
     &:before,
     &:after {
@@ -14,40 +45,27 @@
 
 .time-conductor-icon {
     $c: $colorObjHdrIc;
-    $d: 20px;
-    background: $c;
-    border-radius: 4px;
+    $d: 18px;
     height: $d !important;
     width: $d;
     position: relative;
-    
-    // Icon shape: brackets
-    &:before,
-    &:after {
-        content: '';
-        background: $colorBodyBg;
-        position: absolute;
-    }
-    &:before {
-        $in: 7px;
-        left: $in;
-        top: 0;
-        right: $in;
-        bottom: 0;
 
-    }
-    &:after {
-        $in: 4px;
-        left: $in;
-        top: $in;
-        right: $in;
-        bottom: $in;
+    &:before {
+        @extend .ui-symbol;
+        color: $c;
+        content: '\e624';
+        font-size: $d;
+        line-height: normal;
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
     }
 
     // Clock hands
     div[class*="hand"] {
         $handW: 2px;
-        $handH: 8px;
+        $handH: $d * 0.4; //8px;
         @include transform(translate(-50%, -50%));
         @include animation-iteration-count(infinite);
         @include animation-timing-function(linear);
@@ -87,9 +105,9 @@
     $knobHOffset: 0px;
     $rangeValPad: $interiorMargin;
     $rangeValOffset: $sliderKnobW + $interiorMargin;
-    $r1H: nth($ueTimeControlH, 1);
-    $r2H: nth($ueTimeControlH, 2);
-    $r3H: nth($ueTimeControlH, 3);
+    $r1H: nth($ueTimeConductorH, 1);
+    $r2H: nth($ueTimeConductorH, 2);
+    $r3H: nth($ueTimeConductorH, 3);
 
     // Glyphs Todo: replace with refactored CSS approach when that is merged into master
     $glyphIconFixed: '\e604';
@@ -119,42 +137,54 @@
     }
 
     .l-time-conductor-inputs-holder,
-    .l-time-conductor-ticks,
+    .l-time-conductor-inputs-and-ticks,
     .l-time-conductor-zoom-w {
         font-size: 0.8rem;
     }
 
     .l-time-conductor-inputs-holder {
-        $trInputW: 180px;
-        $hmInputW: 60px;
         $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
 
         height: $r1H;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         z-index: 1;
         .l-time-range-w {
             // Wraps a datetime text input field
             height: 100%;
             position: absolute;
+            .title {
+                display: inline-block;
+                margin-right: $interiorMarginSm;
+            }
             &.start-w {
                 @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-right: $ticksBlockerFadeW;
+                .title:before {
+                    content: 'Start';
+                }
             }
             &.end-w {
                 @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-left: $ticksBlockerFadeW;
                 right: 0;
-                text-align: right;
+                .title:before {
+                    content: 'End';
+                }
             }
             input[type="text"] {
                 @include trans-prop-nice(padding, 250ms);
             }
-            .time-range-input input {
-                width: $trInputW;
+            .time-range-input input[type="text"] {
+                width: $timeCondInputTimeSysDefW;
             }
-            .hrs-min-input input {
-                width: $hmInputW;
+            .hrs-min-input input[type="text"] {
+                width: $timeCondInputDeltaDefW;
             }
             .icon-calendar {
                 margin-top: 4px;
@@ -162,7 +192,7 @@
         }
     }
 
-    .l-time-conductor-ticks {
+    .l-time-conductor-inputs-and-ticks {
         $c: $colorTick;
         height: $r1H;
         mct-conductor-axis {
@@ -215,22 +245,13 @@
                 color: $colorTick;
             }
         }
-
-    }
-    // Fixed
-    &.fixed-mode {
-        .time-conductor-icon div[class*="hand"] {
-            &.hand-little {
-                @include transform(rotate(120deg));
-            }
-        }
     }
 
-    // Realtime, latest modes
+    // Real-time, latest modes
     &.realtime-mode,
     &.latest-mode {
         .time-conductor-icon {
-            background: $colorTimeCondKeyBg;
+            &:before { color: $colorTimeCondKeyBg; }
             div[class*="hand"] {
                 @include animation-name(clock-hands);
                 &:before {
@@ -253,71 +274,94 @@
                         padding: $inputTextP;
                     }
                 }
-                &.start-date {
-                    pointer-events: none;
-                }
                 .icon-calendar {
                     display: none;
                 }
-                &.end-date {
+                &.start-date {
                     display: none;
                 }
+                &.end-date {
+                    pointer-events: none;
+                    input[type="text"] {
+                        color: pullForward($colorTimeCondKeyBg, 5%);
+                        margin-right: $interiorMargin;
+                        tab-index: -1;
+                    }
+                }
             }
         }
 
-        &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
-        &.latest-mode .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands-sticky);
-            &.hand-big { @include animation-duration(5s); }
-            &.hand-little { @include animation-duration(60s); }
-        }
-
         .l-data-visualization {
             background: $colorTimeCondDataVisRtBg !important
         }
+
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
         }
     }
+
+    // Fixed mode
     &.fixed-mode {
         $i: $glyphIconFixed;
+        .time-conductor-icon div[class*="hand"] {
+            &.hand-little {
+                @include transform(rotate(120deg));
+            }
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // Realtime mode
     &.realtime-mode {
         $i: $glyphIconRealtime;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands);
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'Now';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // LAD mode
     &.latest-mode {
         $i: $glyphIconLatest;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands-sticky);
+            &.hand-big {
+                @include animation-duration(5s);
+            }
+            &.hand-little {
+                @include animation-duration(60s);
+            }
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'LAD';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
 }
 
-.s-time-range-val {
-    border-radius: $controlCr;
-    background-color: $colorInputBg;
-    padding: 1px 1px 0 $interiorMargin;
-}
-
 /******************************************************************** MOBILE */
 
 @include phoneandtablet {
-    .l-time-conductor {
-        min-width: 0;
-        .l-time-range-slider-holder,
-        .l-time-conductor-ticks {
+    .l-time-conductor-holder { min-width: 0 !important; }
+    .super-menu.mini {
+        width: 200px;
+        height: 100px;
+        .pane.menu-item-description {
             display: none;
         }
     }
@@ -325,52 +369,76 @@
 
 @include phone {
     .l-time-conductor {
-        .l-time-conductor-inputs-holder {
-            &.l-flex-row,
-            .l-flex-row {
-                @include align-items(flex-start);
-            }
-            .l-time-range-inputs-elem {
-                &.type-icon {
-                    margin-top: 3px;
-                }
-            }
+        min-width: 0;
+        .l-time-conductor-inputs-and-ticks {
             .l-time-conductor-inputs-holder {
-                @include flex-direction(column);
-                .l-time-range-input-w:not(:first-child) {
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                    margin-right: 0;
-                }
-                .l-time-range-inputs-elem {
-                    &.lbl {
-                        display: none;
-                    }
+                .l-time-range-w {
+                    background-image: none !important;
                 }
             }
+            mct-conductor-axis {
+                display: none;
+            }
         }
     }
 }
 
 @include phonePortrait {
     .l-time-conductor {
-        .l-time-conductor-inputs-holder {
+        .l-data-visualization,
+        .l-time-conductor-zoom-w,
+        .time-delta {
+            display: none;
+        }
+
+        .l-time-conductor-inputs-and-ticks {
+            height: auto !important;
             .l-time-conductor-inputs-holder {
-                @include flex(1 1 auto);
-                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
-                .flex-elem {
-                    @include flex(1 1 auto);
-                    width: 100%;
+                position: relative;
+                height: auto !important;
+
+                .l-time-range-w {
+                    background-image: none !important;
+                    display: block;
+                    height: auto !important;
+                    padding: 0 !important;
+                    position: relative;
+                    text-align: left;
+                    &:not(:first-child) {
+                        margin-top: $interiorMargin;
+                    }
                 }
-                input[type="text"] {
-                    width: 100%;
+            }
+        }
+
+        // Fixed mode
+        &.fixed-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
+                    .title {
+                        width: 30px;
+                    }
+                }
+            }
+        }
+
+        // Real-time, latest modes
+        &.realtime-mode,
+        &.latest-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
+                    &.start-w {
+                        display: none;
+                    }
+                    &.end-w {
+                        margin-top: 0;
+                        .end-date input[type="text"] {
+                            margin: 0;
+                            text-align: left;
+                        }
+                    }
                 }
             }
         }
     }
-    .l-time-domain-selector {
-        right: auto;
-        left: 20px;
-    }
 }

platform/features/conductor-v2/res/templates/time-conductor.html

@@ -9,11 +9,12 @@
 
     <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
         <!-- Holds inputs and ticks -->
-        <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
-            <form class="abs l-time-conductor-inputs-holder"
+        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
+            <form class="l-time-conductor-inputs-holder"
                   ng-submit="tcController.updateBoundsFromForm(formModel)">
                 <span class="l-time-range-w start-w">
                     <span class="l-time-range-input-w start-date">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,
@@ -28,6 +29,7 @@
                     </span>
                         <span class="l-time-range-input-w time-delta start-delta"
                           ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+                            -
                         <mct-control key="'datetime-field'"
                                      structure="{
                                         format: 'duration',
@@ -41,22 +43,9 @@
                     </span>
                 </span>
                 <span class="l-time-range-w end-w">
-                    <span class="l-time-range-input-w time-delta end-delta"
-                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
-
-                        <mct-control key="'datetime-field'"
-                                     structure="{
-                                        format: 'duration',
-                                        validate: tcController.validation.validateEndDelta
-                                     }"
-                                     ng-model="formModel"
-                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
-                                     field="'endDelta'"
-                                     class="hrs-min-input">
-                        </mct-control>
-                    </span>
                     <span class="l-time-range-input-w end-date"
                           ng-controller="ToggleController as t2">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,
@@ -69,6 +58,20 @@
                                      class="time-range-input">
                         </mct-control>
                     </span>
+                    <span class="l-time-range-input-w time-delta end-delta"
+                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+                            +
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                        format: 'duration',
+                                        validate: tcController.validation.validateEndDelta
+                                     }"
+                                     ng-model="formModel"
+                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
+                                     field="'endDelta'"
+                                     class="hrs-min-input">
+                        </mct-control>
+                    </span>
                 </span>
 
                 <input type="submit" class="hidden">
@@ -77,7 +80,7 @@
         </div>
 
         <!-- Holds data availability, time of interest -->
-        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+        <div class="l-data-visualization l-row-elem flex-elem"></div>
 
         <!-- Holds time system and session selectors, and zoom control -->
         <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">

platform/features/conductor/bundle.js

@@ -47,13 +47,18 @@ define([
                     ]
                 }
             ],
+            "stylesheets": [
+                {
+                    "stylesheetUrl": "css/time-conductor.css"
+                }
+            ],
             "components": [
                 {
                     "type": "decorator",
                     "provides": "telemetryService",
                     "implementation": ConductorTelemetryDecorator,
                     "depends": [
-                        "timeConductor"
+                        "conductorService"
                     ]
                 }
             ],

platform/features/conductor/res/sass/time-conductor.scss

@@ -0,0 +1,300 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@import "bourbon";
+
+@import "../../../../commonUI/general/res/sass/constants";
+@import "../../../../commonUI/general/res/sass/mixins";
+@import "../../../../commonUI/general/res/sass/mobile/constants";
+@import "../../../../commonUI/general/res/sass/mobile/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+
+$ueTimeConductorH: (33px, 18px, 20px);
+
+@mixin toiLineHovEffects() {
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
+}
+
+.l-time-controller {
+    $minW: 500px;
+    $knobHOffset: 0px;
+    $knobM: ($sliderKnobW + $knobHOffset) * -1;
+    $rangeValPad: $interiorMargin;
+    $rangeValOffset: $sliderKnobW + $interiorMargin;
+    $timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
+    $r1H: nth($ueTimeConductorH,1);
+    $r2H: nth($ueTimeConductorH,2);
+    $r3H: nth($ueTimeConductorH,3);
+
+    min-width: $minW;
+    font-size: 0.8rem;
+
+    .l-time-range-inputs-holder,
+    .l-time-range-slider-holder,
+    .l-time-range-ticks-holder
+    {
+        box-sizing: border-box;
+        position: relative;
+        &:not(:first-child) {
+            margin-top: $interiorMargin;
+        }
+    }
+    .l-time-range-slider,
+    .l-time-range-ticks {
+        @include absPosDefault(0, visible);
+        left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
+    }
+
+    .l-time-range-inputs-holder {
+        border-top: 1px solid $colorInteriorBorder;
+        padding-top: $interiorMargin;
+        &.l-flex-row,
+        .l-flex-row {
+            @include align-items(center);
+            .flex-elem {
+                height: auto;
+                line-height: normal;
+            }
+        }
+        .type-icon {
+            font-size: 120%;
+            vertical-align: middle;
+        }
+        .l-time-range-input-w,
+        .l-time-range-inputs-elem {
+            margin-right: $interiorMargin;
+            .lbl {
+                color: $colorPlotLabelFg;
+            }
+            .ui-symbol.icon {
+                font-size: 11px;
+            }
+        }
+        .l-time-range-input-w {
+            // Wraps a datetime text input field
+            position: relative;
+            input[type="text"] {
+                width: 200px;
+                &.picker-icon {
+                    padding-right: 20px;
+                }
+            }
+            .icon-calendar {
+                position: absolute;
+                right: 5px;
+                top: 5px;
+            }
+        }
+    }
+
+    .l-time-range-slider-holder {
+        height: $r2H;
+        .range-holder {
+            box-shadow: none;
+            background: none;
+            border: none;
+            .range {
+                .toi-line {
+                    $myC: $timeControllerToiLineColor;
+                    $myW: 8px;
+                    @include transform(translateX(50%));
+                    position: absolute;
+                    top: 0; right: 0; bottom: 0px; left: auto;
+                    width: $myW;
+                    height: auto;
+                    z-index: 2;
+                    &:before {
+                        // Vert line
+                        background-color: $myC;
+                        position: absolute;
+                        content: "";
+                        top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
+                        width: 1px;
+                    }
+                }
+                &:hover .toi-line {
+                    @include toiLineHovEffects;
+                }
+            }
+        }
+        &:not(:active) {
+            .knob,
+            .range {
+                @include transition-property(left, right);
+                @include transition-duration(500ms);
+                @include transition-timing-function(ease-in-out);
+            }
+        }
+    }
+
+    .l-time-range-ticks-holder {
+        height: $r3H;
+        .l-time-range-ticks {
+            border-top: 1px solid $colorTick;
+            .tick {
+                background-color: $colorTick;
+                border:none;
+                height: 5px;
+                width: 1px;
+                margin-left: -1px;
+                position: absolute;
+                &:first-child {
+                    margin-left: 0;
+                }
+                .l-time-range-tick-label {
+                    @include webkitProp(transform, translateX(-50%));
+                    color: $colorPlotLabelFg;
+                    display: inline-block;
+                    font-size: 0.7rem;
+                    position: absolute;
+                    top: 5px;
+                    white-space: nowrap;
+                    z-index: 2;
+                }
+            }
+        }
+    }
+
+    .knob {
+        z-index: 2;
+        &:before {
+            $mTB: 2px;
+            $grippyW: 3px;
+            $mLR: ($sliderKnobW - $grippyW)/2;
+            @include bgStripes($c: pullForward($sliderColorKnob, 20%), $a: 1, $bgsize: 4px, $angle: 0deg);
+            content: '';
+            display: block;
+            position: absolute;
+            top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
+        }
+        .range-value {
+            @include trans-prop-nice-fade(.25s);
+            font-size: 0.7rem;
+            position: absolute;
+            height: $r2H;
+            line-height: $r2H;
+            white-space: nowrap;
+            z-index: 1;
+        }
+        &:hover {
+            .range-value {
+                color: $sliderColorKnobHov;
+            }
+        }
+        &.knob-l {
+            margin-left: $knobM;
+            .range-value {
+                text-align: right;
+                right: $rangeValOffset;
+            }
+        }
+        &.knob-r {
+            margin-right: $knobM;
+            .range-value {
+                left: $rangeValOffset;
+            }
+            &:hover + .range-holder .range .toi-line {
+                @include toiLineHovEffects;
+            }
+        }
+    }
+
+    .l-time-domain-selector {
+        position: absolute;
+        right: 0px;
+        top: $interiorMargin;
+    }
+
+}
+
+.s-time-range-val {
+    border-radius: $controlCr;
+    background-color: $colorInputBg;
+    padding: 1px 1px 0 $interiorMargin;
+}
+
+/******************************************************************** MOBILE */
+
+@include phoneandtablet {
+    .l-time-controller {
+        min-width: 0;
+        .l-time-range-slider-holder,
+        .l-time-range-ticks-holder {
+            display: none;
+        }
+    }
+}
+
+@include phone {
+    .l-time-controller {
+        .l-time-range-inputs-holder {
+            &.l-flex-row,
+            .l-flex-row {
+                @include align-items(flex-start);
+            }
+            .l-time-range-inputs-elem {
+                &.type-icon {
+                    margin-top: 3px;
+                }
+            }
+            .t-inputs-w,
+            .l-time-range-inputs-elem {
+                @include flex-direction(column);
+                .l-time-range-input-w:not(:first-child) {
+                    &:not(:first-child) {
+                        margin-top: $interiorMargin;
+                    }
+                    margin-right: 0;
+                }
+                .l-time-range-inputs-elem {
+                    &.lbl { display: none; }
+                }
+            }
+        }
+    }
+}
+
+@include phonePortrait {
+    .l-time-controller {
+        .l-time-range-inputs-holder {
+            .t-inputs-w,
+            .l-time-range-inputs-elem {
+                @include flex(1 1 auto);
+                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
+                .flex-elem {
+                    @include flex(1 1 auto);
+                    width: 100%;
+                }
+                input[type="text"] {
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .l-time-domain-selector {
+        right: auto;
+        left: 20px;
+    }
+}

platform/features/conductor/src/ConductorTelemetryDecorator.js

@@ -34,21 +34,22 @@ define(
          *        the service which exposes the global time conductor
          * @param {TelemetryService} telemetryService the decorated service
          */
-        function ConductorTelemetryDecorator(conductor, telemetryService) {
-            this.conductor = conductor;
+        function ConductorTelemetryDecorator(conductorService, telemetryService) {
+            this.conductorService = conductorService;
             this.telemetryService = telemetryService;
         }
 
         ConductorTelemetryDecorator.prototype.amendRequests = function (requests) {
-            var conductor = this.conductor,
-                bounds = conductor.bounds(),
-                start = bounds.start,
-                end = bounds.end;
+            var conductor = this.conductorService.getConductor(),
+                start = conductor.displayStart(),
+                end = conductor.displayEnd(),
+                domain = conductor.domain();
 
             function amendRequest(request) {
                 request = request || {};
                 request.start = start;
                 request.end = end;
+                request.domain = domain.key;
                 return request;
             }
 

platform/features/plot/bundle.js

@@ -72,7 +72,6 @@ define([
                         "$scope",
                         "telemetryFormatter",
                         "telemetryHandler",
-                        "timeConductor",
                         "throttle",
                         "PLOT_FIXED_DURATION"
                     ]

platform/features/plot/src/PlotController.js

@@ -65,7 +65,6 @@ define(
             $scope,
             telemetryFormatter,
             telemetryHandler,
-            conductor,
             throttle,
             PLOT_FIXED_DURATION
         ) {
@@ -126,7 +125,6 @@ define(
                     duration = PLOT_FIXED_DURATION;
 
                 updater = new PlotUpdater(handle, domain, range, duration);
-
                 lastDomain = domain;
                 lastRange = range;
 
@@ -229,18 +227,16 @@ define(
             }
 
             // Respond to a display bounds change (requery for data)
-            function changeDisplayBounds(bounds) {
-                //var domainAxis = $scope.axes[0];
+            function changeDisplayBounds(event, bounds, follow) {
+                //'hack' for follow mode
+                if (follow === true){
+                    setBasePanZoom(bounds);
+                } else {
+                    var domainAxis = $scope.axes[0];
 
-                //domainAxis.chooseOption(bounds.domain);
-                //updateDomainFormat();
-                setBasePanZoom(bounds);
-
-                // re-query historical. What do we do about ticks? Don't want
-                // to do a historical re-query on every tick. Need a
-                // forward-buffer I think...
-                // For now, if follow mode, don't requery
-                if (!conductor.follow()) {
+                    domainAxis.chooseOption(bounds.domain);
+                    updateDomainFormat();
+                    setBasePanZoom(bounds);
                     requery();
                 }
             }
@@ -271,8 +267,7 @@ define(
             $scope.$watch('domainObject', subscribe);
 
             // Respond to external bounds changes
-            //$scope.$on("telemetry:display:bounds", changeDisplayBounds);
-            conductor.on('bounds', changeDisplayBounds);
+            $scope.$on("telemetry:display:bounds", changeDisplayBounds);
 
             // Unsubscribe when the plot is destroyed
             $scope.$on("$destroy", releaseSubscription);

platform/features/plot/src/elements/PlotUpdater.js

@@ -164,11 +164,9 @@ define(
                 priorDomainDimensions = this.dimensions[0];
 
             if (bufferArray.length > 0) {
-                if (!this.domainExtrema) {
-                    this.domainExtrema = bufferArray.map(function (lineBuffer) {
-                        return lineBuffer.getDomainExtrema();
-                    }).reduce(reduceExtrema);
-                }
+                this.domainExtrema = bufferArray.map(function (lineBuffer) {
+                    return lineBuffer.getDomainExtrema();
+                }).reduce(reduceExtrema);
 
                 this.rangeExtrema = bufferArray.map(function (lineBuffer) {
                     return lineBuffer.getRangeExtrema();

platform/features/table/src/controllers/HistoricalTableController.js

@@ -63,6 +63,28 @@ define(
             this.$scope.loading = false;
         };
 
+        /**
+         * @private
+         */
+        HistoricalTableController.prototype.registerChangeListeners = function () {
+            TableController.prototype.registerChangeListeners.call(this);
+            //Change of bounds in time conductor
+            this.changeListeners.push(this.$scope.$on('telemetry:display:bounds',
+                    this.boundsChange.bind(this))
+            );
+        };
+
+        /**
+         * @private
+         */
+        HistoricalTableController.prototype.boundsChange = function (event, bounds, follow) {
+            // If in follow mode, don't bother re-subscribing, data will be
+            // received from existing subscription.
+            if (follow!==true) {
+                this.subscribe();
+            }
+        };
+
         /**
          * Processes an array of objects, formatting the telemetry available
          * for them and setting it on scope when done

platform/features/table/src/controllers/TelemetryTableController.js

@@ -96,11 +96,6 @@ define(
                     }
                 })
             );
-
-            //Change of bounds in time conductor
-            this.changeListeners.push(this.$scope.$on('telemetry:display:bounds',
-                this.subscribe.bind(this))
-            );
         };
 
         /**