Merge pull request #7446 from ctrlaltdavid/20855

Restyle entities editor

examples/html/edit-style.css

@@ -0,0 +1,883 @@
+/*
+//  edit-style.css
+//
+//  Created by Ryan Huffman on 13 Nov 2014
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+@font-face {
+    font-family: Raleway-Regular;
+    src: url(../../resources/fonts/Raleway-Regular.ttf),  /* Production */
+         url(../../interface/resources/fonts/Raleway-Regular.ttf);  /* Development */
+}
+
+@font-face {
+    font-family: Raleway-Light;
+    src: url(../../resources/fonts/Raleway-Light.ttf),
+         url(../../interface/resources/fonts/Raleway-Light.ttf);
+}
+
+@font-face {
+    font-family: Raleway-Bold;
+    src: url(../../resources/fonts/Raleway-Bold.ttf),
+         url(../../interface/resources/fonts/Raleway-Bold.ttf);
+}
+
+@font-face {
+    font-family: Raleway-SemiBold;
+    src: url(../../resources/fonts/Raleway-SemiBold.ttf),
+         url(../../interface/resources/fonts/Raleway-SemiBold.ttf);
+}
+
+@font-face {
+    font-family: FiraSans-SemiBold;
+    src: url(../../resources/fonts/FiraSans-SemiBold.ttf),
+         url(../../interface/resources/fonts/FiraSans-SemiBold.ttf);
+}
+
+@font-face {
+    font-family: AnonymousPro-Regular;
+    src: url(../../resources/fonts/AnonymousPro-Regular.ttf), 
+         url(../../interface/resources/fonts/AnonymousPro-Regular.ttf);
+}
+
+@font-face {
+    font-family: HiFi-Glyphs;
+    src: url(../../resources/fonts/hifi-glyphs.ttf), 
+         url(../../interface/resources/fonts/hifi-glyphs.ttf);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    padding: 24px 12px 24px 12px;
+
+    color: #afafaf;
+    background-color: #404040;
+    font-family: Raleway-Regular;
+    font-size: 15px;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+
+table {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #afafaf;
+    border-collapse: collapse;
+    width: 100%;
+    border: 2px solid #575757;
+    border-radius: 7px;
+}
+
+thead {
+    font-family: Raleway-Regular;
+    font-size: 12px;
+    text-transform: uppercase;
+    background-color: #1c1c1c;
+    padding: 1px 0px;
+    border-bottom: 1px solid #575757;
+    width: 100%;
+}
+
+tbody {
+    width: 100%;
+}
+
+tfoot {
+    font-family: Raleway-Light;
+    font-size: 13px;
+    background-color: #1c1c1c;
+    border-top: 1px solid #575757;
+    width: 100%;
+}
+
+tfoot tr {
+    background-color: #1c1cff;
+}
+
+thead tr {
+    height: 26px;  /* 28px with thead padding */
+}
+
+thead th {
+    height: 26px;
+    background-color: #1c1c1c;
+    border-right: 1px solid #575757;
+}
+
+thead th:last-child {
+    border: none;
+}
+
+tbody td {
+    height: 26px;
+}
+
+tfoot td {
+    height: 18px;
+    width: 100%;
+    background-color: #1c1c1c;
+    margin-left: 12px;
+}
+
+tr {
+    width: 100%;
+    cursor: pointer;
+}
+
+tr:nth-child(odd) {
+    background-color: #2e2e2e;
+}
+
+tr:nth-child(even) {
+    background-color: #1c1c1c;
+}
+
+tr:focus {
+    outline: none;
+}
+
+tr.selected {
+    color: #000000;
+    background-color: #00b4ef;
+}
+
+th {
+    text-align: center;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: nowrap;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+td.url {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+
+input[type="text"], input[type="number"], textarea {
+    margin: 0;
+    padding: 0 12px;
+    color: #afafaf;
+    background-color: #252525;
+    border: none;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+}
+
+textarea {
+    font-family: AnonymousPro-Regular;
+    font-size: 16px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    min-height: 64px;
+    width: 100%;
+    resize: vertical;
+}
+
+input::-webkit-input-placeholder {
+    font-style: italic;
+}
+
+input:focus, textarea:focus {
+    color: #fff;
+    background-color: #000;
+    outline: 1px solid #00b4ef;
+    outline-offset: -1px;
+}
+
+input::selection, textarea::selection {
+    color: #000000;
+    background-color: #00b4ef;
+}
+
+input.search {
+    border-radius: 14px;
+}
+
+input:disabled, textarea:disabled {
+    background-color: #383838;
+    color: #afafaf;
+}
+
+input[type="text"] {
+    height: 28px;
+    width: 100%;
+}
+
+input[type="number"] {
+    position: relative;
+    height: 28px;
+    width: 120px;
+}
+
+input[type=number] {
+    padding-right: 6px;
+}
+input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    opacity: 1.0;
+    display: block;
+    position: relative;
+    width: 10px;
+    overflow: hidden;
+    font-family: hifi-glyphs;
+    font-size: 50px;
+    color: #afafaf;
+    cursor: pointer;
+    /*background-color: #000000;*/
+}
+input[type=number]::-webkit-inner-spin-button:before,
+input[type=number]::-webkit-inner-spin-button:after {
+    position:absolute;
+    left: -21px;
+    line-height: 8px;
+    text-align: center;
+}
+input[type=number]::-webkit-inner-spin-button:before {
+    content: "6";
+    top: 5px;
+}
+input[type=number]::-webkit-inner-spin-button:after {
+    content: "5";
+    bottom: 6px;
+}
+input[type="number"]::-webkit-inner-spin-button:hover {
+    color: #ffffff;
+}
+
+input.no-spin::-webkit-outer-spin-button,
+input.no-spin::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+    padding-right: 12px;
+}
+
+input[type=button] {
+    font-family: Raleway-Bold;
+    font-size: 13px;
+    text-transform: uppercase;
+    vertical-align: top;
+    height: 28px;
+    min-width: 120px;
+    padding: 0px 12px;
+    margin-right: 8px;
+    border-radius: 5px;
+    border: none;
+    color: #fff;
+    background-color: #000;
+    background: linear-gradient(#343434 20%, #000 100%);
+    cursor: pointer;
+}
+
+input[type=button].glyph {
+    font-family: HiFi-Glyphs;
+    font-size: 20px;
+    text-transform: none;
+    min-width: 32px;
+    padding: 0;
+}
+
+input[type=button].red {
+    color: #fff;
+    background-color: #94132e;
+    background: linear-gradient(#d42043 20%, #94132e 100%);
+}
+input[type=button].blue {
+    color: #fff;
+    background-color: #94132e;
+    background: linear-gradient(#00b4ef 20%, #1080b8 100%);
+}
+
+input[type=button]:enabled:hover {
+    background: linear-gradient(#000, #000);
+    border: none;
+}
+input[type=button].red:enabled:hover {
+    background: linear-gradient(#d42043, #d42043);
+    border: none;
+}
+input[type=button].blue:enabled:hover {
+    background: linear-gradient(#00b4ef, #00b4ef);
+    border: none;
+}
+
+input[type=button]:active {
+    background: linear-gradient(#343434, #343434);
+}
+input[type=button].red:active {
+    background: linear-gradient(#94132e, #94132e);
+}
+input[type=button].blue:active {
+    background: linear-gradient(#1080b8, #1080b8);
+}
+
+input[type=button]:disabled {
+    color: #252525;
+    background: linear-gradient(#575757 20%, #252525 100%);
+}
+
+input[type=checkbox] {
+    display: none;
+}
+input[type=checkbox] + label {
+    padding-left: 24px;
+    background-position-y: 6px;
+    background-repeat: no-repeat;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACpSURBVDhPY2xoaGD68+dPMSMjY9L////VgTQjAw4AlH8PxLOPHj1azWxjY1MBVNsBFBfBpwkEgNKcQGwtJyfHyATkF0KEiQdAzYlMQEIUyicFyDD9+/ePgRxMvsb///4zkIOZ/v0HmkAGHginYjGNGAzS+BpdkAj8mun/3//92DyPD//993cG88nTJ4+Zm5p/BSZeJYb/DEJADEzNOPF7hn8Mk69cvVIPAHN5pyfo70F5AAAAAElFTkSuQmCC);
+}
+input[type=checkbox]:enabled + label:hover {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAClSURBVDhPY2hoaGD6//9/6b9//64D8T8gGycASr/7+/dv5/79+1kYgIxKqDjRAKiniRFIv2JgYBAFYlLAE0aQ66AckgDjjx8/yNP44cMH8jS+fPmSPI0PHz4kT+PNmzfJ03jp0iXyNJ46dYo8jYcPHyYnAbxm+vnzZz8wLhlIwd+/f5/BrKSkdExCQuLrnz9/lIBpUAiIQekXF34PTGmTT548WQ8AokXg+rhVtPYAAAAASUVORK5CYII=);
+}
+input[type=checkbox]:checked + label {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLSURBVDhPjZK9SgNBFIXvbCaQRDQq7mIhQRPBRisJKcwLWOobaCsExEaxcEEQe0trGysfwg0EwWoDsbFIJUaIBJOwus547saNP3FlPzgzzJxzL5edFbZtG77v7wkhtrXWS9gFRQC/DZ07jnOYKJfL+8ie4n7mvyIGdhpay+VyQuK8y5dPZoHuVtbpZcLi4wjJ1x4t316R9dDgBlsSi8mGu7pJjyJFzVaH+r7iqyHSELSQzVADjS0UgjlDKUUsLzVO98+9kSLGV5qaHXhjU0GWNSxk3hCIwnsfeMNCjTArLmHeUBodoLiE+R+jxuHPUZP4elGE3teonx2S/Q7lJzOUlkYQ+A4/xzyegzNhXmJpwTMXry9IFjcoa84O0r+QXpcK1cugCLREZadyoA19Ergxwf96nKjd1KqlYqmLQ540TUNwItUmRWdu3T36AODjwgpY9xqqAAAAAElFTkSuQmCC);
+}
+input[type=checkbox]:checked + label:hover {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEySURBVDhPnZLPSsNAEMa/XVPBCE0RhNy0OarP4Av4AD6JB0GwVBA8efBBxHsgh4CQswcRoUIpiIpVAm3zZ5M4szFSbQPBH3xkJvNNZskOer2eLIriKM/ze1JOcS1UHmdZduF5ngEKjr/fN4Z6+oKerwA2gxC4HAFPEWVLsAzgZAvYt3Q6Enw6jg7uBAaTFMNwhpnKdbXCkAJdy8ROu4XrXW2HTJIErHcFDD6nC02Mom8PwymeE2gvS0ZRBBaTlsOXEmdlrfLLOI7Bakrl/zWxCT8T/904f9QW/b06qtrCUdtFCqdjYs2Q2jAPX8c2XQd7Kr/wfV8vwIPs4Ga1ixe5Xrr/YFLTYfKIvWzM6ZtwXZdX7lxXG0L+sxXHcW5t254opRzawQ0S72+dPmjTroIgOP0CQSMt5LDn1T8AAAAASUVORK5CYII=);
+}
+
+.selectable {
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    cursor: text;
+}
+
+.color-box {
+    display: inline-block;
+    width: 15pt;
+    height: 15pt;
+    border: 0.75pt solid black;
+    margin: 1.5pt;
+    cursor: pointer;
+}
+
+.color-box.highlight {
+    width: 13.5pt;
+    height: 13.5pt;
+    border: 1.5pt solid black;
+}
+
+
+.section-header, .sub-section-header {
+    display: table;
+    width: 100%;
+    margin: 22px -12px 0 -12px;
+    padding: 14px 12px 0 12px;
+    font-family: Raleway-Regular;
+    font-size: 12px;
+    color: #afafaf;
+    height: 28px;
+    text-transform: uppercase;
+    outline: none;
+}
+
+.section-header {
+    position: relative;
+    background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
+}
+
+.sub-section-header, .no-collapse {
+    background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
+}
+
+.section-header:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    background: none;
+    height: auto;
+}
+
+.sub-section-header {
+    margin-bottom: -10px;
+}
+
+.section-header span {
+    font-family: HiFi-Glyphs;
+    font-size: 30px;
+    float: right;
+    position: absolute;
+    top: 4px;
+    right: 6px;
+}
+
+.section-header[collapsed="true"] {
+    margin-bottom: -22px;
+}
+
+.text-group[collapsed="true"] ~ .text-group,
+.zone-group[collapsed="true"] ~ .zone-group,
+.web-group[collapsed="true"] ~ .web-group,
+.hyperlink-group[collapsed="true"] ~ .hyperlink-group,
+.spatial-group[collapsed="true"] ~ .spatial-group,
+.physical-group[collapsed="true"] ~ .physical-group,
+.behavior-group[collapsed="true"] ~ .behavior-group,
+.model-group[collapsed="true"] ~ .model-group,
+.light-group[collapsed="true"] ~ .light-group {
+    display: none !important;
+}
+
+
+.property {
+    display: table;
+    width: 100%;
+    margin-top: 22px;
+    min-height: 29px;
+}
+
+.property label {
+    display: table-cell;
+    vertical-align: middle;
+    font-family: Raleway-SemiBold;
+    font-size: 14px;
+}
+
+.value {
+    display: block;
+    min-height: 18px;
+}
+.value label {
+    display: inline-block;
+    vertical-align: top;
+    width: 48px;
+}
+.value span {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+}
+
+.checkbox + .checkbox {
+    margin-top: 0;
+}
+
+.checkbox-sub-props {
+    margin-top: 18px;
+}
+
+.property .number {
+    float: left;
+}
+.property .number + .number {
+    margin-left: 12px;
+}
+
+.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
+    float: left;
+    margin-bottom: 4px;
+}
+
+.number > input {
+    clear: both;
+    float: left;
+}
+.number > span {
+    clear: both;
+    float: left;
+}
+.xyz > div, .pyr > div, .gen > div {
+    clear: both;
+}
+
+.unit {
+    padding-left: 4px;
+    vertical-align: top;
+    position: relative;
+    top: 5px;
+}
+
+.dropdown {
+    position: relative;
+    margin-bottom: -17px;
+}
+
+.dropdown select {
+    clear: both;
+}
+
+.dropdown dl {
+    clear: both;
+}
+.dropdown dl {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    width: 172px;
+    height: 28px;
+    padding: 0 28px 0 12px;
+
+    color: #afafaf;
+    background: linear-gradient(#7d7d7d 20%, #686a68 100%);
+
+    position: relative;
+}
+.dropdown dl[dropped="true"] {
+    color: #404040;
+    background: linear-gradient(#afafaf, #afafaf);
+}
+
+.dropdown dt {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #121212;
+    width: 100%;
+}
+.dropdown dt:hover {
+    color: #404040;
+}
+.dropdown dt:focus {
+    outline: none;
+}
+.dropdown dt span:first-child {
+    display: inline-block;
+    position: relative;
+    top: 5px;
+}
+.dropdown dt span:last-child {
+    font-family: HiFi-Glyphs;
+    font-size: 42px;
+    float: right;
+    margin-right: -48px;
+    position: relative;
+    left: -12px;
+    top: -11px;
+}
+
+.dropdown dd {
+    position: absolute;
+    top: 28px;
+    left: 3px;
+    display: none;
+}
+.dropdown dl[dropped="true"] dd {
+    display: block;
+}
+
+.dropdown li {
+    list-style-type: none;
+    padding: 3px 0 1px 12px;
+    width: 200px;
+    height: auto;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #404040;
+    background-color: #afafaf
+}
+.dropdown li:hover {
+    background-color: #00b4ef;
+}
+
+
+div.refresh {
+    box-sizing: border-box;
+    padding-right: 44px;
+}
+div.refresh input[type="button"] {
+    float: right;
+    margin-right: -44px;
+}
+
+.color-picker {
+    box-sizing: border-box;
+    float: left;
+    margin-bottom: 12px;
+    width: 36px;
+    height: 36px;
+    border: 4px solid #afafaf;
+    border-radius: 4px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABTSURBVChTjcxBDoAwCETRwTs33sFjwB6uaCE1Ggvav5qQF7CSqu40dllHjYiOT3gh3yV8Ii+Fb+RNMEP9hm3sKENmBhG5P1aImWMH/EMerSAAOAFgTC/R8ZXSXAAAAABJRU5ErkJggg==);
+    background-position: bottom right;
+    background-repeat: no-repeat;
+}
+.color-picker:focus {
+    outline: none;
+}
+.color-picker[active="true"] {
+    border-color: #000;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABDSURBVChTjcoLCkAhCETRNq0tf97Y5xGZ1gVJ45TH6njThIO+xk2UwhWFcEdH6JCqOuiQiMDi/hcii3crRRb/7ggAPvIMVihQwvSXAAAAAElFTkSuQmCC);
+}
+
+.rgb label {
+    float: left;
+    margin-top: 10px;
+    margin-left: 12px;
+}
+.rgb label + * {
+    clear: both;
+}
+
+.tuple {
+    width: 100%;
+    text-align: center;
+}
+.tuple div {
+    display: inline-block;
+    position: relative;
+    min-width: 120px;
+    min-height: 1px;
+}
+.tuple div:nth-child(1) {
+    float: left;
+}
+.tuple div:nth-child(2) {
+}
+.tuple div:nth-child(3) {
+    float: right;
+}
+
+.rgb .tuple input {
+    padding-left: 65px;
+}
+.xyz .tuple input {
+    padding-left: 25px;
+}
+.pyr .tuple input {
+    padding-left: 45px;
+}
+
+.tuple div > label:first-child {
+    float: left;
+}
+.tuple div > label + input {
+    clear: both;
+    float: left;
+}
+.tuple div input + label {
+    display: inline !important;
+    float: none !important;
+    position: absolute;
+    margin-top: 8px;
+    margin-left: 6px;
+    left: 0;
+    font-family: FiraSans-SemiBold;
+    font-size: 12px;
+}
+.tuple .red + label, .tuple .x + label, .tuple .pitch + label {
+    color: #e2334d;
+}
+.tuple .green + label, .tuple .y + label, .tuple .yaw + label {
+    color: #1ac567;
+}
+.tuple .blue + label, .tuple .z + label, .tuple .roll + label {
+    color: #1080b8;
+}
+
+.tuple .red:focus, .tuple .x:focus, .tuple .pitch:focus {
+    outline-color: #e2334d;
+}
+.tuple .green:focus, .tuple .y:focus, .tuple .yaw:focus {
+    outline-color: #1ac567;
+}
+tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
+    outline-color: #1080b8;
+}
+
+.xyz .buttons input {
+    margin-top: 12px;
+}
+.xyz .buttons span {
+    word-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.row input {
+    float: left;
+}
+.row input[type=button] {
+    margin-left: 8px;
+    margin-right: 0;
+}
+
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+ 
+::-webkit-scrollbar-track {
+    background-color: #2e2e2e;
+}
+ 
+::-webkit-scrollbar-thumb {
+    background-color: #696969;
+    border: 2px solid #2e2e2e;
+    border-radius: 8px;
+}
+
+/* FIXME: Revisit textarea resizer/corner when move to Qt 5.6 or later: see if can get resizer/corner to always be visible and
+have correct background color with and without scrollbars. */
+textarea:enabled::-webkit-resizer {
+    background-size: 10px 10px;
+    background: #252525 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAXSURBVChTY1RVVWXADZigNA4wMqUZGACS3gCD5UUtKAAAAABJRU5ErkJggg==) no-repeat bottom right;
+}
+textarea:focus::-webkit-resizer {
+    background-size: 10px 10px;
+    background: #000000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVChThdC5DQQhDAXQvyRI5LQxFdABARWQElAPogYkiqEWQhLYGe8xxzJaS5a/8AuQHwDG2n+Lvee0hBDQWlO+hRvy3mNZFjDG5vCDOOeIMaL3/guPKISAWiu9n+AVSSlhraXdF86Qcw6tNdoTvEOlFOScd6iUOv3JGEMopYQx9jNvaawnoHnNr8Z4AuRLPOq2gPgnAAAAAElFTkSuQmCC) no-repeat bottom right;
+}
+textarea:enabled[scrolling="true"]::-webkit-resizer {
+    background-size: 10px 10px;
+    background: #2e2e2e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVChTjdAxDsMgDAXQT4UYuQIzCwsSKxsSJ4YDoByDY7AwUOG2aZMQqX+xhd9gzIwxA3/k8a7LCCFgraX+Fk4UY4RSCoyxNfwgzjlyzhhjXOEvSimhtUbvB3hGUkp472m2wxUKIaD3TnOCd6jWim3bvlBrfdjJOUeolEJoZj/4PMH83bl/BXgCWSs2Z09IjgoAAAAASUVORK5CYII=) no-repeat bottom right;
+}
+
+
+#entity-list-header {
+    margin-bottom: 24px;
+}
+
+#delete {
+    float: right;
+    margin-right: 0;
+    background-color: #ff0000;
+}
+
+#entity-list {
+    position: relative; /* New positioning context. */
+}
+
+#search-area {
+    padding-right: 148px;
+    padding-bottom: 24px;
+}
+
+#filter {
+    width: 98%;
+}
+
+#radius-and-unit {
+    float: right;
+    margin-right: -148px;
+}
+
+
+#entity-table-scroll {
+    /* Height is set by JavaScript. */
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-top: 28px; /* Space for header and footer outside of scroll region. */
+    margin-top: 28px;
+    border-left: 2px solid #575757;
+    border-right: 2px solid #575757;
+}
+
+#entity-table-scroll, #entity-table {
+    background-color: #1c1c1c;
+}
+
+#entity-table {
+    margin-top: -28px;
+    margin-bottom: -18px;
+    table-layout: fixed;
+    border: none;
+}
+
+#entity-table thead {
+    border: 2px solid #575757;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    border-bottom: 1px solid #575757;
+}
+
+#entity-table tfoot {
+    border: 2px solid #575757;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
+    border-top: 1px solid #575757;
+}
+
+#entity-table thead tr, #entity-table thead tr th,
+#entity-table tfoot tr, #entity-table tfoot tr td {
+    background: none;
+}
+
+#entity-table th:focus {
+    outline: none;
+}
+
+#col-type {
+    width: 16%;
+}
+#col-name {
+    width: 42%;
+}
+#col-url {
+    width: 42%;
+}
+
+#entity-table thead {
+    position: absolute;
+    top: 49px;
+    left: 0;
+    width: 100%;
+}
+
+#entity-table thead th {
+    padding: 0;
+}
+
+#entity-table tfoot {
+    position: absolute;
+    bottom: -21px;
+    left: 0;
+    width: 100%;
+}
+
+#no-entities {
+    display: none;
+    position: absolute;
+    top: 80px;
+    padding: 12px;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    font-style: italic;
+    color: #afafaf;
+}
+
+
+#properties-list .property:first-child {
+    margin-top: 0;
+}
+
+#property-id::selection {
+    color: #000000;
+    background-color: #00b4ef;
+}
+
+
+input#dimension-rescale-button {
+    min-width: 50px;
+    margin-left: 6px;
+}
+
+
+.color-set label, .color-set span {
+    display: block;
+}
+.color-set span {
+    padding-top: 2px;
+}

examples/html/entityList.html

@@ -1,6 +1,16 @@
+<!--
+//  entityList.html
+//
+//  Created by Ryan Huffman on 19 Nov 2014
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="edit-style.css">
     <script src="list.min.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
@@ -26,8 +36,10 @@
               elDelete = document.getElementById("delete");
               elTeleport = document.getElementById("teleport");
               elRadius = document.getElementById("radius");
+              elFooter = document.getElementById("footer-text");
               elNoEntitiesMessage = document.getElementById("no-entities");
               elNoEntitiesRadius = document.getElementById("no-entities-radius");
+              elEntityTableScroll = document.getElementById("entity-table-scroll");
               
               document.getElementById("entity-name").onclick = function() {
                   setSortColumn('name');
@@ -168,6 +180,17 @@
                           notFound = true;
                       }
                   }
+
+                  if (selectedEntities.length > 1) {
+                      elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
+                  } else if (selectedEntities.length === 1) {
+                      elFooter.firstChild.nodeValue = "1 entity selected";
+                  } else if (entityList.visibleItems.length === 1) {
+                      elFooter.firstChild.nodeValue = "1 entity found";
+                  } else {
+                      elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
+                  }
+
                   return notFound;
               }
               
@@ -214,57 +237,90 @@
                       } else if (data.type == "update") {
                           var newEntities = data.entities;
                           if (newEntities.length == 0) {
-                              elEntityTable.style.display = "none";
                               elNoEntitiesMessage.style.display = "block";
                           } else {
-                              elEntityTable.style.display = "table";
                               elNoEntitiesMessage.style.display = "none";
                               for (var i = 0; i < newEntities.length; i++) {
                                   var id = newEntities[i].id;
                                   addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url);
                               }
                               updateSelectedEntities(data.selectedIDs);
+                              resize();
                           }
                       }
                   });
                   setTimeout(refreshEntities, 1000);
               }
+
+              function resize() {
+                  // Take up available window space
+                  elEntityTableScroll.style.height = window.innerHeight - 232;
+
+                  // Update the widths of the header cells to match the body
+                  var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
+                  var ths = document.querySelectorAll("#entity-table thead th");
+                  if (tds.length >= ths.length) {
+                      for (var i = 0; i < ths.length; i++) {
+                          ths[i].style.width = tds[i].offsetWidth;
+                      }
+                  }
+              };
+
+              window.onresize = resize;
+              resize();
           });
-        }
+
+          // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
+          document.addEventListener("contextmenu", function (event) {
+              event.preventDefault();
+          }, false);
+      }
     </script>
 </head>
 <body onload='loaded();'>
     <div id="entity-list-header">
-        <input type="button" id="refresh" value="Refresh" />
+        <input type="button" class="glyph" id="refresh" value="F" />
-        <input type="button" id="teleport" value="Teleport" />
+        <input type="button" id="teleport" value="Jump To Selection" />
-        <input type="button" id="delete" style="background-color: rgb(244, 64, 64); float: right" value="Delete" />
+        <input type="button" class="red" id="delete" value="Delete" />
     </div>
 
     <div id="entity-list">
         <div id="search-area">
             <input type="text" class="search" id="filter" placeholder="Filter" />
-            <span id="radius-and-unit"><input type="number" id="radius" value="100" />&nbsp;m</span>
+            <span id="radius-and-unit"><input type="number" id="radius" value="100" /><span class="unit">m</span></span> 
+        </div>
+        <div id="entity-table-scroll">
+            <table id="entity-table">
+                <colgroup>
+                    <col span="1" id="col-type" />
+                    <col span="1" id="col-name" />
+                    <col span="1" id="col-url" />
+                </colgroup>
+                <thead>
+                    <tr>
+                        <th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-url" data-sort="url">File <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                    </tr>
+                </thead>
+                <tbody class="list" id="entity-table-body">
+                    <tr>
+                        <td class="type">Type</td>
+                        <td class="name">Name</td>
+                        <td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
+                        <td class="id" style="display: none">Type</td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td id="footer-text" colspan="3">Footer text</td>
+                    </tr>
+                </tfoot>
+            </table>
+            <div id="no-entities">
+                No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
+            </div>
         </div>
-        <table id="entity-table">
-            <thead>
-                <tr>
-                    <th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
-                    <th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
-                    <th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
-                </tr>
-            </thead>
-            <tbody class="list" id="entity-table-body">
-                <tr>
-                    <td class="id" style="display: none">Type</td>
-                    <td class="type">Type</td>
-                    <td class="name">Name</td>
-                    <td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div id="no-entities">
-        No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
     </div>
 </body>
 </html>

examples/html/gridControls.html

@@ -1,6 +1,16 @@
+<!--
+//  gridControls.html
+//
+//  Created by Ryan Huffman on 6 Nov 2014
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+-->
+
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="edit-style.css">
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
     <script>
@@ -109,61 +119,63 @@
     
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
+
+            // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
+            document.addEventListener("contextmenu", function (event) {
+                event.preventDefault();
+            }, false);
         }
     </script>
 </head>
 <body onload='loaded();'>
-    <div class="grid-section">
+    <div id="grid-section">
 
-        <div class="property-section">
+        <div class="section-header">
-            <label>Visible</label>
+            <label>Editing Grid</label>
+        </div>
+
+        <div class="property checkbox">
+            <input type='checkbox' id="horiz-grid-visible">
+            <label for="horiz-grid-visible">Visible</label>
+        </div>
+
+        <div class="property checkbox">
+            <input type="checkbox" id="snap-to-grid">
+            <label for="snap-to-grid">Snap entities to grid</label>
+        </div>
+
+        <div class="property">
+            <div class="number">
+                <label>Major grid size</label>
+                <span>
+                    <input type="number" id="major-spacing" min="1" step="1" /><span class="unit">m</span>
+                </span>
+            </div>
+            <div class="number">
+                <label>Minor grid size</label>
+                <span>
+                    <input type="number" id="minor-spacing" min="0.2" step="0.2" /><span class="unit">m</span>
+                </span>
+            </div>
+        </div>
+
+        <div class="property number">
+            <label>Position (Y axis)</label>
             <span>
-                <input type='checkbox' id="horiz-grid-visible">
+                <input type="number" id="horiz-y" step="0.1" /><span class="unit">m</span>
             </span>
         </div>
 
-        <div class="property-section">
+        <div class="property color-set">
-            <label>Snap to grid</label>
+            <label>Grid line color</label>
-            <span>
-                <input type='checkbox' id="snap-to-grid">
-            </span>
-        </div>
-
-        <div id="horizontal-position" class="property-section">
-            <label>Position (Y Axis)</label>
-            <span>
-                <input type='number' id="horiz-y" class="number" step="0.1"></input>
-            </span>
-        </div>
-
-        <div class="property-section">
-            <label>Minor Grid Size</label>
-            <span>
-                <input type='number' id="minor-spacing" min="0.2" step="0.2"></input>
-            </span>
-        </div>
-
-        <div class="property-section">
-            <label>Major Grid Every</label>
-            <span>
-                <input type='number' id="major-spacing" min="1" step="1", ></input>
-            </span>
-        </div>
-
-        <div class="property-section">
-            <label>Grid Color</label>
             <span id="grid-colors"></span>
         </div>
 
-        <div class="property-section">
+        <div class="property">
             <span>
-                <input type="button" id="move-to-selection" value="Move to Selection">
+                <input type="button" id="move-to-selection" value="Align To Selection">
-            </span>
+                <input type="button" id="move-to-avatar" value="Align To Avatar">
-        </div>
+           </span>
-        <div class="property-section">
-            <span>
-                <input type="button" id="move-to-avatar" value="Move to Avatar">
-            </span>
         </div>
     </div>
 </body>

examples/libraries/entityList.js

@@ -5,7 +5,7 @@ EntityListTool = function(opts) {
 
     var url = ENTITY_LIST_HTML_URL;
     var webView = new OverlayWebWindow({
-        title: 'Entities',  source: url,  toolWindow: true   
+        title: 'Entity List',  source: url,  toolWindow: true   
     });
 
 

examples/particle_explorer/particleExplorer.html

@@ -20,6 +20,12 @@
 <script type="text/javascript" src="../html/eventBridgeLoader.js"></script>
 <script type="text/javascript" src="particleExplorer.js?v42"></script>
 <script>
+    function loaded() {
+        // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
+        document.addEventListener("contextmenu", function (event) {
+            event.preventDefault();
+        }, false);
+    }
 </script>
 <style>
 
@@ -60,7 +66,7 @@ body{
 
 </style>
 </head>
-<body>
+<body  onload="loaded();">
 <div class="importer">
 <input type='text' id="importer-input" placeholder="Import: Paste JSON here."  onkeypress="handleInputKeyPress(event)">
 <div class = "exported-props-section">

interface/resources/qml/AssetServer.qml

@@ -416,7 +416,6 @@ Window {
             anchors.top: assetDirectory.bottom
             anchors.bottom: uploadSection.top
             anchors.margins: 12
-            anchors.bottomMargin: 0
             anchors.left: parent.left
             anchors.right: parent.right
 
@@ -445,7 +444,7 @@ Window {
             name: "Upload A File"
             spacing: hifi.dimensions.contentSpacing.y
             anchors.bottom: parent.bottom
-            height: 130
+            height: 92
 
             Item {
                 height: parent.height

interface/resources/qml/ToolWindow.qml

@@ -1,13 +1,25 @@
+//
+//  ToolWindow.qml
+//
+//  Created by Bradley Austin Davis on 12 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 import QtWebEngine 1.1
 import QtWebChannel 1.0
 import Qt.labs.settings 1.0
 
-import "windows" as Windows
+import "windows-uit"
-import "controls" as Controls
+import "controls-uit"
+import "styles-uit"
 
-Windows.Window {
+Window {
     id: toolWindow
     resizable: true
     objectName: "ToolWindow"
@@ -15,9 +27,13 @@ Windows.Window {
     destroyOnInvisible: false
     closable: true
     visible: false
-    width: 384; height: 640;
+    title: "Edit"
-    title: "Tools"
     property alias tabView: tabView
+    implicitWidth: 520; implicitHeight: 695
+    minSize: Qt.vector2d(400, 500)
+
+    HifiConstants { id: hifi }
+
     onParentChanged: {
         if (parent) {
             x = 120;
@@ -32,8 +48,11 @@ Windows.Window {
     }
 
     TabView {
-        anchors.fill: parent
         id: tabView;
+        width: pane.contentWidth
+        height: pane.scrollHeight  // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
+        property int tabCount: 0
+
         Repeater {
             model: 4
             Tab {
@@ -43,7 +62,7 @@ Windows.Window {
                 enabled: false
                 property string originalUrl: "";
 
-                Controls.WebView {
+                WebView {
                     id: webView;
                     anchors.fill: parent
                     enabled: false
@@ -60,6 +79,61 @@ Windows.Window {
                 }
             }
         }
+
+        style: TabViewStyle {
+
+            frame: Rectangle {  // Background shown before content loads.
+                anchors.fill: parent
+                color: hifi.colors.baseGray
+            }
+
+            frameOverlap: 0
+
+            tab: Rectangle {
+                implicitWidth: text.width
+                implicitHeight: 3 * text.height
+                color: styleData.selected ? hifi.colors.black : hifi.colors.tabBackgroundDark
+
+                RalewayRegular {
+                    id: text
+                    text: styleData.title
+                    font.capitalization: Font.AllUppercase
+                    size: hifi.fontSizes.tabName
+                    width: tabView.tabCount > 1 ? styleData.availableWidth / tabView.tabCount : implicitWidth + 2 * hifi.dimensions.contentSpacing.x
+                    elide: Text.ElideRight
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.centerIn: parent
+                }
+
+                Rectangle {  // Separator.
+                    width: 1
+                    height: parent.height
+                    color: hifi.colors.black
+                    anchors.left: parent.left
+                    anchors.top: parent.top
+                    visible: styleData.index > 0
+
+                    Rectangle {
+                        width: 1
+                        height: 1
+                        color: hifi.colors.baseGray
+                        anchors.left: parent.left
+                        anchors.bottom: parent.bottom
+                    }
+                }
+
+                Rectangle {  // Active underline.
+                    width: parent.width - (styleData.index > 0 ? 1 : 0)
+                    height: 1
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.baseGray
+                }
+            }
+
+            tabOverlap: 0
+        }
     }
 
     function updateVisiblity() {
@@ -129,6 +203,7 @@ Windows.Window {
         tab.originalUrl = "";
         tab.item.url = "about:blank";
         tab.item.enabled = false;
+        tabView.tabCount--;
     }
 
     function addWebTab(properties) {
@@ -150,6 +225,7 @@ Windows.Window {
             return;
         }
 
+
         if (properties.width) {
             tabView.width = Math.min(Math.max(tabView.width, properties.width), toolWindow.maxSize.x);
         }
@@ -169,6 +245,7 @@ Windows.Window {
 
         var result = tab.item;
         result.enabled = true;
+        tabView.tabCount++;
         console.log("Setting event bridge: " + eventBridge);
         result.eventBridgeWrapper.eventBridge = eventBridge;
         result.url = properties.source;

interface/resources/qml/controls-uit/ContentSection.qml

@@ -46,7 +46,7 @@ Column {
         Item {
             id: leadingSpace
             width: 1
-            height: isFirst ? hifi.dimensions.contentSpacing.y : hifi.dimensions.controlInterlineHeight
+            height: isFirst ? hifi.dimensions.contentSpacing.y : 0
             anchors.top: parent.top
         }
 
@@ -97,11 +97,11 @@ Column {
 
             HiFiGlyphs {
                 anchors {
-                    verticalCenter: title.verticalCenter
+                    top: title.top
+                    topMargin: -9
                     right: parent.right
                     rightMargin: -4
                 }
-                y: -2
                 size: hifi.fontSizes.disclosureButton
                 text: isCollapsed ? hifi.glyphs.disclosureButtonExpand : hifi.glyphs.disclosureButtonCollapse
                 color: hifi.colors.lightGrayText

interface/resources/qml/controls-uit/WebView.qml

@@ -0,0 +1,74 @@
+//
+//  WebView.qml
+//
+//  Created by Bradley Austin Davis on 12 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtWebEngine 1.1
+
+WebEngineView {
+    id: root
+    property var newUrl;
+
+    Component.onCompleted: {
+        console.log("Connecting JS messaging to Hifi Logging")
+        // Ensure the JS from the web-engine makes it to our logging
+        root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+            console.log("Web Window JS message: " + sourceID + " " + lineNumber + " " +  message);
+        });
+    }
+
+    // FIXME hack to get the URL with the auth token included.  Remove when we move to Qt 5.6
+    Timer {
+        id: urlReplacementTimer
+        running: false
+        repeat: false
+        interval: 50
+        onTriggered: url = newUrl;
+    }
+
+    onUrlChanged: {
+        console.log("Url changed to " + url);
+        var originalUrl = url.toString();
+        newUrl = urlHandler.fixupUrl(originalUrl).toString();
+        if (newUrl !== originalUrl) {
+            root.stop();
+            if (urlReplacementTimer.running) {
+                console.warn("Replacement timer already running");
+                return;
+            }
+            urlReplacementTimer.start();
+        }
+    }
+
+    onFeaturePermissionRequested: {
+        grantFeaturePermission(securityOrigin, feature, true);
+    }
+
+    onLoadingChanged: {
+        // Required to support clicking on "hifi://" links
+        if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+            var url = loadRequest.url.toString();
+            if (urlHandler.canHandleUrl(url)) {
+                if (urlHandler.handleUrl(url)) {
+                    root.stop();
+                }
+            }
+        }
+    }
+
+    onNewViewRequested:{
+            var component = Qt.createComponent("../Browser.qml");
+            var newWindow = component.createObject(desktop);
+            request.openIn(newWindow.webView)
+    }
+
+    // This breaks the webchannel used for passing messages.  Fixed in Qt 5.6
+    // See https://bugreports.qt.io/browse/QTBUG-49521
+    //profile: desktop.browserProfile
+}

interface/resources/qml/dialogs/preferences/Section.qml

@@ -44,7 +44,7 @@ Preference {
 
     children: [ contentContainer ]
 
-    height: contentContainer.height + (root.isLast ? 2 * hifi.dimensions.contentSpacing.y : 0)
+    height: contentContainer.height + (contentContainer.isCollapsed ? 0 : hifi.dimensions.controlInterlineHeight)
 
     Component.onCompleted: d.buildPreferences();
 
@@ -111,7 +111,6 @@ Preference {
 
                 case Preference.Checkbox:
                     checkBoxCount++;
-                    console.log("####### checkBoxCount = " + checkBoxCount);
                     builder = checkboxBuilder;
                     break;
 

interface/resources/qml/hifi/dialogs/RunningScripts.qml

@@ -120,7 +120,7 @@ Window {
             }
 
             HifiControls.VerticalSpacer {
-                height: 2  // Table view draws a little taller than it's height.
+                height: hifi.dimensions.controlInterlineHeight + 2  // Table view draws a little taller than it's height.
             }
         }
 

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -58,6 +58,7 @@ Item {
         readonly property color lightGrayText: "#afafaf"
         readonly property color faintGray: "#e3e3e3"
         readonly property color primaryHighlight: "#00b4ef"
+        readonly property color blueHighlight: "#00b4ef"
         readonly property color blueAccent: "#1080b8"
         readonly property color redHighlight: "#e2334d"
         readonly property color redAccent: "#b70a37"
@@ -75,12 +76,12 @@ Item {
         readonly property color lightGrayText80: "#ccafafaf"
         readonly property color faintGray80: "#cce3e3e3"
         readonly property color faintGray50: "#80e3e3e3"
-        readonly property color locked: "#252525"
 
         // Other colors
         readonly property color white: "#ffffff"
         readonly property color gray: "#808080"
         readonly property color black: "#000000"
+        readonly property color locked: "#252525"
         // Semitransparent
         readonly property color white50: "#80ffffff"
         readonly property color white30: "#4dffffff"
@@ -115,6 +116,8 @@ Item {
         readonly property color dropDownDarkStart: "#7d7d7d"
         readonly property color dropDownDarkFinish: "#6b6a6b"
         readonly property color textFieldLightBackground: "#d4d4d4"
+        readonly property color tabBackgroundDark: "#252525"
+        readonly property color tabBackgroundLight: "#d4d4d4"
     }
 
     Item {
@@ -152,6 +155,7 @@ Item {
         readonly property real sectionName: dimensions.largeScreen ? 12 : 10
         readonly property real inputLabel: dimensions.largeScreen ? 14 : 10
         readonly property real textFieldInput: dimensions.largeScreen ? 15 : 12
+        readonly property real textFieldInputLabel: dimensions.largeScreen ? 13 : 9
         readonly property real tableText: dimensions.largeScreen ? 15 : 12
         readonly property real buttonLabel: dimensions.largeScreen ? 13 : 9
         readonly property real iconButton: dimensions.largeScreen ? 13 : 9
@@ -164,7 +168,7 @@ Item {
         readonly property real menuItem: dimensions.largeScreen ? 15 : 11
         readonly property real shortcutText: dimensions.largeScreen ? 13 : 9
         readonly property real carat: dimensions.largeScreen ? 38 : 30
-        readonly property real disclosureButton: dimensions.largeScreen ? 20 : 15
+        readonly property real disclosureButton: dimensions.largeScreen ? 30 : 22
     }
 
     Item {

interface/resources/qml/windows-uit/Window.qml

@@ -53,7 +53,7 @@ Fadable {
     property bool resizable: false
 
     property vector2d minSize: Qt.vector2d(100, 100)
-    property vector2d maxSize: Qt.vector2d(1280, 720)
+    property vector2d maxSize: Qt.vector2d(1280, 800)
 
     // The content to place inside the window, determined by the client
     default property var content

tests/ui/qml/main.qml

@@ -220,6 +220,24 @@ ApplicationWindow {
                 }
             }
 
+            Button {
+                text: "Add Tab 2"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 2" });
+                    desktop.toolWindow.showTabForUrl("Foo 2", true);
+                }
+            }
+
+            Button {
+                text: "Add Tab 3"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 3" });
+                    desktop.toolWindow.showTabForUrl("Foo 3", true);
+                }
+            }
+
             Button {
                 text: "Destroy Tab"
                 onClicked: {