From: Robert Kaiser Date: Tue, 29 Dec 2015 21:10:46 +0000 (+0100) Subject: fourth part of syncing LCARStrek with Firefox 41 windows theme changes X-Git-Tag: LCARStrek-2.38~3 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=2e389898f68ebe2e0fd7c7b50ead1dbd3c082405 fourth part of syncing LCARStrek with Firefox 41 windows theme changes --- diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css index 0ccc9c69..a143766b 100644 --- a/LCARStrek/browser/aboutNetError.css +++ b/LCARStrek/browser/aboutNetError.css @@ -6,7 +6,7 @@ body { display: flex; - box-sizing: padding-box; + box-sizing: border-box; min-height: 100vh; padding: 0 48px; align-items: center; @@ -33,11 +33,16 @@ ul { max-width: 512px; } -#errorTitleText { +#errorTitle { background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 1.2em; - -moz-margin-start: -2em; - -moz-padding-start: 2em; + background-size: 3em; + -moz-margin-start: -5em; + -moz-padding-start: 5em; +} + +#errorTitleText { + border-bottom: 1px solid #A09090; + padding-bottom: 0.4em; } #errorTitleText[sslv3] { @@ -58,7 +63,7 @@ ul { } @media (max-width: 675px) { - #errorTitleText { + #errorTitle { padding-top: 0; background-image: none; -moz-padding-start: 0; diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index e4070861..4433309c 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -1793,7 +1793,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but list-style-image: url(chrome://browser/skin/undoCloseTab.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #alltabs_undoCloseTab { list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png); } @@ -2367,6 +2367,52 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: rect(14px, 28px, 28px, 14px); } +@media (min-resolution: 1.1dppx) { + #urlbar > toolbarbutton { + list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); + } + + #urlbar-go-button { + -moz-image-region: rect(0, 84px, 28px, 56px); + } + + #urlbar-go-button:hover { + -moz-image-region: rect(28px, 84px, 56px, 56px); + } + + #urlbar-go-button:hover:active { + -moz-image-region: rect(56px, 84px, 84px, 56px); + } + + #urlbar-reload-button { + -moz-image-region: rect(0, 28px, 28px, 0); + } + + #urlbar-reload-button:not([disabled]):hover { + -moz-image-region: rect(28px, 28px, 56px, 0); + } + + #urlbar-reload-button:not([disabled]):hover:active { + -moz-image-region: rect(56px, 28px, 84px, 0); + } + + #urlbar-stop-button { + -moz-image-region: rect(0, 56px, 28px, 28px); + } + + #urlbar-stop-button:not([disabled]):hover { + -moz-image-region: rect(28px, 56px, 56px, 28px); + } + + #urlbar-stop-button:hover:active { + -moz-image-region: rect(56px, 56px, 84px, 28px); + } + + #urlbar > toolbarbutton > .toolbarbutton-icon { + width: 14px; + } +} + /* popup blocker button */ #page-report-button { @@ -3068,115 +3114,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { background-color: #008484; } -/* ::::: Identity Indicator Styling ::::: */ - -/* Popup Icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); -} - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); -} - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); -} - -/* Popup Body Text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; -} - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; -} - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 1.2em; -} - -#identity-popup-content-host { - margin-top: 3px; - margin-bottom: 5px; - font-weight: bold; - max-width: 300px; -} - -#identity-popup-content-owner { - margin-top: 4px; - margin-bottom: 0 !important; - font-weight: bold; - max-width: 300px; -} - -.verifiedDomain > #identity-popup-content-owner { - font-weight: normal; -} - -#identity-popup-content-verifier { - margin: 4px 0 2px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -24px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure24.png"); -} - -#identity-popup-help-icon { - border: none; - margin: 7px 0 0 -3px; - background: none; - min-width: 0; - list-style-image: url("chrome://global/skin/icons/question-16.png"); - cursor: pointer; -} - -#identity-popup-help-icon > .button-box > .button-text { - display: none; -} - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; -} - -#identity-popup-more-info-button { - margin-top: 6px; - margin-bottom: 0; - -moz-margin-end: 0; -} - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - -#identity-popup-container { - min-width: 280px; - padding: 10px; -} - -#identity-popup-button-container { -/* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/ - padding: 10px; - margin-top: 5px; -} - /* === BEGIN notification-icons.inc.css === */ .popup-notification-icon { @@ -3489,6 +3426,62 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled 100% { transform: translateX(0); } } +/* HiDPI notification icons */ +@media (min-resolution: 1.1dppx) { +/* #notification-popup-box { + border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; + } +*/ + .notification-anchor-icon { + list-style-image: url(chrome://global/skin/icons/information-32.png); + } + + .webRTC-shareDevices-notification-icon, + #webRTC-shareDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); + } + + .webRTC-sharingDevices-notification-icon, + #webRTC-sharingDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); + } + + .webRTC-shareMicrophone-notification-icon, + #webRTC-shareMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); + } + + .webRTC-sharingMicrophone-notification-icon, + #webRTC-sharingMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); + } + + .webRTC-shareScreen-notification-icon, + #webRTC-shareScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); + } + + .webRTC-sharingScreen-notification-icon, + #webRTC-sharingScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingDevices"], + .popup-notification-icon[popupid="webRTC-shareDevices"] { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingMicrophone"], + .popup-notification-icon[popupid="webRTC-shareMicrophone"] { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingScreen"], + .popup-notification-icon[popupid="webRTC-shareScreen"] { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); + } +} + /* === END notification-icons.inc.css === */ .popup-notification-body[popupid="addon-progress"], @@ -4396,10 +4389,6 @@ html|*#gcli-output-frame { border: 0; } -#social-undoactivation-button { - -moz-margin-start: 0; /* override default label margin to match description margin */ -} - #socialActivatedNotification .popup-notification-button-container { margin-left: 6px; } @@ -4678,7 +4667,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } @@ -4836,6 +4824,41 @@ notification.pluginVulnerable .messageImage { /* === BEGIN login-doorhanger.inc.css === */ +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; +} + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); +} + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: hsla(240,39%,100%,.1); +} + #login-fill-testing { color: #FF0000; font-weight: bold; @@ -4870,6 +4893,15 @@ notification.pluginVulnerable .messageImage { color: #A09090; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid #9C9CFF; + -moz-margin-start: 38px; +} + /* === END login-doorhanger.inc.css === */ /* === BEGIN customizeMode.inc.css === */ @@ -5077,6 +5109,25 @@ notification.pluginVulnerable .messageImage { background-color: #FF9F00; } +@media (min-resolution: 1.1dppx) { + #customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); + -moz-image-region: rect(0, 48px, 48px, 0); + } + + #customization-titlebar-visibility-button:hover { + -moz-image-region: rect(48px, 48px, 96px, 0); + } + + #customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 96px, 48px, 48px); + } + + #customization-titlebar-visibility-button[checked]:hover { + -moz-image-region: rect(48px, 96px, 96px, 48px); + } +} + #main-window[customize-entered] #customization-panel-container { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-position: left top; @@ -5831,6 +5882,21 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { -moz-image-region: rect(36px, 144px, 54px, 126px); } +#context-bookmarkpage[starred=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */ + -moz-image-region: rect(0px, 162px, 18px, 144px); +} + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */ + -moz-image-region: rect(18px, 162px, 36px, 144px); +} + +#context-bookmarkpage[starred=true][disabled=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */ + -moz-image-region: rect(36px, 162px, 54px, 144px); +} + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css index 8a628ef4..ebc5a8e8 100644 --- a/LCARStrek/browser/controlcenter/panel.css +++ b/LCARStrek/browser/controlcenter/panel.css @@ -1,26 +1,68 @@ -#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-content-owner, -#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier, -#identity-popup-securityView:not(.unknownIdentity):not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental, -#identity-popup-security-content:not(.verifiedIdentity):not(.verifiedDomain) > .identity-popup-connection-secure, -#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-securityView-header > .identity-popup-connection-secure, -#identity-popup-securityView:not(.unknownIdentity) > #identity-popup-securityView-header > .identity-popup-connection-not-secure, -#identity-popup-securityView:not(.chromeUI) > #identity-popup-securityView-header > .identity-popup-connection-internal, -#identity-popup-security-content:not(.unknownIdentity) > .identity-popup-connection-not-secure, -#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-securityView-connection, -#identity-popup-security-content:not(.chromeUI) > .identity-popup-connection-internal, -#identity-popup-security-content.chromeUI + .identity-popup-expander { +/* 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/. */ + +/* === BEGIN panel.inc.css === */ + +/* Hide all conditional elements by default. */ +:-moz-any([when-connection],[when-mixedcontent],[when-ciphers],[when-loginforms]) { + display: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +/* Show insecure login forms messages when needed. */ +#identity-popup[loginforms=insecure] [when-loginforms=insecure], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: inherit; +} + +/* Hide redundant messages based on insecure login forms presence. */ +#identity-popup[loginforms=secure] [and-when-loginforms=insecure] { + display: none; +} +#identity-popup[loginforms=insecure] [and-when-loginforms=secure] { display: none; } -/* PANEL */ +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-body:-moz-any([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} #identity-popup, -.panel-viewstack[viewtype="main"]:not([transitioning]) > .panel-mainview[panelid=identity-popup] > #identity-popup-mainView { +#identity-popup:not([panelopen]) .panel-viewstack[viewtype="main"]:not([transitioning]) #identity-popup-mainView { /* Tiny hack to ensure the panel shrinks back to its original size after closing a subview that is bigger than the main view. */ max-height: 0; } +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist, +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) { + -moz-user-focus: ignore; +} + #identity-popup > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } @@ -50,7 +92,7 @@ } .identity-popup-section:not(:first-child) { - border-top: 1px solid #A09090; + border-top: 1px solid #A09090; /*var(--panel-separator-color);*/ } #identity-popup-securityView, @@ -267,11 +309,12 @@ /* FOOTER BUTTONS */ #identity-popup-button-container { - background-color: #000000; + background: #000000; border-top: 1px solid #A09090; } #identity-popup-more-info-button { + margin-top: 5px; } /* #identity-popup-more-info-button:hover { @@ -279,4 +322,83 @@ #identity-popup-more-info-button:hover:active { } -*/ \ No newline at end of file +*/ + +/* === END panel.inc.css === */ + +/* Popup Icons */ +#identity-popup-icon { + height: 64px; + width: 64px; + padding: 0; + list-style-image: url("chrome://browser/skin/identity.png"); + -moz-image-region: rect(0px, 64px, 64px, 0px); +} + +#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(64px, 64px, 128px, 0px); +} + +#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { + -moz-image-region: rect(128px, 64px, 192px, 0px); +} + +/* Popup Body Text */ +.identity-popup-description { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 2px 0 4px; +} + +.identity-popup-label { + white-space: pre-wrap; + -moz-padding-start: 15px; + margin: 0; +} + +#identity-popup-content-host, +#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { + font-size: 1.2em; +} + +#identity-popup-content-host { + margin-top: 3px; + margin-bottom: 5px; + font-weight: bold; + max-width: 300px; +} + +#identity-popup-content-owner { + margin-top: 4px; + margin-bottom: 0 !important; + font-weight: bold; + max-width: 300px; +} + +.verifiedDomain > #identity-popup-content-owner { + font-weight: normal; +} + +#identity-popup-content-verifier { + margin: 4px 0 2px; +} + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { + margin-top: 10px; + -moz-margin-start: -24px; +} + +#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , +#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { + list-style-image: url("chrome://browser/skin/Secure24.png"); +} + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +#identity-popup-container { + min-width: 280px; + padding: 10px; +} diff --git a/LCARStrek/browser/customizableui/customize-titleBar-toggle@2x.png b/LCARStrek/browser/customizableui/customize-titleBar-toggle@2x.png new file mode 100644 index 00000000..455506b3 Binary files /dev/null and b/LCARStrek/browser/customizableui/customize-titleBar-toggle@2x.png differ diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css index 920437f0..442086a3 100644 --- a/LCARStrek/browser/customizableui/panelUIOverlay.css +++ b/LCARStrek/browser/customizableui/panelUIOverlay.css @@ -434,6 +434,8 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-it /* has the minum size we want, but no padding/margin. */ .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon { + width: 32px; + height: 32px; min-width: 32px; min-height: 32px; margin: 0; diff --git a/LCARStrek/browser/devtools/animationinspector.css b/LCARStrek/browser/devtools/animationinspector.css index 6cc0bdbd..d425c3ab 100644 --- a/LCARStrek/browser/devtools/animationinspector.css +++ b/LCARStrek/browser/devtools/animationinspector.css @@ -1,3 +1,14 @@ +/* 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/. */ + +/* Animation-inspector specific theme variables */ + +.theme-dark, +.theme-light { + --even-animation-timeline-background-color: rgba(160,144,144,0.03); +} + html { height: 100%; } @@ -32,6 +43,13 @@ body { min-height: 20px; } +/* The main animations container */ + +#players { + height: calc(100% - 20px); + overflow: auto; +} + /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -44,13 +62,6 @@ body { display: none; } -/* The animation players container */ - -#players { - flex: 1; - overflow: auto; -} - /* Element picker and toggle-all buttons */ #element-picker, @@ -99,6 +110,156 @@ body { } } +/* Animation timeline component */ + +.animation-timeline { + height: 100%; + overflow: hidden; + /* The timeline gets its background-image from a canvas element created in + /browser/devtools/animationinspector/utils.js drawGraphElementBackground + thanks to document.mozSetImageElement("time-graduations", canvas) + This is done so that the background can be built dynamically from script */ + background-image: -moz-element(#time-graduations); + background-repeat: repeat-y; + /* The animations are drawn 150px from the left edge so that animated nodes + can be displayed in a sidebar */ + background-position: 150px 0; + display: flex; + flex-direction: column; +} + +.animation-timeline .time-header { + margin-left: 150px; + height: 20px; + overflow: hidden; + position: relative; + border-bottom: 1px solid var(--theme-splitter-color); +} + +.animation-timeline .time-header .time-tick { + position: absolute; + top: 3px; +} + +.animation-timeline .animations { + width: 100%; + overflow-y: auto; + overflow-x: hidden; + margin: 0; + padding: 0; + list-style-type: none; +} + +/* Animation block widgets */ + +.animation-timeline .animation { + margin: 4px 0; + height: 20px; + position: relative; +} + +.animation-timeline .animation:nth-child(2n) { + background-color: var(--even-animation-timeline-background-color); +} + +.animation-timeline .animation .target { + width: 150px; + overflow: hidden; + height: 100%; +} + +.animation-timeline .animation-target { + background-color: transparent; +} + +.animation-timeline .animation .time-block { + position: absolute; + top: 0; + left: 150px; + right: 0; + height: 100%; +} + +/* Animation iterations */ + +.animation-timeline .animation .iterations { + position: relative; + height: 100%; + border: 1px solid var(--theme-highlight-lightorange); + box-sizing: border-box; + background: var(--theme-contrast-background); + /* Iterations are displayed with a repeating linear-gradient which size is + dynamically changed from JS */ + background-image: + linear-gradient(to right, + var(--theme-highlight-lightorange) 0, + var(--theme-highlight-lightorange) 1px, + transparent 1px, + transparent 2px); + background-repeat: repeat-x; + background-position: -1px 0; +} + +.animation-timeline .animation .iterations.infinite { + border-right-width: 0; +} + +.animation-timeline .animation .iterations.infinite::before, +.animation-timeline .animation .iterations.infinite::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-right: 4px solid var(--theme-body-background); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + +.animation-timeline .animation .iterations.infinite::after { + bottom: 0; + top: unset; +} + +.animation-timeline .animation .animation-title { + height: 1.5em; + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +.animation-timeline .animation .delay { + position: absolute; + top: 0; + height: 100%; + background-image: linear-gradient(to bottom, + transparent, + transparent 9px, + var(--theme-highlight-lightorange) 9px, + var(--theme-highlight-lightorange) 11px, + transparent 11px, + transparent); +} + +.animation-timeline .animation .delay::before { + position: absolute; + content: ""; + left: 0; + width: 2px; + height: 8px; + top: 50%; + margin-top: -4px; + background: var(--theme-highlight-lightorange); +} + +.animation-timeline .animation .name { + position: absolute; + z-index: 1; + padding: 2px; + white-space: nowrap; +} + /* Animation target node gutter, contains a preview of the dom node */ .animation-target { diff --git a/LCARStrek/browser/devtools/common.css b/LCARStrek/browser/devtools/common.css index 07c7e20d..7c9a2f49 100644 --- a/LCARStrek/browser/devtools/common.css +++ b/LCARStrek/browser/devtools/common.css @@ -26,6 +26,11 @@ notification { font-size: var(--monospace-font-size); } +/* Bottom-docked toolbox minimize transition */ +.devtools-toolbox-bottom-iframe { + transition: margin-bottom .1s; +} + /* Splitters */ .devtools-horizontal-splitter { @@ -43,6 +48,11 @@ notification { cursor: e-resize; } +.devtools-horizontal-splitter.disabled, +.devtools-side-splitter.disabled { + pointer-events: none; +} + /* In-tools sidebar */ .devtools-toolbox-side-iframe { diff --git a/LCARStrek/browser/devtools/computedview.css b/LCARStrek/browser/devtools/computedview.css index 81053365..ff809e24 100644 --- a/LCARStrek/browser/devtools/computedview.css +++ b/LCARStrek/browser/devtools/computedview.css @@ -153,7 +153,7 @@ body { #root .devtools-toolbar { width: 100%; - display: -moz-box; + display: flex; } .link { diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css index a6f7eabc..bbe0e341 100644 --- a/LCARStrek/browser/devtools/dark-theme.css +++ b/LCARStrek/browser/devtools/dark-theme.css @@ -28,6 +28,7 @@ --theme-splitter-color: #9C9CFF; --theme-comment: #A09090; + --theme-sidebar-background: #000000; --theme-contrastsidebar-background: #A09090; --theme-contrastsidebar-color: #000000; --theme-contrastsidebar-bordercolor: #000000; @@ -606,6 +607,7 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); + color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -648,6 +650,11 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +.devtools-button[disabled]::before, +.devtools-button:disabled::before { + opacity: 0.5; +} + @media (min-resolution: 1.25dppx) { .devtools-button::before { background-size: 32px; @@ -691,8 +698,8 @@ div.CodeMirror span.eval-text { /* Searchbox is a div container element for a search input element */ .devtools-searchbox { - display: -moz-box; - -moz-box-flex: 1; + display: flex; + flex: 1; position: relative; } diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css index 88fc4089..7c11898a 100644 --- a/LCARStrek/browser/devtools/netmonitor.css +++ b/LCARStrek/browser/devtools/netmonitor.css @@ -9,6 +9,12 @@ window { /* === BEGIN netmonitor.inc.css === */ +:root.theme-dark, +:root.theme-light { + --table-splitter-color: #9C9CFF; + --table-zebra-background: rgba(255,159,0,0.1); +} + #requests-menu-empty-notice { margin: 0; padding: 12px; @@ -56,7 +62,7 @@ window { .requests-menu-header:not(:last-child), .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid #9C9CFF; + -moz-border-end: 1px solid var(--table-splitter-color); } .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), @@ -145,7 +151,7 @@ window { } .requests-menu-icon { - outline: 1px solid #A09090; + outline: 1px solid var(--table-splitter-color); } .requests-menu-file { @@ -223,20 +229,20 @@ label.requests-menu-status-code { } box.requests-menu-status:not([code]) { - background-color: #A09090; /* dark grey */ + background-color: var(--theme-content-color2); } box.requests-menu-status[code="cached"] { - border: 2px solid #A09090; /* dark grey */ + border: 2px solid var(--theme-content-color2); background-color: transparent; } box.requests-menu-status[code^="1"] { - background-color: #9C9CFF; /* light blue */ + background-color: var(---theme-highlight-blue); } box.requests-menu-status[code^="2"] { - background-color: #008484; /* green */ + background-color: var(--theme-highlight-green); } /* 3xx are triangles */ @@ -246,18 +252,18 @@ box.requests-menu-status[code^="3"] { height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid #FF9F00; /* light orange */ + border-bottom: 10px solid var(--theme-highlight-lightorange); border-radius: 0; } /* 4xx and 5xx are squares - error codes */ box.requests-menu-status[code^="4"] { - background-color: #FF0000; /* red */ + background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } box.requests-menu-status[code^="5"] { - background-color: #6000CF; /* pink? */ + background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); } @@ -373,6 +379,16 @@ box.requests-menu-status[code^="5"] { /* SideMenuWidget */ +#network-table .side-menu-widget-empty-text, +#network-table .side-menu-widget-container { + background-color: var(--theme-body-background); +} + +#network-table .side-menu-widget-item { + border-top-color: transparent; + border-bottom-color: transparent; +} + .side-menu-widget-item-contents { padding: 0px; } @@ -382,7 +398,11 @@ box.requests-menu-status[code^="5"] { } .side-menu-widget-item:not(.selected)[odd] { - background: rgba(255,159,0,0.1); + background-color: var(--table-zebra-background); +} + +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); } /* Network request details */ @@ -424,10 +444,17 @@ box.requests-menu-status[code^="5"] { /* Network request details tabpanels */ .tabpanel-content { - background-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); +} + +.theme-dark .tabpanel-content { color: var(--theme-body-color); } +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + /* Summary tabpanel */ .tabpanel-summary-container { @@ -563,9 +590,9 @@ box.requests-menu-status[code^="5"] { /* Footer */ #requests-menu-footer { - border-top: 1px solid #9C9CFF; padding-top: 3px; background-color: var(--theme-toolbar-background); + border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -589,9 +616,6 @@ box.requests-menu-status[code^="5"] { .requests-menu-footer-button { } -.requests-menu-footer-button:hover { -} - .requests-menu-footer-button:hover:active { } @@ -661,7 +685,7 @@ box.requests-menu-status[code^="5"] { #network-statistics-charts { min-height: 1px; - background-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); } #network-statistics-charts .pie-chart-container { diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css index 77ab4d9b..c13a26c9 100644 --- a/LCARStrek/browser/devtools/performance.css +++ b/LCARStrek/browser/devtools/performance.css @@ -834,24 +834,19 @@ call-tree-item:not([origin="content"]) .call-tree-line { #jit-optimizations-view .opt-icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 5px 6px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; -} -#jit-optimizations-view .opt-icon[severity=warning]::before { - background-position: -16px -16px; + margin: 5px 6px 0 0; + max-height: 12px; } -@media (min-resolution: 1.25dppx) { - #jit-optimizations-view .opt-icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +#jit-optimizations-view .opt-icon[severity=warning]::before { + background-position: -24px -24px; } /** @@ -866,21 +861,18 @@ call-tree-item:not([origin="content"]) .call-tree-line { */ menuitem.experimental-option::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 2px 5px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; - background-position: -16px -16px; -} -@media (min-resolution: 1.25dppx) { - menuitem.experimental-option::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } + + background-position: -24px -24px; + margin: 2px 5px 0 0; + max-height: 12px; } + #performance-options-menupopup:not(.experimental-enabled) .experimental-option, #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; diff --git a/LCARStrek/browser/devtools/ruleview.css b/LCARStrek/browser/devtools/ruleview.css index 201acf78..ab64840e 100644 --- a/LCARStrek/browser/devtools/ruleview.css +++ b/LCARStrek/browser/devtools/ruleview.css @@ -49,7 +49,11 @@ padding: 2px 4px; } -/* User agent styles are not editable, display them differently */ +/** + * Display rules that don't match the current selected element and uneditable + * user agent styles differently + */ +.ruleview-rule[unmatched=true], .ruleview-rule[uneditable=true] { background: var(--theme-toolbar-background); } diff --git a/LCARStrek/browser/devtools/tool-shadereditor.svg b/LCARStrek/browser/devtools/tool-shadereditor.svg new file mode 100644 index 00000000..8861bb3c --- /dev/null +++ b/LCARStrek/browser/devtools/tool-shadereditor.svg @@ -0,0 +1,9 @@ + + + + + + + \ No newline at end of file diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index e43e225a..1053a91e 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -38,10 +38,11 @@ a { box-sizing: border-box; } +.message > .prefix, .message > .timestamp { flex: none; color: #8050B0; - margin: 4px 6px 0 0; + margin: 3px 6px 0 0; } .message > .indent { @@ -58,21 +59,15 @@ a { .message > .icon::before { content: ""; - background-image: url("chrome://browser/skin/devtools/webconsole.png"); - background-position: 8px 8px; + background-image: url("chrome://browser/skin/devtools/webconsole.svg"); + background-position: 12px 12px; background-repeat: no-repeat; - background-size: 48px 40px; - width: 8px; - height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; } -@media (min-resolution: 1.25dppx) { - .message > .icon::before { - background-image: url("chrome://browser/skin/devtools/webconsole@2x.png"); - } -} - .message > .message-body-wrapper { flex: 1 1 100%; margin: 3px; @@ -266,7 +261,7 @@ a { } .message[category=network][severity=error] > .icon::before { - background-position: -8px 0; + background-position: -12px 0; } .message[category=network] > .message-body { @@ -323,11 +318,11 @@ a { } .message[category=cssparser][severity=error] > .icon::before { - background-position: -8px -8px; + background-position: -12px -12px; } .message[category=cssparser][severity=warn] > .icon::before { - background-position: -16px -8px; + background-position: -24px -12px; } /* JS styles */ @@ -341,11 +336,11 @@ a { } .message[category=exception][severity=error] > .icon::before { - background-position: -8px -16px; + background-position: -12px -24px; } .message[category=exception][severity=warn] > .icon::before { - background-position: -16px -16px; + background-position: -24px -24px; } /* Web Developer styles */ @@ -360,15 +355,15 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before { - background-position: -8px -24px; + background-position: -12px -36px; } .message[category=console][severity=warn] > .icon::before { - background-position: -16px -24px; + background-position: -24px -36px; } .message[category=console][severity=info] > .icon::before { - background-position: -24px -24px; + background-position: -36px -36px; } /* Input and output styles */ @@ -378,11 +373,11 @@ a { } .message[category=input] > .icon::before { - background-position: -32px -24px; + background-position: -48px -36px; } .message[category=output] > .icon::before { - background-position: -40px -24px; + background-position: -60px -36px; } /* JSTerm Styles */ @@ -450,11 +445,11 @@ a { } .message[category=security][severity=error] > .icon::before { - background-position: -8px -32px; + background-position: -12px -48px; } .message[category=security][severity=warn] > .icon::before { - background-position: -16px -32px; + background-position: -24px -48px; } .navigation-marker { diff --git a/LCARStrek/browser/devtools/webconsole.png b/LCARStrek/browser/devtools/webconsole.png deleted file mode 100644 index 25cc9d7d..00000000 Binary files a/LCARStrek/browser/devtools/webconsole.png and /dev/null differ diff --git a/LCARStrek/browser/devtools/webconsole.svg b/LCARStrek/browser/devtools/webconsole.svg new file mode 100644 index 00000000..d40e1641 --- /dev/null +++ b/LCARStrek/browser/devtools/webconsole.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css index 9b3e09ca..5cb8592a 100644 --- a/LCARStrek/browser/downloads/indicator.css +++ b/LCARStrek/browser/downloads/indicator.css @@ -19,28 +19,35 @@ /*** Main indicator icon ***/ +@media not all and (min-resolution: 1.1dppx) { + #downloads-indicator-icon { + --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); + --downloads-indicator-icon-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); + --downloads-indicator-icon-attention: url("chrome://browser/skin/downloads/download-glow.png"); + } +} + + #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), - 0, 198, 18, 180) center no-repeat; - min-width: 18px; - min-height: 18px; + background: var(--downloads-indicator-icon) center no-repeat; + width: 18px; + height: 18px; + background-size: 18px; } #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), - 18, 198, 36, 180) center no-repeat; + background-image: var(--downloads-indicator-icon-hover); color: #000000; } toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon { -/* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), - 0, 108, 18, 90) center no-repeat;*/ +/* background-image: var(--downloads-indicator-icon-inverted); */ } #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + background-image: var(--downloads-indicator-icon-attention); } #downloads-button[cui-areatype="menu-panel"][attention] { @@ -52,20 +59,18 @@ toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-an equivalent to -moz-any([progress], [paused]). */ #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), - 0, 198, 18, 180) center no-repeat; + background: var(--downloads-indicator-icon) center no-repeat; background-size: 12px; } #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); + background-image: var(--downloads-indicator-icon-attention); } #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), - 18, 198, 36, 180) center no-repeat; + background-image: var(--downloads-indicator-icon-hover); background-size: 12px; } diff --git a/LCARStrek/browser/menuPanel-customize@2x.png b/LCARStrek/browser/menuPanel-customize@2x.png new file mode 100644 index 00000000..5ce3b766 Binary files /dev/null and b/LCARStrek/browser/menuPanel-customize@2x.png differ diff --git a/LCARStrek/browser/menuPanel-exit@2x.png b/LCARStrek/browser/menuPanel-exit@2x.png new file mode 100644 index 00000000..d4842654 Binary files /dev/null and b/LCARStrek/browser/menuPanel-exit@2x.png differ diff --git a/LCARStrek/browser/menuPanel-help@2x.png b/LCARStrek/browser/menuPanel-help@2x.png new file mode 100644 index 00000000..b8f0a80f Binary files /dev/null and b/LCARStrek/browser/menuPanel-help@2x.png differ diff --git a/LCARStrek/browser/menuPanel-small@2x.png b/LCARStrek/browser/menuPanel-small@2x.png new file mode 100644 index 00000000..f3eb3622 Binary files /dev/null and b/LCARStrek/browser/menuPanel-small@2x.png differ diff --git a/LCARStrek/browser/menuPanel@2x.png b/LCARStrek/browser/menuPanel@2x.png new file mode 100644 index 00000000..d1d52568 Binary files /dev/null and b/LCARStrek/browser/menuPanel@2x.png differ diff --git a/LCARStrek/browser/reload-stop-go@2x.png b/LCARStrek/browser/reload-stop-go@2x.png new file mode 100644 index 00000000..9e91d028 Binary files /dev/null and b/LCARStrek/browser/reload-stop-go@2x.png differ diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css index deecadfe..1a21a0cc 100644 --- a/LCARStrek/browser/searchbar.css +++ b/LCARStrek/browser/searchbar.css @@ -117,6 +117,7 @@ searchbar[oneoffui] .search-go-button { list-style-image: url("chrome://browser/skin/reload-stop-goFx.png"); -moz-image-region: rect(0, 42px, 14px, 28px); + width: 14px; } searchbar[oneoffui] .search-go-button:hover { @@ -131,6 +132,20 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon transform: scaleX(-1); } +@media (min-resolution: 1.1dppx) { + searchbar[oneoffui] .search-go-button { + list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); + -moz-image-region: rect(0, 84px, 28px, 56px); + } + + searchbar[oneoffui] .search-go-button:hover { + -moz-image-region: rect(28px, 84px, 56px, 56px); + } + + searchbar[oneoffui] .search-go-button:hover:active { + -moz-image-region: rect(56px, 84px, 84px, 56px); + } +} .search-panel-current-engine { border-top: none !important; @@ -181,7 +196,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon } .searchbar-engine-one-off-item:not(.last-row) { - box-sizing: padding-box; + box-sizing: content-box; border-bottom: 1px solid #9C9CFF; } diff --git a/LCARStrek/browser/webRTC-shareDevice-16@2x.png b/LCARStrek/browser/webRTC-shareDevice-16@2x.png new file mode 100644 index 00000000..375104e0 Binary files /dev/null and b/LCARStrek/browser/webRTC-shareDevice-16@2x.png differ diff --git a/LCARStrek/browser/webRTC-shareDevice-64@2x.png b/LCARStrek/browser/webRTC-shareDevice-64@2x.png new file mode 100644 index 00000000..82e591f6 Binary files /dev/null and b/LCARStrek/browser/webRTC-shareDevice-64@2x.png differ diff --git a/LCARStrek/browser/webRTC-shareMicrophone-16@2x.png b/LCARStrek/browser/webRTC-shareMicrophone-16@2x.png new file mode 100644 index 00000000..7c8c6000 Binary files /dev/null and b/LCARStrek/browser/webRTC-shareMicrophone-16@2x.png differ diff --git a/LCARStrek/browser/webRTC-shareMicrophone-64@2x.png b/LCARStrek/browser/webRTC-shareMicrophone-64@2x.png new file mode 100644 index 00000000..d8062983 Binary files /dev/null and b/LCARStrek/browser/webRTC-shareMicrophone-64@2x.png differ diff --git a/LCARStrek/browser/webRTC-shareScreen-64@2x.png b/LCARStrek/browser/webRTC-shareScreen-64@2x.png index f02dd5fc..413ddde1 100644 Binary files a/LCARStrek/browser/webRTC-shareScreen-64@2x.png and b/LCARStrek/browser/webRTC-shareScreen-64@2x.png differ diff --git a/LCARStrek/browser/webRTC-sharingDevice-16@2x.png b/LCARStrek/browser/webRTC-sharingDevice-16@2x.png new file mode 100644 index 00000000..19cbdf24 Binary files /dev/null and b/LCARStrek/browser/webRTC-sharingDevice-16@2x.png differ diff --git a/LCARStrek/browser/webRTC-sharingMicrophone-16@2x.png b/LCARStrek/browser/webRTC-sharingMicrophone-16@2x.png new file mode 100644 index 00000000..127298e2 Binary files /dev/null and b/LCARStrek/browser/webRTC-sharingMicrophone-16@2x.png differ