From 6b94b4db86bc087435a8d96d45b579e5dd121c75 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sat, 7 Dec 2013 02:38:11 +0100 Subject: [PATCH] add first implementation of app manager as part of sync with Firefox 26 theme changes --- .../app-manager/connection-footer.css | 229 +++++++ .../browser/devtools/app-manager/device.css | 399 ++++++++++++ .../browser/devtools/app-manager/error.svg | 14 + .../browser/devtools/app-manager/help.css | 51 ++ .../devtools/app-manager/index-icons.svg | 81 +++ .../browser/devtools/app-manager/index.css | 105 ++++ .../app-manager/manifest-editor.inc.css | 67 ++ .../browser/devtools/app-manager/plus.svg | 13 + .../browser/devtools/app-manager/projects.css | 586 ++++++++++++++++++ .../browser/devtools/app-manager/remove.svg | 10 + .../browser/devtools/app-manager/rocket.svg | 31 + .../browser/devtools/app-manager/warning.svg | 14 + 12 files changed, 1600 insertions(+) create mode 100644 LCARStrek/browser/devtools/app-manager/connection-footer.css create mode 100644 LCARStrek/browser/devtools/app-manager/device.css create mode 100644 LCARStrek/browser/devtools/app-manager/error.svg create mode 100644 LCARStrek/browser/devtools/app-manager/help.css create mode 100644 LCARStrek/browser/devtools/app-manager/index-icons.svg create mode 100644 LCARStrek/browser/devtools/app-manager/index.css create mode 100644 LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css create mode 100644 LCARStrek/browser/devtools/app-manager/plus.svg create mode 100644 LCARStrek/browser/devtools/app-manager/projects.css create mode 100644 LCARStrek/browser/devtools/app-manager/remove.svg create mode 100644 LCARStrek/browser/devtools/app-manager/rocket.svg create mode 100644 LCARStrek/browser/devtools/app-manager/warning.svg diff --git a/LCARStrek/browser/devtools/app-manager/connection-footer.css b/LCARStrek/browser/devtools/app-manager/connection-footer.css new file mode 100644 index 00000000..57a1521a --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/connection-footer.css @@ -0,0 +1,229 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/************** LAYOUT **************/ + +#connection-footer { + display: flex; + flex-direction: column; + height: 50px; +} + +#banners-and-logs { + display: flex; + flex-grow: 1; +} + +#logs { + display: flex; + width: 40%; + padding: 0; + width: 100%; +} + +.banner { + display: none; + width: 60%; +} + +#connection-footer[status="connected"] #banner-connected, +#connection-footer[status="connecting"] #banner-connecting, +#connection-footer[status="disconnected"] #banner-disconnected, +#connection-footer[status="disconnecting"] #banner-disconnecting { + display: flex; +} + +body.show-simulators .banner, +body.edit-connection .banner { + display: none !important; +} + +body.show-simulators #banner-simulators, +body.edit-connection #banner-editing { + display: flex !important; +} + +#banner-logs { + width: 40%; + display: flex; +} + +#logs > pre { + overflow: auto; + white-space: pre-line; +} + +#status.banner-box { + width: 100% !important; +} + +.banner-box { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; +} + +#banner-connected > .banner-box { + align-items: flex-start; +} + +#start-simulator-box { + display: inline; +} + +/************** PIXELS **************/ + +* { + margin: 0; + padding: 0; + -moz-box-sizing: border-box; + font-size: 0.9rem; +} + +body { + color: #FF9F00; + background-color: #000000; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; +} + +button { + background-color: #C09070; + color: #000000; + border: none; + cursor: pointer; + border-radius: 300px; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); +} + +button.left { + margin-right: 0px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +button.right { + margin-left: -6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +button.action-primary { + background-color: #A06060; +} + +button.action-cancel { +} + +button:hover, +button.action-primary:hover { + background-color: #FFCF00; + color: #000000; +} + +button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +#banners-and-logs { +/* border-top: #9C9CFF solid;*/ + border-width: 1px 0; +/* background: linear-gradient(to bottom, #323A42, #29313A); + color: #A8BABF;*/ +} + +#status { +/* background: linear-gradient(to bottom, #454F59, #404952); + box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;*/ +} + +#logs > pre { + border: 1px solid #A09090; + font-size: 10px; + background: #000000; + padding: 5px; + height: 100%; + padding-left: 20px; + position: relative; +} + +#logs > pre span{ + color: #9C9CFF; + position: fixed; + right: calc(30% - 15px); + bottom: -1px; +} + +#logs > pre b { + font-size: 10px; + color: #A09090; +} + +.banner-box { +/* border-right: 1px solid #111; + background-position: center right; + background-size: 1px 100%; + background-repeat: no-repeat;*/ + padding: 10px 20px; + position: relative; +} + +.connected-status { + color: #9C9CFF; + padding-bottom: 10px; +} + +.connected-status { + font-size: 150%; + top: 10%; + padding-right: 3px; + position: relative; +} + +.connected-indicator { + border-radius: 300px; + height: 100%; + flex: 0 0 10px; +} + +#banner-connected .connected-indicator, +#banner-connecting .connected-indicator { + background-color: #008484; +} + +#banner-simulators .connected-indicator, +#banner-disconnected .connected-indicator, +#banner-editing .connected-indicator, +#banner-disconnecting .connected-indicator { + background-color: #A09090; +} + +#banner-simulators .banner-content > * { + display: inline-block; +} + +#banner-simulators[simulator-count="0"] .found-simulator, +#banner-simulators:not([simulator-count="0"]) .no-simulator { + display: none; +} + +#connection-no-device, +[device-count="0"] > #connection-found-device, +#connection-manual, +#connection-assisted { + display: none; +} + +#connection-found-device, +[device-count="0"] > #connection-no-device, +[adb-available="true"] > #connection-assisted, +[adb-available="false"] > #connection-manual { + display: inline; +} diff --git a/LCARStrek/browser/devtools/app-manager/device.css b/LCARStrek/browser/devtools/app-manager/device.css new file mode 100644 index 00000000..8fc0973a --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/device.css @@ -0,0 +1,399 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/***************** GENERAL *****************/ + +* { + margin: 0; + padding: 0; + -moz-box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-size: 0.9rem; + color: #FF9F00; + background-color: #000000; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + display: flex; + flex-direction: column; +} + +template { + display: none; +} + +h1 { + font-size: 20px; +} + +#content { + display: flex; + flex-direction: row; + height: 100%; + overflow: hidden; +} + +#detail { + display: flex; + flex-grow: 1; + z-index: 1; + overflow: hidden; +} + +#meta { + background-size: 100%; + padding-top: 50px; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} + + + +/***************** APP BUTTONS *****************/ + + + +.app-buttons { + display: block; + margin-left: 20px; + color: #FF9F00; +} + +button { + margin: 0; + font-size: 11px; + padding: 5px 15px; + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; + border-radius: 300px; + border-width: 1px; +} + +.app-buttons > button { + display: none; +} + +.app-buttons > button:not([disabled]):hover { + background-color: #FFCF00; + color: #000000; +} + +.app-buttons > button[disabled] { + background-color: #402858; + color: #000000; + pointer-events: none; +} + +.app[running="false"] > .app-buttons > .button-start, +.app[running="true"] > .app-buttons > .button-stop, +.app[running="true"] > .app-buttons > .button-debug { + display: inline-block; +} +/* +.button-debug { + color: #3498DB; +} + +.button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.button-debug[disabled] { + color: #3498DB; +} + +.button-start { + color: #18BC9C +} + +.button-start:hover { + background-color: #18BC9C; + color: #FFF; +} + +.button-start[disabled] { + color: #18BC9C +} + +.button-stop { + color: #E74C3C; +} + +.button-stop:hover { + background-color: #E74C3C; + color: #FFF; +} + +.button-stop[disabled] { + color: #E74C3C; +} +*/ + + +/***************** PERMISSIONS *****************/ + + + + +.permission-table { + display: flex; + flex-direction: column; + height: 100%; +} + +.permission-table-body { + overflow: auto; + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.permission-table-header, +.permission-table-footer { + display: flex; + background: #000000; + border-top: 1px solid #9C9CFF; + z-index: 2; + flex-shrink: 0; +} + +.permission-table-header > div, +.permission-table-footer > div { + z-index: 2; + flex-grow: 1; + background-color: #000000; + color: #FF9F00; + border: 0; + margin: auto 0; + padding: 5px; + text-align: center; + background: transparent; + box-shadow: none; + text-shadow: none; +} + +.permission-table-header > div { + flex-basis: 20%; +} + +.permission-table-header > div:first-child { + text-align: left; + padding-left: 10px; + flex-basis: 30%; +} + +.permission-table-header { + border: 0; + border-bottom: 1px solid #9C9CFF; +/* box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/ +} + +.permission-table-footer { +/* box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/ +} + +.permission { + display: flex; + flex-grow: 1; +} + +.permission:nth-child(odd) { + background-color: #404000; +} + +.permission:hover { + background-color: #FFCF00; + color: #000000; +} + +.permission > div { + flex-grow: 1; + flex-basis: 20%; + text-align: center; + padding: 3px; + border-right: 1px solid #9C9CFF; + border-bottom: 1px solid #9C9CFF; +} + +.permission > div:first-child { + text-align: left; + padding: 3px 10px; + flex-basis: 30%; + font-weight: bold; +} + +.permission > div[permission="1"]:before, .allow-label:after { + color: #008484; + content: ' \2713'; +} + +.permission > div[permission="2"]:before, .deny-label:after { + color: #FF0000; + content: ' \2715'; +} + +.permission > div[permission="3"]:before, .prompt-label:after { + color: #9C9CFF; + content: ' !'; +} + + + + +/***************** SIDEBAR *****************/ + + + + +#sidebar { + background: #000000; + position: relative; + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; +} + +.sidebar-item { + background-color: #000000; + color: #FF9F00; + line-height: 120%; + cursor: pointer; + display: flex; + padding: 15px 10px; + display: block; + text-align: left; + flex-grow: 1; +} + +.sidebar-item > * { + flex-shrink: 0; +} + +.sidebar-item:hover, +.sidebar-item.selected:hover { + background-color: #FFCF00; + color: #000000 +} + +.sidebar-item.selected { + background-color: #008484; + color: #000000; +} + +.help { + float: right; + padding: 0 5px; +} + +/***************** HEADER *****************/ + +header { + padding-top: 140px; + color: #9C9CFF; + padding: 10px; +} + + + +/***************** APPS *****************/ + + + + +.apps { + display: flex; + flex-direction: column; + overflow: auto; +} + +.app { + display: flex; + align-items: center; + order: 1; +} + +.app-name { + flex-grow: 1; + font-weight: bold; +} + +.app { + padding: 10px 20px; + border-bottom: 1px solid #9C9CFF; +} + +.app:hover { + background-color: #404000 +} + +.app-icon { + width: 32px; + height: 32px; + margin-right: 10px; +} + + + +/***************** NOT CONNECTED *****************/ + + + +body:not(.notconnected) > #notConnectedMessage, +body.notconnected > #content { + display: none; +} + +#notConnectedMessage { + flex-grow: 1; + flex-direction: column; + margin: 50px auto; +} + +#notConnectedMessage > span { + padding: 20px; + border: 1px solid #9C9CFF; + border-radius: 5px; +} + +#notConnectedMessage > span:before { + content: ''; + background: url('error.svg') no-repeat; + background-size: 18px; + height: 24px; + width: 24px; + position: relative; + top: 10px; + display: inline-block; +} + + + +/***************** TABS *****************/ + +#tabs { + flex-grow: 1; + overflow: auto; +} + +.tabpanel:not(.selected) { + display: none; +} + +#tabs-headers { + flex-shrink: 0; + display: flex; + flex-direction: column; +} diff --git a/LCARStrek/browser/devtools/app-manager/error.svg b/LCARStrek/browser/devtools/app-manager/error.svg new file mode 100644 index 00000000..fe0cf54f --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/error.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/LCARStrek/browser/devtools/app-manager/help.css b/LCARStrek/browser/devtools/app-manager/help.css new file mode 100644 index 00000000..62b043c8 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/help.css @@ -0,0 +1,51 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +html, body { + margin: 0; + height: 100%; +} + +body { + color: #FF9F00; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + overflow: hidden; + max-width: 600px; + margin: auto; + padding: 20px 0; + background-color: #000000; +} + +button { + border: none; + border-radius: 300px; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; + color: #000000; +} + +button:hover { + background-color: #FFCF00; + color: #000000; +} + +button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +a, a:visited { + color: #3333FF; +} + +#close-button { + float: right; +} diff --git a/LCARStrek/browser/devtools/app-manager/index-icons.svg b/LCARStrek/browser/devtools/app-manager/index-icons.svg new file mode 100644 index 00000000..e25705df --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/index-icons.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/app-manager/index.css b/LCARStrek/browser/devtools/app-manager/index.css new file mode 100644 index 00000000..4f9cb764 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/index.css @@ -0,0 +1,105 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +* { + margin: 0; + padding: 0; + -moz-box-sizing: border-box; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +#tabs { + background: #000000; + -moz-padding-end: 3px; +} + +#toolbox-tabs { + overflow-y: auto; +} + +.button { + width: 80px; + height: 85px; + padding-bottom: 5px; + -moz-appearance: none; + border: none; + background-color: #C09070; + color: #000000; + cursor: pointer; + text-align: center; + -moz-box-align: end; + font-size: 10px; +} + +.button:first-child { + border-top: none; +} + +.button:hover, +.button[selected]:hover { + color: #000000; + background-color: #FFCF00; +} + +.button[selected] { + color: #FFCF00; + background-color: #008484; +} + +.button::-moz-focus-inner { + border-width: 0; +} + +.panel { + border-width: 0; +} + +.panel:not([selected="true"]) { + display: none; +} + +.button.toolbox { + background-repeat: no-repeat; + background-position: center 15px; + background-size: 40px 40px; +} + +.projects-button { + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-repeat: no-repeat; + background-position: left -5px; +} + +.projects-button[selected]:not(:hover) { + background-position: right -5px; +} + +.device-button { + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -85px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.device-button[selected]:not(:hover) { + background-position: right -85px, top left; +} + +.help-button { + border-bottom: 0; + background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); + background-position: left -165px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.help-button[selected]:not(:hover) { + background-position: right -165px, top left; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} diff --git a/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css b/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css new file mode 100644 index 00000000..dc016a73 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css @@ -0,0 +1,67 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Manifest Editor overrides */ + +.variables-view-container.manifest-editor { + background-color: #F5F5F5; + padding: 20px 13px; +} + +.manifest-editor .variable-or-property:focus > .title { + background-color: #EDEDED; + color: #000; + border-radius: 4px; +} + +.manifest-editor .variables-view-property > .title > .name { + color: #27406A; +} + +.manifest-editor .variable-or-property > .title > label { + font-family: monospace; +} + +.manifest-editor .variable-or-property > .title > .token-string { + color: #54BC6A; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-boolean, +.manifest-editor .variable-or-property > .title > .token-number { + color: #009BD4; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-undefined { + color: #bbb; +} + +.manifest-editor .variable-or-property > .title > .token-null { + color: #999; +} + +.manifest-editor .variable-or-property > .title > .token-other { + color: #333; +} + +.manifest-editor .variables-view-variable { + border-bottom: none; +} + +.manifest-editor .variables-view-delete, +.manifest-editor .variables-view-delete:hover, +.manifest-editor .variables-view-delete:active { + list-style-image: none; + -moz-image-region: initial; +} + +.manifest-editor .variables-view-delete::before { + width: 12px; + height: 12px; + content: ""; + display: inline-block; + background-image: url("app-manager/remove.svg"); + background-size: 12px auto; +} diff --git a/LCARStrek/browser/devtools/app-manager/plus.svg b/LCARStrek/browser/devtools/app-manager/plus.svg new file mode 100644 index 00000000..c233865a --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/plus.svg @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/LCARStrek/browser/devtools/app-manager/projects.css b/LCARStrek/browser/devtools/app-manager/projects.css new file mode 100644 index 00000000..3aaf6678 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/projects.css @@ -0,0 +1,586 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +* { + margin: 0; + padding: 0; + -moz-box-sizing: border-box; + font-size: 0.9rem; +} + +html, body { + height: 100%; +} + +template { + display: none; +} + +body { + display: flex; + color: #FF9F00; + background-color: #000000; + font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; + overflow: hidden; +} + +body:not(.connected) button.device-action { + display: none; +} + +strong { + color: #FFCF00; +} + + +/********* SIDEBAR ***********/ + + + +#sidebar { + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; + background-color: #000000; + position: relative; + border-right: 1px solid #9C9CFF; +} + +#project-list { + height: 100%; + overflow: auto; +} + +#project-list:not([projects-count="0"]) > #no-project { + display: none; +} + +#no-project { + padding: 100px 20px 0; + font-weight: bold; + color: #A09090; + font-size: 22px; +} + + +/********* PROJECT MENU ***********/ + + +.project-item { + padding: 10px 0; + background-color: #000000; + border-top: 1px solid #9C9CFF; + color: #FF9F00; + line-height: 120%; + cursor: pointer; + display: flex; + position: relative; +} + +.project-item:hover { + background-color: #FFCF00; + color: #000000; +} + +.project-item:hover strong, +.project-item:hover p, +.project-item:hover span { + color: #000000; +} + +.project-item > * { + flex-shrink: 0; +} + +.project-item.selected { + background-color: #008484; +} + +.project-item.selected strong { + color: #FFCF00; +} + +.project-item.selected p, +.project-item.selected span { + color: #000000; +} + +.button-remove { + background-image: url('remove.svg'); + background-size: 20px; + width: 20px; + height: 20px; + position: absolute; + right: 5px; + bottom: 5px; + visibility: hidden; +} + +.project-item:hover .button-remove { + visibility: visible; +} + +.project-item-status { + width: 6px; + margin: -10px 0; + border-right: 1px solid #9C9CFF; +} + +.project-item-status[status="valid"] { + background-color: #008484; +} + +.project-item-status[status~="warning"] { + background-color: #FFCF00; +} + +.project-item-status[status~="error"] { + background-color: #FF0000; +} + +.project-item-icon { + width: 32px; + height: 32px; + margin: 0 10px; +} + +.project-item-meta { + flex-grow: 1; + flex-shrink: 1 !important; +} + +.project-item-type { + font-size: 10px; + line-height: 20px; + float: right; + padding-right: 10px; + color: #9C9CFF; + text-transform: uppercase; +} + +.project-item-description { + color: #A09090; + font-size: 90%; +} + +/********* ADD PROJECT ***********/ + +#new-packaged-project { + background-position: calc(100% - 10px) 10px; +} + +#new-packaged-project, +#new-hosted-project { + background-color: #000000; + border: none; + border-top: 1px solid #9C9CFF; + padding: 10px; + font-weight: bold; +} + +#new-packaged-project:hover, +#new-hosted-project:hover { + background-color: #FFCF00; + color: #000000; +} + +#new-hosted-project-wrapper { + display: flex; + align-items: center; +} + +#new-packaged-project, +#new-hosted-project-click { + background-image: url('plus.svg'); + background-size: 20px; + background-repeat: no-repeat; + cursor: pointer; +} + +#new-hosted-project-click { + background-position: top right; + width: 20px; + height: 20px; + margin-left: 5px; +} + +#url-input { + flex-grow: 1; + width: 90%; + box-shadow: none; + border-radius: 3px; + border: 1px solid #9C9CFF; + padding: 4px; + margin-top: 4px; +} + + +/********* LENSE ***********/ + + +#lense { + height: 100%; + flex-grow: 1; + display: flex; + z-index: 1; + overflow: hidden; + background-color: #000000; + background-image: url('rocket.svg'); + background-repeat: no-repeat, repeat; + background-size: 35%, auto; + background-position: center center, top left; +} + +#lense > div { + display: flex; + flex-grow: 1; + flex-direction: column; +} + + +/********* PROJECT ***********/ + + +.project-details { + background-color: #000000; + padding: 10px; + line-height: 160%; + display: flex; + flex-direction: column; +} + +.project-metadata { + flex-grow: 1; +} + +.project-status { + display: flex; +} + +.project-title { + flex-direction: row; + display: flex; + align-items: flex-start; + padding-bottom: 10px; + border-bottom: 1px solid #A09090; + margin-bottom: 10px; +} + +.project-title > h1 { + flex-grow: 1; + font-size: 24px; +} + +.project-location { + color: gray; + font-size: 10px; + cursor: pointer; + font-family: monospace; +} + +.project-location:hover { + text-decoration: underline; +} + +.project-header { + display: flex; + border-bottom: 1px solid #A09090; + margin: 10px 20px 10px 20px; + padding-bottom: 10px; +} + +.project-icon { + flex-shrink: 0; + width: 64px; + height: 64px; + margin-right: 10px; +} + +.project-location { + font-size: 11px; + color: #9C9CFF; +} + +.project-description { + font-style: italic; + color: #A09090; +} + +.project-status > p { + text-transform: uppercase; + font-size: 10px; + padding: 2px 10px; + border-radius: 2px; + margin-top: 6px; + line-height: 10px; +} + +.project-validation { + color: #000000; + display: none; + margin-left: 10px; +} + +.project-validation.valid { + background-color: #008484; +} + +.project-validation.warning { + background-color: #FF9F00; +} + +.project-validation.error { + background-color: #FF0000; +} + +[status="valid"] > .project-validation.valid, +[status~="warning"] > .project-validation.warning, +[status~="error"] > .project-validation.error { + display: inline; +} + + +/********* PROJECT BUTTONS ***********/ + + + +.project-buttons { + display: flex; + margin-left: 20px; + color: #FF9F00; +} + +.project-buttons > button { + margin: 0; + font-size: 11px; + border-left-width: 0; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); + border: none; + border-radius: 300px; + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; +} + +.project-buttons > button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +.project-buttons > button:not([disabled]):hover { + background-color: #FFCF00; + color: #000000; +} + +.project-buttons > button[disabled] { + background-color: #402858; + color: #000000; + pointer-events: none; +} + +.project-buttons > button:first-child { + border-left-width: 1px; +} +/* +.project-button-debug { + color: #3498DB; +} + +.project-button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.project-button-debug[disabled] { + color: #3498DB; +} + +.project-button-update { + color: #777; +} + +.project-button-update:hover { + background-color: #777; + color: #FFF; +} + +.project-button-update[disabled] { + color: #777; +} +*/ + + +/********* ERRORS AND WARNINGS ***********/ + +.project-warnings, +.project-errors, +.project-item-warnings, +.project-item-errors { + display: none; +} + +[status~="warning"] .project-item-warnings, +[status~="error"] .project-item-errors { + display: inline-block; +} + +[status~="warning"] > .project-warnings, +[status~="error"] > .project-errors { + display: block; +} + +.project-warnings, +.project-errors { + margin: 20px 20px 0; + padding: 10px 10px; + font-family: monospace; +} + +.project-warnings { + border-left: 3px solid #9C9CFF; + background-color: #FF9F00; +} + +.project-errors { + border-left: 3px solid #9C9CFF; + background-color: #FF0000; +} + +.project-item-warnings { + background-image: url('warning.svg'); + color: #FFCF00; +} + +.project-item-errors { + background-image: url('error.svg'); + color: #FF0000; +} + +.project-item-warnings, +.project-item-errors { + background-repeat: no-repeat; + background-size: 12px; + background-position: left center; + margin-top: 6px; +} + +.project-item-warnings > span, +.project-item-errors > span { + font-size: 11px; + padding-left: 16px; + font-weight: bold; +} + + +/********* MANIFEST EDITOR ***********/ + +.manifest-editor { + display: flex; + flex-direction: column; + flex-grow: 1; + background-color: #000000; +} + +.manifest-header { + display: flex; + flex-direction: row; +} + +.manifest-header > h2 { + font-size: 18px; + margin: 1em 15px 1em 30px; + display: none; +} + +.manifest-header > button { + margin: 18px 0; + font-size: 11px; + border-right-width: 0; + padding-top: 1px; + padding-bottom: 2px; + -moz-padding-start: .5em; + -moz-padding-end: calc(.5em + 1px); + border: none; + border-radius: 300px; + cursor: pointer; + background-color: #C09070; + text-transform: uppercase; + display: none; +} + +.manifest-header > button:hover:active { + padding-top: 2px; + padding-bottom: 1px; + -moz-padding-start: calc(.5em + 1px); + -moz-padding-end: .5em; +} + +.manifest-header > button:not([disabled]):hover { + background-color: #FFCF00; + color: #000000; +} + +.manifest-header > button[disabled] { + background-color: #402858; + color: #000000; + pointer-events: none; +} + +.manifest-header > button:last-child { + border-right-width: 1px; +} + +[type="packaged"] > .editable { + display: block; +} + +[type="hosted"] > .viewable { + display: block; +} +/* +.manifest-button-save { + color: #777; +} + +.manifest-button-save:hover { + background-color: #777; + color: #FFF; +} + +.manifest-button-save[disabled] { + color: #777; +} +*/ +.variables-view { + flex-grow: 1; + border: 0; + border-top: 5px solid #9C9CFF; +} + +/* Bug 925921: Remove when the manifest editor is always on */ + +.manifest-editor { + display: none; +} + +.project-details { + flex-grow: 1; +} + +#lense[manifest-editable] .manifest-editor { + display: flex; +} + +#lense[manifest-editable] .project-details { + flex-grow: 0; +} + +/* End blocks to remove */ diff --git a/LCARStrek/browser/devtools/app-manager/remove.svg b/LCARStrek/browser/devtools/app-manager/remove.svg new file mode 100644 index 00000000..3fa83648 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/remove.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/LCARStrek/browser/devtools/app-manager/rocket.svg b/LCARStrek/browser/devtools/app-manager/rocket.svg new file mode 100644 index 00000000..94f403c7 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/rocket.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/app-manager/warning.svg b/LCARStrek/browser/devtools/app-manager/warning.svg new file mode 100644 index 00000000..9bc6a1e2 --- /dev/null +++ b/LCARStrek/browser/devtools/app-manager/warning.svg @@ -0,0 +1,14 @@ + + + + + + + + -- 2.35.3