Amended change so that context menu only suppressed on navigation menu

Change method names, add a getter to status capability;
per code review feedback, nasa/openmctweb#319.

.gitignore

@@ -28,3 +28,5 @@ node_modules
 # Protractor logs
 protractor/logs
 
+# npm-debug log
+npm-debug.log

LICENSES.md

@@ -345,6 +345,41 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 ---
 
+### moment-duration-format
+
+#### Info
+
+* Link: https://github.com/jsmreese/moment-duration-format
+
+* Version: 1.3.0
+
+* Authors: John Madhavan-Reese
+
+* Description: Duration parsing/formatting
+
+#### License
+
+Copyright 2014 John Madhavan-Reese
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
 ### Json.NET
 
 #### Info

bundles.json

@@ -15,19 +15,23 @@
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
+    "platform/features/clock",
+    "platform/features/events",
     "platform/features/imagery",
     "platform/features/layout",
     "platform/features/pages",
     "platform/features/plot",
     "platform/features/scrolling",
-    "platform/features/events",
+    "platform/features/timeline",
     "platform/forms",
     "platform/identity",
+    "platform/persistence/aggregator",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
     "platform/entanglement",
     "platform/search",
+    "platform/status",
 
     "example/imagery",
     "example/eventGenerator",

circle.yml

@@ -1,3 +1,6 @@
+test:
+  override:
+    - exit 0
 deployment:
   production:
     branch: master
@@ -5,7 +8,7 @@ deployment:
       - ./build-docs.sh
       - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
   openmctweb-staging-un:
-    branch: search
+    branch: open199
     heroku:
       appname: openmctweb-staging-un
   openmctweb-staging-deux:

docs/footer.html

@@ -0,0 +1,9 @@
+        <hr>
+        <cite>
+            This document is styled using
+            <a href="https://github.com/jasonm23/markdown-css-themes">
+                https://github.com/jasonm23/markdown-css-themes
+            </a>.
+        </cite>
+    </body>
+</html>

docs/gendocs.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/*global require,process,GLOBAL*/
+/*global require,process,__dirname,GLOBAL*/
 /*jslint nomen: false */
 
 
@@ -47,6 +47,8 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
         nomnoml = require('nomnoml'),
         toc = require("markdown-toc"),
         Canvas = require('canvas'),
+        header = fs.readFileSync(path.resolve(__dirname, 'header.html')),
+        footer = fs.readFileSync(path.resolve(__dirname, 'footer.html')),
         options = require("minimist")(process.argv.slice(2));
 
     // Convert from nomnoml source to a target PNG file.
@@ -115,9 +117,9 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
             // Prepend table of contents
             markdown =
                 [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
-            this.push("<html><body>\n");
+            this.push(header);
             this.push(marked(markdown));
-            this.push("\n</body></html>\n");
+            this.push(footer);
             done();
         };
         return transform;
@@ -186,12 +188,12 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
             var destination = file.replace(options['in'], options.out),
                 destPath = path.dirname(destination),
                 streamOptions = {};
-            if (file.match(/png$/)){
+            if (file.match(/png$/)) {
                 streamOptions.encoding = null;
             } else {
                 streamOptions.encoding = 'utf8';
             }
-            
+
             mkdirp(destPath, function (err) {
                 fs.createReadStream(file, streamOptions)
                     .pipe(fs.createWriteStream(destination, streamOptions));

docs/header.html

@@ -0,0 +1,7 @@
+<html>
+    <head>
+        <link rel="stylesheet"
+              href="http://jasonm23.github.io/markdown-css-themes/avenir-white.css">
+    </head>
+    <body>
+

docs/src/architecture/index.md

@@ -58,13 +58,13 @@ of the software.
 
 These layers are:
 
-* [_Framework_](Framework.md): The framework layer is responsible for
+* [_Framework_](framework.md): The framework layer is responsible for
   managing the interactions between application components. It has no
   application-specific knowledge; at this layer, we have only
   established an abstraction by which different software components
   may communicate and/or interact.
-* [_Platform_](Platform.md): The platform layer defines the general look, feel, and
-  behavior of Open MCT Web. This includes user-facing components like
+* [_Platform_](platform.md): The platform layer defines the general look, 
+  feel, and behavior of Open MCT Web. This includes user-facing components like
   Browse mode and Edit mode, as well as underlying elements of the
   information model and the general service infrastructure.
 * _Application_: The application layer defines specific features of

docs/src/guide/index.md

@@ -129,7 +129,7 @@ The framework's role in the application is to manage connections between
 bundles. All application-specific behavior is provided by individual bundles, or
 as the result of their collaboration.
 
-The framework is described in more detail in the [Framework Overview](../architecture/Framework.md#Overview) of the 
+The framework is described in more detail in the [Framework Overview](../architecture/framework.md#overview) of the 
 architecture guide.
 
 ### Tiers
@@ -186,7 +186,8 @@ as well as the framework layer's role in mediating between these components.
 Once the framework layer has wired these software components together, however,
 the application's logical architecture emerges.
 
-An overview of the logical architecture of the platform is given in the [Platform Architecture](../architecture/Platform.md#PlatformArchitecture) 
+An overview of the logical architecture of the platform is given in the 
+[Platform Architecture](../architecture/platform.md#platform-architecture) 
 section of the Platform guide
 
 ### Web Services
@@ -233,7 +234,7 @@ The application is composed of bundles. Plug-ins are bundles.
 non-persistent state associated with a domain object.
 * __category__: A machine-readable identifier for a group that something may 
 belong to.
-* __composition __: In the context of a domain object, this refers to the set of 
+* __composition__: In the context of a domain object, this refers to the set of 
 other domain objects that compose or are contained by that object. A domain 
 object's composition is the set of domain objects that should appear immediately
  beneath it in a tree hierarchy. A domain object's composition is described in 
@@ -244,10 +245,10 @@ identifiers asynchronously.
 readable description of a thing; usually a single sentence or short paragraph. 
 (Most often used in the context of extensions, domain object models, or other 
 similar application-specific objects.) 
-* __domain object __: A meaningful object to the user; a distinct thing in the 
+* __domain object__: A meaningful object to the user; a distinct thing in the 
 work support by Open MCT Web. Anything that appears in the left-hand tree is a 
 domain object. 
-* __extension __: An extension is a unit of functionality exposed to the platform 
+* __extension__: An extension is a unit of functionality exposed to the platform 
 in a declarative fashion by a bundle. The term 'extension category' is used to 
 distinguish types of extensions from specific extension instances. 
 * __id__: A string which uniquely identifies a domain object. 
@@ -609,8 +610,8 @@ path relative to the bundle's resource directory (`res` by default.)
 
 ### Composite Services
 
-Composite services are described in the [relevant section](../architecture/Framework.md#Composite-Services) 
-of the framework guide.
+Composite services are described in the [Composite Services](../architecture/framework.md#composite-services) 
+section of the framework guide.
 
 A component should include the following properties in its extension definition:
 
@@ -676,6 +677,40 @@ If the provided capability has no invoke method, the return value here functions
 as `getCapability` including returning `undefined` if the capability is not 
 exposed.
 
+### Identifier Syntax
+
+For most purposes, a domain object identifier can be treated as a purely
+symbolic string; these are typically generated by Open MCT Web and plug-ins
+should rarely be concerned with its internal structure.
+
+A domain object identifier has one or two parts, separated by a colon.
+
+* If two parts are present, the part before the colon refers to the space
+  in which the domain object resides. This may be a persistence space or
+  a purely symbolic space recognized by a specific model provider. The
+  part after the colon is the key to use when looking up the domain object
+  model within that space.
+* If only one part is present, the domain object has no space specified,
+  and may presume to reside in the application-configured default space
+  defined by the `PERSISTENCE_SPACE` constant.
+* Both the key and the space identifier may consist of any combination
+  of alphanumeric characters, underscores, dashes, and periods.
+
+Some examples:
+
+* A domain object with the identifier `foo:xyz` would have its model
+  loaded using key `xyz` from persistence space `foo`.
+* A domain object with the identifier `bar` would have its model loaded
+  using key `bar` from the space identified by the `PERSISTENCE_SPACE`
+  constant.
+
+```bnf
+<identifier> ::= <space> ":" <key> | <key>
+<space> ::= <id char>+
+<key> ::= <id char>+
+<id char> ::= <letter> | <digit> | "-" | "." | "_"
+```
+
 ## Domain Object Actions
 
 An `Action` is behavior that can be performed upon/using a `DomainObject`. An 
@@ -724,8 +759,8 @@ interpretations for specific sources.
 
 ### Telemetry Responses
 
-When returned from the `telemetryService` (see [Services](#Services) section), 
-telemetry series data will be packaged in a `source -> key -> TelemetrySeries` 
+When returned from the `telemetryService` (see [Telemetry Services](#telemetry-service) 
+section), telemetry series data will be packaged in a `source -> key -> TelemetrySeries` 
 fashion. That is, telemetry is passed in an object containing key-value pairs. 
 Keys identify telemetry sources; values are objects containing additional 
 key-value pairs. In this object, keys identify individual telemetry series (and 
@@ -1042,7 +1077,7 @@ Angular templates which need to interact with information (e.g. the domain
 object being represented) provided by the platform. This information is passed 
 in through the template's scope, such that simple representations may be created 
 by providing only templates. (More complex representations will need controllers 
-which are referenced from templates. See [https://docs.angularjs.org/guide/controller ]()
+which are referenced from templates. See https://docs.angularjs.org/guide/controller
 for more information on controllers in Angular.) 
  
 A representation's scope will contain:
@@ -1074,7 +1109,7 @@ representing domain objects in general. For example, support for the  _gestures_
 extension category is added by a _representer_.
 
 A representer needs only provide an implementation. When an `mct-representation` 
-is linked (see  [https://docs.angularjs.org/guide/directive ]() or when the 
+is linked (see https://docs.angularjs.org/guide/directive ) or when the 
 domain object being represented changes, a new _representer_ of each declared 
 type is instantiated. The constructor arguments for a _representer_ are the same 
 as the arguments to the link function in an Angular directive: `scope` the 
@@ -1106,6 +1141,8 @@ property:
 * `stylesheetUrl`: Path and filename, including extension, for the stylesheet to 
 include. This path is relative to the bundle's resources folder (by default,  
 `res`) 
+* `theme`: Optional; if present, this stylesheet will only be included if this
+value matches the `THEME` constant.
  
 To control the order of CSS files, use priority  (see the section on Extension 
 Definitions above.) 
@@ -1155,7 +1192,7 @@ capability.
 (as should appear in the _Create_ or the _Edit Properties_ dialog.) Each 
 property is described by an object containing the following properties:
     * `control`: The key of the control (see `mct-control` and the `controls` 
-    [extension category](#Controls)) to use for editing this property. 
+    [extension category](#controls-category)) to use for editing this property. 
     * `property`: A string which will be used as the name of the property in the 
     domain object's model that the value for this property should be stored 
     under. If this value should be stored in an object nested within the domain 
@@ -1178,7 +1215,7 @@ the list of version information in the About dialog.
 dialog.
 
 To control the ordering of line items within the About dialog, use `priority`. 
-(See section on [Extension Definitions](#ExtensionDefinitions) above.) 
+(See section on [Extensions](#extensions) above.) 
 
 This extension category does not have implementations. 
  
@@ -1200,7 +1237,7 @@ applicable for domain objects which have the capabilities identified by these
 strings. 
 * `delegation`: Optional boolean, intended to be used in conjunction with  
 `needs`;  if present, allow required capabilities to be satisfied by means of 
-capability delegation. (See [Delegation](#Delegation))
+capability delegation. (See [Delegation](#delegation-capability))
 * `toolbar`: Optional; a definition for the toolbar which may appear in a 
 toolbar when using this view in Edit mode. This should be specified as a 
 structure for mct-toolbar , with additional properties available for each item in 
@@ -1231,8 +1268,8 @@ A view's selection state is, conceptually, a set of JavaScript objects. The
 presence of methods/properties on these objects determine which toolbar controls 
 are visible, and what state they manage and/or behavior they invoke. 
 
-This set may contain up to two different objects: The  _view proxy _, which is 
-used to make changes to the view as a whole, and the _ selected object _, which is 
+This set may contain up to two different objects: The  _view proxy_, which is 
+used to make changes to the view as a whole, and the _selected object_, which is 
 used to represent some state within the view. (Future versions of Open MCT Web 
 may support multiple selected objects.) 
 
@@ -1251,6 +1288,22 @@ object, or the current view proxy.
 * `all()`: Get an array of all objects in the selection state. Will include 
 either or both of the view proxy and selected object. 
 
+## Workers Category
+
+The `workers` extension category allows scripts to be run as web workers
+using the `workerService`.
+
+An extension of this category has no implementation. The following properties
+are supported:
+
+* `key`: A symbolic string used to identify this worker.
+* `workerUrl`: The path, relative to this bundle's `src` folder, where
+  this worker's source code resides.
+* `shared`: Optional; a boolean flag which, if true, indicates that this
+  worker should be instantiated as a
+  [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker).
+  Default value is `false`.
+
 # Directives
 
 Open MCT Web defines several Angular directives that are intended for use both 
@@ -1561,7 +1614,8 @@ extension mechanism is insufficient to achieve a desired result.
  
 ### Action Service
 
-The [Action Service](../architecture/platform#action-service) (`actionService`) 
+The [Action Service](../architecture/platform.md#action-service) 
+(`actionService`) 
 provides `Action` instances which are applicable in specific contexts. See Core 
 API for additional notes on the interface for actions. The `actionService` has 
 the following interface: 
@@ -1571,7 +1625,8 @@ in the specified action context.
 
 ### Capability Service 
 
-The [Capability Service](../architecture/platform#capability-service) (`capabilityService`) 
+The [Capability Service](../architecture/platform.md#capability-service) 
+(`capabilityService`) 
 provides constructors for capabilities which will be exposed for a given domain 
 object. 
 
@@ -1691,7 +1746,7 @@ allowed within the application. It has the following interface:
 * `allow(category, candidate, context, [callback])`: Check if this decision 
 should be allowed. Returns a boolean. Its arguments are interpreted as: 
     * `category`: A string identifying which kind of decision is being made. See 
-    the [section on Categories](#PolicyCategories) for categories supported by 
+    the [section on Categories](#policy-categories) for categories supported by 
     the platform; plugins may define and utilize policies of additional 
     categories, as well. 
     * `candidate`: An object representing the thing which shall or shall not be 
@@ -1717,7 +1772,7 @@ When acquiring telemetry for display, it is recommended that the
 `telemetryHandler` service be used instead of this service. The 
 `telemetryHandler` has additional support for subscribing to and requesting 
 telemetry data associated with domain objects or groups of domain objects. See 
-the [Other Services](#Other-Services) section for more information. 
+the [Other Services](#other-services) section for more information. 
 
 The `telemetryService` has the following interface:
 
@@ -1844,6 +1899,14 @@ the TelemetrySeries itself, in that order.
 * `getSeries(domainObject)`: Get the latest `TelemetrySeries` (as resulted from 
 a previous `request(...)` call) available for this domain object.
 
+### Worker Service
+
+The `workerService` may be used to run web workers defined via the
+`workers` extension category. It has the following method:
+
+* `run(key)`: Run the worker identified by the provided `key`. Returns
+  a `Worker` (or `SharedWorker`, if the specified worker is defined
+  as a shared worker); if the `key` is unknown, returns `undefined`.
 
 # Models
 Domain object models in Open MCT Web are JavaScript objects describing the 
@@ -2051,6 +2114,31 @@ objects which has a `relationships` property in their model, whose value is an
 object containing key-value pairs, where keys are strings identifying 
 relationship types, and values are arrays of domain object identifiers.
 
+## Status Capability
+
+The `status` capability provides a way to flag domain objects as possessing
+certain states, represented as simple strings. These states, in turn, are
+reflected on `mct-representation` elements as classes (prefixed with
+`s-status-`.) The `status` capability has the following interface:
+
+* `get()`: Returns an array of all status strings that currently apply
+  to this object.
+* `set(status, state)`: Adds or removes a status flag to this domain object.
+  The `status` argument is the string to set; `state` is a boolean
+  indicating whether this status should be included (true) or removed (false).
+* `listen(callback)`: Listen for changes in status. The provided `callback`
+  will be invoked with an array of all current status strings whenever status
+  changes.
+
+Plug-ins may add and/or recognize arbitrary status flags. Flags defined
+and/or supported by the platform are:
+
+ Status    | CSS Class          | Meaning
+-----------|--------------------|-----------------------------------
+`editing`  | `s-status-editing` | Domain object is being edited.
+`pending`  | `s-status-pending` | Domain object is partially loaded.
+
+
 ## Telemetry Capability
 
 The telemetry capability provides a means for accessing telemetry data 
@@ -2152,7 +2240,7 @@ development. A few utilities are included to support development processes.
 
 ## Command-line Build
 Open MCT Web includes a script for building via command line using Maven 3.0.4 
-[https://maven.apache.org/]().
+https://maven.apache.org/ .
         
 Invoking mvn clean install will:
 
@@ -2169,7 +2257,7 @@ download build dependencies.
 
 ## Test Suite
 
-Open MCT Web uses Jasmine [http://jasmine.github.io/]() for automated testing. 
+Open MCT Web uses Jasmine http://jasmine.github.io/ for automated testing. 
 The file `test.html` included at the top level of the source repository, can be 
 run from the browser to perform tests for all active bundles, as defined in 
 `bundle.json`.
@@ -2260,30 +2348,30 @@ Examples of deployment strategies (and the conditions under which they make the
 most sense) include:
 
 * If the external services that Open MCT Web will utilize are all running on 
-Apache Tomcat [https://tomcat.apache.org/](), then it makes sense to run Open 
+[Apache Tomcat](https://tomcat.apache.org/), then it makes sense to run Open 
 MCT Web from the same Tomcat instance as a separate web application. The 
 `.war` artifact produced by the command line build facilitates this deployment 
-option. (See [https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html() for 
+option. (See https://tomcat.apache.org/tomcat-8.0-doc/deployer-howto.html for 
 general information on deploying in Tomcat.)
 * If a variety of external services will be running from a variety of 
 hosts/ports, then it may make sense to use a web server that supports proxying, 
-such as the Apache HTTP Server [http://httpd.apache.org/](). In this 
+such as the [Apache HTTP Server](http://httpd.apache.org/). In this 
 configuration, the HTTP server would be configured to proxy (or reverse proxy) 
 requests at specific paths to the various external services, while providing 
 Open MCT Web as flat files from a different path.
 * If a single server component is being developed to handle all server-side 
 needs of an Open MCT Web instance, it can make sense to serve Open MCT Web (as 
-flat files) from the same component using an embedded HTTP server such as Nancy 
-[http://nancyfx.org/]().
+flat files) from the same component using an embedded HTTP server such as 
+[Nancy](http://nancyfx.org/).
 * If no external services are needed (or if the 'external services' will just 
 be generating flat files to read) it makes sense to utilize a lightweight flat 
-file HTTP server such as Lighttpd [http://www.lighttpd.net/](). In this 
+file HTTP server such as [Lighttpd](http://www.lighttpd.net/). In this 
 configuration, Open MCT Web sources/resources would be placed at one path, while 
 the files generated by the external service are placed at another path.
 * If all external services support CORS, it may make sense to have an HTTP 
 server that is solely responsible for making Open MCT Web sources/resources 
 available, and to have Open MCT Web contact these external services directly. 
-Again, lightweight HTTP servers such as Lighttpd [http://www.lighttpd.net/]() 
+Again, lightweight HTTP servers such as [Lighttpd](http://www.lighttpd.net/) 
 are useful in this circumstance. The downside of this option is that additional 
 configuration effort is required, both to enable CORS on the external services, 
 and to ensure that Open MCT Web can correctly locate these services.
@@ -2323,7 +2411,17 @@ default paths to reach external services are all correct.
 
 ### Configuration Constants
 
+The following constants have global significance:
+* `PERSISTENCE_SPACE`: The space in which domain objects should be persisted
+  (or read from) when not otherwise specified. Typically this will not need
+  to be overridden by other bundles, but persistence adapters may wish to
+  consume this constant in order to provide persistence for that space.
+
 The following configuration constants are recognized by Open MCT Web bundles:
+* Common UI elements - `platform/commonUI/general`
+    * `THEME`: A string identifying the current theme symbolically. Individual
+    stylesheets (the `stylesheets` extension category) may specify an optional
+    `theme` property which will be matched against this before inclusion.
 * CouchDB adapter - `platform/persistence/couch`
     * `COUCHDB_PATH`: URL or path to the CouchDB database to be used for domain 
     object persistence. Should not include a trailing slash.

docs/src/index.html

@@ -32,6 +32,7 @@
         <li><a href="architecture/">Architecture Overview</a></li>
         <li><a href="guide/">Developer Guide</a></li>
         <li><a href="tutorials/">Tutorials</a></li>
+        <li><a href="process/">Development Process</a></li>
     </ul>
 </body>
 </html>

docs/src/process/index.md

@@ -0,0 +1,156 @@
+# Development Cycle
+
+Development of Open MCT Web occurs on an iterative cycle of
+sprints and releases.
+
+* A _sprint_ is three weeks in duration, and represents a
+  set of improvements that can be completed and tested by the
+  development team. Software at the end of the sprint is
+  "semi-stable"; it will have undergone reduced testing and may carry
+  defects or usability issues of lower severity, particularly if
+  there are workarounds.
+* A _release_ occurs every four sprints. Releases are stable, and
+  will have undergone full acceptance testing to ensure that the
+  software behaves correctly and usably.
+
+## Roles
+
+The sprint process assumes the presence of a __project manager.__
+The project manager is responsible for
+making tactical decisions about what development work will be
+performed, and for coordinating with stakeholders to arrive at
+higher-level strategic decisions about desired functionality
+and characteristics of the software, major external milestones,
+and so forth.
+
+In the absence of a dedicated project manager, this role may be rotated
+among members of the development team on a per-sprint basis.
+
+Responsibilities of the project manager including:
+
+* Maintaining (with agreement of stakeholders) a "road map" of work
+  planned for future releases/sprints; this should be higher-level,
+  usually expressed as "themes",
+  with just enough specificity to gauge feasibility of plans,
+  relate work back to milestones, and identify longer-term
+  dependencies.
+* Determining (with assistance from the rest of the team) which
+  issues to work on in a given sprint and how they shall be
+  assigned.
+* Pre-planning subsequent sprints to ensure that all members of the
+  team always have a clear direction.
+* Scheduling and/or ensuring adherence to
+  [process points](#process-points).
+* Responding to changes within the sprint (shifting priorities,
+  new issues) and re-allocating work for the sprint as needed.
+
+## Sprint Calendar
+
+Certain [process points](#process-points) are regularly scheduled in
+the sprint cycle.
+
+### Sprints by Release
+
+Allocation of work among sprints should be planned relative to release
+goals and milestones. As a general guideline, higher-risk work (large
+new features which may carry new defects, major refactoring, design
+changes with uncertain effects on usability) should be allocated to
+earlier sprints, allowing for time in later sprints to ensure stability.
+
+| Sprint | Focus                                                   |
+|:------:|:--------------------------------------------------------|
+| __1__  | Prototyping, design, experimentation.                   |
+| __2__  | New features, refinements, enhancements.                |
+| __3__  | Feature completion, low-risk enhancements, bug fixing.  |
+| __4__  | Stability & quality assurance.                          |
+
+### Sprints 1-3
+
+The first three sprints of a release are primarily centered around
+development work, with regular acceptance testing in the third
+week. During this third week, the top priority should be passing
+acceptance testing (e.g. by resolving any blockers found); any
+resources not needed for this effort should be used to begin work
+for the subsequent sprint.
+
+| Week  | Mon                       | Tue    | Wed | Thu                          | Fri         |
+|:-----:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
+| __1__ | Sprint plan               | Tag-up |     |                              |             |
+| __2__ |                           | Tag-up |     |                              | Code freeze |
+| __3__ | Sprint acceptance testing | Triage |     | _Sprint acceptance testing*_ | Ship        |
+
+* If necessary.
+
+### Sprint 4
+
+The software must be stable at the end of the fourth sprint; because of
+this, the fourth sprint is scheduled differently, with a heightened
+emphasis on testing.
+
+| Week   | Mon                       | Tue    | Wed | Thu                          | Fri         |
+|-------:|:-------------------------:|:------:|:---:|:----------------------------:|:-----------:|
+| __1__  | Sprint plan               | Tag-up |     |                              | Code freeze |
+| __2__  | Acceptance testing        | Triage |     |                              |             |
+| __3__  | _Acceptance testing*_     | Triage |     | _Acceptance testing*_        | Ship        |
+
+* If necessary.
+
+## Process Points
+
+* __Sprint plan.__ Project manager allocates issues based on
+  theme(s) for sprint, then reviews with team. Each team member
+  should have roughly two weeks of work allocated (to allow time
+  in the third week for testing of work completed.)
+  * Project manager should also sketch out subsequent sprint so
+    that team may begin work for that sprint during the
+    third week, since testing and blocker resolution is unlikely
+    to require all available resources.
+* __Tag-up.__ Check in and status update among development team.
+  May amend plan for sprint as-needed.
+* __Code freeze.__ Any new work from this sprint
+  (features, bug fixes, enhancements) must be integrated by the
+  end of the second week of the sprint. After code freeze
+  (and until the end of the sprint) the only changes that should be
+  merged into the master branch should directly address issues
+  needed to pass acceptance testing.
+* __Acceptance Testing.__ Structured testing with predefined
+  success criteria. No release should ship without passing
+  acceptance tests. Time is allocated in each sprint for subsequent
+  rounds of acceptance testing if issues are identified during a
+  prior round. Specific details of acceptance testing need to be
+  agreed-upon with relevant stakeholders and delivery recipients,
+  and should be flexible enough to allow changes to plans
+  (e.g. deferring delivery of some feature in order to ensure
+  stability of other features.) Baseline testing includes:
+  * __Testathon.__ Multi-user testing, involving as many users as
+    is feasible, plus development team. Open-ended; should verify
+    completed work from this sprint, test exploratorily for
+    regressions, et cetera.
+  * __24-Hour Test.__ A test to verify that the software remains
+    stable after running for longer durations. May include some
+    combination of automated testing and user verification (e.g.
+    checking to verify that software remains subjectively
+    responsive at conclusion of test.)
+  * __Automated Testing.__ Automated testing integrated into the
+    build. (These tests are verified to pass more often than once
+    per sprint, as they run before any merge to master, but still
+    play an important role in acceptance testing.)
+* __Sprint Acceptance Testing.__ Subset of Acceptance Testing
+  which should be performed before shipping at the end of any
+  sprint. Time is allocated for a second round of
+  Sprint Acceptance Testing if the first round is not passed.
+* __Triage.__ Team reviews issues from acceptance testing and uses
+  success criteria to determine whether or not they should block
+  release, then formulates a plan to address these issues before
+  the next round of acceptance testing. Focus here should be on
+  ensuring software passes that testing in order to ship on time;
+  may prefer to disable malfunctioning components and fix them
+  in a subsequent sprint, for example.
+* __Ship.__ Tag a code snapshot that has passed acceptance
+  testing and deploy that version. (Only true if acceptance
+  testing has passed by this point; if acceptance testing has not
+  been passed, will need to make ad hoc decisions with stakeholders,
+  e.g. "extend the sprint" or "defer shipment until end of next
+  sprint.")
+
+

example/generator/src/SinewaveTelemetrySeries.js

@@ -62,7 +62,7 @@ define(
                 // so it's not checked for here, just formatted for display
                 // differently.
                 return (i + offset) * 1000 + firstTime * 1000 -
-                    (domain === 'yesterday' ? ONE_DAY : 0);
+                    (domain === 'yesterday' ? (ONE_DAY * 1000) : 0);
             };
 
             generatorData.getRangeValue = function (i, range) {

example/mobile/bundle.json

@@ -0,0 +1,12 @@
+{
+  "name": "Mobile",
+  "description": "Allows elements with pertinence to mobile usage and development",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/mobile-example.css",
+        "priority": "mandatory"
+      }
+    ]
+  }
+}

example/mobile/res/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

example/mobile/res/css/mobile-example.css

@@ -0,0 +1,103 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/************************** LIMITS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* REQUIRES mobile/_constants */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 28, ../sass/mobile-example.scss */
+  .create-btn-holder {
+    display: block !important; } }

example/mobile/res/sass/mobile-example.scss

@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * 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 "../../../../platform/commonUI/general/res/sass/constants";
+@import "../../../../platform/commonUI/general/res/sass/mobile/constants";
+@import "../../../../platform/commonUI/general/res/sass/mobile/mixins";
+
+@include phoneandtablet {
+    // Show the Create button
+    .create-btn-holder {
+        display: block !important;
+    }
+}

example/scratchpad/README.md

@@ -0,0 +1,2 @@
+Example of using multiple persistence stores by exposing a root
+object with a different space prefix.

example/scratchpad/bundle.json

@@ -0,0 +1,23 @@
+{
+    "extensions": {
+        "roots": [
+            {
+                "id": "scratch:root",
+                "model": {
+                    "type": "folder",
+                    "composition": [],
+                    "name": "Scratchpad"
+                },
+                "priority": "preferred"
+            }
+        ],
+        "components": [
+            {
+                "provides": "persistenceService",
+                "type": "provider",
+                "implementation": "ScratchPersistenceProvider.js",
+                "depends": [ "$q" ]
+            }
+        ]
+    }
+}

example/scratchpad/src/ScratchPersistenceProvider.js

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        /**
+         * The ScratchPersistenceProvider keeps JSON documents in memory
+         * and provides a persistence interface, but changes are lost on reload.
+         * @memberof example/scratchpad
+         * @constructor
+         * @implements {PersistenceService}
+         * @param q Angular's $q, for promises
+         */
+        function ScratchPersistenceProvider($q) {
+            this.$q = $q;
+            this.table = {};
+        }
+
+        ScratchPersistenceProvider.prototype.listSpaces = function () {
+            return this.$q.when(['scratch']);
+        };
+
+        ScratchPersistenceProvider.prototype.listObjects = function (space) {
+            return this.$q.when(
+                space === 'scratch' ? Object.keys(this.table) : []
+            );
+        };
+
+        ScratchPersistenceProvider.prototype.createObject = function (space, key, value) {
+            if (space === 'scratch') {
+                this.table[key] = JSON.stringify(value);
+            }
+            return this.$q.when(space === 'scratch');
+        };
+
+        ScratchPersistenceProvider.prototype.readObject = function (space, key) {
+            return this.$q.when(
+                (space === 'scratch' && this.table[key]) ?
+                        JSON.parse(this.table[key]) : undefined
+            );
+        };
+
+        ScratchPersistenceProvider.prototype.deleteObject = function (space, key, value) {
+            if (space === 'scratch') {
+                delete this.table[key];
+            }
+            return this.$q.when(space === 'scratch');
+        };
+
+        ScratchPersistenceProvider.prototype.updateObject =
+            ScratchPersistenceProvider.prototype.createObject;
+
+        return ScratchPersistenceProvider;
+    }
+);

karma.conf.js

@@ -34,7 +34,6 @@ module.exports = function(config) {
         // List of files / patterns to load in the browser.
         // By default, files are also included in a script tag.
         files: [
-            '**/moment*',
             {pattern: 'example/**/*.js', included: false},
             {pattern: 'platform/**/*.js', included: false},
             {pattern: 'warp/**/*.js', included: false},

platform/commonUI/browse/bundle.json

@@ -1,9 +1,4 @@
 {
-    "configuration": {
-        "paths": {
-            "uuid": "uuid"
-        }
-    },
     "extensions": {
         "routes": [
             {
@@ -25,6 +20,7 @@
                     "$scope",
                     "$route",
                     "$location",
+                    "$q",
                     "objectService",
                     "navigationService",
                     "urlService"
@@ -39,7 +35,8 @@
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$q",
+                    "navigationService" ]
             },
             {
                 "key": "CreateMenuController",
@@ -67,6 +64,7 @@
             {
                 "key": "browse-object",
                 "templateUrl": "templates/browse-object.html",
+                "gestures": ["drop"],
                 "uses": [ "view" ]
             },
             {
@@ -152,14 +150,15 @@
                 "provides": "actionService",
                 "type": "provider",
                 "implementation": "creation/CreateActionProvider.js",
-                "depends": [ "typeService", "dialogService", "creationService", "policyService" ]
+                "depends": ["$q", "typeService",
+                    "navigationService"]
             },
             {
                 "key": "CreationService",
                 "provides": "creationService",
                 "type": "provider",
                 "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "now", "$q", "$log" ]
+                "depends": [ "$q", "$log" ]
             }
         ],
         "runs": [
@@ -178,16 +177,6 @@
                 "copyright": "Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)",
                 "license": "license-mit",
                 "link": "https://github.com/sindresorhus/screenfull.js/blob/gh-pages/license"
-            },
-            {
-                "name": "Math.uuid.js",
-                "version": "1.4",
-                "description": "Unique identifer generation (code adapted.)",
-                "author": "Robert Kieffer",
-                "website": "https://github.com/broofa/node-uuid",
-                "copyright": "Copyright (c) 2010 Robert Kieffer",
-                "license": "license-mit",
-                "link": "http://opensource.org/licenses/MIT"
             }
         ]
     }

platform/commonUI/browse/res/templates/browse-object.html

@@ -19,16 +19,19 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar l-flex">
-        <div class="items-select left">
+<div ng-controller="BrowseObjectController" class="abs l-flex-col"
+     ng-class="editMode ? 'edit-mode' : 'browse-mode'">
+    <div class="holder flex-elem l-flex-row object-browse-bar ">
+        <div class="items-select left flex-elem l-flex-row grows">
             <mct-representation key="'back-arrow'"
                                 mct-object="domainObject"
-                                class="l-back"></mct-representation>
-            <mct-representation key="'object-header'" mct-object="domainObject">
+                                class="flex-elem l-back"></mct-representation>
+            <mct-representation key="'object-header'"
+                                mct-object="domainObject"
+                                class="l-flex-row flex-elem grows object-header">
             </mct-representation>
         </div>
-        <div class="btn-bar right">
+        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
@@ -41,8 +44,27 @@
             </mct-representation>
         </div>
     </div>
-    <mct-representation key="representation.selected.key"
-                        mct-object="representation.selected.key && domainObject"
-                        class="abs object-holder">
-    </mct-representation>
-</span>
+    <div class="holder l-flex-col flex-elem grows l-object-wrapper" ng-class="{ active:editMode, 'edit-main':editMode}">
+        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
+            <!-- Toolbar and Save/Cancel buttons -->
+            <div class="l-edit-controls flex-elem l-flex-row flex-align-end"
+                 ng-class="{ active:editMode }">
+                <mct-toolbar name="mctToolbar"
+                             structure="toolbar.structure"
+                             ng-model="toolbar.state"
+                             class="flex-elem grows">
+                </mct-toolbar>
+                <mct-representation key="'edit-action-buttons'"
+                                    mct-object="domainObject"
+                                    class='flex-elem conclude-editing'>
+                </mct-representation>
+
+            </div>
+            <mct-representation key="representation.selected.key"
+                                mct-object="representation.selected.key && domainObject"
+                                class="abs flex-elem grows object-holder-main scroll"
+                                toolbar="toolbar">
+            </mct-representation>
+        </div><!--/ l-object-wrapper-inner -->
+    </div>
+</div>

platform/commonUI/browse/res/templates/browse.html

@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div class="abs holder-all browse-mode" ng-controller="BrowseController">
+<div class="abs holder-all" ng-controller="BrowseController"
+     mct-before-unload="beforeUnloadWarning()">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
          ng-controller="PaneController as modelPaneTree"
@@ -28,30 +29,23 @@
         <mct-split-pane class='abs contents'
                         anchor='left'>
             <div class='split-pane-component treeview pane left'>
-                <!--<a class="mini-tab-icon anchor-left toggle-pane toggle-search mobile-hide"
-                   title="Enable search"
-                   ng-click="modelPaneTree.toggle()"
-                   ng-class="{ collapsed : !modelPaneTree.visible() }"
-                   ng-style="{ opacity: modelPaneTree.visible()? 0:1 }"></a>-->
-                <div class="holder holder-create-and-search abs l-mobile">
+                <div class="abs holder l-flex-col holder-treeview-elements">
                     <mct-representation key="'create-button'"
                                         mct-object="navigatedObject"
-                                        mct-device="desktop">
+                                        class="holder flex-elem create-btn-holder">
+                    </mct-representation>
+                    <mct-include key="'search'"
+                                 ng-model="treeModel"
+                                 class="holder l-flex-col flex-elem search-holder"
+                                 ng-class="{ active: treeModel.search, grows: treeModel.search }">
+                    </mct-include>
+                    <mct-representation key="'tree'"
+                                        mct-object="domainObject"
+                                        parameters="tree"
+                                        ng-model="treeModel"
+                                        class="holder flex-elem grows vscroll tree-holder"
+                                        ng-hide="treeModel.search">
                     </mct-representation>
-                    <div class='holder search-holder abs'
-                         ng-class="{active: treeModel.search}">
-                        <mct-include key="'search'"
-                                     ng-model="treeModel">
-                        </mct-include>
-                    </div>
-                    <div class='tree-holder abs mobile-tree-holder'
-                         ng-hide="treeModel.search">
-                        <mct-representation key="'tree'"
-                                            mct-object="domainObject"
-                                            parameters="tree"
-                                            ng-model="treeModel">
-                        </mct-representation>
-                    </div>
                 </div>
             </div>
 
@@ -63,7 +57,7 @@
                    ng-click="modelPaneTree.toggle()"
                    ng-class="{ collapsed : !modelPaneTree.visible() }"></a>
 
-                <div class='holder holder-object-and-inspector abs l-mobile' id='content-area'
+                <div class='holder holder-object-and-inspector abs' id='content-area'
                      ng-controller="PaneController as modelPaneInspect"
                      ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
 
@@ -79,7 +73,7 @@
 
                         <div class="split-pane-component t-inspect pane right mobile-hide">
                             <mct-representation key="'object-inspector'"
-                                                mct-object="domainObject"
+                                                mct-object="navigatedObject"
                                                 ng-model="treeModel">
                             </mct-representation>
                             <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
-    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class="l-elem-wrapper l-flex">
-        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='title-label'>{{model.name}}</span>
-        <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
-    </span>
-</div>
+<span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
+<span class="l-elem-wrapper l-flex-row flex-elem grows">
+    <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
+    <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
+    <mct-representation
+        key="'menu-arrow'"
+        mct-object='domainObject'
+        class="flex-elem"></mct-representation>
+</span>

platform/commonUI/browse/src/BrowseController.js

@@ -26,12 +26,16 @@
  * @namespace platform/commonUI/browse
  */
 define(
-    [],
-    function () {
+    [
+        '../../../representation/src/gestures/GestureConstants',
+        '../../edit/src/objects/EditableDomainObject'
+    ],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         var ROOT_ID = "ROOT",
-            DEFAULT_PATH = "mine";
+            DEFAULT_PATH = "mine",
+            CONFIRM_MSG = "Unsaved changes will be lost if you leave this page.";
 
         /**
          * The BrowseController is used to populate the initial scope in Browse
@@ -43,7 +47,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
+        function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
             var path = [ROOT_ID].concat(
                 ($route.current.params.ids || DEFAULT_PATH).split("/")
             );
@@ -64,10 +68,21 @@ define(
                 // urlService.urlForLocation used to adjust current
                 // path to new, addressed, path based on
                 // domainObject
-                $location.path(urlService.urlForLocation("browse", domainObject));
+                $location.path(urlService.urlForLocation("browse", domainObject.hasCapability('editor') ? domainObject.getOriginalObject() : domainObject));
 
             }
 
+            function setSelectedObject(domainObject) {
+                if (domainObject !== $scope.navigatedObject && isDirty() && !confirm(CONFIRM_MSG)) {
+                        $scope.treeModel.selectedObject = $scope.navigatedObject;
+                } else {
+                    if (domainObject !== $scope.navigatedObject && $scope.navigatedObject.hasCapability('editor')){
+                        $scope.navigatedObject.getCapability('action').perform('cancel');
+                    }
+                    setNavigation(domainObject);
+                }
+            }
+
             // Callback for updating the in-scope reference to the object
             // that is currently navigated-to.
             function setNavigation(domainObject) {
@@ -78,6 +93,7 @@ define(
             }
 
             function navigateTo(domainObject) {
+
                 // Check if an object has been navigated-to already...
                 // If not, or if an ID path has been explicitly set in the URL,
                 // navigate to the URL-specified object.
@@ -143,12 +159,25 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
 
+            function isDirty(){
+                var editorCapability = $scope.navigatedObject &&
+                        $scope.navigatedObject.getCapability("editor"),
+                    hasChanges = editorCapability && editorCapability.dirty();
+                return hasChanges;
+            }
+
+            $scope.beforeUnloadWarning = function() {
+                return isDirty() ?
+                    "Unsaved changes will be lost if you leave this page." :
+                    undefined;
+            }
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
             // Also listen for changes which come from the tree
-            $scope.$watch("treeModel.selectedObject", setNavigation);
-
+            $scope.$watch("treeModel.selectedObject", setSelectedObject);
+            
             // Clean up when the scope is destroyed
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);

platform/commonUI/browse/src/BrowseObjectController.js

@@ -22,8 +22,9 @@
 /*global define,Promise*/
 
 define(
-    [],
-    function () {
+    ['../../../representation/src/gestures/GestureConstants', 
+        '../../edit/src/objects/EditableDomainObject'],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         /**
@@ -32,8 +33,10 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $q, navigationService) {
+            var navigatedObject;
             function setViewForDomainObject(domainObject) {
+                
                 var locationViewKey = $location.search().view;
 
                 function selectViewIfMatching(view) {
@@ -47,6 +50,9 @@ define(
                     ((domainObject && domainObject.useCapability('view')) || [])
                         .forEach(selectViewIfMatching);
                 }
+                //$scope.editMode = domainObject.hasCapability('editor') ?
+                // true : false;
+                navigatedObject = domainObject;
             }
 
             function updateQueryParam(viewKey) {
@@ -67,6 +73,15 @@ define(
 
             $scope.$watch('domainObject', setViewForDomainObject);
             $scope.$watch('representation.selected.key', updateQueryParam);
+
+            $scope.cancelEditing = function() {
+                navigationService.setNavigation($scope.domainObject.getDomainObject());
+            }
+
+            $scope.doAction = function (action){
+                $scope[action] && $scope[action]();
+            }
+
         }
 
         return BrowseObjectController;

platform/commonUI/browse/src/creation/CreateAction.js

@@ -25,8 +25,10 @@
  * Module defining CreateAction. Created by vwoeltje on 11/10/14.
  */
 define(
-    ['./CreateWizard'],
-    function (CreateWizard) {
+    ['./CreateWizard',
+    'uuid',
+    '../../../edit/src/objects/EditableDomainObject'],
+    function (CreateWizard, uuid, EditableDomainObject) {
         "use strict";
 
         /**
@@ -45,13 +47,11 @@ define(
          *        override this)
          * @param {ActionContext} context the context in which the
          *        action is being performed
-         * @param {DialogService} dialogService the dialog service
-         *        to use when requesting user input
-         * @param {CreationService} creationService the creation service,
-         *        which handles the actual instantiation and persistence
-         *        of the newly-created domain object
+         * @param {NavigationService} navigationService the navigation service,
+         *        which handles changes in navigation. It allows the object
+         *        being browsed/edited to be set.
          */
-        function CreateAction(type, parent, context, dialogService, creationService, policyService) {
+        function CreateAction(type, parent, context, $q, navigationService) {
             this.metadata = {
                 key: 'create',
                 glyph: type.getGlyph(),
@@ -63,9 +63,8 @@ define(
 
             this.type = type;
             this.parent = parent;
-            this.policyService = policyService;
-            this.dialogService = dialogService;
-            this.creationService = creationService;
+            this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         /**
@@ -73,45 +72,24 @@ define(
          * This will prompt for user input first.
          */
         CreateAction.prototype.perform = function () {
-            /*
-             Overview of steps in object creation:
+            var newModel = this.type.getInitialModel(),
+                parentObject = this.navigationService.getNavigation(),
+                newObject,
+                editableObject;
 
-             1. Show dialog
-             a. Prepare dialog contents
-             b. Invoke dialogService
-             2. Create new object in persistence service
-             a. Generate UUID
-             b. Store model
-             3. Mutate destination container
-             a. Get mutation capability
-             b. Add new id to composition
-             4. Persist destination container
-             a. ...use persistence capability.
-             */
+            newModel.type = this.type.getKey();
+            newObject = parentObject.useCapability('instantiation', newModel);
+            editableObject = new EditableDomainObject(newObject, this.$q);
+            editableObject.setOriginalObject(parentObject);
+            editableObject.useCapability('mutation', function(model){
+                model.location = parentObject.getId();
+            });
 
-            // The wizard will handle creating the form model based
-            // on the type...
-            var wizard =
-                new CreateWizard(this.type, this.parent, this.policyService),
-                self = this;
-
-            // Create and persist the new object, based on user
-            // input.
-            function persistResult(formValue) {
-                var parent = wizard.getLocation(formValue),
-                    newModel = wizard.createModel(formValue);
-                return self.creationService.createObject(newModel, parent);
+            if (newObject.hasCapability('composition') && this.type.getKey()!=='folder') {
+                this.navigationService.setNavigation(editableObject);
+            } else {
+                return editableObject.getCapability('action').perform('save');
             }
-
-            function doNothing() {
-                // Create cancelled, do nothing
-                return false;
-            }
-
-            return this.dialogService.getUserInput(
-                wizard.getFormStructure(),
-                wizard.getInitialFormValue()
-            ).then(persistResult, doNothing);
         };
 
 

platform/commonUI/browse/src/creation/CreateActionProvider.js

@@ -46,11 +46,10 @@ define(
          *        introduced in this bundle), responsible for handling actual
          *        object creation.
          */
-        function CreateActionProvider(typeService, dialogService, creationService, policyService) {
+        function CreateActionProvider($q, typeService, navigationService) {
             this.typeService = typeService;
-            this.dialogService = dialogService;
-            this.creationService = creationService;
-            this.policyService = policyService;
+            this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         CreateActionProvider.prototype.getActions = function (actionContext) {
@@ -75,9 +74,8 @@ define(
                     type,
                     destination,
                     context,
-                    self.dialogService,
-                    self.creationService,
-                    self.policyService
+                    self.$q,
+                    self.navigationService
                 );
             });
         };

platform/commonUI/browse/src/creation/CreateWizard.js

@@ -34,9 +34,9 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreateWizard(type, parent, policyService) {
+        function CreateWizard(type, parent, policyService, initialModel) {
             this.type = type;
-            this.model = type.getInitialModel();
+            this.model = initialModel || type.getInitialModel();
             this.properties = type.getProperties();
             this.parent = parent;
             this.policyService = policyService;

platform/commonUI/browse/src/creation/CreationService.js

@@ -25,8 +25,8 @@
  * Module defining CreateService. Created by vwoeltje on 11/10/14.
  */
 define(
-    ["uuid"],
-    function (uuid) {
+    [],
+    function () {
         "use strict";
 
         var NON_PERSISTENT_WARNING =
@@ -42,11 +42,9 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreationService(persistenceService, now, $q, $log) {
-            this.persistenceService = persistenceService;
+        function CreationService($q, $log) {
             this.$q = $q;
             this.$log = $log;
-            this.now = now;
         }
 
         /**
@@ -70,26 +68,17 @@ define(
          */
         CreationService.prototype.createObject = function (model, parent) {
             var persistence = parent.getCapability("persistence"),
+                newObject = parent.useCapability("instantiation", model),
+                newObjectPersistence = newObject.getCapability("persistence"),
                 self = this;
 
-            // Persist the new domain object's model; it will be fully
-            // constituted as a domain object when loaded back, as all
-            // domain object models are.
-            function doPersist(space, id, model) {
-                return self.persistenceService.createObject(
-                    space,
-                    id,
-                    model
-                ).then(function () { return id; });
-            }
-
             // Add the newly-created object's id to the parent's
             // composition, so that it will subsequently appear
             // as a child contained by that parent.
-            function addToComposition(id, parent, parentPersistence) {
+            function addToComposition() {
                 var compositionCapability = parent.getCapability('composition'),
                     addResult = compositionCapability &&
-                        compositionCapability.add(id);
+                        compositionCapability.add(newObject);
 
                 return self.$q.when(addResult).then(function (result) {
                     if (!result) {
@@ -97,7 +86,7 @@ define(
                         return undefined;
                     }
 
-                    return parentPersistence.persist().then(function () {
+                    return persistence.persist().then(function () {
                         return result;
                     });
                 });
@@ -105,21 +94,13 @@ define(
 
             // We need the parent's persistence capability to determine
             // what space to create the new object's model in.
-            if (!persistence) {
+            if (!persistence || !newObjectPersistence) {
                 self.$log.warn(NON_PERSISTENT_WARNING);
                 return self.$q.reject(new Error(NON_PERSISTENT_WARNING));
             }
 
-            // We create a new domain object in three sequential steps:
-            // 1. Get a new UUID for the object
-            // 2. Create a model with that ID in the persistence space
-            // 3. Add that ID to
-            return self.$q.when(uuid()).then(function (id) {
-                model.persisted = self.now();
-                return doPersist(persistence.getSpace(), id, model);
-            }).then(function (id) {
-                return addToComposition(id, parent, persistence);
-            });
+            // Persist the new object, then add it to composition.
+            return newObjectPersistence.persist().then(addToComposition);
         };
 
 

platform/commonUI/browse/test/creation/CreationServiceSpec.js

@@ -30,9 +30,7 @@ define(
         "use strict";
 
         describe("The creation service", function () {
-            var mockPersistenceService,
-                mockNow,
-                mockQ,
+            var mockQ,
                 mockLog,
                 mockParentObject,
                 mockNewObject,
@@ -40,7 +38,9 @@ define(
                 mockPersistenceCapability,
                 mockCompositionCapability,
                 mockContextCapability,
+                mockCreationCapability,
                 mockCapabilities,
+                mockNewPersistenceCapability,
                 creationService;
 
             function mockPromise(value) {
@@ -60,11 +60,6 @@ define(
             }
 
             beforeEach(function () {
-                mockPersistenceService = jasmine.createSpyObj(
-                    "persistenceService",
-                    [ "createObject" ]
-                );
-                mockNow = jasmine.createSpy('now');
                 mockQ = { when: mockPromise, reject: mockReject };
                 mockLog = jasmine.createSpyObj(
                     "$log",
@@ -76,7 +71,7 @@ define(
                 );
                 mockNewObject = jasmine.createSpyObj(
                     "newObject",
-                    [ "getId" ]
+                    [ "getId", "getCapability", "useCapability" ]
                 );
                 mockMutationCapability = jasmine.createSpyObj(
                     "mutation",
@@ -94,19 +89,22 @@ define(
                     "context",
                     ["getPath"]
                 );
+                mockCreationCapability = jasmine.createSpyObj(
+                    "creation",
+                    ["instantiate", "invoke"]
+                );
                 mockCapabilities = {
                     mutation: mockMutationCapability,
                     persistence: mockPersistenceCapability,
                     composition: mockCompositionCapability,
-                    context: mockContextCapability
+                    context: mockContextCapability,
+                    instantiation: mockCreationCapability
                 };
-
-                mockPersistenceService.createObject.andReturn(
-                    mockPromise(true)
+                mockNewPersistenceCapability = jasmine.createSpyObj(
+                    "new-persistence",
+                    [ "persist", "getSpace" ]
                 );
 
-                mockNow.andReturn(12321);
-
                 mockParentObject.getCapability.andCallFake(function (key) {
                     return mockCapabilities[key];
                 });
@@ -115,9 +113,16 @@ define(
                 });
                 mockParentObject.getId.andReturn('parentId');
 
-                mockPersistenceCapability.persist.andReturn(
-                    mockPromise(true)
-                );
+                mockNewObject.getId.andReturn('newId');
+                mockNewObject.getCapability.andCallFake(function (c) {
+                    return c === 'persistence' ?
+                            mockNewPersistenceCapability : undefined;
+                });
+
+                mockPersistenceCapability.persist
+                    .andReturn(mockPromise(true));
+                mockNewPersistenceCapability.persist
+                    .andReturn(mockPromise(true));
 
                 mockMutationCapability.invoke.andReturn(mockPromise(true));
                 mockPersistenceCapability.getSpace.andReturn("testSpace");
@@ -125,10 +130,12 @@ define(
                     mockPromise([mockNewObject])
                 );
                 mockCompositionCapability.add.andReturn(mockPromise(true));
+                mockCreationCapability.instantiate.andReturn(mockNewObject);
+                mockCreationCapability.invoke.andCallFake(function (model) {
+                    return mockCreationCapability.instantiate(model);
+                });
 
                 creationService = new CreationService(
-                    mockPersistenceService,
-                    mockNow,
                     mockQ,
                     mockLog
                 );
@@ -137,21 +144,18 @@ define(
             it("allows new objects to be created", function () {
                 var model = { someKey: "some value" };
                 creationService.createObject(model, mockParentObject);
-                expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
-                    "testSpace",
-                    jasmine.any(String), // the object id; generated UUID
-                    model
-                );
+                expect(mockCreationCapability.instantiate)
+                    .toHaveBeenCalledWith(model);
             });
 
-            it("adds new id's to the parent's composition", function () {
+            it("adds new objects to the parent's composition", function () {
                 var model = { someKey: "some value" },
                     parentModel = { composition: ["notAnyUUID"] };
                 creationService.createObject(model, mockParentObject);
 
                 // Verify that a new ID was added
                 expect(mockCompositionCapability.add)
-                    .toHaveBeenCalledWith(jasmine.any(String));
+                    .toHaveBeenCalledWith(mockNewObject);
             });
 
             it("provides the newly-created object", function () {
@@ -207,11 +211,6 @@ define(
                 expect(mockLog.error).toHaveBeenCalled();
             });
 
-            it("attaches a 'persisted' timestamp", function () {
-                var model = { someKey: "some value" };
-                creationService.createObject(model, mockParentObject);
-                expect(model.persisted).toEqual(mockNow());
-            });
 
         });
     }

platform/commonUI/dialog/src/DialogService.js

@@ -181,7 +181,7 @@ define(
          * @typedef DialogOption
          * @property {string} label a label to be displayed as the button
          * text for this action
-         * @property {function} action a function to be called when the
+         * @property {function} callback a function to be called when the
          * button is clicked
          */
 

platform/commonUI/edit/bundle.json

@@ -21,6 +21,11 @@
                 "key": "EditPanesController",
                 "implementation": "controllers/EditPanesController.js",
                 "depends": [ "$scope" ]
+            },
+            {
+                "key": "ElementsController",
+                "implementation": "controllers/ElementsController.js",
+                "depends": [ "$scope" ]
             }
         ],
         "directives": [
@@ -38,7 +43,7 @@
             {
                 "key": "edit",
                 "implementation": "actions/EditAction.js",
-                "depends": [ "$location", "navigationService", "$log" ],
+                "depends": [ "$location", "navigationService", "$log", "$q" ],
                 "description": "Edit this object.",
                 "category": "view-control",
                 "glyph": "p"
@@ -67,7 +72,9 @@
                 "implementation": "actions/SaveAction.js",
                 "name": "Save",
                 "description": "Save changes made to these objects.",
-                "depends": [ "$location", "urlService" ],
+                "depends": [ "$q", "$location", "$injector",  "urlService",
+                    "navigationService", "policyService", "dialogService",
+                    "creationService" ],
                 "priority": "mandatory"
             },
             {
@@ -76,7 +83,7 @@
                 "implementation": "actions/CancelAction.js",
                 "name": "Cancel",
                 "description": "Discard changes made to these objects.",
-                "depends": [ "$location", "urlService" ]
+                "depends": ["$injector", "navigationService"]
             }
         ],
         "policies": [

platform/commonUI/edit/res/templates/edit-action-buttons.html

@@ -21,10 +21,11 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='s-btn'
+        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+           title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
-           ng-class="{ major: $index === 0, subtle: $index !== 0 }">
-            {{currentAction.getMetadata().name}}
+           ng-class="{ major: $index === 0 }">
+            <span class="title-label">{{currentAction.getMetadata().name}}</span>
         </a>
     </span>
 </span>

platform/commonUI/edit/res/templates/elements.html

@@ -19,14 +19,21 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="current-elements abs" style="height: 100%;">
-    <!--p class="hint">Drop objects here to add them...</p-->
-    <ul class="tree">
-        <li ng-repeat="containedObject in composition">
-            <span class="tree-item">
-                <mct-representation key="'label'" mct-object="containedObject">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
+<div ng-controller="ElementsController">
+    <mct-include key="'input-filter'"
+                 class="flex-elem holder"
+                 ng-model="filterBy">
+    </mct-include>
+    <div>{{searchText}}</div>
+    <div class="current-elements abs" style="height: 100%;">
+        <!--p class="hint">Drop objects here to add them...</p-->
+        <ul class="tree">
+            <li ng-repeat="containedObject in composition | filter:searchText">
+                <span class="tree-item">
+                    <mct-representation key="'label'" mct-object="containedObject">
+                    </mct-representation>
+                </span>
+            </li>
+        </ul>
+    </div>
 </div>

platform/commonUI/edit/res/templates/topbar-edit.html

@@ -22,7 +22,8 @@
 <div class='top-bar edit abs'>
     <mct-representation key="'object-header'"
                         mct-object="domainObject"
-                        parameters="{ mode: 'Edit' }">
+                        parameters="{ mode: 'Edit' }"
+                        class="l-flex-row flex-elem grows object-header">
     </mct-representation>
     <div class='buttons-main btn-bar buttons abs'>
         <mct-representation key="'switcher'"

platform/commonUI/edit/src/actions/CancelAction.js

@@ -33,10 +33,10 @@ define(
          * @memberof platform/commonUI/edit
          * @implements {Action}
          */
-        function CancelAction($location, urlService, context) {
+        function CancelAction($injector, navigationService, context) {
             this.domainObject = context.domainObject;
-            this.$location = $location;
-            this.urlService = urlService;
+            this.navigationService = navigationService;
+            this.objectService = $injector.get('objectService');
         }
 
         /**
@@ -47,8 +47,7 @@ define(
          */
         CancelAction.prototype.perform = function () {
             var domainObject = this.domainObject,
-                $location = this.$location,
-                urlService = this.urlService;
+                self = this;
 
             // Look up the object's "editor.completion" capability;
             // this is introduced by EditableDomainObject which is
@@ -64,13 +63,10 @@ define(
                 return editor.cancel();
             }
 
-            // Discard the current root view (which will be the editing
-            // UI, which will have been pushed atop the Browise UI.)
+            //Discard current 'editable' object, and retrieve original
+            // un-edited object.
             function returnToBrowse() {
-                $location.path($location.path(urlService.urlForLocation(
-                    "browse",
-                    domainObject
-                )));
+                return self.navigationService.setNavigation(self.domainObject.getOriginalObject());
             }
 
             return doCancel(getEditorCapability())

platform/commonUI/edit/src/actions/EditAction.js

@@ -25,8 +25,8 @@
  * Module defining EditAction. Created by vwoeltje on 11/14/14.
  */
 define(
-    [],
-    function () {
+    ['../objects/EditableDomainObject'],
+    function (EditableDomainObject) {
         "use strict";
 
         // A no-op action to return in the event that the action cannot
@@ -46,7 +46,7 @@ define(
          * @constructor
          * @implements {Action}
          */
-        function EditAction($location, navigationService, $log, context) {
+        function EditAction($location, navigationService, $log, $q, context) {
             var domainObject = (context || {}).domainObject;
 
             // We cannot enter Edit mode if we have no domain object to
@@ -65,14 +65,20 @@ define(
             this.domainObject = domainObject;
             this.$location = $location;
             this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         /**
          * Enter edit mode.
          */
         EditAction.prototype.perform = function () {
-            this.navigationService.setNavigation(this.domainObject);
-            this.$location.path("/edit");
+            var editableObject;
+            if (!this.domainObject.hasCapability("editor")) {
+                editableObject = new EditableDomainObject(this.domainObject, this.$q);
+                editableObject.getCapability('status').set('editing', true);
+                this.navigationService.setNavigation(editableObject);
+            }
+            //this.$location.path("/edit");
         };
 
         /**
@@ -83,10 +89,11 @@ define(
          */
         EditAction.appliesTo = function (context) {
             var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type');
+                type = domainObject && domainObject.getCapability('type'),
+                isEditMode = domainObject && domainObject.getDomainObject ? true : false;
 
             // Only allow creatable types to be edited
-            return type && type.hasFeature('creation');
+            return type && type.hasFeature('creation') && !isEditMode;
         };
 
         return EditAction;

platform/commonUI/edit/src/actions/SaveAction.js

@@ -23,7 +23,8 @@
 
 
 define(
-    function () {
+    ['../../../browse/src/creation/CreateWizard'],
+    function (CreateWizard) {
         'use strict';
 
         /**
@@ -34,10 +35,26 @@ define(
          * @implements {Action}
          * @memberof platform/commonUI/edit
          */
-        function SaveAction($location, urlService, context) {
+        function SaveAction($q, $location, $injector, urlService, navigationService, policyService, dialogService, creationService, context) {
             this.domainObject = (context || {}).domainObject;
             this.$location = $location;
+            this.injectObjectService = function(){
+                this.objectService = $injector.get("objectService");
+            }
             this.urlService = urlService;
+            this.navigationService = navigationService;
+            this.policyService = policyService;
+            this.dialogService = dialogService;
+            this.creationService = creationService;
+            this.$q = $q;
+        }
+
+        SaveAction.prototype.getObjectService = function(){
+            // Lazily acquire object service (avoids cyclical dependency)
+            if (!this.objectService) {
+                this.injectObjectService();
+            }
+            return this.objectService;
         }
 
         /**
@@ -50,25 +67,138 @@ define(
         SaveAction.prototype.perform = function () {
             var domainObject = this.domainObject,
                 $location = this.$location,
-                urlService = this.urlService;
+                urlService = this.urlService,
+                self = this;
+
+            function resolveWith(object){
+                return function() {return object};
+            }
+
+            function doWizardSave(parent) {
+                var context = domainObject.getCapability("context");
+                var wizard = new CreateWizard(domainObject.useCapability('type'), parent, self.policyService, domainObject.getModel());
+
+                function mergeObjects(fromObject, toObject){
+                    Object.keys(fromObject).forEach(function(key) {
+                        toObject[key] = fromObject[key];
+                    });
+                }
+
+                // Create and persist the new object, based on user
+                // input.
+                function buildObjectFromInput(formValue) {
+                    var parent = wizard.getLocation(formValue),
+                        formModel = wizard.createModel(formValue);
+
+                        formModel.location = parent.getId();
+                        //Replace domain object model with model collected
+                        // from user form.
+                        domainObject.useCapability("mutation", function(){
+                            //Replace object model with the model from the form
+                            return formModel;
+                        });
+                        return domainObject;
+                }
+
+                function doNothing() {
+                    // Create cancelled, do nothing
+                    return false;
+                }
+
+                function getAllComposees(domainObject){
+                    return domainObject.useCapability('composition');
+                }
+
+                function addComposeesToObject(object){
+                    return function(composees){
+                        return self.$q.all(composees.map(function (composee) {
+                            return object.getCapability('composition').add(composee);
+                        })).then(resolveWith(object));
+                    }
+                }
+
+                /**
+                 * Add the composees of the 'virtual' object to the
+                 * persisted object
+                 * @param object
+                 * @returns {*}
+                 */
+                function composeNewObject(object){
+                    if (self.$q.when(object.hasCapability('composition') && domainObject.hasCapability('composition'))) {
+                        return getAllComposees(domainObject)
+                            .then(addComposeesToObject(object))
+                    }
+                }
+
+                return self.dialogService
+                    .getUserInput(wizard.getFormStructure(), wizard.getInitialFormValue())
+                    .then(buildObjectFromInput, doNothing)
+                    //.then(composeNewObject)
+                    //.then(object.getCapability("persistence"));
+            }
+
+
+            function persistObject(object){
+
+                return (object.hasCapability('editor') && object.getCapability('editor').save(true) || object.getCapability('persistence').persist())
+                    .then(resolveWith(object));
+                /*
+                if (object.hasCapability('editor')){
+                    return object.getCapability('editor').save(true)
+                        .then(resolveWith(object));
+                } else {
+                    return object.useCapability(persistence);
+                }*/
+            }
+
+            function fetchObject(objectId){
+                return self.getObjectService().getObjects([objectId]).then(function(objects){
+                    return objects[objectId];
+                })
+            }
+
+            function getParent(object){
+                return fetchObject(object.getModel().location);
+            }
+
+            function locateObjectInParent(parent){
+                parent.getCapability('composition').add(domainObject.getId());
+                return parent;
+            }
 
             // Invoke any save behavior introduced by the editor capability;
             // this is introduced by EditableDomainObject which is
             // used to insulate underlying objects from changes made
             // during editing.
             function doSave() {
-                return domainObject.getCapability("editor").save();
+                //WARNING: HACK
+                //This is a new 'virtual object' that has not been persisted
+                // yet.
+                if (!domainObject.getModel().persisted){
+                    return getParent(domainObject)
+                            .then(doWizardSave)
+                            .then(persistObject)
+                            .then(getParent)//Parent may have changed based
+                                            // on user selection
+                            .then(locateObjectInParent)
+                            .then(persistObject)
+                            .then(function(){return fetchObject(domainObject.getId());})
+                } else {
+                    return domainObject.getCapability("editor").save()
+                        .then(resolveWith(domainObject.getOriginalObject()));
+                }
             }
 
             // Discard the current root view (which will be the editing
-            // UI, which will have been pushed atop the Browise UI.)
-            function returnToBrowse() {
-                return $location.path(urlService.urlForLocation(
-                    "browse",
-                    domainObject
-                ));
+            // UI, which will have been pushed atop the Browse UI.)
+            function returnToBrowse(object) {
+                if (object) {
+                    self.navigationService.setNavigation(object);
+                }
+                return object;
             }
 
+            //return doSave().then(returnToBrowse);
             return doSave().then(returnToBrowse);
         };
 

platform/commonUI/edit/src/capabilities/EditorCapability.js

@@ -80,6 +80,7 @@ define(
         EditorCapability.prototype.save = function (nonrecursive) {
             var domainObject = this.domainObject,
                 editableObject = this.editableObject,
+                self = this,
                 cache = this.cache;
 
             // Update the underlying, "real" domain object's model
@@ -95,8 +96,10 @@ define(
                 return domainObject.getCapability('persistence').persist();
             }
 
+            editableObject.getCapability("status").set("editing", false);
+
             return nonrecursive ?
-                resolvePromise(doMutate()).then(doPersist) :
+                resolvePromise(doMutate()).then(doPersist).then(function(){self.cancel()}) :
                 resolvePromise(cache.saveAll());
         };
 
@@ -109,6 +112,8 @@ define(
          * @memberof platform/commonUI/edit.EditorCapability#
          */
         EditorCapability.prototype.cancel = function () {
+            this.editableObject.getCapability("status").set("editing", false);
+            //TODO: Reset the cache as well here.
             return resolvePromise(undefined);
         };
 

platform/commonUI/edit/src/controllers/ElementsController.js

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The ElementsController prepares the elements view for display
+         *
+         * @constructor
+         */
+        function ElementsController($scope) {
+            function filterBy(text){
+                if (typeof text === 'undefined')
+                    return $scope.searchText;
+                else
+                    $scope.searchText = text;
+            }
+            $scope.filterBy = filterBy;
+        }
+
+        return ElementsController;
+    }
+);

platform/commonUI/edit/src/objects/EditableDomainObject.js

@@ -78,7 +78,9 @@ define(
             // different versions of the same editable domain object
             // are not shown in different sections of the same Edit
             // UI, which might thereby fall out of sync.
-            var cache;
+            var cache,
+                originalObject = domainObject,
+                cachedObject;
 
             // Constructor for EditableDomainObject, which adheres
             // to the same shared cache.
@@ -102,12 +104,22 @@ define(
                             capability;
                 };
 
+
+                editableObject.setOriginalObject = function(object) {
+                    originalObject = object;
+                };
+
+                editableObject.getOriginalObject = function() {
+                    return originalObject;
+                };
+
                 return editableObject;
             }
 
             cache = new EditableDomainObjectCache(EditableDomainObjectImpl, $q);
+            cachedObject = cache.getEditableObject(domainObject);
 
-            return cache.getEditableObject(domainObject);
+            return cachedObject;
         }
 
         return EditableDomainObject;

platform/commonUI/edit/src/objects/EditableDomainObjectCache.js

@@ -69,7 +69,9 @@ define(
          */
         EditableDomainObjectCache.prototype.getEditableObject = function (domainObject) {
             var type = domainObject.getCapability('type'),
-                EditableDomainObject = this.EditableDomainObject;
+                EditableDomainObject = this.EditableDomainObject,
+                editableObject,
+                statusListener;
 
             // Track the top-level domain object; this will have
             // some special behavior for its context capability.
@@ -86,10 +88,12 @@ define(
             }
 
             // Provide an editable form of the object
-            return new EditableDomainObject(
+            editableObject = new EditableDomainObject(
                 domainObject,
                 this.cache.getCachedModel(domainObject)
             );
+
+            return editableObject;
         };
 
         /**

platform/commonUI/edit/src/representers/EditRepresenter.js

@@ -48,6 +48,8 @@ define(
         function EditRepresenter($q, $log, scope) {
             var self = this;
 
+            this.scope = scope;
+
             // Mutate and persist a new version of a domain object's model.
             function doPersist(model) {
                 var domainObject = self.domainObject;
@@ -100,6 +102,8 @@ define(
             this.key = (representation || {}).key;
             // Track the represented object
             this.domainObject = representedObject;
+            this.scope.editMode = representedObject.hasCapability("editor");
+
             // Ensure existing watches are released
             this.destroy();
         };

platform/commonUI/general/bundle.json

@@ -18,7 +18,7 @@
         "runs": [
             {
                 "implementation": "StyleSheetLoader.js",
-                "depends": [ "stylesheets[]", "$document" ]
+                "depends": [ "stylesheets[]", "$document", "THEME" ]
             }
         ],
         "stylesheets": [
@@ -76,7 +76,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "navigationService" ]
             },
             {
                 "key": "ActionGroupController",
@@ -194,6 +194,11 @@
             {
                 "key": "MCT_SCROLL_Y_ATTRIBUTE",
                 "value": "mctScrollY"
+            },
+            {
+                "key": "THEME",
+                "value": "unspecified",
+                "priority": "fallback"
             }
         ],
         "containers": [

platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json

@@ -1,19 +1,27 @@
 {
 	"metadata": {
 		"name": "WTD Symbols",
-		"lastOpened": 1446490786311,
-		"created": 1446489891263
+		"lastOpened": 1446670352108,
+		"created": 1446670349721
 	},
 	"iconSets": [
 		{
 			"selection": [
 				{
-					"order": 113,
+					"order": 116,
+					"id": 93,
+					"prevSize": 32,
+					"code": 58902,
+					"name": "icon-eye-open-no-gleam",
+					"tempChar": ""
+				},
+				{
+					"order": 115,
 					"id": 92,
 					"prevSize": 32,
 					"code": 58901,
-					"name": "icon-crosshair",
-					"tempChar": ""
+					"name": "icon-eye-open",
+					"tempChar": ""
 				},
 				{
 					"order": 110,
@@ -21,7 +29,7 @@
 					"prevSize": 32,
 					"code": 58899,
 					"name": "icon-collapse-pane-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 111,
@@ -29,7 +37,7 @@
 					"prevSize": 32,
 					"code": 58900,
 					"name": "icon-collapse-pane-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 109,
@@ -37,7 +45,7 @@
 					"prevSize": 32,
 					"code": 58898,
 					"name": "icon-save",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 108,
@@ -45,7 +53,7 @@
 					"prevSize": 32,
 					"code": 58897,
 					"name": "icon-dataset",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 90,
@@ -53,7 +61,7 @@
 					"prevSize": 32,
 					"code": 58896,
 					"name": "icon-bell",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 91,
@@ -61,7 +69,7 @@
 					"prevSize": 32,
 					"code": 58889,
 					"name": "icon-hourglass",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 92,
@@ -74,7 +82,7 @@
 						58890
 					],
 					"name": "icon-info-v15",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 93,
@@ -82,7 +90,7 @@
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 94,
@@ -90,7 +98,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 95,
@@ -98,7 +106,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 96,
@@ -106,7 +114,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 97,
@@ -114,7 +122,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 98,
@@ -122,7 +130,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 99,
@@ -130,7 +138,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 100,
@@ -138,7 +146,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 101,
@@ -146,7 +154,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 102,
@@ -154,7 +162,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 103,
@@ -162,7 +170,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 104,
@@ -170,7 +178,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 105,
@@ -178,7 +186,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 106,
@@ -186,7 +194,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -194,7 +202,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -202,7 +210,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -210,7 +218,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 87,
@@ -218,7 +226,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -226,7 +234,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -234,7 +242,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -242,7 +250,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -250,7 +258,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -258,7 +266,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -266,7 +274,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -274,7 +282,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -282,7 +290,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -290,7 +298,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -298,7 +306,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -306,7 +314,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -314,7 +322,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -322,7 +330,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -330,7 +338,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -338,7 +346,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -346,7 +354,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -354,7 +362,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -362,7 +370,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -370,7 +378,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -378,7 +386,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -386,7 +394,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -394,7 +402,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -402,7 +410,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -410,7 +418,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -418,7 +426,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -426,7 +434,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -434,7 +442,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -442,7 +450,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -450,7 +458,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -458,7 +466,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -466,7 +474,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -474,7 +482,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -482,7 +490,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -490,7 +498,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -498,7 +506,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -506,7 +514,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -514,7 +522,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -522,7 +530,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -530,7 +538,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -538,7 +546,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -546,7 +554,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -554,7 +562,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -562,7 +570,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -570,7 +578,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -578,7 +586,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -586,7 +594,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -594,7 +602,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -602,7 +610,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -610,7 +618,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -618,7 +626,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -626,7 +634,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -634,7 +642,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -642,7 +650,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -650,7 +658,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -658,7 +666,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -666,7 +674,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -674,7 +682,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -682,7 +690,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -690,7 +698,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -698,7 +706,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -706,7 +714,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -722,13 +730,43 @@
 			"prevSize": 32,
 			"icons": [
 				{
-					"id": 92,
+					"id": 93,
 					"paths": [
-						"M514 2c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM860.2 450h-282.2v-282.2c69.6 12.8 133.8 46.2 185 97.4 51 51 84.4 115.2 97.2 184.8zM450 167.8v282.2h-282.2c12.8-69.6 46.2-133.8 97.4-185 51-51 115.2-84.4 184.8-97.2zM167.8 578h282.2v282.2c-69.6-12.8-133.8-46.2-185-97.4-51-51-84.4-115.2-97.2-184.8zM578 860.2v-282.2h282.2c-12.8 69.6-46.2 133.8-97.4 185-51 51-115.2 84.4-184.8 97.2z"
+						"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
+						"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224zM576 544c-53 0-96-43-96-96s43-96 96-96 96 43 96 96c0 53-43 96-96 96z"
 					],
 					"attrs": [
 						{
-							"fill": "rgb(0, 0, 0)"
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-eye-open-no-gleam"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 92,
+					"paths": [
+						"M512 64c-261 0-480.6 195.4-512 448 31.4 252.6 251 448 512 448s480.6-195.4 512-448c-31.4-252.6-251-448-512-448zM768.2 734.6c-71.4 62.8-162.8 97.4-257.6 97.4s-186.2-34.6-257.6-97.4c-66.6-58.6-110.6-137.2-125-222.6 0 0 0-0.2 0-0.2 76.8-154 220.8-257.6 384-257.6s307.2 103.8 384 257.6c0 0 0 0.2 0 0.2-14.4 85.4-61.2 164-127.8 222.6z",
+						"M512 288c-123.8 0-224 100.2-224 224s100.2 224 224 224 224-100.2 224-224-100.2-224-224-224z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
 						}
 					],
 					"isMulticolor": false,
@@ -738,7 +776,8 @@
 					],
 					"colorPermutations": {
 						"125525525516161751": [
-							0
+							1,
+							1
 						]
 					}
 				},

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

@@ -92,6 +92,7 @@
 <glyph unicode="&#xe612;" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
 <glyph unicode="&#xe613;" glyph-name="icon-collapse-pane-left" d="M256 960h-256v-1024h256c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM512 640l512-320v640z" />
 <glyph unicode="&#xe614;" glyph-name="icon-collapse-pane-right" d="M768 960h256v-1024h-256c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192zM512 640l-512-320v640z" />
-<glyph unicode="&#xe615;" glyph-name="icon-crosshair" d="M514 958c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM860.2 510h-282.2v282.2c69.6-12.8 133.8-46.2 185-97.4 51-51 84.4-115.2 97.2-184.8zM450 792.2v-282.2h-282.2c12.8 69.6 46.2 133.8 97.4 185 51 51 115.2 84.4 184.8 97.2zM167.8 382h282.2v-282.2c-69.6 12.8-133.8 46.2-185 97.4-51 51-84.4 115.2-97.2 184.8zM578 99.8v282.2h282.2c-12.8-69.6-46.2-133.8-97.4-185-51-51-115.2-84.4-184.8-97.2z" />
+<glyph unicode="&#xe615;" glyph-name="icon-eye-open" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224z" />
+<glyph unicode="&#xe616;" glyph-name="icon-eye-open-no-gleam" d="M512 896c-261 0-480.6-195.4-512-448 31.4-252.6 251-448 512-448s480.6 195.4 512 448c-31.4 252.6-251 448-512 448zM768.2 225.4c-71.4-62.8-162.8-97.4-257.6-97.4s-186.2 34.6-257.6 97.4c-66.6 58.6-110.6 137.2-125 222.6 0 0 0 0.2 0 0.2 76.8 154 220.8 257.6 384 257.6s307.2-103.8 384-257.6c0 0 0-0.2 0-0.2-14.4-85.4-61.2-164-127.8-222.6zM512 672c-123.8 0-224-100.2-224-224s100.2-224 224-224 224 100.2 224 224-100.2 224-224 224zM576 416c-53 0-96 43-96 96s43 96 96 96 96-43 96-96c0-53-43-96-96-96z" />
 <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/_archetypes.scss

@@ -0,0 +1,147 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/********************************************* COLUMN LAYOUTS STYLES */
+@mixin cols($totalCols, $span) {
+    $cw: 100% / $totalCols;
+    min-width: (500px / $totalCols) * $span;
+    @if ($totalCols != $span) {
+        width: ($cw * $span) - $ueColMargin;
+    } @else {
+        width: $cw;
+    }
+}
+
+.cols {
+    @include clearfix;
+    .col {
+        @include box-sizing(border-box);
+        @include clearfix;
+        float: left;
+        margin-left: $ueColMargin;
+        padding-left: $interiorMargin;
+        position: relative;
+        &:first-child {
+            margin-left: 0;
+            padding-left: 0;
+        }
+    }
+    &.cols-2 {
+        $nc: 2;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-2-ff {
+        // 2 columns, first column is fixed, second is fluid
+        .col-100px {
+            width: 100px;
+        }
+    }
+
+    &.cols-6 {
+        $nc: 6;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-16 {
+        $nc: 16;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-7 {
+            @include cols($nc, 7);
+        }
+    }
+    &.cols-32 {
+        $nc: 32;
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-15 {
+            @include cols($nc, 15);
+        }
+    }
+    .l-row {
+        @include clearfix;
+        padding: $interiorMargin 0;
+    }
+}
+
+/********************************************* FLEX STYLES */
+.l-flex-row,
+.l-flex-col {
+    @include display-flex;
+    @include flex-wrap(nowrap);
+    .flex-elem {
+        min-height: 0; // Needed to allow element to shrink within parent
+        position: relative;
+        &:not(.grows) {
+            @include flex(0 0 auto);
+            &.flex-can-shrink {
+                @include flex(0 1 auto);
+            }
+        }
+        &.grows {
+            @include flex(1 1 auto);
+        }
+    }
+    .flex-container {
+        // Apply to wrapping elements, mct-includes, etc.
+        @include display-flex;
+        @include flex-wrap(nowrap);
+        @include flex(1 1 auto);
+        min-height:0;
+    }
+}
+
+.l-flex-row {
+    @include flex-direction(row);
+    &.flex-elem { @include flex(1 1 auto); }
+    .flex-elem {
+        height: inherit;
+        line-height: inherit;
+        min-width: 0;
+    }
+    .flex-container { @include flex-direction(row); }
+}
+
+.l-flex-col {
+    @include flex-direction(column);
+    .flex-elem {
+        min-height: 0;
+        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
+    }
+    .flex-container { @include flex-direction(column); }
+}
+
+.flex-fixed {
+    @include flex(0 0 auto);
+}
+
+.flex-justify-end {
+    @include justify-content(flex-end);
+}

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

@@ -35,21 +35,29 @@ $ltGamma: 20%;
 $btnFontSizeToH: 0.45;
 
 /************************** LAYOUT */
-$ueTopBarH: 24px; // Change when breadcrumb is enabled
+$ueTopBarH: 24px;
 $ueTopBarEditH: 30px;
 $ueTopBarBtnH: 35px;
 $ueFooterH: 25px;
 $ueColMargin: 1.5%;
 $ueAppLogoW: 105px;
 $ueEditToolBarH: 25px;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueCollapsedPaneEdgeM: 20px;
+$ueCollapsedPaneEdgeM: 22px;
 $uePaneMiniTabH: $ueTopBarH;
 $uePaneMiniTabW: 9px;
+$uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 $ueTimeControlH: (33px, 20px, 20px);
+// Panes
+$ueBrowseLeftPaneTreeMinW: 150px;
+$ueBrowseLeftPaneTreeMaxW: 35%;
+$ueBrowseLeftPaneTreeW: 25%;
+$ueBrowseRightPaneInspectMinW: 200px;
+$ueBrowseRightPaneInspectMaxW: 35%;
+$ueBrowseRightPaneInspectW: 20%;
+$ueDesktopMinW: 600px;
+
 // Overlay
 $ovrTopBarH: 45px;
 $ovrFooterH: 24px;

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

@@ -51,14 +51,11 @@ a.disabled {
 	@include animation-name(pulse, 0.2);
 }
 
-@include keyframes(pulse) {
-	0%   { opacity: 0.5; }
-	100% { opacity: 1; }
-}
-
-
-@mixin pulse($dur: 500ms, $iteration: infinite) {
-	//@include customKeyframes(pulse, 0.2);
+@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes(pulse) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
 	@include animation-name(pulse);
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
@@ -66,6 +63,19 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
+@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
+	@include keyframes(pulseBorder) {
+		0%   { border-color: rgba($c, $opacity0); }
+		100% { border-color: rgba($c, $opacity100); }
+	}
+	@include animation-name(pulseBorder);
+	@include animation-duration($dur);
+	@include animation-direction(alternate);
+	@include animation-iteration-count($iteration);
+	@include animation-timing-function(ease);
+    @include animation-delay($delay);
+}
+
 .pulse {
 	@include pulse(750ms);
 }

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

@@ -121,7 +121,12 @@ mct-container {
 	text-align: center;
 }
 
-.scrolling {
+.ellipsis {
+    @include ellipsize();
+}
+
+.scrolling,
+.scroll {
 	overflow: auto;
 }
 
@@ -142,6 +147,16 @@ mct-container {
 	display: none !important;
 }
 
+.off {
+    visibility: hidden;
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    margin: 0 !important;
+}
+
 .sep {
 	color: rgba(#fff, 0.2);
 }

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

@@ -23,7 +23,7 @@
 
 .l-inspect,
 .l-inspect table tr td {
-    font-size: 0.7rem;
+    font-size: 0.75rem;
 }
 
 .l-inspect {
@@ -31,6 +31,9 @@
     background: $colorInspectorBg;
     color: $colorInspectorFg;
     line-height: 140%;
+
+    .flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
+
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
@@ -44,6 +47,21 @@
         }
     }
 
+    .split-layout {
+        .split-pane-component.pane {
+            &.bottom {
+                height: 30%;
+                min-height: 20%;
+                max-height: 80%;
+            }
+        }
+    }
+    
+    ul {
+        @include box-sizing(border-box);
+        padding-right: $interiorMargin;
+    }
+
     ul li,
     em {
         display: block;
@@ -104,4 +122,23 @@
             width: 4px;
         }
     }
-}
+    .holder-elements {
+        .current-elements {
+            position: relative;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    left: 0;
+                    .t-item-icon {
+                        font-size: 1em;
+                        width: 1em;
+                    }
+                    .t-title-label {
+                        left: 20px + $interiorMargin;
+                    }
+                }
+            }
+        }
+    }
+}
+

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

@@ -21,6 +21,7 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
+@import "archetypes";
 @import "about";
 @import "text";
 @import "icons";

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

@@ -64,6 +64,12 @@
     }
 }
 
+@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
+    @include transition-property(height, width, top, right, bottom, left, opacity);
+    @include transition-duration($t);
+    @include transition-timing-function($tf);
+}
+
 @mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
     @include transition-property(height, bottom, top);
     @include transition-duration($dur);
@@ -309,11 +315,11 @@
 	}
 }
 
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
+	@include box-shadow(inset $shdw);
 	background: $bg;
 	border: none;
 	color: $fg;
@@ -323,7 +329,7 @@
 	}
 }
 
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
 	@include input-base($bg, $fg);
 	padding: 0 $interiorMarginSm;
 }

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -35,6 +35,7 @@ $pad: $interiorMargin * $baseRatio;
     @include box-sizing(border-box);
     padding: 0 $pad;
     font-size: 0.7rem;
+    vertical-align: top;
 
     .icon {
         font-size: 0.8rem;
@@ -70,6 +71,18 @@ $pad: $interiorMargin * $baseRatio;
     &.pause-play {
 
     }
+    &.t-save:before {
+        content:'\e612';
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
+    }
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
+    }
 
     &.pause-play {
         .icon:before {
@@ -95,10 +108,7 @@ $pad: $interiorMargin * $baseRatio;
 
 .s-icon-btn {
     @extend .ui-symbol;
-    color: $colorBtnIcon;
-    &:hover {
-        color: lighten($colorBtnIcon, $ltGamma);
-    }
+    // Color and styling additionally in _controls.scss
 }
 
 .mini-tab {
@@ -225,6 +235,11 @@ $pad: $interiorMargin * $baseRatio;
         overflow: hidden;
         word-break: break-all;
 
+        &.collapsed {
+            $d: $uePaneMiniTabCollapsedW;
+            width: $d; font-size: $d;
+        }
+
         &:before,
         &:after {
             position: absolute;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -21,246 +21,232 @@
  *****************************************************************************/
 
 .accordion {
-	$accordionHeadH: 18px;
-	margin-top: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
-	.accordion-head {
-		$op: 0.2;
-		@include border-radius($basicCr * 0.75);
-		@include box-sizing("border-box");
-		background: rgba($colorBodyFg, $op);
-		cursor: pointer;
-		font-size: 0.75em;
-		line-height: $accordionHeadH;
-		margin-bottom: $interiorMargin;
-		padding: 0 $interiorMargin;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: auto;
-		left: 0;
-		width: auto;
-		height: $accordionHeadH;
-		text-transform: uppercase;
-		&:hover {
-			background: rgba($colorBodyFg, $op * 2);
-		}
-		&:after {
-			content: "^";
-			display: block;
-			font-family: 'symbolsfont';
-			font-size: 0.9em;
-			position: absolute;
-			right: $interiorMargin;
-			text-transform: none;
-			top: 0;
-		}
-		&:not(.expanded):after {
-			content: "v";
-		}
-	}
-	.accordion-contents {
-		position: absolute;
-		top: $accordionHeadH + $interiorMargin;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
+    $accordionHeadH: 18px;
+    margin-top: $interiorMargin;
+    &:first-child {
+        margin-top: 0;
+    }
+    .accordion-head {
+        $op: 0.2;
+        @include border-radius($basicCr * 0.75);
+        @include box-sizing("border-box");
+        background: rgba($colorBodyFg, $op);
+        cursor: pointer;
+        font-size: 0.75em;
+        line-height: $accordionHeadH;
+        margin-bottom: $interiorMargin;
+        padding: 0 $interiorMargin;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        width: auto;
+        height: $accordionHeadH;
+        text-transform: uppercase;
+        &:hover {
+            background: rgba($colorBodyFg, $op * 2);
+        }
+        &:after {
+            content: "^";
+            display: block;
+            font-family: 'symbolsfont';
+            font-size: 0.9em;
+            position: absolute;
+            right: $interiorMargin;
+            text-transform: none;
+            top: 0;
+        }
+        &:not(.expanded):after {
+            content: "v";
+        }
+    }
+    .accordion-contents {
+        position: absolute;
+        top: $accordionHeadH + $interiorMargin;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }
 
 .l-composite-control {
-	vertical-align: middle;
-	&.l-checkbox {
-		.composite-control-label {
-			line-height: 18px;
-		}
-	}
+    vertical-align: middle;
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
+    }
 }
 
 .l-control-group {
-	// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-	//	@include test();
-	@include box-sizing(border-box);
-	border-left: 1px solid $colorInteriorBorder;
-	display: inline-block;
-	padding: 0 $interiorMargin;
-	position: relative;
-	&:first-child {
-		border-left: none;
-		padding-left: 0;
-	}
+    // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
+    //    @include test();
+    @include box-sizing(border-box);
+    border-left: 1px solid $colorInteriorBorder;
+    display: inline-block;
+    padding: 0 $interiorMargin;
+    position: relative;
+    &:first-child {
+        border-left: none;
+        padding-left: 0;
+    }
 }
 
 .l-local-controls {
-	// Control shown when hovering over an object, like plots and imagery
-	// Default position is upper right
-	$p: $interiorMargin;
-	position: absolute;
-	top: $p;
-	right: $p;
-	z-index: 5;
+    // Control shown when hovering over an object, like plots and imagery
+    // Default position is upper right
+    $p: $interiorMargin;
+    position: absolute;
+    top: $p;
+    right: $p;
+    z-index: 5;
 }
 
 .s-local-controls {
-	font-size: 0.7rem;
+    font-size: 0.7rem;
 }
 
 label.checkbox.custom {
-	$bg: pullForward($colorBodyBg, 10%);
-	$d: $formRowCtrlsH;
-	cursor: pointer;
-	display: inline-block;
-	line-height: $d;
-	margin-right: $interiorMargin * 4;
-	padding-left: $d + $interiorMargin;
-	position: relative;
-	vertical-align: middle; // was top
-	em {
-		color: $colorBodyFg;
-		display: inline-block;
-		height: $d;
-		min-width: $d;
-		&:before {
-			@include border-radius($basicCr * .75);
-			background: $bg;
-			//border-bottom: 1px solid lighten($bg, 10%);
-			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
-			box-sizing: border-box;
-			content: " ";
-			font-family: 'symbolsfont';
-			font-size: 0.8em;
-			display: inline-block;
-			margin-right: $interiorMargin;
-			height: $d;
-			width: $d;
-			left: 0;
-			top: 0;
-			position: absolute;
-			text-align: center;
-		}
-	}
-	&.no-text {
-		overflow: hidden;
-		margin-right: 0;
-		padding-left: 0;
-		height: $d;
-		width: $d;
-		em {
-			overflow: hidden;
-		}
-	}
-	input {
-		display: none;
-		&:checked ~ em:before {
-			background: $colorCheck;
-			color: lighten($colorCheck, 50%);
-			content: "2";
-		}
-	}
+    $bg: pullForward($colorBodyBg, 10%);
+    $d: $formRowCtrlsH;
+    cursor: pointer;
+    display: inline-block;
+    line-height: $d;
+    margin-right: $interiorMargin * 4;
+    padding-left: $d + $interiorMargin;
+    position: relative;
+    vertical-align: middle; // was top
+    em {
+        color: $colorBodyFg;
+        display: inline-block;
+        height: $d;
+        min-width: $d;
+        &:before {
+            @include border-radius($basicCr * .75);
+            background: $bg;
+            @include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+            box-sizing: border-box;
+            content: " ";
+            font-family: 'symbolsfont';
+            font-size: 0.8em;
+            display: inline-block;
+            margin-right: $interiorMargin;
+            height: $d;
+            width: $d;
+            left: 0;
+            top: 0;
+            position: absolute;
+            text-align: center;
+        }
+    }
+    &.no-text {
+        overflow: hidden;
+        margin-right: 0;
+        padding-left: 0;
+        height: $d;
+        width: $d;
+        em {
+            overflow: hidden;
+        }
+    }
+    input {
+        display: none;
+        &:checked ~ em:before {
+            background: $colorCheck;
+            color: lighten($colorCheck, 50%);
+            content: "2";
+        }
+    }
 }
 
 .input-labeled {
-	margin-left: $interiorMargin;
-	label {
-		display: inline-block;
-		margin-right: $interiorMarginSm;
-	}
-	&.inline {
-		display: inline-block;
-	}
-	&:first-child {
-		margin-left: 0;
-	}
+    margin-left: $interiorMargin;
+    label {
+        display: inline-block;
+        margin-right: $interiorMarginSm;
+    }
+    &.inline {
+        display: inline-block;
+    }
+    &:first-child {
+        margin-left: 0;
+    }
 }
 
 .s-menu-btn label.checkbox.custom {
-	margin-left: 5px;
+    margin-left: 5px;
 }
 
 .item .checkbox {
-	&.checked label {
-		@include box-shadow(none);
-		border-bottom: none;
-	}
+    &.checked label {
+        @include box-shadow(none);
+        border-bottom: none;
+    }
 }
 
-.context-available {
-	$c: $colorKey;
-	color: $c;
-	&:hover {
-		color: lighten($c, 10%);
-	}
+.context-available,
+.s-icon-btn {
+    $c: $colorKey;
+    color: $c;
+    &:hover {
+        color: lighten($c, 10%);
+    }
 }
 
 .view-switcher {
-	@include trans-prop-nice-fade($controlFadeMs);
+    @include trans-prop-nice-fade($controlFadeMs);
 }
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	//@include test();
-	font-size: 1em;
+    font-size: 1em;
 
-	//> .title-label,
-	//> .type-icon,
-	//> .context-available {
-	//	//@include tmpBorder(#6666ff);
-	//	//vertical-align: middle;
-	//}
+    > .type-icon {
+        color: $colorObjHdrIc;
+        font-size: 120%;
+        float: left;
+        margin-right: $interiorMargin;
+    }
 
-	> .type-icon {
-		color: $colorObjHdrIc;
-		font-size: 120%;
-		float: left;
-		margin-right: $interiorMargin;
-	}
+    .l-elem-wrapper {
+        mct-representation {
+            // Holds the context-available item
+            // Must have min-width to make flex work properly
+            // in Safari
+            min-width: 0.7em;
+        }
+    }
 
-	.l-elem-wrapper {
-		//@include test(#66f, 0.2);
-        @include justify-content(flex-start);
-		mct-representation {
-			// Holds the context-available item
-			// Must have min-width to make flex work properly
-			// in Safari
-			min-width: 0.7em;
-		}
-	}
+    .action {
+        margin-right: $interiorMargin;
+    }
 
-	.action {
-		margin-right: $interiorMargin;
-	}
+    .title-label {
+        color: $colorObjHdrTxt;
+        @include ellipsize();
+        @include webkitProp(flex, '0 1 auto');
+        padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+    }
 
-	.title-label {
-		//@include test(green, 0.9);
-		color: $colorObjHdrTxt;
-		@include ellipsize();
-		//color: pushBack($colorBodyFg, 40%);
-		@include webkitProp(flex, '0 1 auto');
-		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
-		//position: relative;
-	}
+    .context-available {
+        font-size: 0.7em;
+        @include webkitProp(flex, '0 0 1');
+    }
 
-	.context-available {
-		font-size: 0.7em;
-		@include webkitProp(flex, '0 0 1');
-		//margin-right: $interiorMargin;
-	}
-
-	@include desktop {
-		.context-available {
-			@include trans-prop-nice(opacity, 0.25s);
-			opacity: 0;
-		}
-		&:hover {
-			.context-available {
-				opacity: 1;
-			}
-		}
-	}
+    @include desktop {
+        .context-available {
+            @include trans-prop-nice(opacity, 0.25s);
+            opacity: 0;
+        }
+        &:hover {
+            .context-available {
+                opacity: 1;
+            }
+        }
+    }
 }
 
 /******************************************************** PROGRESS BAR */
@@ -280,20 +266,20 @@ label.checkbox.custom {
 
 .l-progress-bar {
     // Assume will be determinate by default
-	display: inline-block;
-	overflow: hidden;
-	position: relative;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
 
-	.progress-amt-holder {
+    .progress-amt-holder {
         @include absPosDefault(1px);
     }
     .progress-amt,
     .progress-amt:before,
     .progress-amt:after {
-		@include absPosDefault();
+        @include absPosDefault();
         display: block;
         content: '';
-	}
+    }
 
     .progress-amt {
         right: auto; // Allow inline width to control }
@@ -310,11 +296,10 @@ label.checkbox.custom {
     @include border-radius($basicCr);
     @include boxIncised(0.3, 4px);
     background: $colorProgressBarOuter;
-    //border:1px solid $colorProgressBarOuter;
-	.progress-amt {
-		@include border-radius($basicCr);
-		@include boxShdw();
-		@include border-radius($basicCr - 1);
+    .progress-amt {
+        @include border-radius($basicCr);
+        @include boxShdw();
+        @include border-radius($basicCr - 1);
         @include trans-prop-nice(width);
         &:before {
             background-color: $colorProgressBarAmt;
@@ -325,7 +310,7 @@ label.checkbox.custom {
                     transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
             ));
         }
-	}
+    }
 
     &:not(.indeterminate) {
         .progress-amt:before {
@@ -348,185 +333,177 @@ label.checkbox.custom {
 /******************************************************** SLIDERS */
 
 .slider {
-	$knobH: 100%; //14px;
-	.slot {
-		//		@include border-radius($basicCr * .75);
-		//@include sliderTrack();
-		width: auto;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-	.knob {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorKnob;
-		&:hover {
-			background-color: $sliderColorKnobHov;
-		}
-		position: absolute;
-		height: $knobH;
-		width: $sliderKnobW;
-		top: 0;
-		auto: 0;
-		bottom: auto;
-		left: auto;
-	}
-	.knob-l {
-		@include border-left-radius($sliderKnobW);
-		cursor: w-resize;
-	}
-	.knob-r {
-		@include border-right-radius($sliderKnobW);
-		cursor: e-resize;
-	}
-	.range {
-		@include trans-prop-nice-fade(.25s);
-		background-color: $sliderColorRange;
-		cursor: ew-resize;
-		position: absolute;
-		top: 0; //$tbOffset;
-		right: auto;
-		bottom: 0;
-		left: auto;
-		height: auto;
-		width: auto;
-		&:hover {
-			background-color: $sliderColorRangeHov;
-		}
-	}
+    $knobH: 100%; //14px;
+    .slot {
+        width: auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+    .knob {
+        @include trans-prop-nice-fade(.25s);
+        background-color: $sliderColorKnob;
+        &:hover {
+            background-color: $sliderColorKnobHov;
+        }
+        position: absolute;
+        height: $knobH;
+        width: $sliderKnobW;
+        top: 0;
+        auto: 0;
+        bottom: auto;
+        left: auto;
+    }
+    .knob-l {
+        @include border-left-radius($sliderKnobW);
+        cursor: w-resize;
+    }
+    .knob-r {
+        @include border-right-radius($sliderKnobW);
+        cursor: e-resize;
+    }
+    .range {
+        @include trans-prop-nice-fade(.25s);
+        background-color: $sliderColorRange;
+        cursor: ew-resize;
+        position: absolute;
+        top: 0; //$tbOffset;
+        right: auto;
+        bottom: 0;
+        left: auto;
+        height: auto;
+        width: auto;
+        &:hover {
+            background-color: $sliderColorRangeHov;
+        }
+    }
 }
 
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
-	$r1H: 15px;
-	@include user-select(none);
-	font-size: 0.8rem;
-	padding: $interiorMarginLg !important;
-	width: 230px;
-	.l-month-year-pager {
-		$pagerW: 20px;
-		//@include test();
-		//font-size: 0.8rem;
-		height: $r1H;
-		margin-bottom: $interiorMargin;
-		position: relative;
-		.pager,
-		.val {
-			//@include test(red);
-			@extend .abs;
-		}
-		.pager {
-			width: $pagerW;
-			@extend .ui-symbol;
-			&.prev {
-				right: auto;
-				&:before {
-					content: "\3c";
-				}
-			}
-			&.next {
-				left: auto;
-				text-align: right;
-				&:before {
-					content: "\3e";
-				}
-			}
-		}
-		.val {
-			text-align: center;
-			left: $pagerW + $interiorMargin;
-			right: $pagerW + $interiorMargin;
-		}
-	}
-	.l-calendar,
-	.l-time-selects {
-		border-top: 1px solid $colorInteriorBorder
-	}
-	.l-time-selects {
-		line-height: $formInputH;
-	}
+    $r1H: 15px;
+    @include user-select(none);
+    font-size: 0.8rem;
+    padding: $interiorMarginLg !important;
+    width: 230px;
+    .l-month-year-pager {
+        $pagerW: 20px;
+        height: $r1H;
+        margin-bottom: $interiorMargin;
+        position: relative;
+        .pager,
+        .val {
+            @extend .abs;
+        }
+        .pager {
+            width: $pagerW;
+            @extend .ui-symbol;
+            &.prev {
+                right: auto;
+                &:before {
+                    content: "\3c";
+                }
+            }
+            &.next {
+                left: auto;
+                text-align: right;
+                &:before {
+                    content: "\3e";
+                }
+            }
+        }
+        .val {
+            text-align: center;
+            left: $pagerW + $interiorMargin;
+            right: $pagerW + $interiorMargin;
+        }
+    }
+    .l-calendar,
+    .l-time-selects {
+        border-top: 1px solid $colorInteriorBorder
+    }
+    .l-time-selects {
+        line-height: $formInputH;
+    }
 }
 
 /******************************************************** CALENDAR */
 .l-calendar {
-	$colorMuted: pushBack($colorMenuFg, 30%);
-	ul.l-cal-row {
-		@include display-flex;
-		@include flex-flow(row nowrap);
-		margin-top: 1px;
-		&:first-child {
-			margin-top: 0;
-		}
-		li {
-			@include flex(1 0);
-			//@include test();
-			margin-left: 1px;
-			padding: $interiorMargin;
-			text-align: center;
-			&:first-child {
-				margin-left: 0;
-			}
-		}
-		&.l-header li {
-			color: $colorMuted;
-		}
-		&.l-body li {
-			@include trans-prop-nice(background-color, .25s);
-			cursor: pointer;
-			&.in-month {
-				background-color: $colorCalCellInMonthBg;
-			}
-			.sub {
-				color: $colorMuted;
-				font-size: 0.8em;
-			}
-			&.selected {
-				background: $colorCalCellSelectedBg;
-				color: $colorCalCellSelectedFg;
-				.sub {
-					color: inherit;
-				}
-			}
-			&:hover {
-				background-color: $colorCalCellHovBg;
-				color: $colorCalCellHovFg;
-				.sub {
-					color: inherit;
-				}
-			}
-		}
-	}
+    $colorMuted: pushBack($colorMenuFg, 30%);
+    ul.l-cal-row {
+        @include display-flex;
+        @include flex-flow(row nowrap);
+        margin-top: 1px;
+        &:first-child {
+            margin-top: 0;
+        }
+        li {
+            @include flex(1 0);
+            margin-left: 1px;
+            padding: $interiorMargin;
+            text-align: center;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+        &.l-header li {
+            color: $colorMuted;
+        }
+        &.l-body li {
+            @include trans-prop-nice(background-color, .25s);
+            cursor: pointer;
+            &.in-month {
+                background-color: $colorCalCellInMonthBg;
+            }
+            .sub {
+                color: $colorMuted;
+                font-size: 0.8em;
+            }
+            &.selected {
+                background: $colorCalCellSelectedBg;
+                color: $colorCalCellSelectedFg;
+                .sub {
+                    color: inherit;
+                }
+            }
+            &:hover {
+                background-color: $colorCalCellHovBg;
+                color: $colorCalCellHovFg;
+                .sub {
+                    color: inherit;
+                }
+            }
+        }
+    }
 }
 
 /******************************************************** BROWSER ELEMENTS */
 
 @include desktop {
-	::-webkit-scrollbar {
-		@include border-radius(2px);
-		@include box-sizing(border-box);
-		@include box-shadow(inset $scrollbarTrackShdw);
-		background-color: $scrollbarTrackColorBg;
-		height: $scrollbarTrackSize;
-		width: $scrollbarTrackSize;
-	}
+    ::-webkit-scrollbar {
+        @include border-radius(2px);
+        @include box-sizing(border-box);
+        @include box-shadow(inset $scrollbarTrackShdw);
+        background-color: $scrollbarTrackColorBg;
+        height: $scrollbarTrackSize;
+        width: $scrollbarTrackSize;
+    }
 
-	::-webkit-scrollbar-thumb {
-		$bg: $scrollbarThumbColor;
-		$hc: $scrollbarThumbColorHov;
-		$gr: 5%;
-		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
-		@include border-radius(2px);
-		@include box-sizing(border-box);
-		//@include boxShdwSubtle();
-		//border-top: 1px solid lighten($bg, 20%);
-		&:hover {
-			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
-		}
-	}
+    ::-webkit-scrollbar-thumb {
+        $bg: $scrollbarThumbColor;
+        $hc: $scrollbarThumbColorHov;
+        $gr: 5%;
+        @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
+        @include border-radius(2px);
+        @include box-sizing(border-box);
+        &:hover {
+            @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
+        }
+    }
 
-	::-webkit-scrollbar-corner {
-		background: $scrollbarTrackColorBg;
-	}
-}
+    ::-webkit-scrollbar-corner {
+        background: $scrollbarTrackColorBg;
+    }
+}

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -6,10 +6,6 @@
 	}
 }
 
-.l-time-controller-visible {
-
-}
-
 mct-include.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
@@ -22,10 +18,10 @@ mct-include.l-time-controller {
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
 
-    @include absPosDefault();
+    //@include absPosDefault();
     //@include test();
     display: block;
-    top: auto;
+    //top: auto;
 	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
     min-width: $minW;
     font-size: 0.8rem;

platform/commonUI/general/res/sass/features/_time-display.scss

@@ -1,46 +1,32 @@
 .l-time-display {
 	$transTime: 200ms;
-	// Layout
+    line-height: 140%;
 	&:hover {
 		.l-btn.control {
 			opacity: 1;
 		}
 	}
-	.l-elem-wrapper {
-		position: relative;
-	}
-	.l-elem {
-		display: inline-block;
-	}
 
 	&.l-timer {
-		.l-elem.l-value {
-			@include trans-prop-nice(left, $transTime);
-			position: absolute;
-			left: 0;
-			z-index: 1;
-			.ui-symbol.direction {
-				font-size: 0.8em;
-			}
-		}
-		&:hover .l-elem.l-value {
-			left: 20px;
+        .control {
+            @include trans-prop-nice((width, opacity), $transTime);
+            line-height: inherit;
+            margin-right: 0;
+            opacity: 0;
+            width: 0;
+        }
+		&:hover .control {
+            margin-right: $interiorMargin;
+            opacity: 1;
+			width: 1em;
 		}
 	}
 
-	// Look-and-feel
-	.l-elem {
-		.value.active,
-		&.value.active {
-			color: $colorKeyFg;
-		}
-	}
-	.l-btn.control {
-		@include trans-prop-nice-fade($transTime);
-		opacity: 0;
-		font-size: 0.65em;
-		vertical-align: top;
-		//line-height: 1em;
-	}
-
+    .value {
+        color: pullForward($colorBodyFg, 50%);
+        font-weight: 400;
+        .direction {
+            font-size: 0.8em;
+        }
+    }
 }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -31,7 +31,6 @@
 }
 
 .form {
-//	@include test(orange);
 	color: $colorFormText;
 	.form-section {
 		position: relative;
@@ -112,12 +111,8 @@
 
 		.selector-list {
 			// Used in create overlay to display tree view
-			@include nice-input($colorInputBg, $colorInputFg);
+			@include nice-input();
 			$h: 150px;
-			//@include border-radius($basicCr);
-			//@include box-sizing(border-box);
-			//background: rgba(black, 0.2);
-			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
 //			max-width: 50%;
@@ -162,13 +157,9 @@ label.form-control.checkbox {
 	}
 }
 
-input[type="text"] {
-	@include nice-input($colorInputBg, $colorInputFg);
-	&.filter {
-		&.ng-dirty {
-			//            background: red;
-		}
-	}
+input[type="text"],
+input[type="search"] {
+	@include nice-input();
 	&.numeric {
 		text-align: right;
 	}
@@ -176,7 +167,6 @@ input[type="text"] {
 
 textarea {
 	@include nice-textarea($colorInputBg, $colorInputFg);
-	//	font-size: 0.9em;
 	position: absolute;
 	height: 100%;
 	width: 100%;

platform/commonUI/general/res/sass/forms/_filter.scss

@@ -21,20 +21,7 @@
  *****************************************************************************/
 .filter,
 .t-filter {
-	input.filter,
 	input.t-filter-input {
-		@include subdued-input();
-	}
-	input.t-filter-input {
-		height: $formInputH;
-		width: 200px;
-		&:not(.ng-dirty) {
-//			TO-DO: Update compass install to support this
-//			@include input-placeholder {
-//				color: rgba(#fff, 0.3);
-//				font-style: italic;
-//			}
-		}
 		&:not(.ng-dirty) + .t-a-clear {
 			display: none;
 		}
@@ -76,13 +63,6 @@
 			background-color: $colorKey;
 		}
 	}
-//	&:not(ng-dirty)
-}
-
-.l-filter {
-	// Holds an input and a clear button
-	display:inline-block;
-	position: relative;
 }
 
 .top-bar {
@@ -100,4 +80,75 @@
 	.icon-filter {
 		font-size: 1.4em;
 	}
+}
+
+.l-filter {
+    $iconEdgeM: 4px;
+    $iconD: $formInputH - ($iconEdgeM * 2);
+    // Adds a magnifying glass before, holds an input and a clear button
+    display: inline-block;
+    position: relative;
+
+    input[type="search"] {
+        padding: 2px ($iconD + $interiorMargin);
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        @include box-sizing(border-box);
+        display: inline-block;
+        line-height: inherit;
+        position: absolute;
+        top: 50%;
+        @include transform(translateY(-50%));
+        z-index: 1;
+    }
+
+    &:before {
+        // Magnify glass icon
+        content:'\4d';
+        left: $interiorMargin;
+        @include trans-prop-nice(color, 250ms);
+        pointer-events: none;
+    }
+
+    .clear-icon {
+        right: $iconEdgeM;
+        // Icon is visible only when there is text input
+        visibility: hidden;
+        opacity: 0;
+        &.show {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        &:hover {
+            color: pullForward($colorInputIcon, 10%);
+        }
+    }
+}
+
+.s-filter {
+    input[type="search"] {
+        @include input-base();
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        color: $colorInputIcon;
+        cursor: pointer;
+        font-family: symbolsfont;
+        @include trans-prop-nice((opacity, color), 150ms);
+    }
+    // Make icon lighten when hovering over search bar
+    &:hover:before {
+        color: pullForward($colorInputIcon, 10%);
+    }
+
+    .clear-icon {
+        // 'x' in circle icon
+        &:before {
+            content: '\e607';
+        }
+    }
 }

platform/commonUI/general/res/sass/forms/_selects.scss

@@ -25,7 +25,6 @@
 	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
     }
 	padding: 0 $interiorMargin;
-    overflow: hidden;
 	position: relative;
     line-height: $formInputH;
 	select {

platform/commonUI/general/res/sass/helpers/_splitter.scss

@@ -29,7 +29,7 @@
     //@include test(red);
     display: block;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     &:after {
         // The handle
         content:"";
@@ -43,7 +43,6 @@
         }
     }
     &:active {
-        //@include test();
         &:after {
             background-color: $colorSplitterActive !important;
         }
@@ -122,11 +121,3 @@
         }
     }
 }
-
-/*.browse-area .splitter {
-	top: 0; //$ueTopBarH + $interiorMarginLg;
-}
-
-.edit-area .splitter {
-	top: 0;
-}*/

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

@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
+
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
@@ -32,51 +34,31 @@ $mobileTreeItemH: 35px;
 $mobileTreeItemIndent: 20px;
 $mobileTreeRightArrowW: 30px;
 
-/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** DEVICE WIDTHS */
+// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
 $phoMaxW: 514px;
-$phoMaxH: 740px;
-
 $tabMinW: 515px;
-$tabMaxW: 799px;
-
-$tabMinH: 741px;
-$tabMaxH: 1024px;
-
-$compMinW: 800px;
-$compMinH: 1025px;
+$tabMaxW: 1280px;
+$desktopMinW: 1281px;
 
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+$mobileDevice: "(max-device-width: #{$tabMaxW})";
 
-$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
-$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
-
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
-$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
-
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
-$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
-$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
-
-$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+$phoneCheck: "(max-device-width: #{$phoMaxW})";
+$tabletCheck: $mobileDevice;
+$desktopCheck: "(min-device-width: #{$desktopMinW})";
 
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
-$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
-$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
+$phonePortrait: "#{$screenPortrait} and #{$phoneCheck} and #{$mobileDevice}";
+$phoneLandscape: "#{$screenLandscape} and #{$phoneCheck} and #{$mobileDevice}";
 
-$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
-$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
-$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
+$tabletPortrait: "#{$screenPortrait} and #{$tabletCheck} and #{$mobileDevice}";
+$tabletLandscape: "#{$screenLandscape} and #{$tabletCheck} and #{$mobileDevice}";
 
-$desktopPortrait: "screen and #{$desktopPortraitCheck}";
-$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
+$desktop: "screen and #{$desktopCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $proporMenuOnly: 90%;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -36,16 +36,23 @@
         //@include test();
         @include slMenuTransitions;
         margin-left: 0 !important;
-        #content-area {
+        .holder-object-and-inspector {
             @include slMenuTransitions;
+            left: $bodyMargin;
+            right: $bodyMargin;
             opacity: 1;
         }
     }
 
-    .holder.holder-create-and-search {
-        right: $bodyMargin !important;
+    .create-btn-holder {
+        // Hide the create button by default in mobile;
+        // This can be overridden by the examples/mobile bundle
+        display: none;
     }
 
+    .holder.holder-treeview-elements {
+        right: $bodyMargin !important;
+    }
 
 // When the tree is hidden, these are the
     // classes used for the left menu and the
@@ -55,10 +62,6 @@
         // is hidden.
         .pane.left.treeview {
             @include trans-prop-nice(opacity, 150ms);
-            //right: 100% !important;
-            //width: auto !important;
-            //overflow-y: hidden;
-            //overflow-x: hidden;
             opacity: 0 !important;
         }
         .pane.right.items {
@@ -72,7 +75,6 @@
         // causing cut/copy/paste menu to
         // not appear. Should me moved in
         // future to properly work
-        //@include user-select(none);
 
         // Sets the left tree menu when the tree is shown.
         .pane.left.treeview {
@@ -100,8 +102,7 @@
     }
 
     .object-browse-bar {
-        //@include test();
-        left: 45px !important;
+        margin-left: 45px;
         .context-available {
             opacity: 1 !important;
         }
@@ -148,7 +149,7 @@
         .pane.right.items {
             left: 0 !important;
             @include transform(translateX($proporMenuOnly));
-            #content-area {
+            .holder-object-and-inspector {
                 opacity: 0;
             }
         }
@@ -159,4 +160,4 @@
     .desktop-hide {
         display: none;
     }
-}
+}

platform/commonUI/general/res/sass/mobile/_mixins.scss

@@ -20,11 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/* REQUIRES /platform/commonUI/general/res/sass/mobile/_constants.scss */
+
 // Phones in any orientation
 @mixin phone {
     @media #{$phonePortrait},
-           #{$phoneLandscape},
-           #{$phoneLandscapeEmu} {
+           #{$phoneLandscape} {
         @content
     }
 }
@@ -38,8 +39,7 @@
 
 // Phones in landscape orientation
 @mixin phoneLandscape {
-    @media #{$phoneLandscape},
-           #{$phoneLandscapeEmu} {
+    @media #{$phoneLandscape} {
         @content
     }
 }
@@ -47,8 +47,7 @@
 // Tablets in any orientation
 @mixin tablet {
     @media #{$tabletPortrait},
-           #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+           #{$tabletLandscape} {
         @content
     }
 }
@@ -62,8 +61,7 @@
 
 // Tablets in landscape orientation
 @mixin tabletLandscape {
-    @media #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+    @media #{$tabletLandscape} {
         @content
     }
 }
@@ -72,10 +70,8 @@
 @mixin phoneandtablet {
     @media #{$phonePortrait},
            #{$phoneLandscape},
-           #{$phoneLandscapeEmu},
            #{$tabletPortrait},
-           #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+           #{$tabletLandscape} {
         @content
     }
 }
@@ -84,17 +80,14 @@
 @mixin desktopandtablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu},
-           #{$desktopPortrait},
-           #{$desktopLandscape} {
+           #{$desktop} {
         @content
     }
 }
 
 // Desktop monitors in any orientation
 @mixin desktop {
-    @media #{$desktopPortrait},
-           #{$desktopLandscape} {
+    @media #{$desktop} {
         @content
     }
 }

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -22,21 +22,19 @@
 
 // Override the Create menu for mobile
 @include phoneandtablet {
-    .menu-element {
-        .super-menu {
-            $d: 250px;
-            width: $d;
-            height: $d;
+    .super-menu {
+        $d: 250px;
+        width: $d;
+        height: $d;
 
-            .pane {
-                &.left {
-                    border-right: none;
-                    padding-right: 0;
-                    width: 100%;
-                }
-                &.right {
-                    display: none;
-                }
+        .pane {
+            &.left {
+                border-right: none;
+                padding-right: 0;
+                width: 100%;
+            }
+            &.right {
+                display: none;
             }
         }
     }

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -20,11 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 $yBarW: 60px;
-$yLabelW: auto;
+$yLabelW: 10px;
 $xBarH: 32px;
 $legendH: 20px;
-//$colorHash: rgba(white, 0.3); // MOVED INTO CONSTANTS
-//$styleHash: dashed; // MOVED INTO CONSTANTS
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
@@ -36,7 +34,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	height: 100%;
 
 	.gl-plot-axis-area {
-		//		@include test(green);
 		position: absolute;
 		&.gl-plot-x {
 			top: auto;
@@ -59,7 +56,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-coords {
 		@include box-sizing(border-box);
 		@include border-radius($controlCr);
-		background: black; //rgba($colorKey, 0.5);
+		background: black;
 		color: lighten($colorBodyFg, 30%);
 		padding: 2px 5px;
 		position: absolute;
@@ -88,11 +85,9 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 	.gl-plot-label,
 	.l-plot-label {
-		//		@include test(yellow);
 		color: $colorPlotLabelFg;
 		position: absolute;
 		text-align: center;
-//		text-transform: uppercase;
 
 		&.gl-plot-x-label,
 		&.l-plot-x-label {
@@ -117,20 +112,26 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		}
 	}
 
-	.gl-plot-y-options {
+	.gl-plot-x-options,
+    .gl-plot-y-options {
 		$h: 32px;
-//		@include test();
 		position: absolute;
-		top: 50%;
-		right: auto;
-		bottom: auto;
-		left: $yLabelW + $interiorMargin;
-		margin-top: $h / -2;
 		height: auto;
 		min-height: $h;
-		width: $h;
+        z-index: 2;
 	}
 
+    .gl-plot-x-options {
+        top: $interiorMargin;
+    }
+
+    .gl-plot-y-options {
+        @include transform(translateY(-50%));
+        min-width: 150px; // Need this due to enclosure of .select
+        top: 50%;
+        left: $yLabelW + $interiorMargin * 2;
+    }
+
 	.gl-plot-hash {
 		position: absolute;
 		border: 0 $colorPlotHash $stylePlotHash;
@@ -214,21 +215,13 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			display: inline-block;
 			height: $swatchD;
 			width: $swatchD;
-			//margin-right: $interiorMarginSm;
-		}
-		&[class*='s-limit'] {
-			.title-label {
-				//color: #fff;
-			}
 		}
 	}
 }
 
 .gl-plot-legend {
 	.plot-legend-item {
-		//@include test();
 		@include border-radius($smallCr);
-		//color: #fff;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
@@ -250,7 +243,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .gl-plot-tick,
 .tick-label {
-	//			@include test(red);
 	font-size: 0.7rem;
 	position: absolute;
 	overflow: hidden;
@@ -277,7 +269,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 }
 
 .gl-plot-tick {
-	//			@include test(red);
 	&.gl-plot-x-tick-label {
 		top: $interiorMargin;
 	}

platform/commonUI/general/res/sass/search/_search.scss

@@ -20,126 +20,36 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-.abs.search-holder {
-	//@include test(#990000);
-	height: $treeSearchInputBarH;
-	bottom: 0;
-	&.active {
-		height: auto;
-		bottom: 0;
-	}
-	top: 23px;
+.holder-search {
+    // Moved a lot of stuff in here to _filter.scss
+    // to generalize approach to search input controls.
 
-	// Align with the top of the divider bar, below create button
-	//margin-top: 10px; // CH comment out
-	z-index:5;
-}
-
-.search {
 	$iconWidth: 20px;
-	$leftMargin: 6px;
-	$rightPadding: 5px;
-	@include webkitVal(display, flex);
-	//display: flex;
-	@include webkitProp(flex-direction, column);
-	//flex-direction: column;
-	height: 100%;
+    $textInputHeight: 19px;
+    $iconEdgeM: 4px;
+    $iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 
 	.search-bar {
-		$textInputHeight: 19px; // This is equal to the default value, 19px
-		$iconEdgeM: 4px;
-		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
 		max-width: 250px;
 		position: relative;
-		width: 100%;
-		.search-input,
-		.search-icon {
-		}
-		
-		.search-input {
+
+		input[type="search"] {
 			height: $treeSearchInputBarH;
 			line-height: $treeSearchInputBarH;
-			padding-top: 0;
-			padding-bottom: 0;
+            position: relative;
+            width: 100%;
+            padding-left: $iconD + $interiorMargin !important;
+            padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
 		}
 		
-		.search-icon,
-		.clear-icon,
-		.menu-icon {
-			//@include test(#008800);
-			@include box-sizing(border-box);
-			color: $colorInputIcon;
-			height: $iconD; width: $iconD;
-			line-height: $iconD;
-			position: absolute;
-			text-align: center;
-			top: $iconEdgeM;
-		}
-
-		.clear-icon,
-		.menu-icon {
-			cursor: pointer;
-			@include transition(color, .25s);
-		}
-
-
-		.search-input {
-			position: relative;
-			width: 100%;
-			padding-left: $iconD + $interiorMargin !important;
-			padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
-
-			// Make work for mct-control textfield
-			input {
-				width: 100%;
-			}
-		}
-
-		.search-icon {
-			//color: $colorItemFg;
-			left: $interiorMarginSm;
-			transition: visibility .15s, opacity .15s, color .2s;
-			pointer-events: none;
-
-			&.content {
-				// Make icon invisible whenever there is text input
-				//visibility: hidden;
-				//opacity: 0;
-			}
-		}
-
-		// Make icon invisible when the text input is focused
-		.search-input:focus + div.search-icon {
-			//visibility: hidden;
-			//opacity: 0;
-		}
-
-		// Make icon lighten when hovering over search bar
-		.search-input:hover + div.search-icon {
-			color: pullForward($colorInputIcon, 10%);
-		}
-
-		.clear-icon {
-			right: $iconD + $interiorMargin;
-
-			// Icon is visible only when there is text input
-			visibility: hidden;
-			opacity: 0;
-
-			transition: visibility .15s, opacity .15s, color .2s;
-
-			&.content {
-				visibility: visible;
-				opacity: 1;
-			}
-
-			&:hover {
-				color: pullForward($colorInputIcon, 10%);
-			}
-		}
+        .clear-icon {
+            right: $iconD + $interiorMargin;
+        }
 
 		.menu-icon {
+            // 'v' invoke menu icon
+            &:before { content: '\76'; }
 			font-size: 0.8em;
 			padding-right: $iconEdgeM;
 			right: $iconEdgeM;
@@ -152,43 +62,19 @@
 
 		.search-menu-holder {
 			float: right;
-			//margin-top: $textInputHeight - 2px;
-			//left: -50px;
 			left: -20px;
-
-			z-index: 1;
-
+			z-index: 70;
 			transition: visibility .05s, opacity .05s;
-
-			&.off {
-				visibility: hidden;
-				opacity: 0;
-			}
-		}
-
-		// Hovering reveals menu
-		.menu-icon:hover + div.search-menu-holder {
-			visibility: visible;
-		}
-		div.search-menu-holder:hover {
-			visibility: visible;
 		}
 	}
 
 	.active-filter-display {
-		//order: 2;
 		$s: 0.65em;
 		$p: $interiorMargin;
-		@include border-radius($basicCr);
 		@include box-sizing(border-box);
 		line-height: 130%;
-		padding: $p 0;
 		padding-left: $s * 2.25;
 		font-size: $s;
-		//background-color: rgba(#000, 0.3);
-		//border-radius: $basicCr;
-		margin-top: $interiorMarginSm;
-
 
 		.clear-filters-icon {
 			color: $colorInputIcon;
@@ -198,43 +84,28 @@
 			left: 1px;
 			cursor: pointer;
 		}
-
-		// Transition looks weird when the results list has none
-		//transition: visibility .2s, opacity .2s;
-
-		&.off {
-			visibility: hidden;
-			opacity: 0;
-			height: 0;
-			margin: 0;
-			padding: 0;
-			border: 0;
-		}
 	}
 
-	.search-scroll {
-		order: 3;
-		margin-top: 4px;
-
-		// Adjustable scrolling size
-		overflow-y: auto;
-		top: auto;
-		height: auto;
-		max-height: 100%;
-		position: relative;
-
-		.load-icon {
-			position: relative;
-		}
-
+	.search-results {
+        @include trans-prop-nice((opacity, visibility), 250ms);
+        margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
+		padding-right: $interiorMargin;
+        .hint {
+            margin-bottom: $interiorMarginLg;
+            font-size: 0.65em;
+            opacity: 0.6;
+        }
+        &.active {
+            visibility: visible;
+            opacity: 1;
+        }
 		.load-more-button {
-			margin-top: $interiorMargin 0;
-			font-size: 0.8em;
-			position: relative;
-			left: 50%;
-			margin-left: -45px;
-			text-align: center;
-			width: 90px;
+            @include transform(translateX(-50%));
+            display: inline-block;
+			margin-top: $interiorMargin;
+            padding: 0 $interiorMarginLg;
+			font-size: 0.75em;
+			margin-left: 50%;
 			white-space: nowrap;
 		}
 	}

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -143,6 +143,31 @@ ul.tree {
 		}
 	}
 
+    &.active {
+        // The item is being edited
+        background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
+        pointer-events: none;
+        &:before {
+            // Pencil icon
+            @extend .ui-symbol;
+            @include pulse($dur: 1s, $opacity0: 0.25);
+            color: $colorItemTreeEditingFg;
+            content: '\70';
+            margin-left: $interiorMarginSm;
+        }
+        .t-object-label {
+            .t-item-icon,
+            .t-title-label {
+                color: $colorItemTreeEditingFg;
+                @include text-shadow(none);
+            }
+            .t-title-label {
+                font-style: italic;
+            }
+        }
+        .view-control, + .tree-item-subtree { display: none; }
+    }
+
 	&:not(.loading) {
 		cursor: pointer;
 	}
@@ -160,8 +185,9 @@ ul.tree {
 	}
 }
 
-.tree-item {
+.tree-item,
+.search-result-item.active {
 	.t-object-label {
 		left: $interiorMargin + $treeVCW;
 	}
-}
+}

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -29,11 +29,13 @@
 			border-color: lighten($bc, 10%);
 		}
 	}
-	>.object-header.abs {
-		//@include test(red);
+	.object-top-bar {
 		font-size: 0.75em;
 		height: $ohH;
 		line-height: $ohH;
+        .left {
+            padding-right: $interiorMarginLg;
+        }
 	}
 	>.object-holder.abs {
 		top: $ohH + $interiorMargin;

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -19,23 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-/*.holder-all {
-    $myM: 0; // $interiorMarginSm;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-}*/
 
 .browse-area,
 .edit-area,
@@ -48,7 +31,7 @@
 }
 
 .contents {
-    $myM: 0; //$interiorMargin;
+    $myM: 0;
     box-sizing: border-box;
     position: absolute;
     top: $myM;
@@ -63,37 +46,6 @@
     }
 }
 
-.bar {
-    .icon.major {
-        margin-right: $interiorMargin;
-    }
-    &.abs {
-        text-wrap: none;
-        white-space: nowrap;
-        &.left,
-        .left {
-            width: 45%;
-            right: auto;
-        }
-        &.right,
-        .right {
-            width: 45%;
-            left: auto;
-            text-align: right;
-            .icon.major {
-                margin-left: $interiorMargin * 3;
-            }
-        }
-        .l-flex,
-        &.l-flex {
-            .left,
-            .right {
-                width: auto;
-            }
-        }
-    }
-}
-
 .user-environ {
     .browse-area,
     .editor {
@@ -125,7 +77,6 @@
         }
     }
 
-	// from _bottom-bar.scss
 	.ue-bottom-bar {
 		@include absPosDefault(0);// New status bar design
 		top: auto;
@@ -134,12 +85,10 @@
 		background: $colorFooterBg;
 		color: lighten($colorBodyBg, 30%);
 		font-size: .7rem;
-
 		.status-holder {
 			@include box-sizing(border-box);
 			@include absPosDefault($interiorMargin);
 			@include ellipsize();
-			//line-height: $ueFooterH - ($interiorMargin * 2);
 			right: 120px;
 			text-transform: uppercase;
 			z-index: 1;
@@ -158,86 +107,6 @@
 	}
 }
 
-.cols {
-    @include clearfix;
-    .col {
-        @include box-sizing(border-box);
-        @include clearfix;
-        //		background: rgba(#ffcc00, 0.2);
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane {
-            //@include test(green);
-            &.treeview.left {
-                min-width: 150px;
-                max-width: 800px;
-                width: $ueBrowseLeftPaneTreeW;
-            }
-            &.t-inspect.right {
-                min-width: 200px;
-                max-width: 600px;
-                //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
-                width: $ueBrowseRightPaneInspectW;
-            }
-        }
-    }
-}
-
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
@@ -258,7 +127,6 @@
         text-transform: uppercase;
         height: $ueTopBarH;
         line-height: $ueTopBarH;
-        margin-bottom: $interiorMargin;
     }
 
     .primary-pane {
@@ -266,30 +134,7 @@
         z-index: 2;
     }
 
-    &.treeview.left {
-        //.create-btn-holder {
-        //    //bottom: auto;
-        //    //top: 0;
-        //    height: $ueTopBarH;
-        //    .wrapper.menu-element {
-        //        position: absolute;
-        //        bottom: $interiorMargin;
-        //    }
-        //}
-        .holder-create-and-search{
-
-        }
-        .search-holder {
-            top: $ueTopBarH + $interiorMarginLg;
-        }
-        .tree-holder {
-            overflow: auto;
-            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-        }
-    }
-
     .mini-tab-icon.toggle-pane {
-        //@include test(blue, 0.3);
         z-index: 5;
         @include desktop {
             $d: $uePaneMiniTabH;
@@ -334,7 +179,6 @@
             }
         }
     }
-
     &.items {
         .object-browse-bar {
             .left.abs,
@@ -346,32 +190,8 @@
 }
 
 .split-layout {
-    &.horizontal {
-        // Slides up and down
-        > .pane {
-            //			@include test();
-            margin-top: $interiorMargin;
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-   /* &.vertical {
-        // Slides left and right
-        > .pane.left {
-            > .holder {
-                left: $bodyMargin;
-            }
-        }
-        > .pane.right {
-            > .holder {
-                right: $bodyMargin;
-            }
-        }
-    }*/
-
     // Specific elements margins
-    .holder.holder-create-and-search {
+    .holder.holder-treeview-elements {
         top: $bodyMargin;
         right: 0;
         bottom: $bodyMargin;
@@ -387,29 +207,64 @@
             top: $bodyMargin;
             bottom: $bodyMargin;
         }
-        .holder-inspector-elements {
+        .holder-inspector {
             top: $bodyMargin;
             bottom: $bodyMargin;
             left: $bodyMargin;
             right: $bodyMargin;
-
+        }
+        .holder-elements {
+            top: 0;
+            bottom: $bodyMargin;
+            left: $bodyMargin;
+            right: $bodyMargin;
         }
     }
 }
 
 .object-holder {
-    overflow: hidden; // Contained objects need to handle their own overflow now
+    @include absPosDefault(0, auto);
     top: $ueTopBarH + $interiorMarginLg;
-    > ng-include {
-        @include absPosDefault(0, auto);
+}
+
+.l-object-wrapper {
+    @extend .abs;
+
+    .object-holder-main {
+        @extend .abs;
     }
-    &.l-controls-visible {
-        &.l-time-controller-visible {
-            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+
+    &.active {
+        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
+        @include border-radius($controlCr);
+        background-color: $colorEditAreaBg;
+        border-color: $colorEditAreaFg;
+        border-width: 2px;
+        border-style: dotted;
+        .l-object-wrapper-inner {
+            @include absPosDefault(3px, hidden);
         }
     }
 }
 
+.l-object-wrapper-inner {
+    @include trans-prop-nice-resize(0.25s);
+}
+
+.l-edit-controls {
+    @include trans-prop-nice((opacity, height), 0.25s);
+    border-bottom: 1px solid $colorInteriorBorder;
+    line-height: $ueEditToolBarH;
+    height: 0px;
+    opacity: 0;
+    overflow: hidden;
+    &.active {
+        height: $ueEditToolBarH + $interiorMargin;
+        margin-bottom: $interiorMargin;
+        opacity: 1;
+    }
+}
+
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .s-menu-btn,
@@ -428,76 +283,41 @@
     }
 }
 
+/***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
-    //@include test(blue);
-    @include absPosDefault(0, visible);
+    // Converting to use flexbox layout
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;
 
     .left {
-        padding-right: $interiorMarginLg * 2;
+        padding-right: $interiorMarginLg;
         .l-back {
-            display: inline-block;
-            float: left;
             margin-right: $interiorMarginLg;
         }
     }
 }
 
-.l-flex {
-    @include webkitVal('display', 'flex');
-    @include webkitProp('flex-flow', 'row nowrap');
-    .left {
-        //@include test(red);
-        @include webkitProp(flex, '1 1 0');
-        padding-right: $interiorMarginLg;
-    }
-}
-
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
+// When the tree is hidden, these are the classes used for the left menu and the right representation.
 .pane-tree-hidden {
     // Sets the left tree menu when the tree is hidden.
-    //.pane.left.treeview,
     .tree-holder,
     .splitter-treeview,
-    .holder-create-and-search {
+    .holder-treeview-elements {
         opacity: 0;
     }
-    /*.holder-create-and-search {
-        @include trans-prop-nice((top, left), 250ms);
-        top: $ueTopBarH + $interiorMargin;
-        left: -1 * $bodyMargin !important;
-        .create-btn {
-            @include border-left-radius(0);
-            @include trans-prop-nice((width), 250ms);
-            width: $uePaneMiniTabW !important;
-            text-align: center !important;
-            padding: 0;
-            .title-label,
-            &:after {
-                display: none;
-            }
-            &:before {
-                font-size: 9px;
-            }
-        }
-    }*/
 }
 
 .pane-tree-showing {
     // Sets the left tree menu when the tree is shown.
-    //.pane.left.treeview,
     .tree-holder,
     .splitter-treeview {
         @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
         opacity: 1;
     }
 
-    .holder-create-and-search {
+    .holder-treeview-elements {
         @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
     }
 }
@@ -511,6 +331,7 @@
         }
     }
 }
+
 .pane-inspect-hidden {
     .l-object-and-inspector {
         .l-inspect,
@@ -521,6 +342,24 @@
 }
 
 @include desktop {
+    .holder-all {
+        min-width: $ueDesktopMinW;
+    }
+    .split-layout {
+        .split-pane-component.pane {
+            &.treeview.left {
+                min-width: $ueBrowseLeftPaneTreeMinW;
+                max-width: $ueBrowseLeftPaneTreeMaxW;
+                width: $ueBrowseLeftPaneTreeW;
+            }
+            &.t-inspect.right {
+                min-width: $ueBrowseRightPaneInspectMinW;
+                max-width: $ueBrowseRightPaneInspectMaxW;
+                width: $ueBrowseRightPaneInspectW;
+                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
+            }
+        }
+    }
     .pane.treeview.left .tree-holder {
         padding-right: $interiorMargin;
     }
@@ -530,8 +369,10 @@
     .pane-inspect-hidden .l-object-and-inspector {
         .pane.left { right: $ueCollapsedPaneEdgeM !important; }
     }
-
     .pane:not(.resizing) {
         @include trans-prop-nice-resize-w(250ms);
     }
+    .pane.primary-pane .object-browse-bar {
+        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
+    }
 }

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -20,7 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .tool-bar {
-	border-bottom: 1px solid $colorInteriorBorder;
 	.l-control-group {
 		height: $btnToolbarH;
 	}

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -6,10 +6,10 @@
     </input>
     <a class="ui-symbol icon icon-calendar"
        ng-if="structure.format === 'utc' || !structure.format"
-       ng-click="pickerActive = !pickerActive">
+       ng-click="picker.active = !picker.active">
     </a>
-    <mct-popup ng-if="pickerActive">
-        <div mct-click-elsewhere="pickerActive = false">
+    <mct-popup ng-if="picker.active">
+        <div mct-click-elsewhere="picker.active = false">
             <mct-control key="'datetime-picker'"
                          ng-model="ngModel"
                          field="field"

platform/commonUI/general/res/templates/controls/input-filter.html

@@ -20,15 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter"
+<span class="t-filter l-filter s-filter"
       ng-controller="GetterSetterController">
 	<input type="search"
            class="t-filter-input"
-           ng-model="getterSetter.value"
-           placeholder="Filter..."/>
-	<a class="ui-symbol t-a-clear s-a-clear"
-       ng-show="getterSetter.value !== ''"
+           ng-model="getterSetter.value"/>
+	<a class="clear-icon"
+       ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
        ng-click="getterSetter.value = ''">
-        x
     </a>
 </span>

platform/commonUI/general/res/templates/object-inspector.html

@@ -19,45 +19,63 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements">
-    <div class="pane-header">Inspection</div>
-    <ul>
-        <li>
-            <em>Properties</em>
-            <div class="inspector-properties"
-                 ng-repeat="data in metadata"
-                 ng-class="{ first:$index === 0 }">
-                <div class="label">{{ data.name }}</div>
-                <div class="value">{{ data.value }}</div>
+    <div ng-controller="PaneController as modelPaneEdit">
+        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
+            <div class="split-pane-component pane top">
+                <div class="abs holder holder-inspector l-flex-col">
+                    <div class="pane-header flex-elem">Inspection</div>
+                    <ul class="flex-elem grows vscroll">
+                        <li>
+                            <em>Properties</em>
+                            <div class="inspector-properties"
+                                 ng-repeat="data in metadata"
+                                 ng-class="{ first:$index === 0 }">
+                                <div class="label">{{ data.name }}</div>
+                                <div class="value">{{ data.value }}</div>
+                            </div>
+                        </li>
+                        <li ng-if="contextutalParents.length > 0">
+                            <em title="The location of this linked object.">Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in contextutalParents"
+                                  ng-class="{ last:($index + 1) === contextualParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                        <li ng-if="primaryParents.length > 0">
+                            <em title="The location of the original object that this was linked from.">Original Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in primaryParents"
+                                  ng-class="{ last:($index + 1) === primaryParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                    </ul>
+                </div><!--/ holder-inspector -->
+            </div><!--/ split-pane-component -->
+            <mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
+            <div class="split-pane-component pane bottom" ng-show="editMode">
+                <div class="abs holder holder-elements l-flex-col">
+                    <em class="flex-elem">Elements</em>
+                    <mct-representation
+                            key="'edit-elements'"
+                            mct-object="domainObject"
+                            class="flex-elem holder grows vscroll current-elements">
+                    </mct-representation>
+                </div>
             </div>
-        </li>
-        <li ng-if="contextutalParents.length > 0">
-            <em title="The location of this linked object.">Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in contextutalParents"
-                  ng-class="{ last:($index + 1) === contextualParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-        <li ng-if="primaryParents.length > 0">
-            <em title="The location of the original object that this was linked from.">Original Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in primaryParents"
-                  ng-class="{ last:($index + 1) === primaryParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
-    </div>
+        </mct-split-pane>
+    </div><!--/ PaneController -->
 </span>

platform/commonUI/general/res/templates/tree-node.html

@@ -39,6 +39,7 @@
                 class="mobile-hide"
                 key="'label'"
                 mct-object="domainObject"
+                parameters="{suppressMenuOnEdit: true}"
                 ng-click="treeNode.select()"
                 >
             </mct-representation>

platform/commonUI/general/src/StyleSheetLoader.js

@@ -38,8 +38,9 @@ define(
          * @constructor
          * @param {object[]} stylesheets stylesheet extension definitions
          * @param $document Angular's jqLite-wrapped document element
+         * @param {string} activeTheme the theme in use
          */
-        function StyleSheetLoader(stylesheets, $document) {
+        function StyleSheetLoader(stylesheets, $document, activeTheme) {
             var head = $document.find('head'),
                 document = $document[0];
 
@@ -62,8 +63,15 @@ define(
                 head.append(link);
             }
 
+            // Stylesheets which specify themes should only be applied
+            // when that theme has been declared.
+            function matchesTheme(stylesheet) {
+                return stylesheet.theme === undefined ||
+                    stylesheet.theme === activeTheme;
+            }
+
             // Add all stylesheets from extensions
-            stylesheets.forEach(addStyleSheet);
+            stylesheets.filter(matchesTheme).forEach(addStyleSheet);
         }
 
         return StyleSheetLoader;

platform/commonUI/general/src/controllers/DateTimeFieldController.js

@@ -69,9 +69,12 @@ define(
                 updateFromModel($scope.ngModel[$scope.field]);
             }
 
+            $scope.picker = { active: false };
+
             $scope.$watch('structure.format', setFormat);
             $scope.$watch('ngModel[field]', updateFromModel);
             $scope.$watch('textValue', updateFromView);
+
         }
 
         return DateTimeFieldController;

platform/commonUI/general/src/directives/MCTPopup.js

@@ -51,6 +51,10 @@ define(
                     position = [ rect.left, rect.top ],
                     popup = popupService.display(div, position);
 
+                // TODO: Handle in CSS;
+                //       https://github.com/nasa/openmctweb/issues/298
+                div.css('z-index', 75);
+
                 transclude(function (clone) {
                     div.append(clone);
                 });

platform/commonUI/general/src/directives/MCTSplitPane.js

@@ -178,14 +178,10 @@ define(
                     return position;
                 }
 
-                // Dynamically apply a CSS class to elements when the user is actively resizing
-                function splitterState(state) {
-                    var
-                        children = $element.children(),
-                        i;
-                    for (i = 0; i < children.length; i++) {
-                        children.eq(i).toggleClass('resizing');
-                    }
+                // Dynamically apply a CSS class to elements when the user
+                // is actively resizing
+                function toggleClass(classToToggle) {
+                    $element.children().toggleClass(classToToggle);
                 }
 
                 // Make sure anchor parameter is something we know
@@ -218,7 +214,7 @@ define(
                 // Interface exposed by controller, for mct-splitter to user
                 return {
                     position: getSetPosition,
-                    action: splitterState,
+                    toggleClass: toggleClass,
                     anchor: function () {
                         return anchor;
                     }

platform/commonUI/general/src/directives/MCTSplitter.js

@@ -54,7 +54,7 @@ define(
                     startMove: function () {
                         var splitter = element[0];
                         initialPosition = mctSplitPane.position();
-                        mctSplitPane.action('startMove');
+                        mctSplitPane.toggleClass('resizing');
                     },
                     // Handle user changes to splitter position
                     move: function (delta) {
@@ -66,9 +66,10 @@ define(
                         // Update the position of this splitter
                         mctSplitPane.position(initialPosition + pixelDelta);
                     },
-                    // Grab the event when the user is done moving the splitter and pass it on
+                    // Grab the event when the user is done moving
+                    // the splitter and pass it on
                     endMove: function() {
-                        mctSplitPane.action('endMove');
+                        mctSplitPane.toggleClass('resizing');
                     }
                 };
             }

platform/commonUI/general/test/StyleSheetLoaderSpec.js

@@ -32,10 +32,11 @@ define(
                 mockPlainDocument,
                 mockHead,
                 mockElement,
+                testBundle,
                 loader;
 
             beforeEach(function () {
-                var testBundle = {
+                testBundle = {
                     path: "a/b",
                     resources: "c"
                 };
@@ -72,6 +73,40 @@ define(
                 expect(mockElement.setAttribute)
                     .toHaveBeenCalledWith('href', "a/b/c/d.css");
             });
+
+            describe("for themed stylesheets", function () {
+                var testTheme = "test-theme";
+
+                beforeEach(function () {
+                    testStyleSheets = [{
+                        stylesheetUrl: "themed.css",
+                        bundle: testBundle,
+                        theme: testTheme
+                    }, {
+                        stylesheetUrl: "bad-theme.css",
+                        bundle: testBundle,
+                        theme: 'bad-theme'
+                    }];
+
+                    loader = new StyleSheetLoader(
+                        testStyleSheets,
+                        mockDocument,
+                        testTheme
+                    );
+                });
+
+                it("includes matching themes", function () {
+                    expect(mockElement.setAttribute)
+                        .toHaveBeenCalledWith('href', "a/b/c/themed.css");
+                });
+
+                it("excludes mismatching themes", function () {
+                    expect(mockElement.setAttribute)
+                        .not.toHaveBeenCalledWith('href', "a/b/c/bad-theme.css");
+                });
+            });
+
+
         });
     }
 );

platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js

@@ -91,6 +91,10 @@ define(
                 expect(mockScope.textValue).toEqual("1977-05-25 17:30:00");
             });
 
+            it("exposes toggle state for date-time picker", function () {
+                expect(mockScope.picker.active).toBe(false);
+            });
+
             describe("when user input is invalid", function () {
                 var newText, oldValue;
 

platform/commonUI/mobile/src/MCTDevice.js

@@ -85,7 +85,7 @@ define(
             function link(scope, element, attrs, ctrl, transclude) {
                 if (deviceMatches(attrs.mctDevice)) {
                     transclude(function (clone) {
-                        element.parent().append(clone);
+                        element.replaceWith(clone);
                     });
                 }
             }

platform/commonUI/mobile/test/MCTDeviceSpec.js

@@ -26,13 +26,12 @@ define(
     function (MCTDevice) {
         "use strict";
 
-        var JQLITE_METHODS = [ 'parent', 'append' ];
+        var JQLITE_METHODS = [ 'replaceWith' ];
 
         describe("The mct-device directive", function () {
             var mockAgentService,
                 mockTransclude,
                 mockElement,
-                mockParent,
                 mockClone,
                 testAttrs,
                 directive;
@@ -48,11 +47,8 @@ define(
                 );
                 mockTransclude = jasmine.createSpy("$transclude");
                 mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
-                mockParent = jasmine.createSpyObj(name, JQLITE_METHODS);
                 mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
 
-                mockElement.parent.andReturn(mockParent);
-
                 mockTransclude.andCallFake(function (fn) {
                     fn(mockClone);
                 });
@@ -65,6 +61,15 @@ define(
                 directive = new MCTDevice(mockAgentService);
             });
 
+            function expectInclusion() {
+                expect(mockElement.replaceWith)
+                    .toHaveBeenCalledWith(mockClone);
+            }
+
+            function expectExclusion() {
+                expect(mockElement.replaceWith).not.toHaveBeenCalled();
+            }
+
             it("is applicable at the attribute level", function () {
                 expect(directive.restrict).toEqual("A");
             });
@@ -80,54 +85,54 @@ define(
             it("restricts element inclusion for mobile devices", function () {
                 testAttrs.mctDevice = "mobile";
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isMobile.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("restricts element inclusion for tablet devices", function () {
                 testAttrs.mctDevice = "tablet";
                 mockAgentService.isMobile.andReturn(true);
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isTablet.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("restricts element inclusion for phone devices", function () {
                 testAttrs.mctDevice = "phone";
                 mockAgentService.isMobile.andReturn(true);
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isPhone.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("restricts element inclusion for desktop devices", function () {
                 testAttrs.mctDevice = "desktop";
                 mockAgentService.isMobile.andReturn(true);
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isMobile.andReturn(false);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("restricts element inclusion for portrait orientation", function () {
                 testAttrs.mctDevice = "portrait";
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isPortrait.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("restricts element inclusion for landscape orientation", function () {
@@ -135,11 +140,11 @@ define(
                 mockAgentService.isLandscape.andReturn(false);
                 mockAgentService.isPortrait.andReturn(true);
                 link();
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isLandscape.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
 
             it("allows multiple device characteristics to be requested", function () {
@@ -148,17 +153,17 @@ define(
                 testAttrs.mctDevice = "portrait mobile";
                 link();
                 // Neither portrait nor mobile, not called
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isPortrait.andReturn(true);
                 link();
 
                 // Was portrait, but not mobile, so no
-                expect(mockParent.append).not.toHaveBeenCalled();
+                expectExclusion();
 
                 mockAgentService.isMobile.andReturn(true);
                 link();
-                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+                expectInclusion();
             });
         });
     }

platform/commonUI/themes/espresso/bundle.json

@@ -1,12 +1,18 @@
 {
-  "name": "Espresso",
-  "description": "Espresso theme: dark and rich",
-  "extensions": {
-    "stylesheets": [
-      {
-        "stylesheetUrl": "css/theme-espresso.css",
-        "priority": 1000
-      }
-    ]
-  }
-}
+    "name": "Espresso",
+    "description": "Espresso theme: dark and rich",
+    "extensions": {
+        "stylesheets": [
+            {
+                "stylesheetUrl": "css/theme-espresso.css",
+                "priority": 1000
+            }
+        ],
+        "constants": [
+            {
+                "key": "THEME",
+                "value": "espresso"
+            }
+        ]
+    }
+}

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #31363e;
+$colorEditAreaFg: #587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -43,8 +45,6 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
@@ -69,8 +69,8 @@ $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff3300;
 $colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
-$colorInputBg: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#fff, 0.1);
+$colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
@@ -80,7 +80,7 @@ $colorInspectorBg: pullForward($colorBodyBg, 3%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 15%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Status colors, mainly used for messaging and item ancillary symbols
@@ -109,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -126,7 +126,7 @@ $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemBgHov: pullForward($colorItemBg, 15%);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
-$colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
+$colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
@@ -153,12 +153,14 @@ $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeEditingBg: #344154;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: rgba(#fff, 0.3);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
-$colorItemTreeVCHover: $colorAlt1;
 $shdwItemTreeIcon: 0.6;
 
 // Scrollbar
@@ -171,7 +173,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even
 $splitterHandleD: 1px;
-$colorSplitterBg: pullForward($colorBodyBg, 5%);
+$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorBodyBg, 15%);
@@ -191,5 +193,5 @@ $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
 $colorAboutLink: #84b3ff;
 
 // Loading
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
 $colorLoadingFg: $colorAlt1;
+$colorLoadingBg: rgba($colorBodyFg, 0.2);

platform/commonUI/themes/snow/bundle.json

@@ -1,12 +1,18 @@
 {
-  "name": "Sonw",
-  "description": "Snow theme: light and cool",
-  "extensions": {
-    "stylesheets": [
-      {
-        "stylesheetUrl": "css/theme-snow.css",
-        "priority": 1000
-      }
-    ]
-  }
-}
+    "name": "Snow",
+    "description": "Snow theme: light and cool",
+    "extensions": {
+        "stylesheets": [
+            {
+                "stylesheetUrl": "css/theme-snow.css",
+                "priority": 1000
+            }
+        ],
+        "constants": [
+            {
+                "key": "THEME",
+                "value": "snow"
+            }
+        ]
+    }
+}

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #eafaff;
+$colorEditAreaFg: #4bb1c7; //587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
@@ -55,10 +57,10 @@ $colorMenuIc: $colorKey;
 $colorMenuHovBg: pullForward($colorMenuBg, 10%);
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
-$colorCreateMenuLgIcon: $colorKey;
-$colorCreateMenuText: $colorBodyFg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
+$colorCreateMenuLgIcon: $colorKey;
+$colorCreateMenuText: $colorBodyFg;
 
 // Form colors
 $colorCheck: $colorKey;
@@ -73,6 +75,14 @@ $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 
+// Inspector
+$colorInspectorBg: pullForward($colorBodyBg, 5%);
+$colorInspectorFg: $colorBodyFg;
+$colorInspectorPropName: pushBack($colorBodyFg, 20%);
+$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
+$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
+
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;
 $colorStatusDefault: #ccc;
@@ -89,14 +99,6 @@ $shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
 $colorSelectBg: #ddd;
 $colorSelectFg: $colorBodyFg;
 
-// Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
-$colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 20%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
-
 // Limits and staleness colors//
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
@@ -107,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -127,12 +129,11 @@ $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: none; //rgba(black, 0.2) 0 1px 2px;
+$shdwItemText: none;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
 $colorTabBorder: pullForward($colorBodyBg, 10%);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
@@ -149,12 +150,15 @@ $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
 $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
 $colorItemTreeVCHover: $colorKey;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;

platform/commonUI/themes/snow/res/sass/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
 	@include containerBase($bg, $fg);
 	@include boxShdw($shdwBtns);
 }

platform/core/bundle.json

@@ -2,6 +2,11 @@
     "name": "Open MCT Web Core",
     "description": "Defines core concepts of Open MCT Web.",
     "sources": "src",
+    "configuration": {
+        "paths": {
+            "uuid": "uuid"
+        }
+    },
     "extensions": {
         "versions": [
             {
@@ -33,7 +38,7 @@
                 "provides": "objectService",
                 "type": "provider",
                 "implementation": "objects/DomainObjectProvider.js",
-                "depends": [ "modelService", "capabilityService", "$q" ]
+                "depends": [ "modelService", "instantiate" ]
             },
             {
                 "provides": "capabilityService",
@@ -67,8 +72,7 @@
                     "persistenceService",
                     "$q",
                     "now",
-                    "PERSISTENCE_SPACE",
-                    "ADDITIONAL_PERSISTENCE_SPACES"
+                    "PERSISTENCE_SPACE"
                 ]
             },
             {
@@ -92,7 +96,7 @@
                 "provides": "actionService",
                 "type": "provider",
                 "implementation": "actions/ActionProvider.js",
-                "depends": [ "actions[]" ]
+                "depends": [ "actions[]", "$log" ]
             },
             {
                 "provides": "actionService",
@@ -110,6 +114,12 @@
                 "type": "provider",
                 "implementation": "views/ViewProvider.js",
                 "depends": [ "views[]", "$log" ]
+            },
+            {
+                "provides": "identifierService",
+                "type": "provider",
+                "implementation": "identifiers/IdentifierProvider.js",
+                "depends": [ "PERSISTENCE_SPACE" ]
             }
         ],
         "types": [
@@ -178,7 +188,7 @@
             {
                 "key": "persistence",
                 "implementation": "capabilities/PersistenceCapability.js",
-                "depends": [ "persistenceService", "PERSISTENCE_SPACE" ]
+                "depends": [ "persistenceService", "identifierService" ]
             },
             {
                 "key": "metadata",
@@ -193,6 +203,11 @@
                 "key": "delegation",
                 "implementation": "capabilities/DelegationCapability.js",
                 "depends": [ "$q" ]
+            },
+            {
+                "key": "instantiation",
+                "implementation": "capabilities/InstantiationCapability.js",
+                "depends": [ "$injector", "identifierService" ]
             }
         ],
         "services": [
@@ -207,12 +222,18 @@
             },
             {
                 "key": "topic",
-                "implementation": "services/Topic.js"
+                "implementation": "services/Topic.js",
+                "depends": [ "$log" ]
             },
             {
                 "key": "contextualize",
                 "implementation": "services/Contextualize.js",
                 "depends": [ "$log" ]
+            },
+            {
+                "key": "instantiate",
+                "implementation": "services/Instantiate.js",
+                "depends": [ "capabilityService" ]
             }
         ],
         "roots": [
@@ -229,11 +250,18 @@
             {
                 "key": "PERSISTENCE_SPACE",
                 "value": "mct"
-            },
+            }
+        ],
+        "licenses": [
             {
-                "key": "ADDITIONAL_PERSISTENCE_SPACES",
-                "value": [],
-                "description": "An array of additional persistence spaces to load models from."
+                "name": "Math.uuid.js",
+                "version": "1.4",
+                "description": "Unique identifer generation (code adapted.)",
+                "author": "Robert Kieffer",
+                "website": "https://github.com/broofa/node-uuid",
+                "copyright": "Copyright (c) 2010 Robert Kieffer",
+                "license": "license-mit",
+                "link": "http://opensource.org/licenses/MIT"
             }
         ]
     }