From 7600e0b11c4883db40bc3a6a5f2427db006c6ad5 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 3 Jan 2014 22:44:04 +0100 Subject: [PATCH] second part of sync for LCARStrek with browser windows/shared theme changes in Firefox 27 cycle --- LCARStrek/browser/browser.css | 21 +--- .../app-manager/manifest-editor.inc.css | 67 ----------- LCARStrek/browser/devtools/common.css | 25 +++- LCARStrek/browser/devtools/dark-theme.css | 82 +++++++++++-- LCARStrek/browser/devtools/debugger.css | 54 +++------ LCARStrek/browser/devtools/widgets.css | 112 +++++++++++++++++- 6 files changed, 226 insertions(+), 135 deletions(-) delete mode 100644 LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 5a8a85a6..5cd0f333 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -3476,6 +3476,8 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon background-color: transparent !important; } +/* === BEGIN highlighter.inc.css === */ + /* Highlighter */ .highlighter-outline { @@ -3492,7 +3494,6 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon .highlighter-nodeinfobar { color: #FF9F00; - border: 1px solid rgba(156, 156, 255, .5); border-radius: 3px; background-color: #000000; background-clip: padding-box; @@ -3533,9 +3534,6 @@ html|*.highlighter-nodeinfobar-pseudo-classes { -moz-margin-end: 2px; } -.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) { -} - .highlighter-nodeinfobar-inspectbutton:hover, .highlighter-nodeinfobar-inspectbutton:hover:active/*, .highlighter-nodeinfobar-container:not([locked]) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-inspectbutton*/ { @@ -3545,9 +3543,6 @@ html|*.highlighter-nodeinfobar-pseudo-classes { .highlighter-nodeinfobar-menu { } -.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) { -} - .highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker { -moz-box-align: center; -moz-margin-start: -1px; @@ -3560,7 +3555,6 @@ html|*.highlighter-nodeinfobar-pseudo-classes { height: 14px; -moz-margin-start: calc(50% - 7px); transform: rotate(-45deg); - border: 1px solid transparent; background-clip: padding-box; background-repeat: no-repeat; } @@ -3568,28 +3562,21 @@ html|*.highlighter-nodeinfobar-pseudo-classes { .highlighter-nodeinfobar-arrow-top { margin-bottom: -8px; margin-top: 8px; - border-right-color: rgba(0, 132, 132, .5); - border-top-color: rgba(0, 132, 132, .5); background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%); } .highlighter-nodeinfobar-arrow-bottom { margin-top: -8px; margin-bottom: 8px; - border-left-color: rgba(0, 132, 132, .5); - border-bottom-color: rgba(0, 132, 132, .5); background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%); } -.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar, -.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar { - box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset; -} - .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar { margin: 7px 0; } +/* === END highlighter.inc.css === */ + #full-screen-warning-message { background-color: #000000; color: #FF9F00; diff --git a/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css b/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css deleted file mode 100644 index dc016a73..00000000 --- a/LCARStrek/browser/devtools/app-manager/manifest-editor.inc.css +++ /dev/null @@ -1,67 +0,0 @@ -/* 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/common.css b/LCARStrek/browser/devtools/common.css index 14b2f830..ca81d073 100644 --- a/LCARStrek/browser/devtools/common.css +++ b/LCARStrek/browser/devtools/common.css @@ -261,7 +261,7 @@ devtools-menulist:-moz-focusring, .devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active { } -/********************** shared/devtools/common.inc.css **********************/ +/* === BEGIN common.inc.css === */ /* Autocomplete Popup */ /* Dark and light theme */ @@ -357,3 +357,26 @@ devtools-menulist:-moz-focusring, max-height: 75vh; } } + +/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */ + +.devtools-tooltip.devtools-tooltip-tooltip { + /* If the tooltip uses a XUL element */ + padding: 4px; + background: #A09090; + border-radius: 3px; +} +.devtools-tooltip.devtools-tooltip-panel .panel-arrowcontent { + /* If the tooltip uses a XUL element instead */ + padding: 4px; +} + +.devtools-tooltip-tiles { + background-color: #A09090; + background-image: linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF), + linear-gradient(45deg, #9C9CFF 25%, transparent 25%, transparent 75%, #9C9CFF 75%, #9C9CFF); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; +} + +/* === END common.inc.css === */ diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index 1d29413d..529143a1 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -47,7 +47,8 @@ background: #004242; } -.theme-bg-darker { +.theme-bg-darker +.cm-s-mozilla .CodeMirror-gutters { background-color: rgba(0,0,0,0.5); } @@ -55,11 +56,15 @@ background: #404000; } -.theme-link { /* original: blue */ +.theme-link, +.cm-s-mozilla .cm-link { /* original: blue */ color: #3333FF; } -.theme-comment { /* original: grey */ +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-string { /* original: grey */ color: #A09090; } @@ -73,23 +78,39 @@ border-color: #8050B0; } -.theme-fg-color1 { /* original: green */ +.theme-fg-color1, +.cm-s-mozilla .cm-variable-2, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .CodeMirror-matchingbracket { /* original: green */ color: #008484; } -.theme-fg-color2 { /* original: blue */ +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-variable, +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier { /* original: blue */ color: #9C9CFF; } -.theme-fg-color3 { /* original: pink/lavender */ +.theme-fg-color3, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header { /* original: pink/lavender */ color: #E7ADE7; } -.theme-fg-color4 { /* original: purple/violet */ +.theme-fg-color4, +.cm-s-mozilla .cm-comment { /* original: purple/violet */ color: #C09070; } -.theme-fg-color5 { /* original: Yellow */ +.theme-fg-color5, +.cm-s-mozilla .cm-bracket, +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-keyword { /* original: Yellow */ color: #FFCF00; } @@ -97,7 +118,10 @@ color: #FF9F00; } -.theme-fg-color7 { /* original: Red */ +.theme-fg-color7, +.cm-s-mozilla .CodeMirror-nonmatchingbracket, +.cm-s-mozilla .cm-string-2, +.cm-s-mozilla .cm-error { /* original: Red */ color: #FF0000; } @@ -110,3 +134,43 @@ .markupview-colorswatch { /* box-shadow: 0 0 0 1px rgba(0,0,0,0.5); */ } + +/* CodeMirror specific styles. + * Best effort to match the existing theme, some of the colors + * are duplicated here to prevent weirdness in the main theme. */ + +.CodeMirror { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror pre, +.cm-s-mozilla .cm-operator, +.cm-s-mozilla .cm-special, +.cm-s-mozilla .cm-number { /* theme-body color */ + color: #FF9F00; +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px #FF9F00; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: #008484; + color: #FFCF00; +} + +.dcm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: #008484; + color: #000000; +} + +.CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(0, 132, 132, .05); +} + +.cm-s-markup-view pre { + line-height: 1.4em; + min-height: 1.4em; +} diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css index 44f2d912..a1e2caa3 100644 --- a/LCARStrek/browser/devtools/debugger.css +++ b/LCARStrek/browser/devtools/debugger.css @@ -25,53 +25,30 @@ window { font-weight: bold; } -#sources .side-menu-widget-item-checkbox { - -moz-margin-end: -6px; - padding: 0; - opacity: 0; - transition: opacity .15s ease 0s; -} - -/* Only show the checkbox when the source is hovered over, is selected, or if it - * is not checked. */ -#sources .side-menu-widget-item:hover > .side-menu-widget-item-checkbox, -#sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox, -#sources .side-menu-widget-item-checkbox:not([checked]) { - opacity: 1; - transition: opacity .15s ease-out 0s; -} - -#sources .side-menu-widget-item-checkbox > .checkbox-check { - -moz-appearance: none; - background: none; - background-image: url("itemToggle.png"); - background-repeat: no-repeat; - background-clip: content-box; - background-position: -16px 0; - background-size: 32px 16px; - width: 16px; - height: 16px; - border: 0; +#black-box { + list-style-image: url("debugger-blackbox.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); } -#sources .side-menu-widget-item-checkbox[checked] > .checkbox-check { - background-position: 0 0; +#black-box[checked], +#black-box:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); } -#sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents { +#sources .black-boxed { color: #8050B0; } -#sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents > .dbg-breakpoint { +#sources .black-boxed > .dbg-breakpoint { display: none; } -#sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { +#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { background-image: none; /* box-shadow: inset -1px 0 0 #222426; */ } -#sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { +#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { background-image: none; /* box-shadow: inset 1px 0 0 #222426; */ } @@ -151,7 +128,7 @@ window { /* Sources and breakpoints view */ .dbg-breakpoint { - -moz-margin-start: -14px; + -moz-margin-start: 4px; } .dbg-breakpoint-line { @@ -430,13 +407,16 @@ window { -moz-image-region: rect(0px, 32px, 16px, 16px); } -#debugger-controls > toolbarbutton { +#debugger-controls > toolbarbutton, +#sources-controls > toolbarbutton { } -#debugger-controls > toolbarbutton:last-of-type { +#debugger-controls > toolbarbutton:last-of-type, +#sources-controls > toolbarbutton:last-of-type { } -#debugger-controls { +#debugger-controls, +#sources-controls { } #instruments-pane-toggle { diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css index b5b8d06d..a3d1573e 100644 --- a/LCARStrek/browser/devtools/widgets.css +++ b/LCARStrek/browser/devtools/widgets.css @@ -304,12 +304,26 @@ color: #FF9F00; } +/* SideMenuWidget container */ + .side-menu-widget-container[with-arrows=true]:-moz-locale-dir(ltr) { } .side-menu-widget-container[with-arrows=true]:-moz-locale-dir(rtl) { } +.side-menu-widget-container[with-arrows=true] .side-menu-widget-group { + /* To allow visibility of the dark margin shadow. */ +/* -moz-margin-end: 1px; */ +} + +.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { + /* To compensate for the arrow image's dark margin. */ +/* -moz-margin-end: -1px; */ +} + +/* SideMenuWidget groups */ + .side-menu-widget-group-title { padding: 4px; @@ -322,6 +336,8 @@ padding: 0; } +/* SideMenuWidget items */ + .side-menu-widget-item { border-top: 1px solid #9C9CFF; margin-top: -1px; @@ -352,6 +368,8 @@ background-position: center left, top left; } +/* SideMenuWidget items contents */ + .side-menu-widget-item-label { padding: 4px 0px; } @@ -385,6 +403,8 @@ color: #9C9CFF; } +/* SideMenuWidget misc */ + .side-menu-widget-empty-notice-container { padding: 12px; @@ -555,6 +575,26 @@ color: #9C9CFF; } +/* Aligned values */ + +.variables-view-container[aligned-values] .title > .separator { + -moz-box-flex: 1; +} + +.variables-view-container[aligned-values] .title > .value { + width: 70vw; +} + +.variables-view-container[aligned-values] .title > .element-value-input { + width: calc(70vw - 10px); +} + +/* Actions first */ + +.variables-view-container[actions-first] .variables-view-delete { + -moz-box-ordinal-group: 0; +} + /* Variables and properties tooltips */ .variable-or-property > tooltip > label { @@ -590,10 +630,6 @@ -moz-image-region: rect(0, 48px, 16px, 32px); } -*:not(:hover) .variables-view-delete { - display: none; -} - .variables-view-delete > .toolbarbutton-text { display: none; } @@ -664,3 +700,71 @@ .arrow[invisible] { visibility: hidden; } + +/* === BEGIN manifest-editor.inc.css === */ + +/* Manifest Editor overrides */ + +.variables-view-container.manifest-editor { + background-color: #000000; + 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; +} + +/* === END manifest-editor.inc.css === */ -- 2.35.3