Add support for an initial onboarding walkthrough

lib/views/stylesheet.less

 /*
 
 General CSS Notes
 =================
 
 z-indexes
 ----------
 The rule of thumb for the z-index values to use is setup below
 
  - Ground level: < 100 is for things that are flat on the surface without
@@ skipping 504 matching lines @@
         font-size: 26px;
     }
     p {
         line-height: normal;
         font-size: 18px;
         width: 301px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 2ex;
     }
+
+    &.displayNone {

[rharding, 2013/10/15 14:55:34]

there's already a .hidden class. Could that be used for this purpose vs adding a
new displayNone class?

+        display: none;
+    }
 }
 .environment-menu {
     @border_radius: 20px;
     @background_color: @environment-menu-background-color;
     .create-border-radius(@border-radius);
     .create-box-shadow(0 0 2px rgba(0, 0, 0, 0.3));
     display: none;
     background-color: @background_color;
     color: @text-colour;
     top: 0;
@@ skipping 1395 matching lines @@
         h4 {
             font-family: @font-family-medium;
             font-size: 10pt;
             line-height: 10pt;
         }
     }
     p {
         font-size: 8pt;
     }
 }
+#onboarding-background {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+
+    #onboarding-screen-mask {
+      display: block;
+      position: absolute;
+      top: 80px;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 10000;
+    }
+
+    #onboarding-message {
+        .create-border-radius(@border-radius);
+        display: block;
+        z-index: 10001;
+        position: relative;
+        top: 100px;
+        left: 350px;
+        width: 320px;
+        background-color: @inspector-background-color;
+        padding: 20px;
+
+        .onboarding-cross {
+            float: right;
+        }
+
+        .header {
+            margin-bottom: 20px;
+        }
+
+        .header,
+        .text {
+            color: @charm-panel-configure-title-color;
+        }
+
+        img {
+          position: absolute;
+        }
+
+        .panel {
+          display: none;
+          height: 169px;
+        }
+
+        ul {
+            z-index: 2;

[rharding, 2013/10/15 14:55:34]

z-index 2? It's sitting inside an element of z-index 10001?

+            position: relative;
+            list-style: none;
+            margin-left: 0;
+
+            li {
+              display: inline;
+            }
+
+            a {
+                @box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3);
+                .create-box-shadow(@box-shadow);
+                .create-border-radius(@bws-corner);
+                background-color: @inspector-dark;
+                display: inline-block;
+                height: 40px;
+                margin-top: 17px;
+                padding: 0 30px;
+                color: #fff;
+                line-height: 40px;
+
+                &.onboarding-next,
+                &.onboarding-start {
+                    float: right;
+                }
+
+                &.highlight {
+                    background-color: @charm-panel-orange;
+                }
+            }
+        }
+    }
+
+    &.state-0 {
+        #onboarding-message {
+            .panel-0 {
+                display: block;
+            }
+            ul a.onboarding-next,
+            ul a.onboarding-prev {
+                display: none;
+            }
+        }
+
+    }
+
+    &.state-1 {

[rharding, 2013/10/15 14:55:34]

this seems like it could be done using a .active flag or something. Where one of
the divs is marked .active and .active picks up things like display block and
sets background color?

[Ant, 2013/10/15 16:13:05]

The reason I did it this way is because the different states control the
screen-mask which I outside the panels.

+        #onboarding-screen-mask {
+            left: 290px;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-1 {
+                display: block;
+            }
+            ul a.onboarding-next {
+                display: inline-block;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+        }
+    }
+
+    &.state-2 {
+        #onboarding-screen-mask {
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-2 {
+                display: block;
+            }
+            ul a.onboarding-next {
+                display: inline-block;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+            .service-blocks {
+                top: 210px;
+                left: 125px;
+            }
+        }
+    }
+
+    &.state-3 {
+        #onboarding-screen-mask {
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.75);
+        }
+        #onboarding-message {
+            .panel-3 {
+                display: block;
+            }
+            ul a.onboarding-close {
+                background-color: @charm-panel-orange;
+                float: right;
+            }
+            ul a.onboarding-next {
+                display: none;
+            }
+            ul a.onboarding-start {
+                display: none;
+            }
+            .service-block {
+                top: 320px;
+                left: 90px;
+            }
+            .inspector {
+                right: -370px;
+                top: 0;
+            }
+        }
+    }
+
+}
 .alert {
     letter-spacing: normal;
 }
 .yui3-slider-thumb {
   &:focus {
     outline: none;
   }
 }
 
 /* Old charm view */
@@ skipping 22 matching lines @@
 @import "content-panel.less";
 @import "juju-inspector.less";
 
 /** Views **/
 @import "browser/editorial.less";
 @import "browser/minimized.less";
 @import "browser/search.less";
 
 /** Cookies **/
 @import "cookies.less";