add body font-size changer

sebastianbergmann · Nov 20, 2022 · c11ce03 · c11ce03
1 parent 3a8c5a7
commit c11ce03
Show file tree

Hide file tree

Showing 30 changed files with 255 additions and 0 deletions.
diff --git a/src/Report/Html/Facade.php b/src/Report/Html/Facade.php
@@ -132,6 +132,7 @@ private function copyFiles(string $target): void
         copy($this->templatePath . 'js/jquery.min.js', $dir . 'jquery.min.js');
         copy($this->templatePath . 'js/nv.d3.min.js', $dir . 'nv.d3.min.js');
         copy($this->templatePath . 'js/file.js', $dir . 'file.js');
+        copy($this->templatePath . 'js/font-size-changer.js', $dir . 'font-size-changer.js');
     }
 
     private function directory(string $directory): string

diff --git a/src/Report/Html/Renderer/Template/css/style.css b/src/Report/Html/Renderer/Template/css/style.css
@@ -128,3 +128,47 @@ table + .structure-heading {
  border-top: 1px solid lightgrey;
  padding-top: 0.5em;
 }
+
+nav {
+ display: flex;
+ align-items: center;
+ background-color: #e9ecef;
+}
+
+.breadcrumb {
+ flex: 1;
+ margin-bottom: 0;
+ background: transparent;
+}
+
+.font-size-changer__small {
+ font-size: 14px;
+}
+
+.font-size-changer__medium {
+ font-size: 16px;
+}
+
+.font-size-changer__large {
+ font-size: 20px;
+}
+
+.font-size-changer__xlarge {
+ font-size: 24px;
+}
+
+body[data-size="small"] {
+ font-size: 0.75em;
+}
+
+body[data-size="medium"] {
+ font-size: 1em;
+}
+
+body[data-size="large"] {
+ font-size: 1.5em;
+}
+
+body[data-size="xlarge"] {
+ font-size: 2em;
+}
diff --git a/src/Report/Html/Renderer/Template/dashboard.html.dist b/src/Report/Html/Renderer/Template/dashboard.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -140,6 +146,7 @@
   <script src="{{path_to_root}}_js/jquery.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/d3.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/nv.d3.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
   nv.addGraph(function() {

diff --git a/src/Report/Html/Renderer/Template/dashboard_branch.html.dist b/src/Report/Html/Renderer/Template/dashboard_branch.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -140,6 +146,7 @@
   <script src="{{path_to_root}}_js/jquery.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/d3.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/nv.d3.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
   nv.addGraph(function() {

diff --git a/src/Report/Html/Renderer/Template/directory.html.dist b/src/Report/Html/Renderer/Template/directory.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -56,5 +62,7 @@
     </p>
    </footer>
   </div>
+  <script src="{{path_to_root}}_js/jquery.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/directory_branch.html.dist b/src/Report/Html/Renderer/Template/directory_branch.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -58,5 +64,7 @@
     </p>
    </footer>
   </div>
+  <script src="{{path_to_root}}_js/jquery.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/file.html.dist b/src/Report/Html/Renderer/Template/file.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -61,5 +67,6 @@
   <script src="{{path_to_root}}_js/popper.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/bootstrap.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/file.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/file_branch.html.dist b/src/Report/Html/Renderer/Template/file_branch.html.dist
@@ -18,6 +18,12 @@
        <ol class="breadcrumb">
 {{breadcrumbs}}
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -63,5 +69,6 @@
   <script src="{{path_to_root}}_js/popper.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/bootstrap.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/file.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/js/font-size-changer.js b/src/Report/Html/Renderer/Template/js/font-size-changer.js
@@ -0,0 +1,15 @@
+  $(function() {
+   var $body = $('body');
+
+   $(document).on('click', '.font-size-changer > button', function(){
+     let $this = $(this);
+     let size = $this.attr('data-size');
+     $body.attr('data-size', size);
+     localStorage.setItem('phpunit-coverage-fontsize', size);
+   });
+
+   let currentSize = localStorage.getItem('phpunit-coverage-fontsize');
+   if (currentSize) {
+     $body.attr('data-size', currentSize);
+   }
+});
diff --git a/tests/_files/Report/HTML/CoverageForBankAccount/BankAccount.php.html b/tests/_files/Report/HTML/CoverageForBankAccount/BankAccount.php.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">BankAccount.php</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -248,5 +254,6 @@ <h4>Legend</h4>
   <script src="_js/popper.min.js" type="text/javascript"></script>
   <script src="_js/bootstrap.min.js" type="text/javascript"></script>
   <script src="_js/file.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/tests/_files/Report/HTML/CoverageForBankAccount/dashboard.html b/tests/_files/Report/HTML/CoverageForBankAccount/dashboard.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">(Dashboard)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -146,6 +152,7 @@ <h3>Project Risks</h3>
   <script src="_js/jquery.min.js" type="text/javascript"></script>
   <script src="_js/d3.min.js" type="text/javascript"></script>
   <script src="_js/nv.d3.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
   nv.addGraph(function() {

diff --git a/tests/_files/Report/HTML/CoverageForBankAccount/index.html b/tests/_files/Report/HTML/CoverageForBankAccount/index.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item">(<a href="dashboard.html">Dashboard</a>)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -114,5 +120,7 @@ <h4>Legend</h4>
     </p>
    </footer>
   </div>
+  <script src="_js/jquery.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/dashboard.html b/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/dashboard.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">(Dashboard)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -142,6 +148,7 @@ <h3>Project Risks</h3>
   <script src="_js/jquery.min.js" type="text/javascript"></script>
   <script src="_js/d3.min.js" type="text/javascript"></script>
   <script src="_js/nv.d3.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
   nv.addGraph(function() {

diff --git a/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/index.html b/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/index.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item">(<a href="dashboard.html">Dashboard</a>)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -104,5 +110,7 @@ <h4>Legend</h4>
     </p>
    </footer>
   </div>
+  <script src="_js/jquery.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/source_with_ignore.php.html b/tests/_files/Report/HTML/CoverageForFileWithIgnoredLines/source_with_ignore.php.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">source_with_ignore.php</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -193,5 +199,6 @@ <h4>Legend</h4>
   <script src="_js/popper.min.js" type="text/javascript"></script>
   <script src="_js/bootstrap.min.js" type="text/javascript"></script>
   <script src="_js/file.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/tests/_files/Report/HTML/PHP80AndBelow/CoverageForClassWithAnonymousFunction/index.html b/tests/_files/Report/HTML/PHP80AndBelow/CoverageForClassWithAnonymousFunction/index.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item">(<a href="dashboard.html">Dashboard</a>)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -114,5 +120,7 @@ <h4>Legend</h4>
     </p>
    </footer>
   </div>
+  <script src="_js/jquery.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/...HP80AndBelow/PathCoverageForSourceWithoutNamespace/source_without_namespace.php_path.html b/...HP80AndBelow/PathCoverageForSourceWithoutNamespace/source_without_namespace.php_path.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">source_without_namespace.php</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -233,5 +239,6 @@ <h4>Legend</h4>
   <script src="_js/popper.min.js" type="text/javascript"></script>
   <script src="_js/bootstrap.min.js" type="text/javascript"></script>
   <script src="_js/file.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/tests/_files/Report/HTML/PHP81AndUp/CoverageForClassWithAnonymousFunction/dashboard.html b/tests/_files/Report/HTML/PHP81AndUp/CoverageForClassWithAnonymousFunction/dashboard.html
@@ -20,6 +20,12 @@
          <li class="breadcrumb-item active">(Dashboard)</li>
 
        </ol>
+       <div class="font-size-changer">
+         <button type="button" class="font-size-changer__small" data-size="small">A</button>
+         <button type="button" class="font-size-changer__medium" data-size="medium">A</button>
+         <button type="button" class="font-size-changer__large" data-size="large">A</button>
+         <button type="button" class="font-size-changer__xlarge" data-size="xlarge">A</button>
+       </div>
       </nav>
      </div>
     </div>
@@ -142,6 +148,7 @@ <h3>Project Risks</h3>
   <script src="_js/jquery.min.js" type="text/javascript"></script>
   <script src="_js/d3.min.js" type="text/javascript"></script>
   <script src="_js/nv.d3.min.js" type="text/javascript"></script>
+  <script src="_js/font-size-changer.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
   nv.addGraph(function() {