diff --git a/install.rdf b/install.rdf
index abc6bd5..92b741b 100755
--- a/install.rdf
+++ b/install.rdf
@@ -5,7 +5,7 @@
4
Simple White Compact
Paint your Firefox white. Make it look simpler, nicer, compact.
- 2.2b18.C1.06
+ 2.2b18.C1.08
Louis Chan (updated by Graciliano, 3marcusw)
3marcusw
https://github.com/3marcusw/simplewhitecompact
@@ -14,7 +14,7 @@
{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
37.0
- 45.0
+ 46.0
diff --git a/whitefox/browser/browser-common.css b/whitefox/browser/browser-common.css
index cda6aa9..8bd2bed 100755
--- a/whitefox/browser/browser-common.css
+++ b/whitefox/browser/browser-common.css
@@ -803,45 +803,45 @@ toolbar[brighttext] #sync-button[status="active"] {
-moz-image-region: rect(0, 720px, 18px, 702px);
}
-#loop-button,
+:root #loop-button,
#loop-button > .toolbarbutton-badge-container {
list-style-image: url(chrome://browser/skin/loop/toolbar.png);
-moz-image-region: rect(0, 18px, 18px, 0);
}
-toolbar[brighttext] #loop-button,
+:root toolbar[brighttext] #loop-button,
toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
}
-#loop-button[state="disabled"],
-#loop-button[disabled="true"],
+:root #loop-button[state="disabled"],
+:root #loop-button[disabled="true"],
#loop-button[state="disabled"] > .toolbarbutton-badge-container,
#loop-button[disabled="true"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 36px, 18px, 18px);
}
-#loop-button:not([disabled="true"])[state="error"],
+:root #loop-button:not([disabled="true"])[state="error"],
#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 54px, 18px, 36px);
}
-#loop-button:not([disabled="true"])[state="action"],
+:root #loop-button:not([disabled="true"])[state="action"],
#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 72px, 18px, 54px);
}
-#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]),
+:root #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]),
#loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 90px, 18px, 72px);
}
-#loop-button:not([disabled="true"])[state="active"],
+:root #loop-button:not([disabled="true"])[state="active"],
#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 108px, 18px, 90px);
}
-#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]),
+:root #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]),
#loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 126px, 18px, 108px);
}
@@ -1271,8 +1271,8 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 832px, 32px, 800px);
}
- #loop-button[cui-areatype="menu-panel"],
- toolbarpaletteitem[place="palette"] > #loop-button,
+ :root #loop-button[cui-areatype="menu-panel"],
+ :root toolbarpaletteitem[place="palette"] > #loop-button,
#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container,
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
list-style-image: url(chrome://browser/skin/loop/menuPanel.png);
@@ -1280,39 +1280,39 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
}
/* Make sure that the state icons are not shown in the customization palette. */
- toolbarpaletteitem[place="palette"] > #loop-button,
+ :root toolbarpaletteitem[place="palette"] > #loop-button,
toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 32px, 32px, 0) !important;
}
- #loop-button[cui-areatype="menu-panel"][state="disabled"],
- #loop-button[cui-areatype="menu-panel"][disabled="true"],
+ :root #loop-button[cui-areatype="menu-panel"][state="disabled"],
+ :root #loop-button[cui-areatype="menu-panel"][disabled="true"],
#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container,
#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 64px, 32px, 32px);
}
- #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"],
+ :root #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 96px, 32px, 64px);
}
- #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"],
+ :root #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 128px, 32px, 96px);
}
- #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]),
+ :root #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]),
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 160px, 32px, 128px);
}
- #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"],
+ :root #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"],
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 192px, 32px, 160px);
}
- #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]),
+ :root #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]),
#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container {
-moz-image-region: rect(0, 224px, 32px, 192px);
}
diff --git a/whitefox/browser/browser-etc.css b/whitefox/browser/browser-etc.css
new file mode 100644
index 0000000..5ae3c16
--- /dev/null
+++ b/whitefox/browser/browser-etc.css
@@ -0,0 +1,21 @@
+/** Additional customizations for Firefox Extensions */
+
+/* Tab Groups */
+:root #tabGroups-tabview-button {
+ list-style-image: url("chrome://browser/skin/Toolbar.png");
+ -moz-image-region: rect(0, 648px, 18px, 630px);
+}
+:root toolbar[brighttext] #tabGroups-tabview-button {
+ list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
+}
+:root #tabGroups-tabview-button[cui-areatype="menu-panel"],
+:root toolbarpaletteitem[place="palette"] > #tabGroups-tabview-button {
+ list-style-image: url(chrome://browser/skin/menuPanel.png);
+ -moz-image-region: rect(0px, 608px, 32px, 576px);
+}
+
+/* Chatzilla */
+#tb-chatzilla-open[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #tb-chatzilla-open {
+ list-style-image: url(chrome://chatzilla/skin/images/logo.png)
+}
\ No newline at end of file
diff --git a/whitefox/browser/browser.css b/whitefox/browser/browser.css
index 75c5e6a..41addd4 100644
--- a/whitefox/browser/browser.css
+++ b/whitefox/browser/browser.css
@@ -1 +1,2 @@
-@import url("chrome://osbrowser/skin/browser.css");
\ No newline at end of file
+@import url("chrome://osbrowser/skin/browser.css");
+@import url("./browser-etc.css");
\ No newline at end of file
diff --git a/whitefox/browser/customizableui/panelUIOverlay.css b/whitefox/browser/customizableui/panelUIOverlay.css
index 854b5ec..c39bef5 100755
--- a/whitefox/browser/customizableui/panelUIOverlay.css
+++ b/whitefox/browser/customizableui/panelUIOverlay.css
@@ -663,6 +663,85 @@ toolbarbutton#PanelUI-fxa-status,
list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
}
+.PanelUI-remotetabs-instruction-label,
+#PanelUI-remotetabs-mobile-promo {
+ margin: 15px;
+ text-align: center;
+ text-shadow: none;
+ max-width: 15em;
+ color: GrayText;
+}
+
+/* The boxes with "instructions" get extra padding for space around the
+ illustration and buttons */
+.PanelUI-remotetabs-instruction-box {
+ padding: 30px 15px 15px 15px;
+}
+
+.PanelUI-remotetabs-prefs-button {
+ -moz-appearance: none;
+ background-color: #0096dd;
+ color: white;
+ border-radius: 2px;
+ margin: 10px;
+ padding: 8px;
+ text-shadow: none;
+ min-width: 200px;
+}
+
+.PanelUI-remotetabs-prefs-button:hover,
+.PanelUI-remotetabs-prefs-button:hover:active {
+ background-color: #018acb;
+}
+
+.remotetabs-promo-link {
+ margin: 0;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+ color: GrayText;
+ /* This margin is to line this label up with the labels in toolbarbuttons. */
+ margin-left: 28px;
+}
+
+.fxaSyncIllustration {
+ width: 180px;
+ list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
+}
+
+.PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
+ /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
+ text-align: center !important;
+ text-shadow: none;
+}
+
+#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
+ min-width: 19em;
+}
+
+/* Work around bug 1224412 - these boxes will cause scrollbars to appear when
+ the panel is anchored to a toolbar button.
+*/
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
+#PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
+ min-height: 30em;
+}
+
+#PanelUI-remotetabs-tabslist > label[itemtype="client"] {
+ color: GrayText;
+}
+
+/* Collapse the non-active vboxes in the remotetabs deck to use only the
+ height the active box needs */
+#PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
+#PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
+#PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
+ visibility: collapse;
+}
+
+toolbarbutton#PanelUI-fxa-icon[syncstatus="active"],
toolbarbutton#PanelUI-fxa-status[syncstatus="active"],
#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
@@ -1065,10 +1144,12 @@ menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active,
color: GrayText;
}
+#PanelUI-remotetabs-tabslist > toolbarbutton,
#PanelUI-historyItems > toolbarbutton {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
}
+#PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
@@ -1533,6 +1614,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);
}
+ toolbarbutton#PanelUI-fxa-icon[syncstatus="active"],
toolbarbutton#PanelUI-fxa-status[syncstatus="active"],
#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png);
diff --git a/whitefox/browser/devtools/animationinspector.css b/whitefox/browser/devtools/animationinspector.css
index e0b385f..4902cb9 100644
--- a/whitefox/browser/devtools/animationinspector.css
+++ b/whitefox/browser/devtools/animationinspector.css
@@ -15,10 +15,16 @@
:root {
/* How high should toolbars be */
--toolbar-height: 20px;
- /* How wide should the sidebar be */
- --timeline-sidebar-width: 150px;
+ /* How wide should the sidebar be (should be wide enough to contain long
+ property names like 'border-bottom-right-radius' without ellipsis) */
+ --timeline-sidebar-width: 200px;
/* How high should animations displayed in the timeline be */
--timeline-animation-height: 20px;
+ /* The size of a keyframe marker in the keyframes diagram */
+ --keyframes-marker-size: 10px;
+ /* The color of the time graduation borders. This should match the the color
+ devtools/client/animationinspector/utils.js */
+ --time-graduation-border-color: rgba(128, 136, 144, .5);
}
html {
@@ -39,7 +45,7 @@ body {
containing playback control buttons, shown only when there are animations
displayed in the timeline */
-#toolbar,
+#toolbar, /* For Firefox 42 & earlier */
#global-toolbar,
#timeline-toolbar {
border-bottom: 1px solid var(--theme-splitter-color);
@@ -63,23 +69,23 @@ body {
display: flex;
}
-#toolbar .label {
+#toolbar .label, /* Firefox 42 & earlier */
+#global-toolbar .label,
+#timeline-toolbar .label {
padding: 1px 4px;
}
-#toggle-all {
- -moz-border-start-style: solid;
- -moz-border-start-width: 1px;
- min-height: 20px;
-}
-
/* The main animations container */
-.theme-toolbar ~ #players { /* Firefox 38+ --johnGraciliano */
- height: calc(100% - var(--toolbar-height));
+#players:not(:empty) {
+ height: 100%; /* Firefox 37 only! */
overflow: auto;
}
+.theme-toolbar ~ #players {
+ height: calc(100% - var(--toolbar-height));
+}
+
[empty] #players {
display: none;
}
@@ -105,9 +111,7 @@ body {
#global-toolbar > *,
#timeline-toolbar > * {
min-height: var(--toolbar-height);
- border-width: 0;
- -moz-border-start-width: 1px;
- border-inline-start-width: 1px;
+ border-width: 0 0 0 1px;
display: flex;
justify-content: center;
align-items: center;
@@ -117,21 +121,27 @@ body {
#timeline-toolbar .label {
padding: 0 5px;
border-style: solid;
- border-color: rgba(170, 170, 170, .5);
}
#timeline-toolbar .devtools-button,
#timeline-toolbar .label {
- border-width: 0;
- -moz-border-end-width: 1px;
- border-inline-end-width: 1px;
+ border-width: 0 1px 0 0;
+}
+
+.theme-dark #global-toolbar .label,
+.theme-dark #timeline-current-time {
+ border-color: rgba(0,0,0,.4);
+}
+
+.theme-light #global-toolbar .label,
+.theme-light #timeline-current-time {
+ border-color: rgba(170,170,170,.5);
}
#element-picker::before {
background-image: url("./images/command-pick.png");
}
-#toggle-all::before,
.pause-button::before {
background-image: url("images/debugger-pause.png");
}
@@ -140,7 +150,6 @@ body {
background-image: url("images/rewind.png");
}
-#toggle-all.paused::before,
.pause-button.paused::before {
background-image: url("images/debugger-play.png");
}
@@ -150,12 +159,10 @@ body {
background-image: url("./images/command-pick@2x.png");
}
- #toggle-all::before,
.pause-button::before {
background-image: url("images/debugger-pause@2x.png");
}
- #toggle-all.paused::before,
.pause-button.paused::before {
background-image: url("images/debugger-play@2x.png");
}
@@ -172,13 +179,6 @@ body {
font-family: inherit;
}
-/* Disabled playerWidget when the animation has ended */
-/* #players.theme-toolbar to guard only Firefox <= 39.0 --johnGraciliano */
-#players.theme-toolbar > .finished {
- pointer-events: none;
- opacity: .5;
-}
-
/* Animation timeline component */
.animation-timeline {
@@ -186,43 +186,50 @@ body {
overflow: hidden;
position: relative;
/* The timeline gets its background-image from a canvas element created in
- /devtools/client/animationinspector/utils.js drawGraphElementBackground
+ /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;
- /* Make the background be 100% of the timeline area so that it resizes with
- it*/
- background-size: calc(100% - var(--timeline-sidebar-width)) 100%;
+ /* The animations are drawn away from the left edge so that animated nodes
+ can be displayed in a sidebar */
+ /* background-size: calc(100% - var(--timeline-sidebar-width)) 100%; *** This rule is removed for being unnecessary and problematic --johnGraciliano */
background-position: var(--timeline-sidebar-width) 0;
display: flex;
flex-direction: column;
}
-.animation-timeline .scrubber-wrapper {
+/* Useful for positioning animations or keyframes in the timeline */
+.animation-timeline .track-container {
position: absolute;
- top: 0;
- bottom: 0;
+ top: 2px; /* --johnGraciliano */
left: var(--timeline-sidebar-width);
- right: 0;
+ /* Leave the width of a marker right of a track so the 100% markers can be
+ selected easily */
+ right: var(--keyframes-marker-size);
+ height: var(--timeline-animation-height);
+}
+
+.animation-timeline .scrubber-wrapper {
z-index: 1;
pointer-events: none;
+ height: 100%;
}
.animation-timeline .scrubber {
position: absolute;
height: 100%;
- width: 0;
+ width: var(--timeline-sidebar-width);
border-right: 1px solid red;
box-sizing: border-box;
-}
-
-.animation-timeline > div.scrubber { /* For the unwrapped scrubber before Firefox 45.0a1 --johnGraciliano */
- width: var(--timeline-sidebar-width);
z-index: 1;
pointer-events: none;
}
+.animation-timeline .scrubber-wrapper .scrubber {
+ width: 0;
+}
+
.animation-timeline .scrubber::before {
content: "";
position: absolute;
@@ -247,18 +254,24 @@ body {
pointer-events: all;
}
-.animation-timeline .time-header {
+.animation-timeline .scrubber ~ .time-header { /* Firefox 43-44 */
margin-left: var(--timeline-sidebar-width);
min-height: var(--toolbar-height);
overflow: hidden;
position: relative;
/* This is the same color as the time graduations in
- devtools/client/animationinspector/utils.js */
+ browser/devtools/animationinspector/utils.js */
border-bottom: 1px solid rgba(128, 136, 144, .5);
cursor: col-resize;
-moz-user-select: none;
}
+.animation-timeline .time-header {
+ min-height: var(--toolbar-height);
+ cursor: col-resize;
+ -moz-user-select: none;
+}
+
.animation-timeline .time-header .time-tick {
position: absolute;
top: 3px;
@@ -273,38 +286,53 @@ body {
list-style-type: none;
}
+.animation-timeline .scrubber-wrapper ~ .animations { /* Firefox 45 & later */
+ height: 100%;
+ /* Leave some space for the header */
+ margin-top: var(--timeline-animation-height);
+ border-top: 1px solid var(--time-graduation-border-color);
+}
+
/* Animation block widgets */
.animation-timeline .animation {
- padding: 2px 0;
+ padding: 2px 0; /* --johnGraciliano */
height: var(--timeline-animation-height);
position: relative;
}
-.animation-timeline .animation:nth-child(2n) {
+.animation-timeline .scrubber ~ .animations .animation:nth-child(2n+1) { /* Firefox 43-44 */
background-color: var(--even-animation-timeline-background-color);
}
-.animation-timeline .animation.selected {
- background-color: var(--theme-selection-background-semitransparent);
+/* We want animations' background colors to alternate, but each animation has
+ a sibling (hidden by default) that contains the animated properties and
+ keyframes, so we need to alternate every 4 elements. */
+.animation-timeline .scrubber-wrapper ~ .animations .animation:nth-child(4n+1) { /* Firefox 45 & later */
+ background-color: var(--even-animation-timeline-background-color);
}
.animation-timeline .animation .target {
width: var(--timeline-sidebar-width);
- overflow: hidden;
height: 100%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
}
.animation-timeline .animation-target {
background-color: transparent;
}
-.animation-timeline .animation .time-block {
+.animation-timeline .scrubber ~ .animations .animation .time-block { /* Firefox 43-44 */
position: absolute;
top: 2px;
left: var(--timeline-sidebar-width);
right: 0;
height: var(--timeline-animation-height);
+}
+
+.animation-timeline .scrubber-wrapper ~ .animations .animation .time-block { /* Firefox 45 & later */
cursor: pointer;
}
@@ -315,7 +343,7 @@ body {
height: 100%;
box-sizing: border-box;
- --timelime-border-color: var(--theme-body-color);
+ --timeline-border-color: var(--theme-body-color);
--timeline-background-color: var(--theme-splitter-color);
/* Iterations of the animation are displayed with a repeating linear-gradient
@@ -324,25 +352,25 @@ body {
the border of this element */
background-image:
linear-gradient(to right,
- var(--timelime-border-color) 0,
- var(--timelime-border-color) 1px,
+ var(--timeline-border-color) 0,
+ var(--timeline-border-color) 1px,
transparent 1px,
transparent 2px);
background-repeat: repeat-x;
background-position: -1px 0;
- border: 1px solid var(--timelime-border-color);
+ border: 1px solid var(--timeline-border-color);
/* The background color is set independently */
background-color: var(--timeline-background-color);
}
.animation-timeline .animation .cssanimation {
- --timelime-border-color: var(--theme-highlight-lightorange);
+ --timeline-border-color: var(--theme-highlight-lightorange);
--timeline-background-color: var(--theme-contrast-background);
}
.animation-timeline .animation .csstransition {
- --timelime-border-color: var(--theme-highlight-bluegrey);
+ --timeline-border-color: var(--theme-highlight-bluegrey);
--timeline-background-color: var(--theme-highlight-blue);
}
@@ -394,14 +422,14 @@ body {
box-sizing: border-box;
height: calc(100% + 2px);
- border: 1px solid var(--timelime-border-color);
+ border: 1px solid var(--timeline-border-color);
border-width: 1px 0 1px 1px;
background-image: repeating-linear-gradient(45deg,
transparent,
transparent 1px,
var(--theme-selection-color) 1px,
var(--theme-selection-color) 4px);
- background-color: var(--timelime-border-color);
+ background-color: var(--timeline-border-color);
}
.animation-timeline .animation .delay.negative {
@@ -416,7 +444,7 @@ body {
.animation-target {
background-color: var(--theme-toolbar-background);
- padding: 1px 4px;
+ padding: 0 4px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
@@ -428,25 +456,126 @@ body {
padding-left: 4px;
}
-.animation-target .node-selector,
-.animation-target .node-highlighter {
+.animation-target .node-highlighter,
+.animation-target .node-selector {
background: url("./images/vview-open-inspector.png") no-repeat 0 0;
padding-left: 16px;
margin-right: 5px;
cursor: pointer;
}
-.animation-target .node-selector:hover,
-.animation-target .node-highlighter:hover {
+.animation-target .node-highlighter:hover,
+.animation-target .node-selector:hover {
filter: url(images/filters.svg#checked-icon-state);
}
-.animation-target .node-selector:active,
.animation-target .node-highlighter:active,
-.animation-target .node-highlighter.selected {
+.animation-target .node-highlighter.selected,
+.animation-target .node-selector:active {
filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
}
+/* Inline keyframes info in the timeline */
+
+.animation-timeline .animated-properties:not(.selected) {
+ display: none;
+}
+
+.animation-timeline .animated-properties {
+ background-color: var(--theme-selection-background-semitransparent);
+}
+
+.animation-timeline .animated-properties ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.animation-timeline .animated-properties .property {
+ height: var(--timeline-animation-height);
+ position: relative;
+}
+
+.animation-timeline .animated-properties .property:nth-child(2n) {
+ background-color: var(--even-animation-timeline-background-color);
+}
+
+.animation-timeline .animated-properties .name {
+ width: var(--timeline-sidebar-width);
+ padding-right: var(--keyframes-marker-size);
+ box-sizing: border-box;
+ height: 100%;
+ color: var(--theme-body-color-alt);
+ white-space: nowrap;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.animation-timeline .animated-properties .name div {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.animation-timeline .animated-properties .frames {
+ /* The frames list is absolutely positioned and the left and width properties
+ are dynamically set from javascript to match the animation's startTime and
+ duration */
+ position: absolute;
+ top: 0;
+ height: 100%;
+ /* Using flexbox to vertically center the frames */
+ display: flex;
+ align-items: center;
+}
+
+.animation-timeline .animated-properties .track-container{
+ top: 0;
+}
+
+/* Keyframes diagram, displayed below the timeline, inside the animation-details
+ element. */
+
+.keyframes {
+ /* Actual keyframe markers are positioned absolutely within this container and
+ their position is relative to its size (we know the offset of each frame
+ in percentage) */
+ position: relative;
+ width: 100%;
+ height: 0;
+}
+
+.keyframes.cssanimation {
+ background-color: var(--theme-contrast-background);
+}
+
+.keyframes.csstransition {
+ background-color: var(--theme-highlight-blue);
+}
+
+.keyframes .frame {
+ position: absolute;
+ top: 0;
+ width: 0;
+ height: 0;
+ background-color: inherit;
+ cursor: pointer;
+}
+
+.keyframes .frame::before {
+ content: "";
+ display: block;
+ transform:
+ translateX(calc(var(--keyframes-marker-size) * -.5))
+ translateY(calc((var(--toolbar-height) - var(--keyframes-marker-size)) * -.5)); /* --johnGraciliano */
+ width: var(--keyframes-marker-size);
+ height: var(--keyframes-marker-size);
+ border-radius: 100%;
+ background-color: inherit;
+}
+
+/* All that follows is for Firefox 42 and earlier */
+
/* Animation title gutter, contains the name, duration, iteration */
.animation-title {
@@ -467,7 +596,8 @@ body {
.animation-title .meta-data .compositor-icon {
display: none;
- background-image: url("images/animation-fast-track.svg");
+ background-image: url("images/animation-fast-track-blue.svg");
+ background-position: left center; /* --johnGraciliano */
background-repeat: no-repeat;
padding-left: 12px;
/* Make sure the icon is positioned above the timeline range input so that
@@ -476,7 +606,22 @@ body {
position: relative;
}
-/* Timeline wiget */
+/* Timeline widget */ /* And button#toggle-all */
+
+/* Disabled playerWidget when the animation has ended */
+/* #players.theme-toolbar to guard only Firefox <= 39.0 --johnGraciliano */
+#players.theme-toolbar > .finished {
+ pointer-events: none;
+ opacity: .5;
+}
+
+#toolbar #toggle-all {
+ border: 0;
+ -moz-border-start-style: solid;
+ -moz-border-start-width: 1px;
+ -moz-border-start-color: var(--theme-splitter-color);
+ min-height: var(--toolbar-height);
+}
.timeline {
height: var(--timeline-animation-height);
@@ -494,16 +639,20 @@ body {
/* Playback control buttons */
-.timeline .playback-controls .devtools-button {
+.timeline .playback-controls select,
+.timeline .playback-controls button {
flex-grow: 1;
- -moz-border-end-style: solid;
- -moz-border-end-width: 1px;
+ border-width: 0 1px 0 0;
+ border-style: solid;
+ border-color: var(--theme-splitter-color);
}
+#toggle-all::before,
.timeline .toggle::before {
background-image: url(./images/debugger-pause.png);
}
+#toggle-all.paused::before,
.paused .timeline .toggle::before,
.finished .timeline .toggle::before {
background-image: url(./images/debugger-play.png);
@@ -518,10 +667,12 @@ body {
}
@media (min-resolution: 1.1dppx) {
+ #toggle-all::before,
.timeline .toggle::before {
background-image: url(./images/debugger-pause@2x.png);
}
+ #toggle-all.paused::before,
.paused .timeline .toggle::before,
.finished .timeline .toggle::before {
background-image: url(./images/debugger-play@2x.png);
@@ -550,6 +701,7 @@ body {
height: 100%;
position: relative;
border-width: 1px 0;
+ background-color: var(--theme-sidebar-background); /* --johnGraciliano */
}
.timeline .sliders-container .current-time {
@@ -584,4 +736,4 @@ body {
width: 50px;
border-left: 1px solid var(--theme-splitter-color);
background: var(--theme-toolbar-background);
-}
+}
\ No newline at end of file
diff --git a/whitefox/browser/devtools/images/animation-fast-track-blue.svg b/whitefox/browser/devtools/images/animation-fast-track-blue.svg
new file mode 100644
index 0000000..ee84427
--- /dev/null
+++ b/whitefox/browser/devtools/images/animation-fast-track-blue.svg
@@ -0,0 +1,9 @@
+
+
+
diff --git a/whitefox/browser/devtools/images/sort-arrows.svg b/whitefox/browser/devtools/images/sort-arrows.svg
new file mode 100644
index 0000000..289b075
--- /dev/null
+++ b/whitefox/browser/devtools/images/sort-arrows.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/whitefox/browser/devtools/memory.css b/whitefox/browser/devtools/memory.css
index 9c80ada..e465bf3 100644
--- a/whitefox/browser/devtools/memory.css
+++ b/whitefox/browser/devtools/memory.css
@@ -158,6 +158,7 @@ html, body, #app, #memory-tool {
.list {
width: var(--sidebar-width);
+ min-width: var(--sidebar-width);
overflow-y: auto;
margin: 0;
padding: 0;
diff --git a/whitefox/browser/devtools/netmonitor.css b/whitefox/browser/devtools/netmonitor.css
index 248c3fc..856dfc5 100644
--- a/whitefox/browser/devtools/netmonitor.css
+++ b/whitefox/browser/devtools/netmonitor.css
@@ -44,77 +44,142 @@
padding: 0;
}
-.requests-menu-header:first-child,
-.requests-menu-subitem:first-child {
- -moz-padding-start: 6px;
-}
-
.requests-menu-subitem {
padding: 3px;
}
-.requests-menu-header:not(:last-child),
-.requests-menu-subitem:not(:last-child) {
- -moz-border-end: 1px solid var(--table-splitter-color);
-}
-
.requests-menu-header-button {
-moz-appearance: none;
- background: none;
+ background-color: transparent;
+ --border-img: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+ border-image: var(--border-img);
+ border-style: solid;
+ border-width: 0;
+ -moz-border-start-width: 1px;
+ border-inline-start-width: 1px;
min-width: 1px;
min-height: 24px;
margin: 0;
- border: none;
- padding: 0;
+ padding-bottom: 2px;
+ -moz-padding-start: 13px;
+ padding-inline-start: 13px;
+ padding-top: 2px;
+ text-align: center;
color: inherit;
font-weight: inherit !important;
- transition: background-color 0.1s ease-in-out;
+}
+
+.requests-menu-header:first-child .requests-menu-header-button:first-of-type {
+ border-width: 0;
}
.requests-menu-header-button:hover {
- background: rgba(0,0,0,0.10);
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Make possible to crop header labels in Firefox 44 and earlier */
+.requests-menu-header:not(.requests-menu-waterfall) > button > hbox > label{
+ min-width: 1.8em;
+}
+.requests-menu-status-and-method > #requests-menu-status-button > hbox > label{
+ min-width: 1.2em;
+}
+
+/* To provide for the missing #requests-menu-waterfall-image in Firefox versions prior to 46 */
+#requests-menu-waterfall-button hbox{
+ position: relative;
+}
+#requests-menu-waterfall-button hbox::after {
+ position:absolute;
+ right: 0;
+ top: calc(50% - 2px);
+ content: "";
+}
+
+#requests-menu-waterfall-button hbox::after,
+.requests-menu-header-button > .button-box > .button-icon,
+#requests-menu-waterfall-image {
+ display: -moz-box;
+ height: 4px;
+ -moz-margin-end: 6px;
+ margin-inline-end: 6px;
+ -moz-box-ordinal-group: 2;
+ width: 7px;
}
-.requests-menu-header-button:hover:active {
- background: rgba(0,0,0,0.25);
+.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
+.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
+ list-style-image: url("./images/sort-arrows.svg#ascending");
}
-.requests-menu-header-button:not(:active)[sorted] {
- background: rgba(0,0,0,0.15);
+.requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
+.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
+ list-style-image: url("./images/sort-arrows.svg#descending");
+}
+
+/* To provide for the missing #requests-menu-waterfall-image in Firefox versions prior to 46 */
+.requests-menu-header-button[sorted=ascending] hbox::after {
+ background-image: url("./images/sort-arrows.svg#ascending");
+}
+.requests-menu-header-button[sorted=descending] hbox::after {
+ background-image: url("./images/sort-arrows.svg#descending");
}
-.requests-menu-header-button:not(:active)[sorted=ascending] {
- background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
- background-size: 100% 1px;
- background-repeat: no-repeat;
+.requests-menu-header-button > .button-box > .button-text,
+#requests-menu-waterfall-label-wrapper {
+ -moz-box-flex: 1;
+}
+
+.requests-menu-header-button[sorted],
+.requests-menu-header-button[sorted]:hover {
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
}
-.requests-menu-header-button:not(:active)[sorted=descending] {
- background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
- background-size: 100% 1px;
- background-repeat: no-repeat;
- background-position: bottom;
+.requests-menu-header-button[sorted] {
+ --border-img: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+ border-image: var(--border-img);
+ box-shadow: 0.5px 0px 0px 0.5px var(--theme-splitter-color);
+ z-index: 1;
+}
+
+.requests-menu-header-button[sorted]:-moz-locale-dir(rtl),
+.requests-menu-header-button[sorted]:-moz-dir(rtl) {
+ box-shadow: -0.5px 0px 0px 0.5px var(--theme-splitter-color);
}
/* Network requests table: specific column dimensions */
.requests-menu-status-and-method {
- width: 12em;
+ width: 10.50em;
+ max-width: 20vw;
}
.requests-menu-status {
- width: 20px;
- height: 10px;
+ max-width: 5.25em;
+ text-align: center;
+ width: 10vw;
+}
+
+.requests-menu-status-and-method #requests-menu-status-button{
+ width: 4.25em;
}
-.requests-menu-method {
+.requests-menu-method,
+.requests-menu-method-box {
+ max-width: 6.75em;
text-align: center;
- font-weight: 600;
+ width: 10vw;
+}
+
+label + .requests-menu-method {
+ width: calc(100% - 1em - 8px);
+ max-width: calc(100% - 1em - 8px);
+ -moz-padding-start: 2em;
}
.requests-menu-icon-and-file {
width: 20vw;
- min-width: 4em;
}
.requests-menu-icon {
@@ -166,24 +231,24 @@
}
.requests-menu-type {
+ max-width: 6em;
text-align: center;
- width: 4em;
+ width: 8vw;
}
+.requests-menu-transferred,
.requests-menu-size {
+ max-width: 8em;
text-align: center;
- width: 8em;
-}
-
-.requests-menu-transferred {
- text-align: center;
- width: 8em;
+ width: 8vw;
}
/* Network requests table: status codes */
+.requests-menu-status-icon,
box.requests-menu-status {
background: #fff;
+ height: 10px;
width: 10px;
-moz-margin-start: 5px;
-moz-margin-end: 5px;
@@ -197,25 +262,38 @@ label.requests-menu-status-code {
-moz-margin-end: -3em !important;
}
+/* Firefox 45 and later: */
+.requests-menu-subitem.requests-menu-status box.requests-menu-status-icon{
+ -moz-margin-start: 8px;
+}
+.requests-menu-subitem.requests-menu-status label.requests-menu-status-code{
+ -moz-margin-start: -2px !important;
+}
+
+.requests-menu-status-icon:not([code]),
box.requests-menu-status:not([code]) {
background-color: var(--theme-highlight-red);
border-radius: 0; /* squares */
}
+.requests-menu-status-icon[code="cached"],
box.requests-menu-status[code="cached"] {
border: 2px solid var(--theme-content-color2);
background-color: transparent;
}
+.requests-menu-status-icon[code^="1"],
box.requests-menu-status[code^="1"] {
- background-color: var(---theme-highlight-blue);
+ background-color: var(--theme-highlight-blue);
}
+.requests-menu-status-icon[code^="2"],
box.requests-menu-status[code^="2"] {
background-color: var(--theme-highlight-green);
}
/* 3xx are triangles */
+.requests-menu-status-icon[code^="3"],
box.requests-menu-status[code^="3"] {
background-color: transparent;
width: 0;
@@ -227,11 +305,13 @@ box.requests-menu-status[code^="3"] {
}
/* 4xx and 5xx are squares - error codes */
+.requests-menu-status-icon[code^="4"],
box.requests-menu-status[code^="4"] {
background-color: var(--theme-highlight-red);
border-radius: 0; /* squares */
}
+.requests-menu-status-icon[code^="5"],
box.requests-menu-status[code^="5"] {
background-color: var(--theme-highlight-pink);
border-radius: 0;
@@ -240,22 +320,36 @@ box.requests-menu-status[code^="5"] {
/* Network requests table: waterfall header */
-#requests-menu-waterfall-label {
- -moz-padding-start: 8px;
- -moz-padding-end: 8px;
+.requests-menu-waterfall {
+ -moz-padding-start: 0;
+ padding-inline-start: 0;
+}
+
+#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
+ -moz-padding-start: 13px;
+ padding-inline-start: 13px;
}
.requests-menu-timings-division {
width: 100px;
padding-top: 2px;
-moz-padding-start: 4px;
+ padding-inline-start: 4px;
font-size: 75%;
pointer-events: none;
+ box-sizing: border-box;
+ text-align: start;
+}
+
+.requests-menu-timings-division:first-child {
+ width: 98px; /* Substract 2px for borders */
}
.requests-menu-timings-division:not(:first-child) {
- -moz-border-start: 1px dotted;
+ -moz-border-start: 1px dashed;
+ border-inline-start: 1px dashed;
-moz-margin-start: -100px !important; /* Don't affect layout. */
+ margin-inline-start: -100px !important; /* Don't affect layout. */
}
.requests-menu-timings-division:-moz-locale-dir(ltr) {
@@ -266,37 +360,27 @@ box.requests-menu-status[code^="5"] {
transform-origin: right center;
}
-.theme-dark .requests-menu-timings-division[division-scale=millisecond] {
- -moz-border-start-color: var(--theme-selection-color) !important;
-}
-
-.theme-light .requests-menu-timings-division[division-scale=millisecond] {
- -moz-border-start-color: var(--theme-body-color-alt) !important;
-}
+.theme-dark .requests-menu-timings-division {
+ -moz-border-start-color: #5a6169 !important;
+ border-inline-start-color: #5a6169 !important;
-.theme-dark .requests-menu-timings-division[division-scale=second] {
- -moz-border-start-color: var(--theme-selection-color) !important;
- font-weight: 600;
}
-.theme-light .requests-menu-timings-division[division-scale=second] {
- -moz-border-start-color: var(--theme-body-color-alt) !important;
- font-weight: 600;
-}
+.theme-light .requests-menu-timings-division {
+ -moz-border-start-color: #585959 !important;
+ border-inline-start-color: #585959 !important;
-.theme-dark .requests-menu-timings-division[division-scale=minute] {
- -moz-border-start-color: var(--theme-selection-color) !important;
- font-weight: 600;
}
-.theme-light .requests-menu-timings-division[division-scale=minute] {
- -moz-border-start-color: var(--theme-body-color-alt) !important;
+.requests-menu-timings-division[division-scale=second],
+.requests-menu-timings-division[division-scale=minute] {
font-weight: 600;
}
/* Network requests table: waterfall items */
.requests-menu-subitem.requests-menu-waterfall {
+ -moz-border-start: 1px solid transparent; /* Mark the start of the timelines (Why is transparent OK?!) --johnGraciliano */
-moz-padding-start: 0px;
-moz-padding-end: 4px;
/* Background created on a