From: Robert Kaiser Date: Sun, 23 Aug 2015 19:51:26 +0000 (+0200) Subject: first part of syncing LCARStrek with Firefox 40 windows theme changes X-Git-Tag: LCARStrek-2.37~3 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=a5cb6e534c9872ab3dc646ab44fa35b61775537d;p=themes.git first part of syncing LCARStrek with Firefox 40 windows theme changes --- diff --git a/LCARStrek/browser/Privacy-32.png b/LCARStrek/browser/Privacy-32.png deleted file mode 100644 index 3237ab93..00000000 Binary files a/LCARStrek/browser/Privacy-32.png and /dev/null differ diff --git a/LCARStrek/browser/Privacy-64.png b/LCARStrek/browser/Privacy-64.png deleted file mode 100644 index c2173563..00000000 Binary files a/LCARStrek/browser/Privacy-64.png and /dev/null differ diff --git a/LCARStrek/browser/Push-16.png b/LCARStrek/browser/Push-16.png new file mode 100644 index 00000000..1ce827f7 Binary files /dev/null and b/LCARStrek/browser/Push-16.png differ diff --git a/LCARStrek/browser/Push-64.png b/LCARStrek/browser/Push-64.png new file mode 100644 index 00000000..499481aa Binary files /dev/null and b/LCARStrek/browser/Push-64.png differ diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index d752fa4a..0ab0b84e 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -504,7 +504,7 @@ menuitem.bookmark-item { :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, - #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, + #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, @@ -980,7 +980,7 @@ toolbaritem[sdkstylewidget="true"] > toolbarbutton, :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, - #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, + #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, @@ -988,7 +988,7 @@ toolbaritem[sdkstylewidget="true"] > toolbarbutton, toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, - #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, + #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, @@ -1553,11 +1553,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an */ /* Help SDK icons fit: */ -toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { width: 16px; } -#nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { +#nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */ width: 32px; } @@ -2483,13 +2484,6 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- max-height: 16px; } -toolbarbutton[type="socialmark"] > .toolbarbutton-icon { - width: auto; - height: auto; - max-width: 32px; - max-height: 24px; -} - /* fixup corners for share panel */ .social-panel > .social-panel-frame { border-radius: inherit; @@ -2718,10 +2712,6 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { background-color: #C09070; } -.tabbrowser-tab[remote] { - text-decoration: underline; -} - /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ .tabbrowser-tab[visuallyselected=true] { /* position: relative; @@ -3187,6 +3177,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { margin-top: 5px; } +/* === BEGIN notification-icons.inc.css === */ + .popup-notification-icon { width: 64px; height: 64px; @@ -3197,6 +3189,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { list-style-image: url("chrome://browser/skin/Geolocation-64.png"); } +.popup-notification-icon[popupid="push"] { + list-style-image: url(chrome://browser/skin/Push-64.png); +} + .popup-notification-icon[popupid="xpinstall-disabled"], .popup-notification-icon[popupid="addon-progress"], .popup-notification-icon[popupid="addon-install-blocked"], @@ -3310,6 +3306,10 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled list-style-image: url("chrome://browser/skin/Geolocation-16.png"); } +#push-notification-icon { + list-style-image: url(chrome://browser/skin/Push-16.png); +} + #addons-notification-icon { list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png"); } @@ -3419,6 +3419,49 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled margin: 0px; } +.translate-notification-icon, +#translate-notification-icon { + list-style-image: url("chrome://browser/skin/translation-16.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); +} + +.translated-notification-icon, +#translated-notification-icon { + list-style-image: url("chrome://browser/skin/translation-16.png"); + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +.popup-notification-icon[popupid="servicesInstall"] { + list-style-image: url("chrome://browser/skin/social/services-64.png"); +} +#servicesInstall-notification-icon { + list-style-image: url("chrome://browser/skin/social/services-16.png"); +} + +/* EME notifications */ + +.popup-notification-icon[popupid="drmContentPlaying"], +#eme-notification-icon { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); +} + +#eme-notification-icon:hover:active { + list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); +} + +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + +/* === END notification-icons.inc.css === */ + /* Translation infobar */ /* === BEGIN infobar.inc.css === */ @@ -3446,6 +3489,10 @@ notification[value="translation"][state="translating"] .messageImage { } } +notification[value="translation"] hbox[anonid="details"] { + overflow: hidden; +} + notification[value="translation"] button, notification[value="translation"] menulist { min-width: 0; @@ -3503,18 +3550,6 @@ notification[value="translation"] { min-height: 40px; } -.translate-notification-icon, -#translate-notification-icon { - list-style-image: url("chrome://browser/skin/translation-16.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -.translated-notification-icon, -#translated-notification-icon { - list-style-image: url("chrome://browser/skin/translation-16.png"); - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - .translation-menupopup { -moz-appearance: none; } @@ -3713,10 +3748,23 @@ notification[value="loop-sharing-notification"] .messageImage { /* === BEGIN commandline.inc.css === */ +/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. + We are copy/pasting variables from light-theme and dark-theme, + since they aren't loaded in this context (within browser.css). */ +:root #developer-toolbar { + --gcli-background-color: #000000; /* --theme-toolbar-background */ + --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #000000; /* --theme-sidebar-background */ + --gcli-input-color: #FF9F00; /* --theme-body-color-alt */ + --gcli-border-color: #9C9CFF; /* --theme-splitter-color */ + --selection-background: #008484; /* --theme-selection-background */ + --selection-color: #000000; /* --theme-selection-color */ +} + /* Developer toolbar */ #developer-toolbar { - border-top: 3px solid #000000; + border-top: 3px solid var(--gcli-background-color); border-bottom: none; } @@ -3848,11 +3896,11 @@ html|*#gcli-output-frame { /* line-height: 32px; outline-style: none; */ background-repeat: no-repeat; - background-color: rgba(0, 0, 0, .75); + background-color: var(--gcli-input-background); } .gclitoolbar-input-node[focused="true"] { - background-color: #000000; + background-color: var(--gcli-input-focused-background); } .gclitoolbar-input-node::before { @@ -3882,9 +3930,8 @@ html|*#gcli-output-frame { } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { - background-color: #008484; - color: #000000; - text-shadow: none; + background-color: var(--selection-background); + color: var(--selection-color); } .gclitoolbar-complete-node { @@ -4314,12 +4361,6 @@ html|*#gcli-output-frame { border: 0; } -.popup-notification-icon[popupid="servicesInstall"] { - list-style-image: url("chrome://browser/skin/social/services-64.png"); -} -#servicesInstall-notification-icon { - list-style-image: url("chrome://browser/skin/social/services-16.png"); -} #social-undoactivation-button { -moz-margin-start: 0; /* override default label margin to match description margin */ } @@ -4758,28 +4799,6 @@ notification.pluginVulnerable .messageImage { /* === END badcontent-doorhanger.inc.css === */ -/* EME notifications */ - -.popup-notification-icon[popupid="drmContentPlaying"], -#eme-notification-icon { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); -} - -#eme-notification-icon:hover:active { - list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); -} - -#eme-notification-icon[firstplay=true] { - animation: emeTeachingMoment 0.2s linear 0s 5 normal; -} - -@keyframes emeTeachingMoment { - 0% {transform: translateX(0); } - 25% {transform: translateX(3px) } - 75% {transform: translateX(-3px) } - 100% { transform: translateX(0); } -} - /* === BEGIN customizeMode.inc.css === */ /* Customization mode */ diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index 0bbc3c29..1d30bb31 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -292,8 +292,10 @@ toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { } /* Help SDK buttons fit in. */ -toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon, -toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon { +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, +toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .toolbarbutton-icon { height: 32px; width: 32px; } diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css index feb2637a..dd24562f 100644 --- a/LCARStrek/browser/devtools/animationinspector.css +++ b/LCARStrek/browser/devtools/animationinspector.css @@ -99,13 +99,6 @@ body { } } -/* Disabled playerWidget when the animation has ended */ - -.finished { - pointer-events: none; - opacity: .5; -} - /* Animation title gutter, contains the name, duration, iteration */ .animation-title { @@ -185,6 +178,7 @@ body { .timeline .rate { -moz-appearance: none; text-align: center; + color: var(--theme-body-color); border-right: 1px solid var(--theme-splitter-color); } diff --git a/LCARStrek/browser/devtools/command-rulers.png b/LCARStrek/browser/devtools/command-rulers.png new file mode 100644 index 00000000..a6060627 Binary files /dev/null and b/LCARStrek/browser/devtools/command-rulers.png differ diff --git a/LCARStrek/browser/devtools/command-rulers@2x.png b/LCARStrek/browser/devtools/command-rulers@2x.png new file mode 100644 index 00000000..35c3b066 Binary files /dev/null and b/LCARStrek/browser/devtools/command-rulers@2x.png differ diff --git a/LCARStrek/browser/devtools/commandline.css b/LCARStrek/browser/devtools/commandline.css index 6f918cbd..22dfac84 100644 --- a/LCARStrek/browser/devtools/commandline.css +++ b/LCARStrek/browser/devtools/commandline.css @@ -2,17 +2,30 @@ * 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/. */ +/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. + We are copy/pasting variables from light-theme and dark-theme, + since they aren't loaded in this context (within commandlineoutput.xhtml + and commandlinetooltip.xhtml). */ +:root { + --gcli-background-color: #000000; /* --theme-tab-toolbar-background */ + --gcli-input-focused-background: #FFCF00; /* --theme-sidebar-background */ + --gcli-input-focused-color: #000000; + --gcli-input-color: #FF9F00; /* --theme-body-color */ + --gcli-border-color: #9C9CFF; /* --theme-splitter-color */ + --gcli-edittext-color: #E7ADE7; +} + .gcli-body { margin: 0; font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - color: #FF9F00; + color: var(--gcli-input-color); } #gcli-output-root, #gcli-tooltip-root { - border: 1px solid #008484; - background-color: #000000; + border: 1px solid var(--gcli-border-color); border-radius: 3px; + background-color: var(--gcli-background-color); } #gcli-output-root { @@ -31,9 +44,9 @@ margin-left: 8px; width: 20px; height: 10px; - border-left: 1px solid #008484; - border-right: 1px solid #008484; - background-color: #000000; + border-left: 1px solid var(--gcli-border-color); + border-right: 1px solid var(--gcli-border-color); + background-color: var(--gcli-background-color); } .gcli-tt-description, @@ -46,7 +59,7 @@ line-height: 1.2em; border-top: none; border-bottom: none; - color: #9C9CFF; + color: var(--gcli-input-color); } .gcli-row-out p, @@ -64,7 +77,7 @@ .gcli-row-out th, .gcli-row-out strong, .gcli-row-out pre { - color: #FFCF00; + color: var(--gcli-input-color); } .gcli-row-out pre { @@ -82,14 +95,14 @@ font-weight: normal; font-size: 90%; border-radius: 3px; - background-color: #000000; - color: #E7ADE7; - border: 1px solid #8050B0; + background-color: var(--gcli-background-color); + color: var(--gcli-edittext-color); + border: 1px solid var(--gcli-border-color); } .gcli-out-shortcut:before, .gcli-help-synopsis:before { - color: #FFCF00; + color: var(--gcli-input-color); -moz-padding-end: 2px; } @@ -117,13 +130,13 @@ .gcli-menu-desc { -moz-padding-end: 8px; - color: #FF9F00; + color: var(--gcli-input-color); } .gcli-menu-name:hover, .gcli-menu-desc:hover { - background-color: #FFCF00; - color: #000000; + background-color: var(--gcli-input-focused-background); + color: var(--gcli-input-focused-color); } .gcli-menu-highlight, diff --git a/LCARStrek/browser/devtools/computedview.css b/LCARStrek/browser/devtools/computedview.css index eae29c39..1f334c73 100644 --- a/LCARStrek/browser/devtools/computedview.css +++ b/LCARStrek/browser/devtools/computedview.css @@ -151,8 +151,9 @@ body { margin: 0 5px; } -.devtools-toolbar { +#root .devtools-toolbar { width: 100%; + display: -moz-box; } .link { diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index b22769f3..5095b129 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -3,8 +3,9 @@ * 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/. */ -/* According to: - * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 +/* Colors are taken from: + * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. + * Changes should be kept in sync with commandline.css and commandline.inc.css. */ :root { --theme-body-background: #000000; @@ -423,10 +424,18 @@ div.CodeMirror span.eval-text { /* === BEGIN toolbars.inc.css === */ +/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ +.theme-light, +.theme-dark { + --searchbox-background-color: #000000; + --searchbox-border-color: #9C9CFF; + --searcbox-no-match-background-color: #400000; + --searcbox-no-match-border-color: #FF0000; +} + /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs { +.devtools-sidebar-tabs tabs { } .devtools-toolbar { @@ -436,6 +445,7 @@ div.CodeMirror span.eval-text { /* LCARStrek checkbox colors don't work well against toolbar background */ background-color: var(--theme-toolbar-background); padding: 2px; + line-height: -moz-block-height; } .devtools-toolbar checkbox .checkbox-check { } @@ -647,7 +657,7 @@ div.CodeMirror span.eval-text { margin-bottom: 1px; padding: 0;*/ -moz-padding-start: 22px; - -moz-padding-end: 12px; + -moz-padding-end: 4px; background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; @@ -656,24 +666,82 @@ div.CodeMirror span.eval-text { background-image: url("magnifying-glass.png"); } -@media (min-resolution: 2dppx) { - .devtools-searchinput { - background-image: url("magnifying-glass@2x.png"); - } -} - .devtools-searchinput:-moz-locale-dir(rtl) { background-position: calc(100% - 8px) center; } -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { + visibility: hidden; +} + +/* Searchbox is a div container element for a search input element */ +.devtools-searchbox { + display: -moz-box; + -moz-box-flex: 1; + position: relative; +} + +.devtools-rule-searchbox { + -moz-box-flex: 1; + padding-right: 23px; + width: 100%; + font: inherit; +} + +.devtools-rule-searchbox[filled] { + background-color: var(--searchbox-background-color); + border-color: var(--searchbox-border-color); +} + +.devtools-style-searchbox-no-match { + background-color: var(--searcbox-no-match-background-color) !important; + border-color: var(--searcbox-no-match-border-color) !important; } .devtools-no-search-result { border-color: var(--theme-highlight-red) !important; } +.devtools-searchinput-clear { + position: absolute; + top: 3.5px; + right: 7px; + padding: 0; + border: 0; + width: 16px; + height: 16px; + background-position: 0 0; + background-repeat: no-repeat; + background-color: transparent; +} + +.devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear.svg"); +} + +.devtools-style-searchbox-no-match + .devtools-searchinput-clear { + background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; +} + +.devtools-searchinput-clear:hover { + background-position: -16px 0; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { + list-style-image: url("chrome://browser/skin/devtools/search-clear.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +@media (min-resolution: 2dppx) { + .devtools-searchinput { + background-image: url("magnifying-glass@2x.png"); + } +} + /* Close button */ .devtools-closebutton { @@ -716,13 +784,16 @@ div.CodeMirror span.eval-text { } .devtools-sidebar-alltabs { -/* margin: 0; +/* height: 24px; + line-height: 24px; + padding: 0 4px; + margin: 0; border-width: 0 0 1px 0; -moz-border-start-width: 1px; border-style: solid;*/ } -.devtools-sidebar-alltabs dropmarker { +.devtools-sidebar-alltabs .toolbarbutton-icon { display: none; } @@ -803,6 +874,20 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); +} + #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { @@ -890,6 +975,10 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); } +#command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers.png"); +} + @media (min-resolution: 2dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); @@ -926,6 +1015,10 @@ div.CodeMirror span.eval-text { #command-button-eyedropper > image { background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); } + + #command-button-rulers > image { + background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); + } } /* Tabs */ @@ -1006,6 +1099,9 @@ div.CodeMirror span.eval-text { visibility: collapse; } +.devtools-tab:not([selected])[highlighted] { +} + .devtools-tab:not([selected])[highlighted] { color: #FFCF00; } diff --git a/LCARStrek/browser/devtools/dock-bottom-maximize@2x.png b/LCARStrek/browser/devtools/dock-bottom-maximize@2x.png new file mode 100644 index 00000000..350dc53d Binary files /dev/null and b/LCARStrek/browser/devtools/dock-bottom-maximize@2x.png differ diff --git a/LCARStrek/browser/devtools/dock-bottom-minimize@2x.png b/LCARStrek/browser/devtools/dock-bottom-minimize@2x.png new file mode 100644 index 00000000..c7e423fe Binary files /dev/null and b/LCARStrek/browser/devtools/dock-bottom-minimize@2x.png differ diff --git a/LCARStrek/browser/devtools/layoutview.css b/LCARStrek/browser/devtools/layoutview.css index b567c08f..ed74d93c 100644 --- a/LCARStrek/browser/devtools/layoutview.css +++ b/LCARStrek/browser/devtools/layoutview.css @@ -42,7 +42,7 @@ } .editable { - border-bottom: 1px dashed transparent; + border: 1px dashed transparent; } .editable:hover { diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css index ea934644..7bbf4006 100644 --- a/LCARStrek/browser/devtools/netmonitor.css +++ b/LCARStrek/browser/devtools/netmonitor.css @@ -226,6 +226,11 @@ box.requests-menu-status:not([code]) { background-color: #A09090; /* dark grey */ } +box.requests-menu-status[code="cached"] { + border: 2px solid #A09090; /* dark grey */ + background-color: transparent; +} + box.requests-menu-status[code^="1"] { background-color: #9C9CFF; /* light blue */ } @@ -597,6 +602,28 @@ box.requests-menu-status[code^="5"] { font-weight: 600; } +#requests-menu-filter-freetext-text { + transition-property: max-width, -moz-padding-end, -moz-padding-start; + transition-duration: 250ms; + transition-timing-function: ease; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box { + overflow: hidden; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) { + max-width: 20px !important; + -moz-padding-end: 5px; + -moz-padding-start: 22px; + background-position: 8px center, top left, top left; +} + +#requests-menu-filter-freetext-text[focused], +#requests-menu-filter-freetext-text[filled] { + max-width: 200px !important; +} + /* Performance analysis buttons */ #requests-menu-network-summary-button { diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css index 4a100824..b53bda6e 100644 --- a/LCARStrek/browser/devtools/performance.css +++ b/LCARStrek/browser/devtools/performance.css @@ -75,10 +75,7 @@ width: 8px; height: 8px; margin: 0 8px; - border: 1px solid; border-radius: 1px; - background-color: var(--bullet-bg); - border-color: var(--bullet-border); } /* Recording Notice */ @@ -96,6 +93,10 @@ margin: 0; } +#performance-view .notice-container vbox { + text-align: center; +} + /* Overview Panel */ .record-button { @@ -281,11 +282,11 @@ text-decoration: underline; } -.call-tree-url { +.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { color: var(--theme-highlight-blue); } -.call-tree-line { +.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { color: var(--theme-highlight-orange); } @@ -420,7 +421,6 @@ height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; - border: 1px solid; border-radius: 1px; } @@ -431,9 +431,8 @@ .waterfall-marker-bar { height: 9px; - border: 1px solid; - border-radius: 1px; transform-origin: left center; + border-radius: 1px; } .waterfall-marker-container.selected > .waterfall-sidebar, @@ -442,11 +441,6 @@ color: var(--theme-selection-color); } -.waterfall-marker-container.selected .waterfall-marker-bullet, -.waterfall-marker-container.selected .waterfall-marker-bar { - border-color: initial !important; -} - .waterfall-marker-location { color: #3333FF; } @@ -466,10 +460,40 @@ .marker-details-bullet { width: 8px; height: 8px; - border: 1px solid; border-radius: 1px; } +#performance-filter-menupopup > menuitem.highlight-pink:before, +.marker-details-bullet.highlight-pink, +.waterfall-marker-bar.highlight-pink, +.waterfall-marker-bullet.highlight-pink { + background-color: var(--theme-highlight-pink); +} +#performance-filter-menupopup > menuitem.highlight-bluegrey:before, +.marker-details-bullet.highlight-bluegrey, +.waterfall-marker-bar.highlight-bluegrey, +.waterfall-marker-bullet.highlight-bluegrey { + background-color: var(--theme-highlight-bluegrey); +} +#performance-filter-menupopup > menuitem.highlight-green:before, +.marker-details-bullet.highlight-green, +.waterfall-marker-bar.highlight-green, +.waterfall-marker-bullet.highlight-green { + background-color: var(--theme-highlight-green); +} +#performance-filter-menupopup > menuitem.highlight-lightorange:before, +.marker-details-bullet.highlight-lightorange, +.waterfall-marker-bar.highlight-lightorange, +.waterfall-marker-bullet.highlight-lightorange { + background-color: var(--theme-highlight-lightorange); +} +#performance-filter-menupopup > menuitem.highlight-red:before, +.marker-details-bullet.highlight-red, +.waterfall-marker-bar.highlight-red, +.waterfall-marker-bullet.highlight-red { + background-color: var(--theme-highlight-red); +} + #waterfall-details > * { padding-top: 3px; } @@ -682,3 +706,124 @@ call-tree-item:not([origin="content"]) .call-tree-line { transform: scale(0.75); transform-origin: center right; } + +/** + * JIT View + */ + +#jit-optimizations-view { + width: 350px; + overflow-x: hidden; + overflow-y: auto; + min-width: 200px; +} + +/* override default styles for tree widget */ +#jit-optimizations-view .tree-widget-empty-text { + font-size: inherit; + padding: 0px; + margin: 8px; +} + +#jit-optimizations-view:not(.empty) .tree-widget-empty-text { + display: none; +} + +#jit-optimizations-toolbar { + height: 18px; + min-height: 0px; /* override .devtools-toolbar min-height */ +} + +.jit-optimizations-title { + margin: 0px 4px; + font-weight: 600; +} + +#jit-optimizations-raw-view { + font-size: 90%; +} + +/* override default .tree-widget-item line-height */ +#jit-optimizations-raw-view .tree-widget-item { + line-height: 20px !important; + display: block; + overflow: hidden; +} + +#jit-optimizations-raw-view .tree-widget-item[level="1"] { + font-weight: 600; +} + +#jit-optimizations-view .opt-ion-type-site { + -moz-margin-start: 4px !important; + opacity: 0.6; +} + +#jit-optimizations-view .opt-outcome::before { + content: "→"; + margin: 4px 0px; + color: var(--theme-body-color); +} +#jit-optimizations-view .theme-selected .opt-outcome::before { + color: var(--theme-selection-color); +} + +#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { + color: var(--theme-highlight-green); +} +#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { + color: var(--theme-highlight-red); +} +#jit-optimizations-view .tree-widget-container { + -moz-margin-end: 0px; +} +#jit-optimizations-view .tree-widget-container > li, +#jit-optimizations-view .tree-widget-children > li { + overflow: hidden; +} + +.opt-line::before { + content: ":"; + color: var(--theme-highlight-orange); +} +.theme-selected .opt-line::before { + color: var(--theme-selection-color); +} +.opt-line.header-line::before { + color: var(--theme-body-color); +} +#jit-optimizations-view.empty .opt-line.header-line::before { + display: none; +} + +.opt-url { + -moz-margin-start: 4px !important; +} +.opt-url:hover { + text-decoration: underline; +} +.opt-url.debugger-link { + cursor: pointer; +} + +#jit-optimizations-view .opt-icon::before { + content: ""; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-repeat: no-repeat; + background-size: 48px 40px; + margin: 5px 6px 0 0; + width: 8px; + height: 8px; + max-height: 8px; + display: inline-block; +} + +#jit-optimizations-view .opt-icon[severity=warning]::before { + background-position: -16px -16px; +} + +@media (min-resolution: 2dppx) { + #jit-optimizations-view .opt-icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } +} diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css index 813ce7f8..307b1b9c 100644 --- a/LCARStrek/browser/devtools/ruleview.css +++ b/LCARStrek/browser/devtools/ruleview.css @@ -2,6 +2,12 @@ * 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/. */ +/* CSS Variables specific to this panel that aren't defined by the themes */ + +.theme-light { + --rule-highlight-background-color: #402800; +} + .ruleview { height: 100%; } @@ -65,7 +71,6 @@ cursor: default; } - .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, .ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom-color: transparent; @@ -202,6 +207,10 @@ border-left-color: var(--theme-highlight-green); } +.ruleview-highlight { + background-color: var(--rule-highlight-background-color); +} + .ruleview-namecontainer > .ruleview-propertyname, .ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom: 1px dashed transparent; diff --git a/LCARStrek/browser/devtools/search-clear-failed.svg b/LCARStrek/browser/devtools/search-clear-failed.svg new file mode 100644 index 00000000..d5202a55 --- /dev/null +++ b/LCARStrek/browser/devtools/search-clear-failed.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/search-clear.svg b/LCARStrek/browser/devtools/search-clear.svg new file mode 100644 index 00000000..b343c039 --- /dev/null +++ b/LCARStrek/browser/devtools/search-clear.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/LCARStrek/browser/devtools/tool-profiler-active.svg b/LCARStrek/browser/devtools/tool-profiler-active.svg new file mode 100644 index 00000000..bf0c54aa --- /dev/null +++ b/LCARStrek/browser/devtools/tool-profiler-active.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + diff --git a/LCARStrek/browser/preferences/aboutPermissions.css b/LCARStrek/browser/preferences/aboutPermissions.css index 879613f0..b00b3cd1 100644 --- a/LCARStrek/browser/preferences/aboutPermissions.css +++ b/LCARStrek/browser/preferences/aboutPermissions.css @@ -77,6 +77,9 @@ .pref-icon[type="geo"] { list-style-image: url("chrome://browser/skin/Geolocation-64.png"); } +.pref-icon[type="push"] { + list-style-image: url("chrome://browser/skin/Push-64.png"); +} .pref-icon[type="indexedDB"] { list-style-image: url("chrome://global/skin/icons/alert-question.gif"); } diff --git a/LCARStrek/browser/theme-switcher-icon.png b/LCARStrek/browser/theme-switcher-icon.png new file mode 100644 index 00000000..92cccdfa Binary files /dev/null and b/LCARStrek/browser/theme-switcher-icon.png differ diff --git a/LCARStrek/browser/theme-switcher-icon@2x.png b/LCARStrek/browser/theme-switcher-icon@2x.png new file mode 100644 index 00000000..6e0fb4cd Binary files /dev/null and b/LCARStrek/browser/theme-switcher-icon@2x.png differ