[Reporting] Remove preserve_layout injected css (#126475)

* remove unnecessary CSS

* removed unused discover injected CSS

* move visualize-specific css to visualize

* added some comments

* added missing mock

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/visualizations/kibana.json

@@ -12,9 +12,10 @@
     "embeddable",
     "inspector",
     "savedObjects",
+    "screenshotMode",
     "presentationUtil"
   ],
-  "optionalPlugins": [ "home", "share", "usageCollection", "spaces", "savedObjectsTaggingOss"],
+  "optionalPlugins": ["home", "share", "usageCollection", "spaces", "savedObjectsTaggingOss"],
   "requiredBundles": ["kibanaUtils", "discover", "kibanaReact", "home"],
   "extraPublicDirs": ["common/constants", "common/utils", "common/expression_functions"],
   "owner": {

src/plugins/visualizations/public/mocks.ts

@@ -23,6 +23,7 @@ import { urlForwardingPluginMock } from '../../../plugins/url_forwarding/public/
 import { navigationPluginMock } from '../../../plugins/navigation/public/mocks';
 import { presentationUtilPluginMock } from '../../../plugins/presentation_util/public/mocks';
 import { savedObjectTaggingOssPluginMock } from '../../saved_objects_tagging_oss/public/mocks';
+import { screenshotModePluginMock } from '../../screenshot_mode/public/mocks';
 
 const createSetupContract = (): VisualizationsSetup => ({
   createBaseVisualization: jest.fn(),
@@ -68,6 +69,7 @@ const createInstance = async () => {
       navigation: navigationPluginMock.createStartContract(),
       presentationUtil: presentationUtilPluginMock.createStartContract(coreMock.createStart()),
       urlForwarding: urlForwardingPluginMock.createStartContract(),
+      screenshotMode: screenshotModePluginMock.createStartContract(),
     });
 
   return {

src/plugins/visualizations/public/plugin.ts

@@ -86,6 +86,7 @@ import type { SharePluginSetup, SharePluginStart } from '../../share/public';
 import type { UrlForwardingSetup, UrlForwardingStart } from '../../url_forwarding/public';
 import type { PresentationUtilPluginStart } from '../../presentation_util/public';
 import type { UsageCollectionStart } from '../../usage_collection/public';
+import type { ScreenshotModePluginStart } from '../../screenshot_mode/public';
 import type { HomePublicPluginSetup } from '../../home/public';
 import type { SpacesPluginStart } from '../../../../x-pack/plugins/spaces/public';
 
@@ -130,6 +131,7 @@ export interface VisualizationsStartDeps {
   share?: SharePluginStart;
   urlForwarding: UrlForwardingStart;
   usageCollection?: UsageCollectionStart;
+  screenshotMode: ScreenshotModePluginStart;
 }
 
 /**
@@ -289,6 +291,11 @@ export class VisualizationsPlugin
 
         params.element.classList.add('visAppWrapper');
         const { renderApp } = await import('./visualize_app');
+        if (pluginsStart.screenshotMode.isScreenshotMode()) {
+          params.element.classList.add('visEditorScreenshotModeActive');
+          // @ts-expect-error TS error, cannot find type declaration for scss
+          await import('./visualize_screenshot_mode.scss');
+        }
         const unmount = renderApp(params, services);
         return () => {
           data.search.session.clear();

src/plugins/visualizations/public/visualize_screenshot_mode.scss

@@ -0,0 +1,60 @@
+/* hide unusable controls */
+/* TODO: This is the legacy way of hiding chrome elements. Rather use chrome.setIsVisible */
+kbn-top-nav,
+filter-bar,
+.kbnTopNavMenu__wrapper,
+::-webkit-scrollbar,
+.euiNavDrawer {
+  display: none !important;
+}
+
+/* hide unusable controls
+*  !important is required to override resizable panel inline display */
+.visEditorScreenshotModeActive .visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) {
+  display: none !important;
+}
+
+/** THIS IS FOR TSVB UNTIL REFACTOR **/
+.visEditorScreenshotModeActive .tvbEditorVisualization {
+  position: static !important;
+}
+.visEditorScreenshotModeActive .visualize .tvbVisTimeSeries__legendToggle {
+  /* all non-content rows in interface */
+  display: none;
+}
+
+.visEditorScreenshotModeActive .tvbEditor--hideForReporting {
+  /* all non-content rows in interface */
+  display: none;
+}
+/**  END TSVB BAD BAD HACKS **/
+
+/* remove left padding from visualizations so that map lines up with .leaflet-container and
+*  setting the position to be fixed and to take up the entire screen, because some zoom levels/viewports
+*  are triggering the media breakpoints that cause the .visEditor__canvas to take up more room than the viewport */
+
+.visEditorScreenshotModeActive .visEditor .visEditor__canvas {
+  padding-left: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+/**
+ *  Visualization tweaks
+ */
+
+/* hide unusable controls */
+.visEditorScreenshotModeActive .visualize .visLegend__toggle,
+.visEditorScreenshotModeActive .visualize .kbnAggTable__controls,
+.visEditorScreenshotModeActive .visualize .leaflet-container .leaflet-top.leaflet-left,
+.visEditorScreenshotModeActive .visualize paginate-controls /* page numbers */ {
+  display: none;
+}
+
+/* Ensure the min-height of the small breakpoint isn't used */
+.visEditorScreenshotModeActive .vis-editor visualization {
+  min-height: 0 !important;
+}

x-pack/plugins/screenshotting/server/layouts/preserve_layout.css

@@ -1,12 +1,5 @@
-/*
- ******
- ****** This is a collection of CSS overrides that make Kibana look better for
- ****** generating PDF reports with headless browser
- ******
- */
-
 /**
- *  global
+ *  Global utilities
  */
 
 /* elements can hide themselves when shared */
@@ -14,26 +7,9 @@
   display: none !important;
 }
 
-/* hide unusable controls */
-kbn-top-nav,
-filter-bar,
-.kbnTopNavMenu__wrapper,
-::-webkit-scrollbar,
-.euiNavDrawer {
-  display: none !important;
-}
-
 /**
- *  Discover Tweaks
- */
-
-/* hide unusable controls */
-discover-app .dscTimechart,
-discover-app .dscSidebar__container,
-discover-app .dscCollapsibleSidebar__collapseButton,
-discover-app .discover-table-footer {
-  display: none;
-}
+* Global overrides
+*/
 
 /**
  * The global banner (e.g. "Help us improve Elastic...") should not print.
@@ -41,53 +17,3 @@ discover-app .discover-table-footer {
 #globalBannerList {
   display: none;
 }
-
-/**
- *  Visualize Editor Tweaks
- */
-
-/* hide unusable controls
-*  !important is required to override resizable panel inline display */
-.visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) {
-  display: none !important;
-}
-
-/** THIS IS FOR TSVB UNTIL REFACTOR **/
-.tvbEditorVisualization {
-  position: static !important;
-}
-.visualize .tvbVisTimeSeries__legendToggle,
-.tvbEditor--hideForReporting {
-  /* all non-content rows in interface */
-  display: none;
-}
-/**  END TSVB BAD BAD HACKS **/
-
-/* remove left padding from visualizations so that map lines up with .leaflet-container and
-*  setting the position to be fixed and to take up the entire screen, because some zoom levels/viewports
-*  are triggering the media breakpoints that cause the .visEditor__canvas to take up more room than the viewport */
-.visEditor .visEditor__canvas {
-  padding-left: 0px;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-/**
- *  Visualization tweaks
- */
-
-/* hide unusable controls */
-.visualize .visLegend__toggle,
-.visualize .kbnAggTable__controls/* export raw, export formatted, etc. */ ,
-.visualize .leaflet-container .leaflet-top.leaflet-left/* tilemap controls */ ,
-.visualize paginate-controls /* page numbers */ {
-  display: none;
-}
-
-/* Ensure the min-height of the small breakpoint isn't used */
-.vis-editor visualization {
-  min-height: 0 !important;
-}