fourth part of syncing LCARStrek with Firefox 41 windows theme changes

diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css
index 0ccc9c69dd25b6f08ea4557647fc8908e3558fc9..a143766b471c576561fb9ee034b9530c8d784d93 100644 (file)
--- 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 e4070861eea3c2a7f5860c21e5fa61957e4e71d6..4433309c191b457cc4d1985e6055035546adf9d8 100644 (file)
--- 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 8a628ef4db6c07613c0d99f32ab7f5d5beeb34d8..ebc5a8e878b554dfc74aa906d70140fddefa7a00 100644 (file)
--- 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 (file)
index 0000000..455506b
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 920437f0bc3368a4b404ac03995772e99d9a102d..442086a314163167932578e3d338a5e223b2ce90 100644 (file)
--- 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 6cc0bdbdb17e7e169f2747050253c3e8dd70936b..d425c3abf5d7f5f5e92f0e8677ca5911ac8223f5 100644 (file)
--- 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 07c7e20d89a3792d0bd867ca3da7ddf0218d32e8..7c9a2f4929876802cc29d1096eac15073d369c3b 100644 (file)
--- 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 81053365745a8a551d2e98cb0a8b3c0f225775fb..ff809e24e62ce452a9a869f48368519dd4d2057a 100644 (file)
--- 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 a6f7eabc396e2848ecb8f768abb14f852a458588..bbe0e341fa4b61bb024d35dc4d1c10018de8726b 100644 (file)
--- 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 88fc40897f1699c5a0ce08aeba17cdc25e3c714c..7c11898a5895cf33e21e2642793e9358dce99fc3 100644 (file)
--- 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 77ab4d9b341b5ca00c2d288508e795b721c293ee..c13a26c9157f5614ce5fc1ec0a906bd4dd0341fe 100644 (file)
--- 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 201acf7824b9779c74f857f3931fdd4e729a039d..ab64840ec66e168f073b7cf7d9f7731162636b56 100644 (file)
--- 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 (file)
index 0000000..8861bb3
--- /dev/null
+++ b/LCARStrek/browser/devtools/tool-shadereditor.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#000000">
+    <path opacity="0.2" d="M2.6 2.8l10.7 10.7-10.7-.1z"/>
+    <path d="M11.4 10.5L5.9 5c-.3-.3-.8-.3-1 0-.3.3-.3.8 0 1l5.5 5.5c.1.1.3.2.5.2s.4-.1.5-.2c.2-.3.2-.7 0-1z"/>
+    <path opacity="0.5" d="M11.2 4.9H9.6c-.1 0-.1 0-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V5c.1-.1 0-.1-.1-.1zM11.3 8.7H9.7s-.1 0-.1.1l1.8 1.8.1-.1V8.8c0-.1-.1-.1-.2-.1zM9.4 6.7H7.8s-.1 0-.1.1l1.8 1.8.1-.1V6.9c0-.1-.1-.2-.2-.2zM7.5 4.8H5.9s-.1 0-.1.1l1.8 1.8.1-.1V5c-.1-.1-.1-.2-.2-.2z"/>
+    <path d="M14 11.9V3.6c.5-.2.9-.7.9-1.3 0-.8-.7-1.5-1.5-1.5-.7 0-1.3.5-1.4 1.2H3.9C3.8 1.3 3.2.8 2.5.8 1.7.8 1 1.5 1 2.3c0 .6.4 1.2 1 1.4v8.2c-.6.2-1 .7-1 1.4 0 .8.7 1.5 1.5 1.5.5 0 1-.3 1.3-.7h8.5c.3.4.7.7 1.3.7.8 0 1.5-.7 1.5-1.5-.2-.6-.6-1.2-1.1-1.4zM4 4h8v8H4V4z"/>
+</svg>
\ No newline at end of file

diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index e43e225a6a73a1ac19bea65d7e05329f2e65b6ee..1053a91e0dc7006742bdee694f207712858b213b 100644 (file)
--- 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 (file)
index 25cc9d7..0000000
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 (file)
index 0000000..d40e164
--- /dev/null
+++ b/LCARStrek/browser/devtools/webconsole.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="60" viewBox="0 0 72 60">
+  <defs>
+    <rect id="glyphShape-colorSwatch" width="8" height="8" ry="2" rx="2"/>
+    <rect id="glyphShape-colorSwatch-border" width="10" height="10" ry="2" rx="2"/>
+    <polygon id="glyphShape-errorX" points="9.9,8.5 8.5,9.9 6,7.4 3.6,9.8 2.2,8.4 4.6,6 2.2,3.6 3.6,2.2 6,4.6 8.4,2.2 9.8,3.6 7.4,6"/>
+    <path id="glyphShape-warningTriangle" d="M9.9,8.6l-3.1-6C6.6,2.2,6.3,2,6,2C5.7,2,5.4,2.2,5.2,2.5l-3.1,6C2,8.9,2,9.3,2.1,9.6C2.3,9.8,2.6,10,2.9,10 h6.1c0.4,0,0.6-0.2,0.8-0.4C10,9.3,10,8.9,9.9,8.6z"/>
+    <path id="glyphShape-exclamationPoint" d="M6,7.7c-0.6,0-1,0.4-1,0.8C5,9,5.4,9.3,6,9.3c0.6,0,1-0.4,1-0.8 C7,8.1,6.6,7.7,6,7.7z M6,7c0.6,0,1-0.4,1-1V5c0-0.6-0.4-1-1-1S5,4.4,5,5v1C5,6.6,5.4,7,6,7z"/>
+    <circle id="glyphShape-infoCircle" cx="6" cy="6" r="4"/>
+    <path id="glyphShape-infoGlyph" d="M6,6C5.4,6,5,6.4,5,7v1c0,0.6,0.4,1,1,1s1-0.4,1-1V7C7,6.4,6.6,6,6,6z M6,5c0.6,0,1-0.4,1-1S6.6,3,6,3S5,3.4,5,4S5.4,5,6,5z"/>
+    <style>
+      .icon-colorSwatch-border {
+        fill: #fff;
+        fill-opacity: .7;
+      }
+      .icon-colorSwatch-network {
+        fill: #FFCF00;
+      }
+      .icon-colorSwatch-css {
+        fill: #9C9CFF;
+      }
+      .icon-colorSwatch-js {
+        fill: #FF9F00;
+      }
+      .icon-colorSwatch-logging {
+        fill: #A09090;
+      }
+      .icon-colorSwatch-security {
+        fill: #FF0000;
+      }
+      .icon-glyphOverlay {
+        fill: #fff;
+      }
+
+      #icon-indicator-input {
+        fill: #A09090;
+      }
+      #icon-indicator-output {
+        fill: #A09090;
+      }
+      #light-icons:target #icon-indicator-input {
+        fill: #A09090;
+      }
+      #light-icons:target #icon-indicator-output {
+        fill: #A09090;
+      }
+    </style>
+  </defs>
+  <g id="icon-colorSwatch-network">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-network" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-css" transform="translate(0 12)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-css" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-js" transform="translate(0 24)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-js" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-logging" transform="translate(0 36)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-logging" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-security" transform="translate(0 48)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-security" x="2" y="2"/>
+  </g>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-network" class="icon-colorSwatch-network" transform="translate(12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-css" class="icon-colorSwatch-css" transform="translate(12 12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-js" class="icon-colorSwatch-js" transform="translate(12 24)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-logging" class="icon-colorSwatch-logging" transform="translate(12 36)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-security" class="icon-colorSwatch-security" transform="translate(12 48)"/>
+  <g id="icon-warningTriangle-css" transform="translate(24 12)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-css"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-js" transform="translate(24 24)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-js"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-logging" transform="translate(24 36)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-security" transform="translate(24 48)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-security"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-infoCircle-logging" transform="translate(36 36)">
+    <use xlink:href="#glyphShape-infoCircle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-infoGlyph" class="icon-glyphOverlay"/>
+  </g>
+  <g id="light-icons">
+    <path id="icon-indicator-input" d="M6.5,1.2L5.4,2.3L9,6L5.3,9.7l1.1,1.1L11,6L6.5,1.2z M1.5,1.2 L0.4,2.3L4,6L0.3,9.7l1.1,1.1L6,6L1.5,1.2z" transform="translate(48 36)"/>
+    <polygon id="icon-indicator-output" points="10,5 4.3,5 6.8,2.4 5.5,1.2 1,6 5.5,10.8 6.9,9.6 4.3,7 10,7" transform="translate(60 36)"/>
+  </g>
+</svg>
\ No newline at end of file

diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css
index 9b3e09cacc95175fcf8cf1f86cefeb4f8e53693d..5cb8592ab0533b3cba48ad3f58eaccc4c4b4a7d0 100644 (file)
--- 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 (file)
index 0000000..5ce3b76
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 (file)
index 0000000..d484265
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 (file)
index 0000000..b8f0a80
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 (file)
index 0000000..f3eb362
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 (file)
index 0000000..d1d5256
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 (file)
index 0000000..9e91d02
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 deecadfe374a452f4d9efafdbd1657e293ec32f6..1a21a0cc125cdf87409b176a9bbe492dd0fb2dae 100644 (file)
--- 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 (file)
index 0000000..375104e
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 (file)
index 0000000..82e591f
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 (file)
index 0000000..7c8c600
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 (file)
index 0000000..d806298
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 f02dd5fcf22c9f6564481cb34d903e4246ecdb90..413ddde117d1aaf09ebf225355cfe2fb77da7990 100644 (file)
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 (file)
index 0000000..19cbdf2
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 (file)
index 0000000..127298e
Binary files /dev/null and b/LCARStrek/browser/webRTC-sharingMicrophone-16@2x.png differ