Use fully CSS based icons

- themes can easier customize their look
- this better deals with previous JS code who relied on sprites (fixes #13815)

Signed-off-by: Michal Čihař <michal@cihar.com>

js/functions.js

@@ -4928,7 +4928,7 @@ function PMA_getImage(image, alternate, attributes) {
             // this is private
             alt: '',
             title: '',
-            src: '',
+            src: 'themes/dot.gif',
         },
         attr: function (name, value) {
             if (value == undefined) {
@@ -4969,11 +4969,9 @@ function PMA_getImage(image, alternate, attributes) {
     } else {
         retval.attr('title', escapeHtml(alternate));
     }
-    // it's an image file
-    retval.attr(
-        'src',
-        pmaThemeImage + image
-    );
+    // set css classes
+    var klass = image.replace('.gif', '').replace('.png', '');
+    retval.attr('class', 'icon ic_' + klass);
     // set all other attrubutes
     for (var i in attributes) {
         if (i == 'src') {

libraries/classes/Theme.php

@@ -78,7 +78,8 @@ class Theme
         'rte',
         'codemirror',
         'jqplot',
-        'resizable-menu'
+        'resizable-menu',
+        'icons',
     );
 
     /**

libraries/classes/Util.php

@@ -122,6 +122,13 @@ class Util
             $url = './themes/pmahomme/' . $image;
         }
 
+        $class = str_replace(array('.gif','.png'), '', $image);
+        if (isset($attributes['class'])) {
+            $attributes['class'] = "icon ic_$class " . $attributes['class'];
+        } else {
+            $attributes['class'] = "icon ic_$class";
+        }
+
         // set all other attributes
         $attr_str = '';
         foreach ($attributes as $key => $value) {
@@ -145,8 +152,8 @@ class Util
         }
 
         // generate the IMG tag
-        $template = '<img src="%s" title="%s" alt="%s"%s />';
-        $retval = sprintf($template, $url, $title, $alt, $attr_str);
+        $template = '<img src="themes/dot.gif" title="%s" alt="%s"%s />';
+        $retval = sprintf($template, $title, $alt, $attr_str);
 
         return $retval;
     }

test/classes/Config/FormDisplayTemplateTest.php

@@ -177,8 +177,8 @@ class FormDisplayTemplateTest extends TestCase
         );
 
         $this->assertContains(
-            '<img src="./themes/pmahomme/b_help.png" title="Documentation" ' .
-            'alt="Documentation" /',
+            '<img src="themes/dot.gif" title="Documentation" ' .
+            'alt="Documentation" class="icon ic_b_help" /',
             $result
         );
 

test/classes/FooterTest.php

@@ -182,9 +182,9 @@ class FooterTest extends PmaTestCase
             '<div id="selflink" class="print_ignore"><a href="index.php?db=&amp;'
             . 'table=&amp;server=1&amp;target=&amp;lang=en&amp;collation_connection='
             . 'utf8_general_ci" title="Open new phpMyAdmin window" '
-            . 'target="_blank" rel="noopener noreferrer"><img src="./themes/pmahomme/window-new.png" title="Open new '
+            . 'target="_blank" rel="noopener noreferrer"><img src="themes/dot.gif" title="Open new '
             . 'phpMyAdmin window" alt="Open new phpMyAdmin window" '
-            . '/></a></div>',
+            . 'class="icon ic_window-new" /></a></div>',
             $this->_callPrivateFunction(
                 '_getSelfLink',
                 array(

test/classes/InsertEditTest.php

@@ -1413,8 +1413,8 @@ class InsertEditTest extends TestCase
         $GLOBALS['cfg']['ActionLinksMode'] = 'icons';
         $GLOBALS['cfg']['LinkLengthLimit'] = 2;
         $this->assertContains(
-            '<a href="#" target="_blank"><span class="nowrap"><img src="./themes/pmahomme/b_edit.png"'
-            . ' title="Edit/Insert" alt="Edit/Insert" />'
+            '<a href="#" target="_blank"><span class="nowrap"><img src="themes/dot.'
+            . 'gif" title="Edit/Insert" alt="Edit/Insert" class="icon ic_b_edit" />'
             . '</span></a>',
             InsertEdit::getHtmlForGisDataTypes()
         );

test/classes/MessageTest.php

@@ -542,7 +542,7 @@ class MessageTest extends PmaTestCase
         $this->object->setMessage('Test Message');
 
         $this->expectOutputString(
-            '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" /> '
+            '<div class="notice"><img src="themes/dot.gif" title="" alt="" class="icon ic_s_notice" /> '
             . 'Test Message</div>'
         );
         $this->object->display();
@@ -559,7 +559,7 @@ class MessageTest extends PmaTestCase
     {
         $this->object->setMessage('Test Message');
         $this->assertEquals(
-            '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" /> '
+            '<div class="notice"><img src="themes/dot.gif" title="" alt="" class="icon ic_s_notice" /> '
             . 'Test Message</div>',
             $this->object->getDisplay()
         );
@@ -587,18 +587,18 @@ class MessageTest extends PmaTestCase
         return array(
             array(
                 1,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" '
-                . '/>  1 row affected.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  1 row affected.</div>'
             ),
             array(
                 2,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" '
-                . '/>  2 rows affected.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  2 rows affected.</div>'
             ),
             array(
                 10000,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" '
-                . '/>  10000 rows affected.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  10000 rows affected.</div>'
             )
         );
     }
@@ -632,18 +632,18 @@ class MessageTest extends PmaTestCase
         return array(
             array(
                 1,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  1 row inserted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  1 row inserted.</div>'
             ),
             array(
                 2,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  2 rows inserted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  2 rows inserted.</div>'
             ),
             array(
                 100000,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  100000 rows inserted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  100000 rows inserted.</div>'
             )
         );
     }
@@ -677,18 +677,18 @@ class MessageTest extends PmaTestCase
         return array(
             array(
                 1,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  1 row deleted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  1 row deleted.</div>'
             ),
             array(
                 2,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  2 rows deleted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  2 rows deleted.</div>'
             ),
             array(
                 500000,
-                '<div class="notice"><img src="./themes/pmahomme/s_notice.png" title="" alt="" />'
-                . '  500000 rows deleted.</div>'
+                '<div class="notice"><img src="themes/dot.gif" title="" alt="" '
+                . 'class="icon ic_s_notice" />  500000 rows deleted.</div>'
             )
         );
     }

test/classes/Plugins/Auth/AuthenticationConfigTest.php

@@ -117,7 +117,9 @@ class AuthenticationConfigTest extends PmaTestCase
         $this->assertContains(
             '<strong>MySQL said: </strong><a href="./url.php?url=https%3A%2F%2F' .
             'dev.mysql.com%2Fdoc%2Frefman%2F5.5%2Fen%2Ferror-messages-server.html"' .
-            ' target="mysql_doc">',
+            ' target="mysql_doc">' .
+            '<img src="themes/dot.gif" title="Documentation" alt="Documentation" ' .
+            'class="icon ic_b_help" /></a>',
             $html
         );
 

test/classes/ThemeTest.php

@@ -148,6 +148,7 @@ class ThemeTest extends PmaTestCase
         ob_end_clean();
         $this->assertTrue($ret);
         $this->assertContains('FILE: navigation.css.php', $out);
+        $this->assertContains('.ic_b_bookmark', $out);
     }
 
     /**

test/classes/UtilTest.php

@@ -1408,7 +1408,7 @@ class UtilTest extends PmaTestCase
         $GLOBALS['cfg']['ActionLinksMode'] = 'icons';
 
         $this->assertEquals(
-            '<span class="nowrap"><img src="./themes/pmahomme/b_comment.png" title="" alt="" /></span>',
+            '<span class="nowrap"><img src="themes/dot.gif" title="" alt="" class="icon ic_b_comment" /></span>',
             Util::getIcon('b_comment.png')
         );
     }
@@ -1426,9 +1426,9 @@ class UtilTest extends PmaTestCase
         $alternate_text = 'alt_str';
 
         $this->assertEquals(
-            '<span class="nowrap"><img src="./themes/pmahomme/b_comment.png" title="'
+            '<span class="nowrap"><img src="themes/dot.gif" title="'
             . $alternate_text . '" alt="' . $alternate_text
-            . '" /></span>',
+            . '" class="icon ic_b_comment" /></span>',
             Util::getIcon('b_comment.png', $alternate_text)
         );
     }
@@ -1448,9 +1448,9 @@ class UtilTest extends PmaTestCase
         // Here we are checking for an icon embedded inside a span (i.e not a menu
         // bar icon
         $this->assertEquals(
-            '<span class="nowrap"><img src="./themes/pmahomme/b_comment.png" title="'
+            '<span class="nowrap"><img src="themes/dot.gif" title="'
             . $alternate_text . '" alt="' . $alternate_text
-            . '" />&nbsp;' . $alternate_text . '</span>',
+            . '" class="icon ic_b_comment" />&nbsp;' . $alternate_text . '</span>',
             Util::getIcon('b_comment.png', $alternate_text, true, false)
         );
     }
@@ -2065,7 +2065,7 @@ class UtilTest extends PmaTestCase
         $GLOBALS['cfg']['ServerDefault'] = 1;
 
         $this->assertEquals(
-            '<a href="./url.php?url=https%3A%2F%2Fdocs.phpmyadmin.net%2Fen%2Flatest%2Fpage.html%23anchor" target="documentation"><img src="./themes/pmahomme/b_help.png" title="Documentation" alt="Documentation" /></a>',
+            '<a href="./url.php?url=https%3A%2F%2Fdocs.phpmyadmin.net%2Fen%2Flatest%2Fpage.html%23anchor" target="documentation"><img src="themes/dot.gif" title="Documentation" alt="Documentation" class="icon ic_b_help" /></a>',
             Util::showDocu('page', 'anchor')
         );
     }
@@ -2086,8 +2086,8 @@ class UtilTest extends PmaTestCase
         $lang = _pgettext('PHP documentation language', 'en');
         $expected = '<a href="./url.php?url=https%3A%2F%2Fsecure.php.net%2Fmanual%2F' . $lang
             . '%2F' . $target . '" target="documentation">'
-            . '<img src="./themes/pmahomme/b_help.png" title="Documentation" alt="Documentation" />'
-            . '</a>';
+            . '<img src="themes/dot.gif" title="' . __('Documentation') . '" alt="'
+            . __('Documentation') . '" class="icon ic_b_help" /></a>';
 
         $this->assertEquals(
             $expected, Util::showPHPDocu($target)

test/selenium/TestBase.php

@@ -376,7 +376,7 @@ abstract class PMA_SeleniumBase extends PHPUnit_Extensions_Selenium2TestCase
     public function logOutIfLoggedIn()
     {
         if ($this->isLoggedIn()) {
-            $this->byCssSelector("a.logout")->click();
+            $this->byCssSelector("img.icon.ic_s_loggoff")->click();
         }
     }