Replace static inline styles with css class

The static inline styles are replaced with css class to avoid Content-Security-Policy violations.

application/views/scripts/dashboard/settings.phtml

@@ -7,20 +7,20 @@
     <table class="avp action" data-base-target="_next">
         <thead>
             <tr>
-                <th style="width: 18em;">
+                <th>
                     <strong><?= t('Dashlet Name') ?></strong>
                 </th>
                 <th>
                     <strong><?= t('Url') ?></strong>
                 </th>
-                <th style="width: 1.4em;">&nbsp;</th>
+                <th class="icon-col">&nbsp;</th>
             </tr>
         </thead>
         <tbody>
             <?php foreach ($this->dashboard->getPanes() as $pane): ?>
                 <?php if ($pane->getDisabled()) continue; ?>
                 <tr>
-                    <th colspan="2" style="text-align: left; padding: 0.5em;">
+                    <th colspan="2">
                     <?php if ($pane->isUserWidget()): ?>
                         <?= $this->qlink(
                             $pane->getName(),
@@ -63,7 +63,7 @@
                                     array('title' => sprintf($this->translate('Edit dashlet %s'), $dashlet->getTitle()))
                                 ); ?>
                             </td>
-                            <td style="table-layout: fixed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                            <td>
                                 <?= $this->qlink(
                                     $dashlet->getUrl()->getRelativeUrl(),
                                     $dashlet->getUrl()->getRelativeUrl(),

application/views/scripts/list/applicationlog.phtml

@@ -13,8 +13,8 @@
     <tbody>
     <?php foreach ($this->logData as $value): ?>
         <?php $datetime = new Datetime($value->datetime) ?>
-        <tr class="state">
-            <td style="width: 6em; text-align: center">
+        <tr>
+            <td>
                 <?= $this->escape($datetime->format('d.m. H:i')) ?><br />
                 <?= $this->escape($value->loglevel) ?>
             </td>

application/views/scripts/navigation/shared.phtml

@@ -17,9 +17,9 @@ if (! $this->compact): ?>
     <table class="table-row-selectable common-table">
         <thead>
             <th><?= $this->translate('Shared Navigation'); ?></th>
-            <th style="width: 10em"><?= $this->translate('Type'); ?></th>
-            <th style="width: 10em"><?= $this->translate('Owner'); ?></th>
-            <th style="width: 5em"><?= $this->translate('Unshare'); ?></th>
+            <th><?= $this->translate('Type'); ?></th>
+            <th><?= $this->translate('Owner'); ?></th>
+            <th><?= $this->translate('Unshare'); ?></th>
         </thead>
         <tbody>
         <?php foreach ($items as $item): ?>
@@ -53,7 +53,7 @@ if (! $this->compact): ?>
                     )
                 ); ?></td>
             <?php else: ?>
-                <td data-base-target="_self"><?= $removeForm
+                <td data-base-target="_self" class="remove-nav-item"><?= $removeForm
                     ->setDefault('name', $item->name)
                     ->setAction(Url::fromPath(
                         'navigation/unshare',

library/Icinga/Web/Widget/Announcements.php

@@ -50,6 +50,6 @@ class Announcements extends AbstractWidget
             return $html;
         }
         // Force container update on XHR
-        return '<div style="display: none;"></div>';
+        return '<div hidden></div>';
     }
 }

library/Icinga/Web/Widget/ApplicationStateMessages.php

@@ -39,14 +39,14 @@ class ApplicationStateMessages extends AbstractWidget
         }
 
         if (! (bool) $enabled) {
-            return '<div style="display: none;"></div>';
+            return '<div hidden></div>';
         }
 
         $active = $this->getMessages();
 
         if (empty($active)) {
             // Force container update on XHR
-            return '<div style="display: none;"></div>';
+            return '<div hidden></div>';
         }
 
         $html = '<div>';

library/Icinga/Web/Widget/FilterEditor.php

@@ -471,7 +471,7 @@ class FilterEditor extends AbstractWidget
         }
 
         if ($this->addTo && $this->addTo == $filter->getId()) {
-            $parts[] = '<li style="background: #ffb">' . $this->renderNewFilter() .$this->cancelLink(). '</li>';
+            $parts[] = '<li class="new-filter">' . $this->renderNewFilter() .$this->cancelLink(). '</li>';
         }
 
         $class = $level === 0 ? ' class="datafilter"' : '';
@@ -575,7 +575,7 @@ class FilterEditor extends AbstractWidget
             $this->elementId('operator', $filter),
             $ops,
             $filter === null ? null : $filter->getOperatorName(),
-            array('style' => 'width: 5em')
+            ['class' => 'filter-operator']
         );
     }
 
@@ -594,7 +594,7 @@ class FilterEditor extends AbstractWidget
             $this->elementId('sign', $filter),
             $signs,
             $filter === null ? null : $filter->getSign(),
-            array('style' => 'width: 4em')
+            ['class' => 'filter-rule']
         );
     }
 
@@ -738,7 +738,7 @@ class FilterEditor extends AbstractWidget
 
         $html = ' <form method="post" class="search inline" action="'
               . $preservedUrl
-              . '"><input type="text" name="q" style="width: 8em" class="search" value="" placeholder="'
+              . '"><input type="text" name="q" class="search search-input" value="" placeholder="'
               . t('Search...')
               . '" /></form>';
 
@@ -779,7 +779,7 @@ class FilterEditor extends AbstractWidget
             . '<form action="'
             . Url::fromRequest()
             . '" class="editor" method="POST">'
-            . '<input type="submit" name="submit" value="Apply" style="display:none;"/>'
+            . '<input type="submit" name="submit" value="Apply" hidden/>'
             . '<ul class="tree"><li>'
             . $this->renderFilter($this->filter)
             . '</li></ul>'

library/Icinga/Web/Widget/Tabs.php

@@ -52,7 +52,7 @@ EOT;
      * @var string
      */
     private $closeTpl = <<< 'EOT'
-<li style="float: right;">
+<li class="close-container-btn">
   <a href="#" title="{TITLE}" aria-label="{TITLE}" class="close-container-control">
     <i aria-hidden="true" class="icon-cancel"></i>
   </a>

modules/doc/application/views/scripts/style/font.phtml

@@ -5,11 +5,10 @@
 
 <div class="content">
 <?php foreach ($this->font->glyphs as $icon): ?>
-<!-- TODO: move CSS away //-->
-<div style="width: 33%; font-size: 1.5em; height: 2em; float: left;" class="<?=
+<div class="icon <?=
     $this->font->css_prefix_text . $icon->css
 ?>">
-<?= $this->escape($icon->css) ?> <span style="font-size: 0.6em">(0x<?= dechex($icon->code) ?>)</span>
+<?= $this->escape($icon->css) ?> <span class="icon-code">(0x<?= dechex($icon->code) ?>)</span>
 </div>
 <?php endforeach ?>
 </div>

modules/doc/public/css/module.less

@@ -107,3 +107,14 @@ th {
   text-align: left;
   text-transform: uppercase;
 }
+
+.icon {
+  width: 33%;
+  font-size: 1.5em;
+  height: 2em;
+  float: left;
+}
+
+.icon-code {
+  font-size: 0.6em;
+}

modules/monitoring/application/views/helpers/PluginOutput.php

@@ -63,7 +63,7 @@ class Zend_View_Helper_PluginOutput extends Zend_View_Helper_Abstract
     protected static $htmlReplacements = array(
         "\t",
         "\n",
-        '<table style="font-size: 0.75em"'
+        '<table class="output-table"'
     );
 
     /** @var \Icinga\Module\Monitoring\Web\Helper\PluginOutputHookRenderer */

modules/monitoring/application/views/scripts/list/eventgrid.phtml

@@ -112,9 +112,9 @@ for ($i = 0; $i < $diff->days; $i += $step) {
     $f->add(new DateInterval('P' . $step . 'D'));
 }
 ?>
-<div style="width: 33.5em;">
+<div class="event-grid">
 <?php foreach (array_reverse($grids) as $key => $grid): ?>
-    <div style=" <?= $this->orientation === 'horizontal' ? '' : 'display: inline-block; vertical-align: top; top; margin: 0.5em;' ?>">
+    <div class=" <?= $this->orientation === 'horizontal' ? '' : 'vertical' ?>">
         <?= $grid; ?>
         <?= $this->orientation === 'horizontal' ? '<br />' : '' ?>
     </div>

modules/monitoring/application/views/scripts/show/contact.phtml

@@ -16,7 +16,7 @@
   <table class="name-value-table">
     <tbody>
       <tr>
-        <th style="width: 20%"></th>
+        <th></th>
         <td><strong><?= $this->escape($contact->contact_alias) ?></strong> (<?= $contact->contact_name ?>)</td>
       </tr>
 <?php if ($contact->contact_email): ?>

modules/monitoring/configuration.php

@@ -427,5 +427,6 @@ $dashboard->add(
 /*
  * CSS
  */
+$this->provideCssFile('event-grid.less');
 $this->provideCssFile('service-grid.less');
 $this->provideCssFile('tables.less');

modules/monitoring/public/css/event-grid.less

@@ -0,0 +1,9 @@
+.event-grid {
+  width: 33.5em;
+
+  .vertical {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0.5em;
+  }
+}

modules/monitoring/public/css/module.less

@@ -654,6 +654,9 @@ form.instance-features span.description, form.object-features span.description {
 .plugin-output {
   border-left: 5px solid @gray-lighter;
   padding: 0.66em 0.33em;
+  .output-table {
+    font-size: 0.75em;
+  }
 
   .state-critical {
     background-color: @color-critical;

modules/setup/application/views/scripts/index/index.phtml

@@ -19,7 +19,7 @@ $maxProgress = max(array_merge([0], array_keys(array_filter(
   <div class="setup-header">
     <?= $this->img('img/icinga-logo-big.png'); ?>
     <div class="progress-bar">
-      <div class="step" style="width: 10%;">
+      <div class="step width-percent-10">
         <h1><?= $this->translate('Welcome', 'setup.progress'); ?></h1>
         <?php $stateClass = $finished || $currentPos > 0 ? 'complete' : (
           $maxProgress > 0 ? 'visited' : 'active'
@@ -30,7 +30,7 @@ $maxProgress = max(array_merge([0], array_keys(array_filter(
           <td class="right"><div class="line right <?= $stateClass; ?>"></div></td>
         </tr></tbody></table>
       </div>
-      <div class="step" style="width: 10%;">
+      <div class="step width-percent-10">
         <h1><?= $this->translate('Modules', 'setup.progress'); ?></h1>
         <?php $stateClass = $finished || $currentPos > 1 ? ' complete' : (
           $maxProgress > 1 ? ' visited' : (
@@ -46,7 +46,7 @@ $maxProgress = max(array_merge([0], array_keys(array_filter(
           <?= $this->restartForm ?>
         <?php endif ?>
       </div>
-      <div class="step" style="width: 10%;">
+      <div class="step width-percent-10">
         <h1><?= $this->translate('Requirements', 'setup.progress'); ?></h1>
         <?php $stateClass = $finished || $currentPos > 2 ? ' complete' : (
           $maxProgress > 2 ? ' visited' : (
@@ -62,7 +62,7 @@ $maxProgress = max(array_merge([0], array_keys(array_filter(
           <?= $this->restartForm ?>
         <?php endif ?>
       </div>
-      <div class="step" style="width: 60%;">
+      <div class="step width-percent-60">
         <h1><?= $this->translate('Configuration', 'setup.progress'); ?></h1>
         <table><tbody><tr>
           <td class="left">
@@ -122,7 +122,7 @@ $maxProgress = max(array_merge([0], array_keys(array_filter(
           <?= $this->restartForm ?>
         <?php endif ?>
       </div>
-      <div class="step" style="width: 10%;">
+      <div class="step width-percent-10">
         <h1><?= $this->translate('Finish', 'setup.progress'); ?></h1>
         <?php $stateClass = $finished ? ' complete' : ($pages[$currentPos] === end($pages) ? ' active' : ''); ?>
         <table><tbody><tr>

public/css/icinga/nav.less

@@ -48,3 +48,7 @@
 .primary-nav a {
   font-weight: 500;
 }
+
+.remove-nav-item {
+  padding-left: 2em;
+}

public/css/icinga/setup.less

@@ -114,6 +114,14 @@
   }
 }
 
+.width-percent-10 {
+  width: 10%;
+}
+
+.width-percent-60 {
+  width: 60%;
+}
+
 .setup-content {
   padding: 1.5em 10em 0 10em;
 

public/css/icinga/tabs.less

@@ -103,3 +103,7 @@
 #layout.twocols .tabs > li > .close-container-control {
   display: block;
 }
+
+.close-container-btn {
+  float: right;
+}

public/css/icinga/widgets.less

@@ -208,6 +208,10 @@ table.multiselect tr[href] td {
 }
 
 #main div.filter {
+  .search.search-input {
+    width: 8em;
+  }
+
   form.editor {
     input[type=text], select {
       width: 12em;
@@ -238,6 +242,20 @@ table.multiselect tr[href] td {
     .buttons input:not(:last-child) {
       margin-right:.5em;
     }
+
+    ul.tree {
+      .filter-operator {
+        width: 5em;
+      }
+
+      .new-filter {
+        background: #ffb;
+      }
+
+      .filter-rule {
+        width: 4em;
+      }
+    }
   }
 }
 
@@ -641,3 +659,4 @@ ul.tree li a.error:hover {
 html.no-js .progress-label {
   display: none;
 }
+

public/js/icinga/behavior/application-state.js

@@ -28,7 +28,7 @@
             var _this = e.data.self;
 
             $('#layout').append(
-                '<div id="application-state" class="container" style="display: none" data-icinga-url="'
+                '<div id="application-state" class="container" hidden data-icinga-url="'
                 + _this.icinga.loader.baseUrl
                 + '/application-state" data-icinga-refresh="60"></div>'
             );