Skip to content

Commit

Permalink
Fixed #194 Invisible audio playback on-tab indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
@traxium
traxium committed Aug 13, 2017
1 parent da3fcd7 commit 8ce0b21
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 25 deletions.
99 changes: 99 additions & 0 deletions skin/tab-audio.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions skin/tt-theme-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,22 +194,22 @@

#tt-treechildren::-moz-tree-image(tt-soundplaying),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white);
}

#tt-treechildren::-moz-tree-image(tt-soundplaying, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white-hover);
}

#tt-treechildren::-moz-tree-image(tt-muted),
#tt-treechildren-feedback::-moz-tree-image(tt-muted) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white);
}

#tt-treechildren::-moz-tree-image(tt-muted, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-muted, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white-hover);
}

/* I don't know why but .tt-treechildren doesn't work with audio indicator icons. IDs are required here. */
Expand Down
14 changes: 7 additions & 7 deletions skin/tt-theme-default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,36 +24,36 @@

#tt-treechildren::-moz-tree-image(tt-soundplaying),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio);
}

#tt-treechildren::-moz-tree-image(tt-soundplaying, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-hover);
}

#tt-treechildren::-moz-tree-image(tt-muted),
#tt-treechildren-feedback::-moz-tree-image(tt-muted) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted);
}

#tt-treechildren::-moz-tree-image(tt-muted, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-muted, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-hover);
}

#tt-treechildren::-moz-tree-image(tt-soundplaying, selected),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, selected),
#tt-treechildren::-moz-tree-image(tt-soundplaying, selected, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, selected, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white-hover);
}

#tt-treechildren::-moz-tree-image(tt-muted, selected),
#tt-treechildren-feedback::-moz-tree-image(tt-muted, selected),
#tt-treechildren::-moz-tree-image(tt-muted, selected, hover),
#tt-treechildren-feedback::-moz-tree-image(tt-muted, selected, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white-hover);
}

/* I don't know why but .tt-treechildren doesn't work with audio indicator icons. IDs are required here. */
Expand All @@ -71,4 +71,4 @@
margin-left: -5px;
}

/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
20 changes: 10 additions & 10 deletions skin/tt-theme-mimic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,22 +203,22 @@

:root[devtoolstheme="dark"] #tt-treechildren::-moz-tree-image(tt-soundplaying),
:root[devtoolstheme="dark"] #tt-treechildren-feedback::-moz-tree-image(tt-soundplaying) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white);
}

:root[devtoolstheme="dark"] #tt-treechildren::-moz-tree-image(tt-soundplaying, hover),
:root[devtoolstheme="dark"] #tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white-hover);
}

:root[devtoolstheme="dark"] #tt-treechildren::-moz-tree-image(tt-muted),
:root[devtoolstheme="dark"] #tt-treechildren-feedback::-moz-tree-image(tt-muted) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white);
}

:root[devtoolstheme="dark"] #tt-treechildren::-moz-tree-image(tt-muted, hover),
:root[devtoolstheme="dark"] #tt-treechildren-feedback::-moz-tree-image(tt-muted, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white-hover);
}

/* Black icons */
Expand All @@ -240,32 +240,32 @@

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-soundplaying),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-soundplaying) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio);
}

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-muted),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-muted) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted);
}

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-soundplaying, selected),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, selected) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-white-hover);
}

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-muted, selected),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-muted, selected) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-white-hover);
}

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-soundplaying, hover),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-soundplaying, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-hover);
}

:root[devtoolstheme="light"] #tt-treechildren::-moz-tree-image(tt-muted, hover),
:root[devtoolstheme="light"] #tt-treechildren-feedback::-moz-tree-image(tt-muted, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-hover);
}

/* I don't know why but .tt-treechildren doesn't work with audio indicator icons. IDs are required here. */
Expand Down
8 changes: 4 additions & 4 deletions skin/tt-tree.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,19 +171,19 @@
}

.tt-treechildren::-moz-tree-image(tt-soundplaying) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio);
}

.tt-treechildren::-moz-tree-image(tt-soundplaying, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-hover);
}

.tt-treechildren::-moz-tree-image(tt-muted) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted);
}

.tt-treechildren::-moz-tree-image(tt-muted, hover) {
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover);
list-style-image: url(chrome://tabtree/skin/tab-audio.svg#tab-audio-muted-hover);
}

/* Nesting lines for mimic, dark and OS X themes */
Expand Down

0 comments on commit 8ce0b21

Please sign in to comment.