Add "Xray" component that only shows the inspected element zoomed in

Show instance of page where all except the inspected tree is hidden.

`display: none` turned out more practical than `visibility: hidden` for this.

The latter is more accurate, but resulted too often in the element not properly framed. It's also a lot less efficient. With display, the only drawback is differences in CSS counters and exact text and image positions, which is fluid in the real world anyway.

Use outlines around direct and indirect descendants.
This was too visually disruptive to do in the main preview frame

Add a way to inspect next parent

Add some info and navigation

src/components/ThemeEditor.jsx

@@ -32,7 +32,7 @@ import { WebpackHomeInput } from './ui/WebpackHomeInput';
 import { SignalExample } from './_examples/SignalExample';
 // import { VoiceCommands } from './ui/VoiceCommands';
 // import { SpeakGlobalHooks } from '../voice/menu/state';
-import { NoteBox, HistoryVisualization } from './ui/HistoryVisualization';
+import { HistoryVisualization } from './ui/HistoryVisualization';
 import { Palette } from './ui/Palette';
 import { HistoryStash } from './ui/HistoryStash';
 import { StartTutorial } from '../_unstable/Tutorial';
@@ -42,6 +42,8 @@ import { FullscreenToggle } from './ui/FullScreenToggle';
 import { PickedValue } from './ui/PickedValue';
 import { PickedValueCursor } from './PickedValueCursor';
 import { Selectors } from './ui/Selectors';
+import { NoteBox } from './ui/NoteBox';
+import { Xray } from './ui/Xray';
 
 export const ThemeEditorContext = createContext({});
 
@@ -55,6 +57,7 @@ export const ThemeEditor = (props) => {
   } = props;
   const frameRef = useRef(null);
   const scrollFrameRef = useRef(null);
+  const xrayFrameRef = useRef(null);
 
   // Don't move out along with similar global state, hiding and showing of panels probably needs a different solution.
   const [importDisplayed, setImportDisplayed] = useState(false);
@@ -71,6 +74,7 @@ export const ThemeEditor = (props) => {
         defaultValues,
         frameRef,
         scrollFrameRef,
+        xrayFrameRef,
         setSheetDisablerDisplayed,
       }}
     >
@@ -115,6 +119,7 @@ export const ThemeEditor = (props) => {
               <ThemeUploadPanel/>
               <ColorSettings />
               <Selectors />
+              <Xray />
             </Area>
             <Area id="area-left-inner" >
               <StartTutorial />
@@ -186,8 +191,8 @@ export const ThemeEditor = (props) => {
                 <Checkbox
                   controls={use.enableScrollingInView()}
                 >Scroll into view in history</Checkbox>
-                <WebpackHomeInput />
               </div>
+              <WebpackHomeInput />
               <RemoveAnnoyingPrefix />
               <NameReplacements/>
               {/* <SignalExample /> */}

src/components/effects/ApplyStyles.jsx

@@ -8,6 +8,7 @@ export function ApplyStyles() {
     const {
       frameRef,
       scrollFrameRef,
+      xrayFrameRef,
     } = useContext(ThemeEditorContext);
 
 
@@ -31,6 +32,13 @@ export function ApplyStyles() {
         },
         window.location.origin
       );
+      xrayFrameRef.current?.contentWindow.postMessage(
+        {
+          type: 'set-scopes-styles',
+          payload: { scopes, resetAll: true },
+        },
+        window.location.origin
+      );
     }, [scopes, frameLoaded]);
 
     return null;