michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: .treeViewContainer {
michael@0:   -moz-user-select: none;
michael@0:   user-select: none;
michael@0:   cursor: default;
michael@0:   line-height: 16px;
michael@0:   height: 100%;
michael@0:   outline: none; /* override the browser's focus styling */
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: .treeHeader {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   right: 0;
michael@0:   left: 0;
michael@0:   height: 16px;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader {
michael@0:   position: absolute;
michael@0:   display: block;
michael@0:   background: linear-gradient(#FFF 45%, #EEE 60%);
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   top: 0;
michael@0:   height: 15px;
michael@0:   line-height: 15px;
michael@0:   border: 0 solid #CCC;
michael@0:   border-bottom-width: 1px;
michael@0:   text-indent: 5px;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader:not(:last-child) {
michael@0:   border-right-width: 1px;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader0 {
michael@0:   left: 0;
michael@0:   width: 86px;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader1 {
michael@0:   left: 99px;
michael@0:   width: 35px;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader0,
michael@0: .treeColumnHeader1 {
michael@0:   text-align: right;
michael@0:   padding-right: 12px;
michael@0: }
michael@0: 
michael@0: .treeColumnHeader2 {
michael@0:   left: 147px;
michael@0:   right: 0;
michael@0: }
michael@0: 
michael@0: .treeViewVerticalScrollbox {
michael@0:   position: absolute;
michael@0:   top: 16px;
michael@0:   left: 0;
michael@0:   right: 0;
michael@0:   bottom: 0;
michael@0:   overflow-y: scroll;
michael@0:   overflow-x: hidden;
michael@0: }
michael@0: 
michael@0: .treeViewNode,
michael@0: .treeViewHorizontalScrollbox {
michael@0:   display: block;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .treeViewNode {
michael@0:   min-width: -moz-min-content;
michael@0:   white-space: nowrap;
michael@0: }
michael@0: 
michael@0: .treeViewHorizontalScrollbox {
michael@0:   padding-left: 150px;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: .treeViewVerticalScrollbox,
michael@0: .treeViewHorizontalScrollbox {
michael@0:   background: linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
michael@0:   background-size: 100px 32px;
michael@0: }
michael@0: 
michael@0: .leftColumnBackground {
michael@0:   background: linear-gradient(left, transparent, transparent 98px, #CCC 98px, #CCC 99px, transparent 99px),
michael@0:     linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF);
michael@0:   background-size: auto, 100px 32px;
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   width: 146px;
michael@0:   min-height: 100%;
michael@0:   border-right: 1px solid #CCC;
michael@0: }
michael@0: 
michael@0: .sampleCount,
michael@0: .samplePercentage,
michael@0: .selfSampleCount {
michael@0:   position: absolute;
michael@0:   text-align: right;
michael@0: }
michael@0: 
michael@0: .sampleCount {
michael@0:   left: 2px;
michael@0:   width: 50px;
michael@0: }
michael@0: 
michael@0: .samplePercentage {
michael@0:   left: 55px;
michael@0:   width: 40px;
michael@0: }
michael@0: 
michael@0: .selfSampleCount {
michael@0:   left: 98px;
michael@0:   width: 45px;
michael@0:   padding-right: 2px;
michael@0:   border: solid #CCC;
michael@0:   border-width: 0 1px;
michael@0: }
michael@0: 
michael@0: .libraryName {
michael@0:   margin-left: 10px;
michael@0:   color: #999;
michael@0: }
michael@0: 
michael@0: .treeViewNode > .treeViewNodeList {
michael@0:   margin-left: 1em;
michael@0: }
michael@0: 
michael@0: .treeViewNode.collapsed > .treeViewNodeList {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .treeLine {
michael@0:   /* extend the selection background almost infinitely to the left */
michael@0:   margin-left: -10000px;
michael@0:   padding-left: 10000px;
michael@0: }
michael@0: 
michael@0: .treeLine.selected {
michael@0:   color: black;
michael@0:   background-color: -moz-dialog;
michael@0: }
michael@0: 
michael@0: .treeLine.selected > .sampleCount {
michael@0:   background-color: inherit;
michael@0:   margin-left: -2px;
michael@0:   padding-left: 2px;
michael@0:   padding-right: 95px;
michael@0:   margin-right: -95px;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeLine.selected {
michael@0:   color: highlighttext;
michael@0:   background-color: highlight;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeLine.selected > .libraryName {
michael@0:   color: #CCC;
michael@0: }
michael@0: 
michael@0: .expandCollapseButton,
michael@0: .focusCallstackButton {
michael@0:   background: none 0 0 no-repeat transparent;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0:   border: 0;
michael@0:   width: 16px;
michael@0:   height: 16px;
michael@0:   overflow: hidden;
michael@0:   vertical-align: top;
michael@0:   color: transparent;
michael@0:   font-size: 0;
michael@0: }
michael@0: 
michael@0: .expandCollapseButton {
michael@0:   background-image: url(../images/treetwisty.svg);
michael@0: }
michael@0: 
michael@0: .focusCallstackButton {
michael@0:   background-image: url(../images/circlearrow.svg);
michael@0:   margin-left: 5px;
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .expandCollapseButton:active:hover,
michael@0: .focusCallstackButton:active:hover {
michael@0:   background-position: -16px 0;
michael@0: }
michael@0: 
michael@0: .treeViewNode.collapsed > .treeLine > .expandCollapseButton {
michael@0:   background-position: 0 -16px;
michael@0: }
michael@0: 
michael@0: .treeViewNode.collapsed > .treeLine > .expandCollapseButton:active:hover {
michael@0:   background-position: -16px -16px;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeLine.selected > .expandCollapseButton,
michael@0: .treeViewContainer:focus .treeLine.selected > .focusCallstackButton {
michael@0:   background-position: -32px 0;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton {
michael@0:   background-position: -32px -16px;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeLine.selected > .expandCollapseButton:active:hover,
michael@0: .treeViewContainer:focus .treeLine.selected > .focusCallstackButton:active:hover {
michael@0:   background-position: -48px 0;
michael@0: }
michael@0: 
michael@0: .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton:active:hover {
michael@0:   background-position: -48px -16px;
michael@0: }
michael@0: 
michael@0: .treeViewNode.leaf > * > .expandCollapseButton {
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: .treeLine:hover > .focusCallstackButton {
michael@0:   visibility: visible;
michael@0: }