-moz-image-region: rect(18px, 306px, 36px, 288px);
}
-#email-link-button[cui-areatype="toolbar"] {
- -moz-image-region: rect(0, 306px, 18px, 288px);
- /* This is temporary until we have an email-link icon (Bug 932235) */
- transform: scale(-1, -1);
-}
-
-#email-link-button[cui-areatype="toolbar"]:hover {
- -moz-image-region: rect(18px, 306px, 36px, 288px);
-}
-
#characterencoding-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 324px, 18px, 306px);
}
-moz-image-region: rect(18px, 342px, 36px, 324px);
}
+#e10s-button[cui-areatype="toolbar"] {
+ -moz-image-region: rect(0, 342px, 18px, 324px);
+}
+
+#e10s-button[cui-areatype="toolbar"]:hover {
+ -moz-image-region: rect(18px, 342px, 36px, 324px);
+}
+
+#e10s-button > .toolbarbutton-icon {
+ transform: scaleY(-1);
+}
+
#new-tab-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0, 360px, 18px, 342px);
}
-moz-image-region: rect(18px, 612px, 36px, 594px);
}
+#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+ transform: scaleX(-1);
+}
+
#tabview-button {
-moz-image-region: rect(0, 648px, 18px, 630px);
}
#bookmarks-menu-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
- -moz-image-region: rect(0px, 160px, 32px, 128px);
+ -moz-image-region: rect(0px, 192px, 32px, 160px);
}
#bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
- -moz-image-region: rect(32px, 160px, 64px, 128px);
+ -moz-image-region: rect(32px, 192px, 64px, 160px);
+}
+
+#bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 192px, 64px, 160px);
}
#history-panelmenu[cui-areatype="menu-panel"],
-moz-image-region: rect(32px, 224px, 64px, 192px);
}
+#history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 224px, 64px, 192px);
+}
+
#downloads-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #downloads-button {
-moz-image-region: rect(0px, 256px, 32px, 224px);
-moz-image-region: rect(32px, 256px, 64px, 224px);
}
-#switch-to-metro-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
- -moz-image-region: rect(0px, 800px, 32px, 768px);
-}
-
-#switch-to-metro-button[cui-areatype="menu-panel"]:hover,
-toolbarpaletteitem[place="palette"] > #switch-to-metro-button:hover {
- -moz-image-region: rect(32px, 800px, 64px, 768px);
-}
-
#add-ons-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #add-ons-button {
-moz-image-region: rect(0px, 288px, 32px, 256px);
-moz-image-region: rect(32px, 448px, 64px, 416px);
}
-#email-link-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #email-link-button {
- -moz-image-region: rect(0, 448px, 32px, 416px);
-}
-
-#email-link-button[cui-areatype="menu-panel"]:hover,
-toolbarpaletteitem[place="palette"] > #email-link-button:hover {
- -moz-image-region: rect(32px, 448px, 64px, 416px);
-}
-
-/* This is temporary until we have an email-link icon (Bug 932235) */
-#email-link-button[cui-areatype="menu-panel"] > image,
-toolbarpaletteitem[place="palette"] > #email-link-button > image {
- transform: scale(-1, -1);
-}
-
#characterencoding-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #characterencoding-button {
-moz-image-region: rect(0px, 480px, 32px, 448px);
-moz-image-region: rect(64px, 480px, 96px, 448px);
}
+#characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 480px, 64px, 448px);
+}
+
#new-window-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #new-window-button {
-moz-image-region: rect(0px, 512px, 32px, 480px);
-moz-image-region: rect(32px, 576px, 64px, 544px);
}
+#tabview-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #tabview-button {
+ -moz-image-region: rect(0px, 608px, 32px, 576px);
+}
+
+#tabview-button[cui-areatype="menu-panel"]:hover,
+toolbarpaletteitem[place="palette"] > #tabview-button:hover {
+ -moz-image-region: rect(32px, 608px, 64px, 576px);
+}
+
#find-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #find-button {
-moz-image-region: rect(0px, 640px, 32px, 608px);
-moz-image-region: rect(32px, 736px, 64px, 704px);
}
+#developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 736px, 64px, 704px);
+}
+
#preferences-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #preferences-button {
-moz-image-region: rect(0px, 768px, 32px, 736px);
-moz-image-region: rect(32px, 768px, 64px, 736px);
}
+#email-link-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #email-link-button {
+ -moz-image-region: rect(0, 800px, 32px, 768px);
+}
+
+#email-link-button[cui-areatype="menu-panel"]:hover,
+toolbarpaletteitem[place="palette"] > #email-link-button:hover {
+ -moz-image-region: rect(32px, 800px, 64px, 768px);
+}
+
+#sidebar-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #sidebar-button {
+ -moz-image-region: rect(0, 864px, 32px, 832px);
+}
+
+#sidebar-button[cui-areatype="menu-panel"]:hover,
+toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
+ -moz-image-region: rect(32px, 864px, 64px, 832px);
+}
+
+#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+ -moz-image-region: rect(32px, 864px, 64px, 832px);
+}
+
+toolbaritem[sdkstylewidget="true"] > toolbarbutton {
+ -moz-image-region: rect(0, 832px, 32px, 800px);
+}
+
/* Wide panel control icons */
#edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton,
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
+window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
/* padding: 2px 6px;
border: 1px solid;
border-color: transparent;
*/
}
-window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled],:not([open]):not([disabled]):not(:active)) > .toolbarbutton-icon {
+window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
}
#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
-window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
-#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
+window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
+#nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
}
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
transition: opacity @forwardTransitionLength@ ease-out;
}
-window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled] {
+window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true] {
opacity: 0;
}
.urlbar-input-box {
-moz-margin-start: 0;
- min-width: 4em;
}
#urlbar-icons {
border-bottom-right-radius: 0px;
}
-#urlbar > toolbarbutton:not([disabled]):active:hover,
+#urlbar > toolbarbutton:not([disabled=true]):active:hover,
#urlbar-reload-button:not(:hover) {
-moz-border-start-style: none;
-moz-padding-start: 3px;
-moz-image-region: rect(0px, 14px, 14px, 0px);
}
-#urlbar-reload-button[disabled] {
+#urlbar-reload-button[disabled=true] {
-moz-image-region: rect(28px, 14px, 42px, 0px);
}
-#urlbar-reload-button:not([disabled]):hover {
+#urlbar-reload-button:not([disabled=true]):hover {
-moz-image-region: rect(14px, 14px, 28px, 0px);
}
}
.panel-promo-box {
- margin: 5px -6px -6px;
- padding: 5px;
+ margin: 5px 0 -6px;
+ padding: 5px 0;
border-top: 1px solid #9C9CFF;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
.tab-content {
}
-.tab-throbber,
+.tab-/*throbber*/,
.tab-icon-image,
.tab-close-button {
}
height: 16px;
}
-#main-window[privatebrowsingmode=temporary] #TabsToolbar::after {
- content: "";
- display: -moz-box;
+#main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
width: 40px;
background: url("chrome://browser/skin/privatebrowsing-indicator.png") no-repeat center center;
}
}
#PanelUI-button {
+ -moz-margin-start: 3px;
}
#PanelUI-button:-moz-locale-dir(rtl) {
}
#PanelUI-contents,
+#BMB_bookmarksPopup,
.panel-mainview:not([panelid="PanelUI-popup"]) {
max-width: 22.35em;
}
.panel-customization-placeholder-child {
-moz-appearance: none;
-moz-box-orient: vertical;
- width: calc(22.35em / 3 - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
+ width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
height: calc(51px + 2.2em);
}
.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-moz-appearance: none;
-moz-box-orient: vertical;
- width: calc(22.35em / 3 - 2px);
+ width: calc(22.35em / 3 - 0.1px - 2px);
height: calc(49px + 2.2em);
border: 0;
}
}
toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
- width: calc(22.35em / 3);
+ width: calc(22.35em / 3 - 0.1px);
margin: 0 !important;
}
min-height: 32px;
/* Explanation for the below formula (A / B - C)
A
- Each button is 7em (menuPanelButtonWidth) wide
+ Each button is 22.35em / 3 - 0.1px wide
B
Each button has two margins.
C (44px / 2 = 22px)
Total width of button's icon + button padding should therefore be 44px,
which means each horizontal margin should be the half the button's width - (44/2) px.
*/
- margin: 4px calc(7em / 2 - 22px);
+ margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
}
/* above we treat the container as the icon for the margins, that is so the
padding: .5em;
margin: 0;
-moz-box-flex: 1;
- min-width: calc(22.35em / 3);
- max-width: calc(22.35em / 3);
+ min-width: calc(22.35em / 3 - 0.1px);
+ max-width: calc(22.35em / 3 - 0.1px);
/* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
height: calc(2.2em + 4px);
#zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
/* reduce the width with 2px for this button to compensate for two separators
of 1px. */
- min-width: calc(22.35em / 3 - 2px);
- max-width: calc(22.35em / 3 - 2px);
+ min-width: calc(22.35em / 3 - 0.1px - 2px);
+ max-width: calc(22.35em / 3 - 0.1px - 2px);
}
#main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon {
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error,
.variable-or-property .token-boolean,
+.variable-or-property .token-domnode,
.variable-or-property[exception] > .title > .name { /* original: Red */
color: #FF0000;
}
+.variable-or-property .token-domnode {
+ font-weight: bold;
+}
+
.theme-toolbar,
.devtools-toolbar,
.devtools-sidebar-tabs > tabs { /* General toolbar styling */
padding: 2px;
}
-.devtools-menulist,
-.devtools-toolbarbutton {
-}
-
devtools-menulist:-moz-focusring,
.devtools-toolbarbutton:-moz-focusring {
outline: 1px dotted #008484;
/*-moz-box-orient: horizontal;*/
}
+.devtools-menulist,
+.devtools-toolbarbutton {
+}
+
.devtools-toolbarbutton:not([checked]):hover:active {
}
-moz-box-align: center;
}
+/* Toolbar button groups */
+.devtools-toolbarbutton-group > .devtools-toolbarbutton {
+}
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-of-type {
+}
+
+.devtools-toolbarbutton-group {
+/*
+ margin: 0 2px;
+ -moz-padding-end: 2px;
+ border-left: 3px solid #000000;
+ border-right: 3px solid #000000;
+*/
+}
+
/* Text input */
.devtools-textinput,
padding-bottom: 3px;*/
-moz-padding-start: 22px;
-moz-padding-end: 12px;
- background-image: url("magnifying-glass.png");
background-position: 8px center;
+ background-size: 11px 11px;
background-repeat: no-repeat;
font-size: inherit;
+
+ background-image: url("magnifying-glass.png");
+}
+
+@media (min-resolution: 2dppx) {
+ .theme-dark .devtools-searchinput {
+ background-image: url("magnifying-glass@2x.png");
+ }
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background: none !important;
}
+.dbg-source-results:not(.selected):hover {
+ background-color: #000000; /* Sidebar background */
+}
+
.dbg-results-header {
-moz-padding-start: 6px;
}
-moz-image-region: rect(0px, 32px, 16px, 16px);
}
-#debugger-controls > toolbarbutton,
-#sources-controls > toolbarbutton {
-}
-
-#debugger-controls > toolbarbutton:last-of-type,
-#sources-controls > toolbarbutton:last-of-type {
-}
-
-#debugger-controls,
-#sources-controls {
-}
-
#instruments-pane-toggle {
/* background: none;
box-shadow: none;
#requests-menu-empty-notice {
margin: 0;
padding: 12px;
- font-size: 110%;
+ font-size: 120%;
- color: #000000;
+ color: #FF9F00;
+}
+
+#requests-menu-perf-notice-button {
+ min-width: 30px;
+ min-height: 28px;
+ margin: 0;
+ list-style-image: url("profiler-stopwatch.png");
+ -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+#requests-menu-perf-notice-button .button-text {
+ display: none;
}
/* Network requests table */
/* Network requests table: status codes */
-.requests-menu-status {
+box.requests-menu-status {
background-color: #A09090;
+ width: 10px;
-moz-margin-start: 5px;
-moz-margin-end: 5px;
border-radius: 20px;
transition: background-color 0.5s ease-in-out;
}
-.requests-menu-status[code^="1"] {
- background-color: #9C9CFF;
+label.requests-menu-status-code {
+ -moz-margin-start: 3px !important;
+ width: 3em;
+ -moz-margin-end: -3em !important;
}
-.requests-menu-status[code^="2"] {
- background-color: #008484;
+box.requests-menu-status:not([code]) {
+ background-color: #A09090; /* dark grey */
}
-.requests-menu-status[code^="3"] {
- background-color: #FF9F00;
+box.requests-menu-status[code^="1"] {
+ background-color: #9C9CFF; /* light blue */
+}
+
+box.requests-menu-status[code^="2"] {
+ background-color: #008484; /* green */
}
-.requests-menu-status[code^="4"] {
- background-color: #FF0000;
+/* 3xx are triangles */
+box.requests-menu-status[code^="3"] {
+ background-color: transparent;
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 10px solid #FF9F00; /* light orange */
+ border-radius: 0;
}
-.requests-menu-status[code^="5"] {
- background-color: #6000CF;
+/* 4xx and 5xx are squares - error codes */
+box.requests-menu-status[code^="4"] {
+ background-color: #FF0000; /* red */
+ border-radius: 0; /* squares */
+}
+
+box.requests-menu-status[code^="5"] {
+ background-color: #6000CF; /* pink? */
+ border-radius: 0;
+ transform: rotate(45deg);
}
/* Network requests table: waterfall header */
/* Network requests table: waterfall items */
.requests-menu-subitem.requests-menu-waterfall {
- -moz-padding-start: 4px;
+ -moz-padding-start: 0px;
-moz-padding-end: 4px;
background-repeat: repeat-y; /* Background created on a <canvas> in js. */
background-position: -1px center;
}
.requests-menu-timings-total {
- -moz-padding-start: 8px;
+ -moz-padding-start: 4px;
font-size: 85%;
font-weight: 600;
}
-.requests-menu-timings-cap {
- width: 4px;
- height: 8px;
-
- border: 1px solid #FFCF00;
-}
-
-.requests-menu-timings-cap.start {
- -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
- -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
- border-radius: 4px 0 0 4px;
- transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
- -moz-border-start: none;
- border-radius: 0 4px 4px 0;
- transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
- border-radius: 0 4px 4px 0;
- transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
- border-radius: 4px 0 0 4px;
- transform-origin: right center;
-}
-
.requests-menu-timings-box {
- height: 8px;
-
- border-top: 1px solid #FFCF00;
- border-bottom: 1px solid #FFCF00;
+ height: 9px;
}
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
- background-color: #FF0000;
+.requests-menu-timings-box.blocked {
+ background-color: #FF0000; /* red */
}
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
- background-color: #6000CF;
+.requests-menu-timings-box.dns {
+ background-color: #E7ADE7; /* pink */
}
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
- background-color: #FF9F00;
+.requests-menu-timings-box.connect {
+ background-color: #FF9F00; /* orange */
}
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
- background-color: #FFCF00;
+.requests-menu-timings-box.send {
+ background-color: #FFCF00; /* light blue */
}
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
- background-color: #9C9CFF;
+.requests-menu-timings-box.wait {
+ background-color: #9C9CFF; /* blue grey */
}
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
- background-color: #A09090;
+.requests-menu-timings-box.receive {
+ background-color: #A09090; /* green */
}
/* SideMenuWidget */
color: #FF9F00;
}
+/* Summary tabpanel */
+
.tabpanel-summary-container {
padding: 1px;
}
/* Response tabpanel */
#response-content-info-header {
- background-color: #A09090;
- color: #000000;
margin: 0;
- padding: 5px 8px;
+ padding: 3px 8px;
+
+ background-color: #FF0000; /* Red highlight */
+ color: #000000; /* Light foreground text */
}
#response-content-image-box {
margin: 0;
-moz-margin-end: 3px;
border: none;
- padding: 0px 1.5vw;
+ padding: 0px 0.75vw;
/* color: #fff;*/
}
font-weight: 600;
}
+/* Performance analysis buttons */
+
+#requests-menu-network-summary-button {
+ list-style-image: url("profiler-stopwatch.png");
+ -moz-image-region: rect(0px,32px,16px,16px);
+ -moz-padding-end: 0;
+ cursor: pointer;
+}
+
+#requests-menu-network-summary-label {
+ -moz-padding-start: 0;
+ cursor: pointer;
+}
+
+#requests-menu-network-summary-label:hover {
+ text-decoration: underline;
+}
+
+/* Performance analysis view */
+
+#network-statistics-toolbar {
+ /* Make the toolbar invisible, it only hold the back button */
+ -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
+ background-color: #000000;
+}
+
+#network-statistics-back-button {
+ min-width: 4em;
+ min-height: 100vh;
+}
+
+#network-statistics-view-splitter {
+ cursor: default;
+ pointer-events: none;
+}
+
+#network-statistics-charts {
+ min-height: 1px;
+}
+
+.theme-dark #network-statistics-charts {
+ background: #000000; /* Toolbars */
+}
+
+#network-statistics-charts .pie-chart-container {
+ -moz-margin-start: 3vw;
+ -moz-margin-end: 1vw;
+}
+
+#network-statistics-charts .table-chart-container {
+ -moz-margin-start: 1vw;
+ -moz-margin-end: 3vw;
+}
+
+.theme-dark .chart-colored-blob[name=html] {
+ fill: #A09090; /* Blue-Grey highlight */
+ background: #A09090;
+}
+
+.theme-dark .chart-colored-blob[name=css] {
+ fill: #9C9CFF; /* Blue highlight */
+ background: #9C9CFF;
+}
+
+.theme-dark .chart-colored-blob[name=js] {
+ fill: #FFCF00; /* Light Orange highlight */
+ background: #FFCF00;
+}
+
+.theme-dark .chart-colored-blob[name=xhr] {
+ fill: #FF9F00; /* Orange highlight */
+ background: #FF9F00;
+}
+
+.theme-dark .chart-colored-blob[name=fonts] {
+ fill: #6000CF; /* Purple highlight */
+ background: #6000CF;
+}
+
+.theme-dark .chart-colored-blob[name=images] {
+ fill: #E7ADE7; /* Pink highlight */
+ background: #E7ADE7;
+}
+
+.theme-dark .chart-colored-blob[name=media] {
+ fill: #008484; /* Green highlight */
+ background: #008484;
+}
+
+.theme-dark .chart-colored-blob[name=flash] {
+ fill: #FF0000; /* Red highlight */
+ background: #FF0000;
+}
+
+.table-chart-row-label[name=cached] {
+ display: none;
+}
+
+.table-chart-row-label[name=count] {
+ width: 3em;
+ text-align: end;
+}
+
+.table-chart-row-label[name=label] {
+ width: 7em;
+}
+
+.table-chart-row-label[name=size] {
+ width: 7em;
+}
+
+.table-chart-row-label[name=time] {
+ width: 7em;
+}
+
/* Responsive sidebar */
@media (max-width: 700px) {
#requests-menu-toolbar {
.requests-menu-footer-button,
.requests-menu-footer-label {
- padding: 0px 2vw;
+ padding: 0px 1vw;
}
#details-pane {
color: #3A3A5F; /* 37% of #9C9CFF */
}
-#profiler-controls > toolbarbutton {
-/* margin: 0;
- box-shadow: none;
- border-radius: 0;
- border-width: 0;
- -moz-border-end-width: 1px;
- outline-offset: -3px;*/
-}
-
-#profiler-controls > toolbarbutton:last-of-type {
-/* -moz-border-end-width: 0;*/
-}
-
-#profiler-controls {
- border-radius: 3px;
- margin: 0 3px;
-}
-
#profiler-start {
list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.png");
-moz-image-region: rect(0px,16px,16px,0px);
}
.stylesheet-rule-count,
+.stylesheet-linked-file,
.stylesheet-saveButton {
color: #FF9F00;
}
}
.splitview-active .stylesheet-rule-count,
+.splitview-active .stylesheet-linked-file,
.splitview-active .stylesheet-saveButton {
color: #E7ADE7;
}
outline: 0;
}
-.stylesheet-error-message {
- color: #FF0000;
+.stylesheet-linked-file:not(:empty){
+ -moz-margin-end: 0.4em;
+}
+
+.stylesheet-linked-file:not(:empty):before {
+ -moz-margin-start: 0.4em;
+}
+
+li.linked-file-error .stylesheet-linked-file:after {
+ font-size: 110%;
}
.stylesheet-more > h3 {
color: #FF9F00; /* Foreground (Text) - Light */
}
-.theme-dark .breadcrumbs-widget-item-id {
+.breadcrumbs-widget-item {
+ color: #FF9F00; /* Foreground (Text) - Light */
+}
+
+.breadcrumbs-widget-item-id {
color: #A09090; /* Foreground (Text) - Grey */
}
+.breadcrumbs-widget-item-classes {
+ color: #FF9F00; /* Content (Text) - Light */
+}
+
.breadcrumbs-widget-item-pseudo-classes {
color: #FFCF00; /* Light Orange */
}
/* SimpleListWidget */
-.simple-list-widget-item:not(.selected):hover {
- background: #FFCF00;
- color: #FFCF00;
+.simple-list-widget-container {
+ /* Hack: force hardware acceleration */
+ transform: translateZ(1px);
}
.simple-list-widget-item.selected {
- background: #008484;
+ background-color: #008484; /* Select Highlight Blue */
+ color: #FFCF00; /* Light foreground text */
+}
+
+.simple-list-widget-item:not(.selected):hover {
+ background-color: #FFCF00;
color: #FFCF00;
}
}
.variable-or-property-non-writable-icon {
- background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
+ background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
width: 16px;
height: 16px;
opacity: 0.5;
@media (min-resolution: 2dppx) {
.variable-or-property-non-writable-icon > .title:after {
- background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
+ background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
background-size: 32px;
}
}
/* Actions first */
.variables-view-container[actions-first] .variables-view-delete,
+.variables-view-container[actions-first] .variables-view-open-inspector,
.variables-view-container[actions-first] .variables-view-add-property {
-moz-box-ordinal-group: 0;
}
.variables-view-delete {
list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
- -moz-image-region: rect(0, 16px, 16px, 0);
+ -moz-image-region: rect(0,16px,16px,0);
}
.variables-view-delete:hover {
- -moz-image-region: rect(0, 32px, 16px, 16px);
+ -moz-image-region: rect(0,48px,16px,32px);
}
.variables-view-delete:active {
- -moz-image-region: rect(0, 48px, 16px, 32px);
+ -moz-image-region: rect(0,32px,16px,16px);
+}
+
+.variable-or-property:focus .variables-view-delete {
+/* -moz-image-region: rect(0,16px,16px,0); */
}
.variables-view-edit {
- background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
- width: 20px;
- height: 16px;
+ list-style-image: url("chrome://browser/skin/devtools/vview-edit.png");
+ -moz-image-region: rect(0,16px,16px,0);
+ cursor: pointer;
+ padding-left: 2px;
+}
+
+.variables-view-edit:hover {
+ -moz-image-region: rect(0,48px,16px,32px);
+}
+
+.variables-view-edit:active {
+ -moz-image-region: rect(0,32px,16px,16px);
+}
+
+.variable-or-property:focus .variables-view-edit {
+/* -moz-image-region: rect(0,16px,16px,0); */
+}
+
+.variables-view-open-inspector {
+ list-style-image: url("chrome://browser/skin/devtools/vview-open-inspector.png");
+ -moz-image-region: rect(0,16px,16px,0);
cursor: pointer;
}
+.variables-view-open-inspector:hover {
+ -moz-image-region: rect(0,48px,16px,32px);
+}
+
+.variables-view-open-inspector:active {
+ -moz-image-region: rect(0,32px,16px,16px);
+}
+
+.variable-or-property:focus .variables-view-open-inspector {
+/* -moz-image-region: rect(0,16px,16px,0); */
+}
+
.variables-view-throbber {
background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
width: 16px;
visibility: hidden;
}
+/* Charts */
+
+.generic-chart-container {
+ /* Hack: force hardware acceleration */
+ transform: translateZ(1px);
+}
+
+.theme-dark .generic-chart-container {
+ color: #A09090; /* Light foreground text */
+}
+
+.theme-dark .chart-colored-blob {
+ fill: #9C9CFF; /* Light content text */
+ background: #9C9CFF;
+}
+
+/* Charts: Pie */
+
+.pie-chart-slice {
+ stroke-width: 1px;
+ cursor: pointer;
+}
+
+.theme-dark .pie-chart-slice {
+ stroke: #A09090;
+}
+
+.theme-dark .pie-chart-slice[largest] {
+ stroke-width: 2px;
+ stroke: #9C9CFF;
+}
+
+.pie-chart-label {
+ text-anchor: middle;
+ dominant-baseline: middle;
+ pointer-events: none;
+}
+
+.theme-dark .pie-chart-label {
+ fill: #000;
+}
+
+.pie-chart-container[slices="1"] > .pie-chart-slice {
+ stroke-width: 0px;
+}
+
+.pie-chart-slice,
+.pie-chart-label {
+ transition: all 0.1s ease-out;
+}
+
+.pie-chart-slice:not(:hover):not([focused]),
+.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
+ transform: none !important;
+}
+
+/* Charts: Table */
+
+.table-chart-title {
+ padding-bottom: 10px;
+ font-size: 120%;
+ font-weight: 600;
+}
+
+.table-chart-row {
+ margin-top: 1px;
+ cursor: pointer;
+}
+
+.table-chart-grid:hover > .table-chart-row {
+ transition: opacity 0.1s ease-in-out;
+}
+
+.table-chart-grid:not(:hover) > .table-chart-row {
+ transition: opacity 0.2s ease-in-out;
+}
+
+.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
+.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
+ opacity: 0.4;
+}
+
+.table-chart-row-box {
+ width: 8px;
+ height: 1.5em;
+ -moz-margin-end: 10px;
+}
+
+.table-chart-row-label {
+ width: 8em;
+ -moz-padding-end: 6px;
+ cursor: inherit;
+}
+
+.table-chart-totals {
+ margin-top: 8px;
+ padding-top: 6px;
+}
+
+.table-chart-totals {
+ border-top: 1px solid #A09090; /* Grey foreground text */
+}
+
+.table-chart-summary-label {
+ font-weight: 600;
+ padding: 1px 0px;
+}
+
+.table-chart-summary-label {
+ color: #A09090; /* Light foreground text */
+}
+
/* === BEGIN manifest-editor.inc.css === */
/* Manifest Editor overrides */
.manifest-editor .variables-view-delete,
.manifest-editor .variables-view-delete:hover,
.manifest-editor .variables-view-delete:active,
+.manifest-editor .variable-or-property:focus .variables-view-delete,
.manifest-editor .variables-view-add-property:hover,
-.manifest-editor .variables-view-add-property:active {
+.manifest-editor .variables-view-add-property:active,
+.manifest-editor .variable-or-property:focus .variables-view-add-property {
list-style-image: none;
-moz-image-region: initial;
}
list-style-image: url("chrome://browser/skin/preferences/Options-sync.png") !important;
}
+label.small {
+ font-size: smaller;
+}
+
+#tabPrefsBox {
+ margin: 6px;
+}
+
/* Applications Pane */
#BrowserPreferences[animated="true"] #handlersView {
height: 25em;
margin-top: 1em;
margin-bottom: 1em;
}
+
+#noFxaAccount {
+ margin: 6px;
+ line-height: 1.2em;
+}
+
+#noFxaAccount > label:first-child {
+ margin-bottom: 0.6em;
+}