Merge changes Id1d59bd7,Ief46f2f3,I2e34edd2,I203f3f19,I756b596c, ...

* changes:
  Added visibility check for missing relativeOf
  Added format for ColorTransform matrix
  Update Winscope with ProtoLog changes
  Download trace files from Winscope
  Support ProtoLog in Winscope
  Support WM & SF dumps with ADB Connect, minor fixes
  Add transaction tracing support, fix device id regex.
  Introduced filters to winscope for transaction files.
  Fix variable name in DataAdb
  Limit the height of Hierarchy and Properties views.
  Add support for Wayland traces
  Winscope: prefix layer id to surface flinger layer name
  Fixed bug when clearing file, winscope could not allow up/down arrows.
  Changed shell script for capturing traces.
  Implement Winscope ADB connect.
  Added transaction support for winscope.
  Update vue-material, regenerate yarn.lock
  Refactor file decoding, implement video view
  Fixed visibility check in winscope.
  Added check for invalid transform.
  Added reasons for invisibility of a layer.
  Fix overlapping timeline indicator

tools/winscope/.gitignore

@@ -1 +1,2 @@
 node_modules/
+adb_proxy/venv/

tools/winscope/adb_proxy/winscope_proxy.py

@@ -0,0 +1,550 @@
+#!/usr/bin/python3
+
+# Copyright (C) 2019 The Android Open Source Project
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+#
+# This is an ADB proxy for Winscope.
+#
+# Requirements: python3.5 and ADB installed and in system PATH.
+#
+# Usage:
+#     run: python3 winscope_proxy.py
+#
+
+import json
+import logging
+import os
+import re
+import secrets
+import signal
+import subprocess
+import sys
+import threading
+import time
+from abc import abstractmethod
+from enum import Enum
+from http import HTTPStatus
+from http.server import HTTPServer, BaseHTTPRequestHandler
+from tempfile import NamedTemporaryFile
+
+# CONFIG #
+
+LOG_LEVEL = logging.WARNING
+
+PORT = 5544
+
+# Keep in sync with WINSCOPE_PROXY_VERSION in Winscope DataAdb.vue
+VERSION = '0.5'
+
+WINSCOPE_VERSION_HEADER = "Winscope-Proxy-Version"
+WINSCOPE_TOKEN_HEADER = "Winscope-Token"
+
+# Location to save the proxy security token
+WINSCOPE_TOKEN_LOCATION = os.path.expanduser('~/.config/winscope/.token')
+
+# Max interval between the client keep-alive requests in seconds
+KEEP_ALIVE_INTERVAL_S = 5
+
+logging.basicConfig(stream=sys.stderr, level=LOG_LEVEL,
+                    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+log = logging.getLogger("ADBProxy")
+
+
+class TraceTarget:
+    """Defines a single parameter to trace.
+
+    Attributes:
+        file: the path on the device the trace results are saved to.
+        trace_start: command to start the trace from adb shell, must not block.
+        trace_stop: command to stop the trace, should block until the trace is stopped.
+    """
+
+    def __init__(self, file: str, trace_start: str, trace_stop: str) -> None:
+        self.file = file
+        self.trace_start = trace_start
+        self.trace_stop = trace_stop
+
+
+TRACE_TARGETS = {
+    "window_trace": TraceTarget(
+        "/data/misc/wmtrace/wm_trace.pb",
+        'su root cmd window tracing start\necho "WM trace started."',
+        'su root cmd window tracing stop >/dev/null 2>&1'
+    ),
+    "layers_trace": TraceTarget(
+        "/data/misc/wmtrace/layers_trace.pb",
+        'su root service call SurfaceFlinger 1025 i32 1\necho "SF trace started."',
+        'su root service call SurfaceFlinger 1025 i32 0 >/dev/null 2>&1'
+    ),
+    "screen_recording": TraceTarget(
+        "/data/local/tmp/screen.winscope.mp4",
+        'screenrecord --bit-rate 8M /data/local/tmp/screen.winscope.mp4 >/dev/null 2>&1 &\necho "ScreenRecorder started."',
+        'pkill -l SIGINT screenrecord >/dev/null 2>&1'
+    ),
+    "transaction": TraceTarget(
+        "/data/misc/wmtrace/transaction_trace.pb",
+        'su root service call SurfaceFlinger 1020 i32 1\necho "SF transactions recording started."',
+        'su root service call SurfaceFlinger 1020 i32 0 >/dev/null 2>&1'
+    ),
+    "proto_log": TraceTarget(
+        "/data/misc/wmtrace/wm_log.pb",
+        'su root cmd window logging start\necho "WM logging started."',
+        'su root cmd window logging stop >/dev/null 2>&1'
+    ),
+}
+
+
+class DumpTarget:
+    """Defines a single parameter to trace.
+
+    Attributes:
+        file: the path on the device the dump results are saved to.
+        dump_command: command to dump state to file.
+    """
+
+    def __init__(self, file: str, dump_command: str) -> None:
+        self.file = file
+        self.dump_command = dump_command
+
+
+DUMP_TARGETS = {
+    "window_dump": DumpTarget(
+        "/data/local/tmp/wm_dump.pb",
+        'su root dumpsys window --proto > /data/local/tmp/wm_dump.pb'
+    ),
+    "layers_dump": DumpTarget(
+        "/data/local/tmp/sf_dump.pb",
+        'su root dumpsys SurfaceFlinger --proto > /data/local/tmp/sf_dump.pb'
+    )
+}
+
+
+# END OF CONFIG #
+
+
+def get_token() -> str:
+    """Returns saved proxy security token or creates new one"""
+    try:
+        with open(WINSCOPE_TOKEN_LOCATION, 'r') as token_file:
+            token = token_file.readline()
+            log.debug("Loaded token {} from {}".format(token, WINSCOPE_TOKEN_LOCATION))
+            return token
+    except IOError:
+        token = secrets.token_hex(32)
+        os.makedirs(os.path.dirname(WINSCOPE_TOKEN_LOCATION), exist_ok=True)
+        try:
+            with open(WINSCOPE_TOKEN_LOCATION, 'w') as token_file:
+                log.debug("Created and saved token {} to {}".format(token, WINSCOPE_TOKEN_LOCATION))
+                token_file.write(token)
+            os.chmod(WINSCOPE_TOKEN_LOCATION, 0o600)
+        except IOError:
+            log.error("Unable to save persistent token {} to {}".format(token, WINSCOPE_TOKEN_LOCATION))
+        return token
+
+
+secret_token = get_token()
+
+
+class RequestType(Enum):
+    GET = 1
+    POST = 2
+    HEAD = 3
+
+
+def add_standard_headers(server):
+    server.send_header('Cache-Control', 'no-cache, no-store, must-revalidate')
+    server.send_header('Access-Control-Allow-Origin', '*')
+    server.send_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
+    server.send_header('Access-Control-Allow-Headers', WINSCOPE_TOKEN_HEADER + ', Content-Type, Content-Length')
+    server.send_header('Access-Control-Expose-Headers', 'Winscope-Proxy-Version')
+    server.send_header(WINSCOPE_VERSION_HEADER, VERSION)
+    server.end_headers()
+
+
+class RequestEndpoint:
+    """Request endpoint to use with the RequestRouter."""
+
+    @abstractmethod
+    def process(self, server, path):
+        pass
+
+
+class AdbError(Exception):
+    """Unsuccessful ADB operation"""
+    pass
+
+
+class BadRequest(Exception):
+    """Invalid client request"""
+    pass
+
+
+class RequestRouter:
+    """Handles HTTP request authenticationn and routing"""
+
+    def __init__(self, handler):
+        self.request = handler
+        self.endpoints = {}
+
+    def register_endpoint(self, method: RequestType, name: str, endpoint: RequestEndpoint):
+        self.endpoints[(method, name)] = endpoint
+
+    def __bad_request(self, error: str):
+        log.warning("Bad request: " + error)
+        self.request.respond(HTTPStatus.BAD_REQUEST, b"Bad request!\nThis is Winscope ADB proxy.\n\n"
+                             + error.encode("utf-8"), 'text/txt')
+
+    def __internal_error(self, error: str):
+        log.error("Internal error: " + error)
+        self.request.respond(HTTPStatus.INTERNAL_SERVER_ERROR, error.encode("utf-8"), 'text/txt')
+
+    def __bad_token(self):
+        log.info("Bad token")
+        self.request.respond(HTTPStatus.FORBIDDEN, b"Bad Winscope authorisation token!\nThis is Winscope ADB proxy.\n",
+                             'text/txt')
+
+    def process(self, method: RequestType):
+        token = self.request.headers[WINSCOPE_TOKEN_HEADER]
+        if not token or token != secret_token:
+            return self.__bad_token()
+        path = self.request.path.strip('/').split('/')
+        if path and len(path) > 0:
+            endpoint_name = path[0]
+            try:
+                return self.endpoints[(method, endpoint_name)].process(self.request, path[1:])
+            except KeyError:
+                return self.__bad_request("Unknown endpoint /{}/".format(endpoint_name))
+            except AdbError as ex:
+                return self.__internal_error(str(ex))
+            except BadRequest as ex:
+                return self.__bad_request(str(ex))
+            except Exception as ex:
+                return self.__internal_error(repr(ex))
+        self.__bad_request("No endpoint specified")
+
+
+def call_adb(params: str, device: str = None, stdin: bytes = None):
+    command = ['adb'] + (['-s', device] if device else []) + params.split(' ')
+    try:
+        log.debug("Call: " + ' '.join(command))
+        return subprocess.check_output(command, stderr=subprocess.STDOUT, input=stdin).decode('utf-8')
+    except OSError as ex:
+        log.debug('Error executing adb command: {}\n{}'.format(' '.join(command), repr(ex)))
+        raise AdbError('Error executing adb command: {}\n{}'.format(' '.join(command), repr(ex)))
+    except subprocess.CalledProcessError as ex:
+        log.debug('Error executing adb command: {}\n{}'.format(' '.join(command), ex.output.decode("utf-8")))
+        raise AdbError('Error executing adb command: adb {}\n{}'.format(params, ex.output.decode("utf-8")))
+
+
+def call_adb_outfile(params: str, outfile, device: str = None, stdin: bytes = None):
+    try:
+        process = subprocess.Popen(['adb'] + (['-s', device] if device else []) + params.split(' '), stdout=outfile,
+                                   stderr=subprocess.PIPE)
+        _, err = process.communicate(stdin)
+        outfile.seek(0)
+        if process.returncode != 0:
+            log.debug('Error executing adb command: adb {}\n'.format(params) + err.decode(
+                'utf-8') + '\n' + outfile.read().decode('utf-8'))
+            raise AdbError('Error executing adb command: adb {}\n'.format(params) + err.decode(
+                'utf-8') + '\n' + outfile.read().decode('utf-8'))
+    except OSError as ex:
+        log.debug('Error executing adb command: adb {}\n{}'.format(params, repr(ex)))
+        raise AdbError('Error executing adb command: adb {}\n{}'.format(params, repr(ex)))
+
+
+class ListDevicesEndpoint(RequestEndpoint):
+    ADB_INFO_RE = re.compile("^([A-Za-z0-9\\-]+)\\s+(\\w+)(.*model:(\\w+))?")
+
+    def process(self, server, path):
+        lines = list(filter(None, call_adb('devices -l').split('\n')))
+        devices = {m.group(1): {
+            'authorised': str(m.group(2)) != 'unauthorized',
+            'model': m.group(4).replace('_', ' ') if m.group(4) else ''
+        } for m in [ListDevicesEndpoint.ADB_INFO_RE.match(d) for d in lines[1:]] if m}
+        j = json.dumps(devices)
+        log.debug("Detected devices: " + j)
+        server.respond(HTTPStatus.OK, j.encode("utf-8"), "text/json")
+
+
+class DeviceRequestEndpoint(RequestEndpoint):
+    def process(self, server, path):
+        if len(path) > 0 and re.fullmatch("[A-Za-z0-9\\-]+", path[0]):
+            self.process_with_device(server, path[1:], path[0])
+        else:
+            raise BadRequest("Device id not specified")
+
+    @abstractmethod
+    def process_with_device(self, server, path, device_id):
+        pass
+
+
+class FetchFileEndpoint(DeviceRequestEndpoint):
+    def process_with_device(self, server, path, device_id):
+        if len(path) != 1:
+            raise BadRequest("File not specified")
+        if path[0] in TRACE_TARGETS:
+            file_path = TRACE_TARGETS[path[0]].file
+        elif path[0] in DUMP_TARGETS:
+            file_path = DUMP_TARGETS[path[0]].file
+        else:
+            raise BadRequest("Unknown file specified")
+
+        with NamedTemporaryFile() as tmp:
+            log.debug("Fetching file {} from device to {}".format(file_path, tmp.name))
+            call_adb_outfile('exec-out su root cat ' + file_path, tmp, device_id)
+            log.debug("Deleting file {} from device".format(file_path))
+            call_adb('shell su root rm ' + file_path, device_id)
+            server.send_response(HTTPStatus.OK)
+            server.send_header('X-Content-Type-Options', 'nosniff')
+            server.send_header('Content-type', 'application/octet-stream')
+            add_standard_headers(server)
+            log.debug("Uploading file {}".format(tmp.name))
+            while True:
+                buf = tmp.read(1024)
+                if buf:
+                    server.wfile.write(buf)
+                else:
+                    break
+
+
+def check_root(device_id):
+    log.debug("Checking root access on {}".format(device_id))
+    return call_adb('shell su root id -u', device_id) == "0\n"
+
+
+TRACE_THREADS = {}
+
+
+class TraceThread(threading.Thread):
+    def __init__(self, device_id, command):
+        self._keep_alive_timer = None
+        self.trace_command = command
+        self._device_id = device_id
+        self.out = None,
+        self.err = None,
+        self._success = False
+        try:
+            shell = ['adb', '-s', self._device_id, 'shell']
+            log.debug("Starting trace shell {}".format(' '.join(shell)))
+            self.process = subprocess.Popen(shell, stdout=subprocess.PIPE,
+                                            stderr=subprocess.PIPE, stdin=subprocess.PIPE, start_new_session=True)
+        except OSError as ex:
+            raise AdbError('Error executing adb command: adb shell\n{}'.format(repr(ex)))
+
+        super().__init__()
+
+    def timeout(self):
+        if self.is_alive():
+            log.warning("Keep-alive timeout for trace on {}".format(self._device_id))
+            self.end_trace()
+            if self._device_id in TRACE_THREADS:
+                TRACE_THREADS.pop(self._device_id)
+
+    def reset_timer(self):
+        log.debug("Resetting keep-alive clock for trace on {}".format(self._device_id))
+        if self._keep_alive_timer:
+            self._keep_alive_timer.cancel()
+        self._keep_alive_timer = threading.Timer(KEEP_ALIVE_INTERVAL_S, self.timeout)
+        self._keep_alive_timer.start()
+
+    def end_trace(self):
+        if self._keep_alive_timer:
+            self._keep_alive_timer.cancel()
+        log.debug("Sending SIGINT to the trace process on {}".format(self._device_id))
+        self.process.send_signal(signal.SIGINT)
+        try:
+            log.debug("Waiting for trace shell to exit for {}".format(self._device_id))
+            self.process.wait(timeout=5)
+        except TimeoutError:
+            log.debug("TIMEOUT - sending SIGKILL to the trace process on {}".format(self._device_id))
+            self.process.kill()
+        self.join()
+
+    def run(self):
+        log.debug("Trace started on {}".format(self._device_id))
+        self.reset_timer()
+        self.out, self.err = self.process.communicate(self.trace_command)
+        log.debug("Trace ended on {}, waiting for cleanup".format(self._device_id))
+        time.sleep(0.2)
+        for i in range(10):
+            if call_adb("shell su root cat /data/local/tmp/winscope_status", device=self._device_id) == 'TRACE_OK\n':
+                call_adb("shell su root rm /data/local/tmp/winscope_status", device=self._device_id)
+                log.debug("Trace finished successfully on {}".format(self._device_id))
+                self._success = True
+                break
+            log.debug("Still waiting for cleanup on {}".format(self._device_id))
+            time.sleep(0.1)
+
+    def success(self):
+        return self._success
+
+
+class StartTrace(DeviceRequestEndpoint):
+    TRACE_COMMAND = """
+set -e
+
+echo "Starting trace..."
+echo "TRACE_START" > /data/local/tmp/winscope_status
+
+# Do not print anything to stdout/stderr in the handler
+function stop_trace() {{
+  trap - EXIT HUP INT
+
+{}
+
+  echo "TRACE_OK" > /data/local/tmp/winscope_status
+}}
+
+trap stop_trace EXIT HUP INT
+echo "Signal handler registered."
+
+{}
+
+# ADB shell does not handle hung up well and does not call HUP handler when a child is active in foreground,
+# as a workaround we sleep for short intervals in a loop so the handler is called after a sleep interval.
+while true; do sleep 0.1; done
+"""
+
+    def process_with_device(self, server, path, device_id):
+        try:
+            length = int(server.headers["Content-Length"])
+        except KeyError as err:
+            raise BadRequest("Missing Content-Length header\n" + str(err))
+        except ValueError as err:
+            raise BadRequest("Content length unreadable\n" + str(err))
+        try:
+            requested_types = json.loads(server.rfile.read(length).decode("utf-8"))
+            requested_traces = [TRACE_TARGETS[t] for t in requested_types]
+        except KeyError as err:
+            raise BadRequest("Unsupported trace target\n" + str(err))
+        if device_id in TRACE_THREADS:
+            log.warning("Trace already in progress for {}", device_id)
+            server.respond(HTTPStatus.OK, b'', "text/plain")
+        if not check_root(device_id):
+            raise AdbError(
+                "Unable to acquire root privileges on the device - check the output of 'adb -s {} shell su root id'".format(
+                    device_id))
+        command = StartTrace.TRACE_COMMAND.format(
+            '\n'.join([t.trace_stop for t in requested_traces]),
+            '\n'.join([t.trace_start for t in requested_traces]))
+        log.debug("Trace requested for {} with targets {}".format(device_id, ','.join(requested_types)))
+        TRACE_THREADS[device_id] = TraceThread(device_id, command.encode('utf-8'))
+        TRACE_THREADS[device_id].start()
+        server.respond(HTTPStatus.OK, b'', "text/plain")
+
+
+class EndTrace(DeviceRequestEndpoint):
+    def process_with_device(self, server, path, device_id):
+        if device_id not in TRACE_THREADS:
+            raise BadRequest("No trace in progress for {}".format(device_id))
+        if TRACE_THREADS[device_id].is_alive():
+            TRACE_THREADS[device_id].end_trace()
+
+        success = TRACE_THREADS[device_id].success()
+        out = TRACE_THREADS[device_id].out + b"\n" + TRACE_THREADS[device_id].err
+        command = TRACE_THREADS[device_id].trace_command
+        TRACE_THREADS.pop(device_id)
+        if success:
+            server.respond(HTTPStatus.OK, out, "text/plain")
+        else:
+            raise AdbError(
+                "Error tracing the device\n### Output ###\n" + out.decode(
+                    "utf-8") + "\n### Command: adb -s {} shell ###\n### Input ###\n".format(device_id) + command.decode(
+                    "utf-8"))
+
+
+class StatusEndpoint(DeviceRequestEndpoint):
+    def process_with_device(self, server, path, device_id):
+        if device_id not in TRACE_THREADS:
+            raise BadRequest("No trace in progress for {}".format(device_id))
+        TRACE_THREADS[device_id].reset_timer()
+        server.respond(HTTPStatus.OK, str(TRACE_THREADS[device_id].is_alive()).encode("utf-8"), "text/plain")
+
+
+class DumpEndpoint(DeviceRequestEndpoint):
+    def process_with_device(self, server, path, device_id):
+        try:
+            length = int(server.headers["Content-Length"])
+        except KeyError as err:
+            raise BadRequest("Missing Content-Length header\n" + str(err))
+        except ValueError as err:
+            raise BadRequest("Content length unreadable\n" + str(err))
+        try:
+            requested_types = json.loads(server.rfile.read(length).decode("utf-8"))
+            requested_traces = [DUMP_TARGETS[t] for t in requested_types]
+        except KeyError as err:
+            raise BadRequest("Unsupported trace target\n" + str(err))
+        if device_id in TRACE_THREADS:
+            BadRequest("Trace in progress for {}".format(device_id))
+        if not check_root(device_id):
+            raise AdbError(
+                "Unable to acquire root privileges on the device - check the output of 'adb -s {} shell su root id'"
+                    .format(device_id))
+        command = '\n'.join(t.dump_command for t in requested_traces)
+        shell = ['adb', '-s', device_id, 'shell']
+        log.debug("Starting dump shell {}".format(' '.join(shell)))
+        process = subprocess.Popen(shell, stdout=subprocess.PIPE, stderr=subprocess.PIPE,
+                                   stdin=subprocess.PIPE, start_new_session=True)
+        log.debug("Starting dump on device {}".format(device_id))
+        out, err = process.communicate(command.encode('utf-8'))
+        if process.returncode != 0:
+            raise AdbError("Error executing command:\n" + command + "\n\n### OUTPUT ###" + out.decode('utf-8') + "\n"
+                           + err.decode('utf-8'))
+        log.debug("Dump finished on device {}".format(device_id))
+        server.respond(HTTPStatus.OK, b'', "text/plain")
+
+
+class ADBWinscopeProxy(BaseHTTPRequestHandler):
+    def __init__(self, request, client_address, server):
+        self.router = RequestRouter(self)
+        self.router.register_endpoint(RequestType.GET, "devices", ListDevicesEndpoint())
+        self.router.register_endpoint(RequestType.GET, "status", StatusEndpoint())
+        self.router.register_endpoint(RequestType.GET, "fetch", FetchFileEndpoint())
+        self.router.register_endpoint(RequestType.POST, "start", StartTrace())
+        self.router.register_endpoint(RequestType.POST, "end", EndTrace())
+        self.router.register_endpoint(RequestType.POST, "dump", DumpEndpoint())
+        super().__init__(request, client_address, server)
+
+    def respond(self, code: int, data: bytes, mime: str) -> None:
+        self.send_response(code)
+        self.send_header('Content-type', mime)
+        add_standard_headers(self)
+        self.wfile.write(data)
+
+    def do_GET(self):
+        self.router.process(RequestType.GET)
+
+    def do_POST(self):
+        self.router.process(RequestType.POST)
+
+    def do_OPTIONS(self):
+        self.send_response(HTTPStatus.OK)
+        self.send_header('Allow', 'GET,POST')
+        add_standard_headers(self)
+        self.end_headers()
+        self.wfile.write(b'GET,POST')
+
+    def log_request(self, code='-', size='-'):
+        log.info('{} {} {}'.format(self.requestline, str(code), str(size)))
+
+
+if __name__ == '__main__':
+    print("Winscope ADB Connect proxy version: " + VERSION)
+    print('Winscope token: ' + secret_token)
+    httpd = HTTPServer(('localhost', PORT), ADBWinscopeProxy)
+    try:
+        httpd.serve_forever()
+    except KeyboardInterrupt:
+        log.info("Shutting down")

tools/winscope/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^2.3.3",
-    "vue-material": "^0.7.5"
+    "vue-material": "0.8.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

tools/winscope/src/App.vue

@@ -19,10 +19,14 @@
       <a class="md-button md-accent md-raised md-theme-default" @click="clear()" v-if="dataLoaded">Clear</a>
     </md-whiteframe>
     <div class="main-content">
-      <datainput v-if="!dataLoaded" ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus" />
+      <md-layout v-if="!dataLoaded" class="m-2">
+        <dataadb ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus"/>
+        <datainput ref="input" :store="store" @dataReady="onDataReady" @statusChange="setStatus"/>
+      </md-layout>
       <md-card v-if="dataLoaded">
         <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
           <h2 class="md-title">Timeline</h2>
+          <datafilter v-for="file in files" :key="file.filename" :store="store" :file="file" />
         </md-whiteframe>
         <md-list>
           <md-list-item v-for="(file, idx) in files" :key="file.filename">
@@ -42,6 +46,8 @@ import Rects from './Rects.vue'
 import DataView from './DataView.vue'
 import DataInput from './DataInput.vue'
 import LocalStore from './localstore.js'
+import DataAdb from './DataAdb.vue'
+import DataFilter from './DataFilter.vue'
 
 const APP_NAME = "Winscope"
 
@@ -81,15 +87,17 @@ export default {
   },
   methods: {
     clear() {
+      this.files.forEach(function(item) { item.destroy(); })
       this.files = [];
+      this.activeDataView = null;
     },
     onTimelineItemSelected(index, timelineIndex) {
       this.files[timelineIndex].selectedIndex = index;
-      var t = parseInt(this.files[timelineIndex].timeline[index].timestamp);
+      var t = parseInt(this.files[timelineIndex].timeline[index]);
       for (var i = 0; i < this.files.length; i++) {
         if (i != timelineIndex) {
           this.files[i].selectedIndex = findLastMatchingSorted(this.files[i].timeline, function(array, idx) {
-            return parseInt(array[idx].timestamp) <= t;
+            return parseInt(array[idx]) <= t;
           });
         }
       }
@@ -104,7 +112,7 @@ export default {
         if (cur + direction < 0 || cur + direction >= this.files[idx].timeline.length) {
           continue;
         }
-        var d = Math.abs(parseInt(file.timeline[cur + direction].timestamp) - this.currentTimestamp);
+        var d = Math.abs(parseInt(file.timeline[cur + direction]) - this.currentTimestamp);
         if (timeDiff > d) {
           timeDiff = d;
           closestTimeline = idx;
@@ -112,7 +120,7 @@ export default {
       }
       if (closestTimeline >= 0) {
         this.files[closestTimeline].selectedIndex += direction;
-        this.currentTimestamp = parseInt(this.files[closestTimeline].timeline[this.files[closestTimeline].selectedIndex].timestamp);
+        this.currentTimestamp = parseInt(this.files[closestTimeline].timeline[this.files[closestTimeline].selectedIndex]);
       }
     },
     onDataViewFocus(view) {
@@ -149,12 +157,12 @@ export default {
     prettyDump: function() { return JSON.stringify(this.dump, null, 2); },
     dataLoaded: function() { return this.files.length > 0 },
     scale() {
-      var mx = Math.max(...(this.files.map(f => Math.max(...f.timeline.map(t => t.timestamp)))));
-      var mi = Math.min(...(this.files.map(f => Math.min(...f.timeline.map(t => t.timestamp)))));
+      var mx = Math.max(...(this.files.map(f => Math.max(...f.timeline))));
+      var mi = Math.min(...(this.files.map(f => Math.min(...f.timeline))));
       return [mi, mx];
     },
     activeView: function() {
-      if (!this.activeDataView) {
+      if (!this.activeDataView && this.files.length > 0) {
         this.activeDataView = this.files[0].filename;
       }
       return this.activeDataView;
@@ -169,6 +177,8 @@ export default {
     'timeline': Timeline,
     'dataview': DataView,
     'datainput': DataInput,
+    'dataadb': DataAdb,
+    'datafilter': DataFilter,
   },
 }
 
@@ -191,6 +201,14 @@ export default {
   flex-wrap: wrap;
 }
 
+.md-layout > .md-card {
+  margin: 0.5em;
+}
+
+.md-button {
+  margin-top: 1em
+}
+
 h1,
 h2 {
   font-weight: normal;

tools/winscope/src/DataAdb.vue

@@ -0,0 +1,343 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-card style="min-width: 50em">
+    <md-card-header>
+      <div class="md-title">ADB Connect</div>
+    </md-card-header>
+    <md-card-content v-if="status === STATES.CONNECTING">
+      <md-spinner md-indeterminate></md-spinner>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.NO_PROXY">
+      <md-icon class="md-accent">error</md-icon>
+      <span class="md-subheading">Unable to connect to Winscope ADB proxy</span>
+      <div class="md-body-2">
+        <p>Launch the Winscope ADB Connect proxy to capture traces directly from your browser.</p>
+        <p>Python 3.5+ and ADB is required.</p>
+        <p>Run:</p>
+        <pre>python3 $ANDROID_BUILD_TOP/development/tools/winscope/adb_proxy/winscope_proxy.py</pre>
+        <p>Or get it from the AOSP repository.</p>
+      </div>
+      <div class="md-layout md-gutter">
+        <md-button class="md-accent md-raised" :href="downloadProxyUrl">Download from AOSP</md-button>
+        <md-button class="md-raised md-accent" @click="restart">Retry</md-button>
+      </div>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.INVALID_VERSION">
+      <md-icon class="md-accent">update</md-icon>
+      <span class="md-subheading">The version of Winscope ADB Connect proxy running on your machine is incopatibile with Winscope.</span>
+      <div class="md-body-2">
+        <p>Please update the proxy to version {{ WINSCOPE_PROXY_VERSION }}</p>
+        <p>Run:</p>
+        <pre>python3 $ANDROID_BUILD_TOP/development/tools/winscope/adb_proxy/winscope_proxy.py</pre>
+        <p>Or get it from the AOSP repository.</p>
+      </div>
+      <div class="md-layout md-gutter">
+        <md-button class="md-accent md-raised" :href="downloadProxyUrl">Download from AOSP</md-button>
+        <md-button class="md-raised md-accent" @click="restart">Retry</md-button>
+      </div>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.UNAUTH">
+      <md-icon class="md-accent">lock</md-icon>
+      <span class="md-subheading">Proxy authorisation required</span>
+      <md-input-container>
+        <label>Enter Winscope proxy token</label>
+        <md-input v-model="adbStore.proxyKey"></md-input>
+      </md-input-container>
+      <div class="md-body-2">The proxy token is printed to console on proxy launch, copy and paste it above.</div>
+      <div class="md-layout md-gutter">
+        <md-button class="md-accent md-raised" @click="restart">Connect</md-button>
+      </div>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.DEVICES">
+      <div class="md-subheading">{{ Object.keys(devices).length > 0 ? "Connected devices:" : "No devices detected" }}</div>
+      <md-list>
+        <md-list-item v-for="(device, id) in devices" :key="id" @click="selectDevice(id)" :disabled="!device.authorised">
+          <md-icon>{{ device.authorised ? "smartphone" : "screen_lock_portrait" }}</md-icon><span>{{ device.authorised ? device.model : "unauthorised" }} ({{ id }})</span>
+        </md-list-item>
+      </md-list>
+      <md-spinner :md-size="30" md-indeterminate></md-spinner>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.START_TRACE">
+      <md-list>
+        <md-list-item>
+          <md-icon>smartphone</md-icon><span>{{ devices[selectedDevice].model }} ({{ selectedDevice }})</span>
+        </md-list-item>
+      </md-list>
+      <div>
+        <p>Trace targets:</p>
+        <md-checkbox v-for="file in TRACE_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox>
+      </div>
+      <div>
+        <p>Dump targets:</p>
+        <md-checkbox v-for="file in DUMP_FILES" :key="file" v-model="adbStore[file]">{{FILE_TYPES[file].name}}</md-checkbox>
+      </div>
+      <div class="md-layout md-gutter">
+        <md-button class="md-accent md-raised" @click="startTrace">Start trace</md-button>
+        <md-button class="md-accent md-raised" @click="dumpState">Dump state</md-button>
+        <md-button class="md-raised" @click="resetLastDevice">Device list</md-button>
+      </div>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.ERROR">
+      <md-icon class="md-accent">error</md-icon>
+      <span class="md-subheading">Error:</span>
+      <pre>
+        {{ errorText }}
+      </pre>
+      <md-button class="md-raised md-accent" @click="restart">Retry</md-button>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.END_TRACE">
+      <span class="md-subheading">Tracing...</span>
+      <md-progress md-indeterminate></md-progress>
+      <div class="md-layout md-gutter">
+        <md-button class="md-accent md-raised" @click="endTrace">End trace</md-button>
+      </div>
+    </md-card-content>
+    <md-card-content v-if="status === STATES.LOAD_DATA">
+      <span class="md-subheading">Loading data...</span>
+      <md-progress :md-progress="loadProgress"></md-progress>
+    </md-card-content>
+  </md-card>
+</template>
+<script>
+import { FILE_TYPES, DATA_TYPES } from './decode.js'
+import LocalStore from './localstore.js'
+
+const STATES = {
+  ERROR: 0,
+  CONNECTING: 1,
+  NO_PROXY: 2,
+  INVALID_VERSION: 3,
+  UNAUTH: 4,
+  DEVICES: 5,
+  START_TRACE: 6,
+  END_TRACE: 7,
+  LOAD_DATA: 8,
+}
+
+const WINSCOPE_PROXY_VERSION = "0.5"
+const WINSCOPE_PROXY_URL = "http://localhost:5544"
+const PROXY_ENDPOINTS = {
+  DEVICES: "/devices/",
+  START_TRACE: "/start/",
+  END_TRACE: "/end/",
+  DUMP: "/dump/",
+  FETCH: "/fetch/",
+  STATUS: "/status/",
+}
+const TRACE_FILES = [
+  "window_trace",
+  "layers_trace",
+  "screen_recording",
+  "transaction",
+  "proto_log"
+]
+const DUMP_FILES = [
+  "window_dump",
+  "layers_dump"
+]
+const CAPTURE_FILES = TRACE_FILES.concat(DUMP_FILES)
+
+export default {
+  name: 'dataadb',
+  data() {
+    return {
+      STATES,
+      TRACE_FILES,
+      DUMP_FILES,
+      CAPTURE_FILES,
+      FILE_TYPES,
+      WINSCOPE_PROXY_VERSION,
+      status: STATES.CONNECTING,
+      dataFiles: [],
+      devices: {},
+      selectedDevice: '',
+      refresh_worker: null,
+      keep_alive_worker: null,
+      errorText: '',
+      loadProgress: 0,
+      adbStore: LocalStore('adb', Object.assign({
+        proxyKey: '',
+        lastDevice: '',
+      }, CAPTURE_FILES.reduce(function(obj, key) { obj[key] = true; return obj }, {}))),
+      downloadProxyUrl: 'https://android.googlesource.com/platform/development/+/master/tools/winscope/adb_proxy/winscope_proxy.py',
+    }
+  },
+  props: ["store"],
+  methods: {
+    getDevices() {
+      if (this.status !== STATES.DEVICES && this.status !== STATES.CONNECTING) {
+        clearInterval(this.refresh_worker);
+        this.refresh_worker = null;
+        return;
+      }
+      this.callProxy("GET", PROXY_ENDPOINTS.DEVICES, this, function(request, view) {
+        try {
+          view.devices = JSON.parse(request.responseText);
+          if (view.adbStore.lastDevice && view.devices[view.adbStore.lastDevice] && view.devices[view.adbStore.lastDevice].authorised) {
+            view.selectDevice(view.adbStore.lastDevice)
+          } else {
+            if (view.refresh_worker === null) {
+              view.refresh_worker = setInterval(view.getDevices, 1000)
+            }
+            view.status = STATES.DEVICES;
+          }
+        } catch (err) {
+          view.errorText = request.responseText;
+          view.status = STATES.ERROR;
+        }
+      })
+    },
+    keepAliveTrace() {
+      if (this.status !== STATES.END_TRACE) {
+        clearInterval(this.keep_alive_worker);
+        this.keep_alive_worker = null;
+        return;
+      }
+      this.callProxy("GET", PROXY_ENDPOINTS.STATUS + this.deviceId() + "/", this, function(request, view) {
+        if (request.responseText !== "True") {
+          view.endTrace();
+        } else if (view.keep_alive_worker === null) {
+          view.keep_alive_worker = setInterval(view.keepAliveTrace, 1000)
+        }
+      })
+    },
+    startTrace() {
+      const requested = this.toTrace()
+      if (requested.length < 1) {
+        this.errorText = "No targets selected";
+        this.status = STATES.ERROR;
+        return
+      }
+      this.status = STATES.END_TRACE;
+      this.callProxy("POST", PROXY_ENDPOINTS.START_TRACE + this.deviceId() + "/", this, function(request, view) {
+        view.keepAliveTrace();
+      }, null, requested)
+    },
+    dumpState() {
+      const requested = this.toDump()
+      if (requested.length < 1) {
+        this.errorText = "No targets selected";
+        this.status = STATES.ERROR;
+        return
+      }
+      this.status = STATES.LOAD_DATA;
+      this.callProxy("POST", PROXY_ENDPOINTS.DUMP + this.deviceId() + "/", this, function(request, view) {
+        view.loadFile(requested, 0);
+      }, null, requested)
+    },
+    endTrace() {
+      this.status = STATES.LOAD_DATA;
+      this.callProxy("POST", PROXY_ENDPOINTS.END_TRACE + this.deviceId() + "/", this, function(request, view) {
+        view.loadFile(view.toTrace(), 0);
+      })
+    },
+    loadFile(files, idx) {
+      this.callProxy("GET", PROXY_ENDPOINTS.FETCH + this.deviceId() + "/" + files[idx] + "/", this, function(request, view) {
+        try {
+          var buffer = new Uint8Array(request.response);
+          var filetype = FILE_TYPES[files[idx]];
+          var data = filetype.decoder(buffer, filetype, filetype.name, view.store);
+          view.dataFiles.push(data)
+          view.loadProgress = 100 * (idx + 1) / files.length;
+          if (idx < files.length - 1) {
+            view.loadFile(files, idx + 1)
+          } else {
+            view.$emit('dataReady', view.dataFiles);
+          }
+        } catch (err) {
+          view.errorText = err;
+          view.status = STATES.ERROR;
+        }
+      }, "arraybuffer")
+    },
+    toTrace() {
+      return TRACE_FILES.filter(file => this.adbStore[file]);
+    },
+    toDump() {
+      return DUMP_FILES.filter(file => this.adbStore[file]);
+    },
+    selectDevice(device_id) {
+      this.selectedDevice = device_id;
+      this.adbStore.lastDevice = device_id;
+      this.status = STATES.START_TRACE;
+    },
+    deviceId() {
+      return this.selectedDevice;
+    },
+    restart() {
+      this.status = STATES.CONNECTING;
+    },
+    resetLastDevice() {
+      this.adbStore.lastDevice = '';
+      this.restart()
+    },
+    callProxy(method, path, view, onSuccess, type, jsonRequest) {
+      var request = new XMLHttpRequest();
+      var view = this;
+      request.onreadystatechange = function() {
+        if (this.readyState !== 4) {
+          return;
+        }
+        if (this.status === 0) {
+          view.status = STATES.NO_PROXY;
+        } else if (this.status === 200) {
+          if (this.getResponseHeader("Winscope-Proxy-Version") !== WINSCOPE_PROXY_VERSION) {
+            view.status = STATES.INVALID_VERSION;
+          } else {
+            onSuccess(this, view)
+          }
+        } else if (this.status === 403) {
+          view.status = STATES.UNAUTH;
+        } else {
+          if (this.responseType === "text" || !this.responseType) {
+            view.errorText = this.responseText;
+          } else if (this.responseType === "arraybuffer") {
+            view.errorText = String.fromCharCode.apply(null, new Uint8Array(this.response));
+          }
+          view.status = STATES.ERROR;
+        }
+      }
+      request.responseType = type || "";
+      request.open(method, WINSCOPE_PROXY_URL + path);
+      request.setRequestHeader("Winscope-Token", this.adbStore.proxyKey);
+      if (jsonRequest) {
+        const json = JSON.stringify(jsonRequest)
+        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        request.send(json)
+      } else {
+        request.send();
+      }
+    }
+  },
+  created() {
+    var urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("token")) {
+      this.adbStore.proxyKey = urlParams.get("token")
+    }
+    this.getDevices();
+  },
+  watch: {
+    status: {
+      handler(st) {
+        if (st == STATES.CONNECTING) {
+          this.getDevices();
+        }
+      }
+    }
+  },
+}
+
+</script>

tools/winscope/src/DataFilter.vue

@@ -0,0 +1,62 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+ <div class="bounds" v-if="visible">
+   <md-select v-model="visibleTransactions" name="visibleTransactions" id="visibleTransactions"
+           placeholder="Everything Turned Off" md-dense multiple @input="updateFilter()" >
+       <md-option value="displayCreation, displayDeletion">Display</md-option>
+       <md-option value="powerModeUpdate">Power Mode</md-option>
+       <md-option value="surfaceCreation, surfaceDeletion">Surface</md-option>
+       <md-option value="transaction">Transaction</md-option>
+       <md-option value="vsyncEvent">vsync</md-option>
+       <md-option value="bufferUpdate">Buffer</md-option>
+   </md-select>
+ </div>
+</template>
+<script>
+import { DATA_TYPES } from './decode.js'
+
+export default {
+  name: 'datafilter',
+  props: ['file'],
+  data() {
+    return {
+      rawData: this.file.data,
+      rawTimeline: this.file.timeline,
+      visibleTransactions: ["powerModeUpdate", "surfaceCreation, surfaceDeletion",
+                    "displayCreation, displayDeletion", "transaction"]
+    };
+  },
+  methods: {
+    updateFilter() {
+      this.file.data =
+              this.rawData.filter(x => this.visibleTransactions.includes(x.obj.increment));
+      this.file.timeline =
+              this.rawTimeline.filter(x => this.file.data.map(y => y.timestamp).includes(x));
+    },
+  },
+  computed: {
+    visible() {
+      return this.file.type == DATA_TYPES.TRANSACTION
+    },
+  }
+}
+</script>
+
+<style scoped>
+    .bounds {
+        margin: 1em;
+    }
+</style>

tools/winscope/src/DataInput.vue

@@ -13,9 +13,7 @@
      limitations under the License.
 -->
 <template>
-  <md-layout class="md-alignment-top-center">
     <md-card style="min-width: 50em">
-      <!-- v-if="!timeline.length" -->
       <md-card-header>
         <div class="md-title">Open files</div>
       </md-card-header>
@@ -52,26 +50,9 @@
         </div>
       </md-card-content>
     </md-card>
-  </md-layout>
 </template>
 <script>
-import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
-import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
-import protobuf from 'protobufjs'
-
-import { detectFile, dataFile, FILE_TYPES, DATA_TYPES } from './detectfile.js'
-
-import { fill_transform_data } from './matrix_utils.js'
-
-var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
-  .addJSON(jsonProtoDefsSF.nested);
-
-var TraceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerTraceFileProto");
-var ServiceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerServiceDumpProto");
-var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
-var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
+import { detectAndDecode, FILE_TYPES, DATA_TYPES } from './decode.js'
 
 export default {
   name: 'datainput',
@@ -92,7 +73,7 @@ export default {
         // No file selected.
         return;
       }
-      this.$emit('statusChange', this.filename + " (loading)");
+      this.$emit('statusChange', file.name + " (loading)");
 
       var reader = new FileReader();
       reader.onload = (e) => {
@@ -100,13 +81,9 @@ export default {
         try {
           if (FILE_TYPES[type]) {
             var filetype = FILE_TYPES[type];
-            var decoded = filetype.protoType.decode(buffer);
-            modifyProtoFields(decoded, this.store.displayDefaults);
-            var transformed = filetype.transform(decoded);
+            var data = filetype.decoder(buffer, filetype, file.name, this.store);
           } else {
-            var [filetype, decoded] = detectFile(buffer);
-            modifyProtoFields(decoded, this.store.displayDefaults);
-            var transformed = filetype.transform(decoded);
+            var [filetype, data] = detectAndDecode(buffer, file.name, this.store);
           }
         } catch (ex) {
           this.$emit('statusChange', this.filename + ': ' + ex);
@@ -114,51 +91,8 @@ export default {
         } finally {
           event.target.value = ''
         }
-        this.$emit('statusChange', this.filename + " (loading " + filetype.name + ")");
 
-        // Replace enum values with string representation and
-        // add default values to the proto objects. This function also handles
-        // a special case with TransformProtos where the matrix may be derived
-        // from the transform type.
-        function modifyProtoFields(protoObj, displayDefaults) {
-          if (!protoObj || protoObj !== Object(protoObj) || !protoObj.$type) {
-            return;
-          }
-          for (var fieldName in protoObj.$type.fields) {
-            var fieldProperties = protoObj.$type.fields[fieldName];
-            var field = protoObj[fieldName];
-
-            if (Array.isArray(field)) {
-              field.forEach((item, _) => {
-                modifyProtoFields(item, displayDefaults);
-              })
-              continue;
-            }
-
-            if (displayDefaults && !(field)) {
-              protoObj[fieldName] = fieldProperties.defaultValue;
-            }
-
-            if (fieldProperties.type === 'TransformProto') {
-              fill_transform_data(protoObj[fieldName]);
-              continue;
-            }
-
-            if (fieldProperties.resolvedType && fieldProperties.resolvedType.valuesById) {
-              protoObj[fieldName] = fieldProperties.resolvedType.valuesById[protoObj[fieldProperties.name]];
-              continue;
-            }
-            modifyProtoFields(protoObj[fieldName], displayDefaults);
-          }
-        }
-        var timeline;
-        if (filetype.timeline) {
-          timeline = transformed.children;
-        } else {
-          timeline = [transformed];
-        }
-
-        this.$set(this.dataFiles, filetype.dataType.name, dataFile(file.name, timeline, filetype.dataType));
+        this.$set(this.dataFiles, filetype.dataType.name, data);
         this.$emit('statusChange', null);
       }
       reader.readAsArrayBuffer(files[0]);

tools/winscope/src/DataView.vue

@@ -13,203 +13,70 @@
      limitations under the License.
 -->
 <template>
-  <md-card v-if="tree">
+  <md-card v-if="file">
     <md-card-header>
-      <div class="md-title">
-        <md-icon>{{file.type.icon}}</md-icon> {{file.filename}}
-      </div>
+      <md-card-header-text>
+        <div class="md-title">
+          <md-icon>{{file.type.icon}}</md-icon> {{file.filename}}
+        </div>
+      </md-card-header-text>
+      <md-button :href="file.blobUrl" :download="file.filename" class="md-icon-button">
+        <md-icon>save_alt</md-icon>
+      </md-button>
     </md-card-header>
-    <md-card-content class="container">
-      <md-card class="rects">
-        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
-          <h2 class="md-title">Screen</h2>
-        </md-whiteframe>
-        <md-whiteframe md-elevation="8">
-          <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" />
-        </md-whiteframe>
-      </md-card>
-      <md-card class="hierarchy">
-        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
-          <h2 class="md-title" style="flex: 1;">Hierarchy</h2>
-          <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox>
-          <md-checkbox v-model="store.flattened">Flat</md-checkbox>
-        </md-whiteframe>
-        <tree-view :item="tree" @item-selected="itemSelected" :selected="hierarchySelected" :filter="hierarchyFilter" :flattened="store.flattened" ref="hierarchy" />
-      </md-card>
-      <md-card class="properties">
-        <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
-          <h2 class="md-title" style="flex: 1">Properties</h2>
-          <div class="filter">
-            <input id="filter" type="search" placeholder="Filter..." v-model="propertyFilterString" />
-          </div>
-        </md-whiteframe>
-        <tree-view :item="selectedTree" :filter="propertyFilter" />
-      </md-card>
-    </md-card-content>
+    <traceview v-if="isTrace" :store="store" :file="file" ref="view" />
+    <videoview v-if="isVideo" :file="file" ref="view" />
+    <logview v-if="isLog" :file="file" ref="view" />
+    <div v-if="!(isTrace || isVideo || isLog)">
+      <h1 class="bad">Unrecognized DataType</h1>
+    </div>
   </md-card>
 </template>
 <script>
-import TreeView from './TreeView.vue'
-import Timeline from './Timeline.vue'
-import Rects from './Rects.vue'
-
-import { transform_json } from './transform.js'
-import { format_transform_type, is_simple_transform } from './matrix_utils.js'
-
-function formatProto(obj) {
-  if (!obj || !obj.$type) {
-    return;
-  }
-  if (obj.$type.fullName === '.android.surfaceflinger.RectProto' ||
-    obj.$type.fullName === '.android.graphics.RectProto') {
-    return `(${obj.left}, ${obj.top})  -  (${obj.right}, ${obj.bottom})`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.FloatRectProto') {
-    return `(${obj.left.toFixed(3)}, ${obj.top.toFixed(3)})  -  (${obj.right.toFixed(3)}, ${obj.bottom.toFixed(3)})`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.PositionProto') {
-    return `(${obj.x.toFixed(3)}, ${obj.y.toFixed(3)})`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.SizeProto') {
-    return `${obj.w} x ${obj.h}`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.ColorProto') {
-    return `r:${obj.r} g:${obj.g} \n b:${obj.b} a:${obj.a}`;
-  } else if (obj.$type.fullName === '.android.surfaceflinger.TransformProto') {
-    var transform_type = format_transform_type(obj);
-    if (is_simple_transform(obj)) {
-      return `${transform_type}`;
-    }
-    return `${transform_type}  dsdx:${obj.dsdx.toFixed(3)}   dtdx:${obj.dtdx.toFixed(3)}   dsdy:${obj.dsdy.toFixed(3)}   dtdy:${obj.dtdy.toFixed(3)}`;
-  }
-}
+import TraceView from './TraceView.vue'
+import VideoView from './VideoView.vue'
+import LogView from './LogView.vue'
+import { DATA_TYPES } from './decode.js'
 
 export default {
   name: 'dataview',
   data() {
-    return {
-      propertyFilterString: "",
-      selectedTree: {},
-      hierarchySelected: null,
-      lastSelectedStableId: null,
-      bounds: {},
-      rects: [],
-      tree: null,
-      highlight: null,
-    }
+    return {}
   },
   methods: {
-    itemSelected(item) {
-      this.hierarchySelected = item;
-      this.selectedTree = transform_json(item.obj, item.name, {
-        skip: item.skip,
-        formatter: formatProto
-      });
-      this.highlight = item.highlight;
-      this.lastSelectedStableId = item.stableId;
-      this.$emit('focus');
-    },
-    onRectClick(item) {
-      if (item) {
-        this.itemSelected(item);
-      }
-    },
-    setData(item) {
-      this.tree = item;
-      this.rects = [...item.rects].reverse();
-      this.bounds = item.bounds;
-
-      this.hierarchySelected = null;
-      this.selectedTree = {};
-      this.highlight = null;
-
-      function find_item(item, stableId) {
-        if (item.stableId === stableId) {
-          return item;
-        }
-        if (Array.isArray(item.children)) {
-          for (var child of item.children) {
-            var found = find_item(child, stableId);
-            if (found) {
-              return found;
-            }
-          }
-        }
-        return null;
-      }
-
-      if (this.lastSelectedStableId) {
-        var found = find_item(item, this.lastSelectedStableId);
-        if (found) {
-          this.itemSelected(found);
-        }
-      }
-    },
     arrowUp() {
-      return this.$refs.hierarchy.selectPrev();
+      return this.$refs.view.arrowUp();
     },
     arrowDown() {
-      return this.$refs.hierarchy.selectNext();
+      return this.$refs.view.arrowDown();
     },
   },
-  created() {
-    this.setData(this.file.timeline[this.file.selectedIndex]);
-  },
-  watch: {
-    selectedIndex() {
-      this.setData(this.file.timeline[this.file.selectedIndex]);
-    }
-  },
   props: ['store', 'file'],
   computed: {
-    selectedIndex() {
-      return this.file.selectedIndex;
+    isTrace() {
+      return this.file.type == DATA_TYPES.WINDOW_MANAGER ||
+          this.file.type == DATA_TYPES.SURFACE_FLINGER ||
+          this.file.type == DATA_TYPES.TRANSACTION || this.file.type == DATA_TYPES.WAYLAND
     },
-    hierarchyFilter() {
-      return this.store.onlyVisible ? (c, flattened) => {
-        return c.visible || c.childrenVisible && !flattened;
-      } : null;
+    isVideo() {
+      return this.file.type == DATA_TYPES.SCREEN_RECORDING;
     },
-    propertyFilter() {
-      var filterStrings = this.propertyFilterString.split(",");
-      var positive = [];
-      var negative = [];
-      filterStrings.forEach((f) => {
-        if (f.startsWith("!")) {
-          var str = f.substring(1);
-          negative.push((s) => s.indexOf(str) === -1);
-        } else {
-          var str = f;
-          positive.push((s) => s.indexOf(str) !== -1);
-        }
-      });
-      var filter = (item) => {
-        var apply = (f) => f(item.name);
-        return (positive.length === 0 || positive.some(apply)) &&
-          (negative.length === 0 || negative.every(apply));
-      };
-      filter.includeChildren = true;
-      return filter;
+    isLog() {
+      return this.file.type == DATA_TYPES.PROTO_LOG
     }
   },
   components: {
-    'tree-view': TreeView,
-    'rects': Rects,
+    'traceview': TraceView,
+    'videoview': VideoView,
+    'logview': LogView,
   }
 }
 
 </script>
 <style>
-.rects {
-  flex: none;
-  margin: 8px;
+.bad {
+  margin: 1em 1em 1em 1em;
+  font-size: 4em;
+  color: red;
 }
-
-.hierarchy,
-.properties {
-  flex: 1;
-  margin: 8px;
-  min-width: 400px;
-}
-
-.hierarchy>.tree-view,
-.properties>.tree-view {
-  margin: 16px;
-}
-</style>
+</style>

tools/winscope/src/LogView.vue

@@ -0,0 +1,138 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-card-content class="container">
+    <md-table class="log-table">
+      <md-table-header>
+        <md-table-head class="time-column-header">Time</md-table-head>
+        <md-table-head class="tag-column-header">Tag</md-table-head>
+        <md-table-head class="at-column-header">At</md-table-head>
+        <md-table-head>Message</md-table-head>
+      </md-table-header>
+      <md-table-body>
+        <md-table-row v-for="line in data" :key="line.timestamp">
+          <md-table-cell class="time-column">{{line.time}}</md-table-cell>
+          <md-table-cell class="tag-column">{{line.tag}}</md-table-cell>
+          <md-table-cell class="at-column">{{line.at}}</md-table-cell>
+          <md-table-cell>{{line.text}}</md-table-cell>
+        </md-table-row>
+      </md-table-body>
+    </md-table>
+  </md-card-content>
+</template>
+<script>
+export default {
+  name: 'logview',
+  data() {
+    return {
+      data: [],
+      isSelected: false,
+    }
+  },
+  methods: {
+    arrowUp() {
+      this.isSelected = !this.isSelected;
+      return !this.isSelected;
+    },
+    arrowDown() {
+      this.isSelected = !this.isSelected;
+      return !this.isSelected;
+    }
+  },
+  updated() {
+    let scrolltable = this.$el.getElementsByTagName("tbody")[0]
+    scrolltable.scrollTop = scrolltable.scrollHeight - 100;
+  },
+  watch: {
+    selectedIndex: {
+      immediate: true,
+      handler(idx) {
+        if (this.file.data.length > 0) {
+          while (this.data.length > idx + 1) {
+            this.data.pop();
+          }
+          while (this.data.length <= idx) {
+            this.data.push(this.file.data[this.data.length]);
+          }
+        }
+      },
+    }
+  },
+  props: ['file'],
+  computed: {
+    selectedIndex() {
+      return this.file.selectedIndex;
+    },
+  },
+}
+
+</script>
+<style>
+.log-table .md-table-cell {
+  height: auto;
+}
+
+.log-table {
+  width: 100%;
+}
+
+.time-column {
+  min-width: 15em;
+}
+
+.time-column-header {
+  min-width: 15em;
+  padding-right: 9em !important;
+}
+
+.tag-column {
+  min-width: 10em;
+}
+
+.tag-column-header {
+  min-width: 10em;
+  padding-right: 7em !important;
+}
+
+.at-column {
+  min-width: 35em;
+}
+
+.at-column-header {
+  min-width: 35em;
+  padding-right: 32em !important;
+}
+
+.log-table table {
+  display: block;
+}
+
+.log-table tbody {
+  display: block;
+  overflow-y: scroll;
+  width: 100%;
+  height: 20em;
+}
+
+.log-table tr {
+  width: 100%;
+  display: block;
+}
+
+.log-table td:last-child {
+  width: 100%;
+}
+
+</style>

tools/winscope/src/Rects.vue

@@ -24,15 +24,6 @@
 
 <script>
 
-import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
-import protobuf from 'protobufjs'
-
-var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs);
-var TraceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerTraceFileProto");
-var ServiceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerServiceDumpProto");
-
 export default {
   name: 'rects',
   props: ['bounds', 'rects', 'highlight'],

tools/winscope/src/Timeline.vue

@@ -14,7 +14,8 @@
 -->
 <template>
   <svg width="2000" height="20" viewBox="-5,0,2010,20">
-    <circle :cx="translate(c.timestamp)" cy="10" r="5" v-for="(c,i) in items" @click="onItemClick(c, i)" :class="itemClass(i)" />
+    <circle :cx="position(item)" cy="10" r="5" v-for="(item, idx) in items" @click="onItemClick(idx)" />
+    <circle v-if="items.length" :cx="position(selected)" cy="10" r="5" class="selected" />
   </svg>
 </template>
 <script>
@@ -25,6 +26,9 @@ export default {
     return {};
   },
   methods: {
+    position(item) {
+      return this.translate(item);
+    },
     translate(cx) {
       var scale = [...this.scale];
       if (scale[0] >= scale[1]) {
@@ -32,19 +36,19 @@ export default {
       }
       return (cx - scale[0]) / (scale[1] - scale[0]) * 2000;
     },
-    onItemClick(item, index) {
+    onItemClick(index) {
       this.$emit('item-selected', index);
     },
-    itemClass(index) {
-      return (this.selectedIndex == index) ? 'selected' : 'not-selected'
-    },
   },
   computed: {
     timestamps() {
       if (this.items.length == 1) {
         return [0];
       }
-      return this.items.map((e) => parseInt(e.timestamp));
+      return this.items;
+    },
+    selected() {
+      return this.items[this.selectedIndex];
     }
   },
 }

tools/winscope/src/TraceView.vue

@@ -0,0 +1,232 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-card-content class="container">
+    <md-card class="rects" v-if="hasScreenView">
+      <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+        <h2 class="md-title">Screen</h2>
+      </md-whiteframe>
+      <md-whiteframe md-elevation="8">
+        <rects :bounds="bounds" :rects="rects" :highlight="highlight" @rect-click="onRectClick" />
+      </md-whiteframe>
+    </md-card>
+    <md-card class="hierarchy">
+      <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+        <h2 class="md-title" style="flex: 1;">Hierarchy</h2>
+        <md-checkbox v-model="store.onlyVisible">Only visible</md-checkbox>
+        <md-checkbox v-model="store.flattened">Flat</md-checkbox>
+      </md-whiteframe>
+      <tree-view class="data-card" :item="tree" @item-selected="itemSelected" :selected="hierarchySelected" :filter="hierarchyFilter" :flattened="store.flattened" ref="hierarchy" />
+    </md-card>
+    <md-card class="properties">
+      <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+        <h2 class="md-title" style="flex: 1">Properties</h2>
+        <div class="filter">
+          <input id="filter" type="search" placeholder="Filter..." v-model="propertyFilterString" />
+        </div>
+      </md-whiteframe>
+      <tree-view class="data-card" :item="selectedTree" :filter="propertyFilter" />
+    </md-card>
+  </md-card-content>
+</template>
+<script>
+import TreeView from './TreeView.vue'
+import Timeline from './Timeline.vue'
+import Rects from './Rects.vue'
+
+import { transform_json } from './transform.js'
+import { format_transform_type, is_simple_transform } from './matrix_utils.js'
+import { DATA_TYPES } from './decode.js'
+
+function formatColorTransform(vals) {
+    const fixedVals = vals.map(v => v.toFixed(1));
+    var formatted = ``;
+    for (var i = 0; i < fixedVals.length; i += 4) {
+      formatted += `[`;
+      formatted += fixedVals.slice(i, i + 4).join(", ");
+      formatted += `] `;
+    }
+    return formatted;
+}
+
+
+function formatProto(obj) {
+  if (!obj || !obj.$type) {
+    return;
+  }
+  if (obj.$type.name === 'RectProto') {
+    return `(${obj.left}, ${obj.top})  -  (${obj.right}, ${obj.bottom})`;
+  } else if (obj.$type.name === 'FloatRectProto') {
+    return `(${obj.left.toFixed(3)}, ${obj.top.toFixed(3)})  -  (${obj.right.toFixed(3)}, ${obj.bottom.toFixed(3)})`;
+  } else if (obj.$type.name === 'PositionProto') {
+    return `(${obj.x.toFixed(3)}, ${obj.y.toFixed(3)})`;
+  } else if (obj.$type.name === 'SizeProto') {
+    return `${obj.w} x ${obj.h}`;
+  } else if (obj.$type.name === 'ColorProto') {
+    return `r:${obj.r} g:${obj.g} \n b:${obj.b} a:${obj.a}`;
+  } else if (obj.$type.name === 'TransformProto') {
+    var transform_type = format_transform_type(obj);
+    if (is_simple_transform(obj)) {
+      return `${transform_type}`;
+    }
+    return `${transform_type}  dsdx:${obj.dsdx.toFixed(3)}   dtdx:${obj.dtdx.toFixed(3)}   dsdy:${obj.dsdy.toFixed(3)}   dtdy:${obj.dtdy.toFixed(3)}`;
+  } else if (obj.$type.name === 'ColorTransformProto') {
+    var formated = formatColorTransform(obj.val);
+    return `${formated}`;
+  }
+}
+
+export default {
+  name: 'traceview',
+  data() {
+    return {
+      propertyFilterString: "",
+      selectedTree: {},
+      hierarchySelected: null,
+      lastSelectedStableId: null,
+      bounds: {},
+      rects: [],
+      tree: null,
+      highlight: null,
+    }
+  },
+  methods: {
+    itemSelected(item) {
+      this.hierarchySelected = item;
+      this.selectedTree = transform_json(item.obj, item.name, {
+        skip: item.skip,
+        formatter: formatProto
+      });
+      this.highlight = item.highlight;
+      this.lastSelectedStableId = item.stableId;
+      this.$emit('focus');
+    },
+    onRectClick(item) {
+      if (item) {
+        this.itemSelected(item);
+      }
+    },
+    setData(item) {
+      this.tree = item;
+      this.rects = [...item.rects].reverse();
+      this.bounds = item.bounds;
+
+      this.hierarchySelected = null;
+      this.selectedTree = {};
+      this.highlight = null;
+
+      function find_item(item, stableId) {
+        if (item.stableId === stableId) {
+          return item;
+        }
+        if (Array.isArray(item.children)) {
+          for (var child of item.children) {
+            var found = find_item(child, stableId);
+            if (found) {
+              return found;
+            }
+          }
+        }
+        return null;
+      }
+
+      if (this.lastSelectedStableId) {
+        var found = find_item(item, this.lastSelectedStableId);
+        if (found) {
+          this.itemSelected(found);
+        }
+      }
+    },
+    arrowUp() {
+      return this.$refs.hierarchy.selectPrev();
+    },
+    arrowDown() {
+      return this.$refs.hierarchy.selectNext();
+    },
+  },
+  created() {
+    this.setData(this.file.data[this.file.selectedIndex]);
+  },
+  watch: {
+    selectedIndex() {
+      this.setData(this.file.data[this.file.selectedIndex]);
+    }
+  },
+  props: ['store', 'file'],
+  computed: {
+    selectedIndex() {
+      return this.file.selectedIndex;
+    },
+    hierarchyFilter() {
+      return this.store.onlyVisible ? (c, flattened) => {
+        return c.visible || c.childrenVisible && !flattened;
+      } : null;
+    },
+    propertyFilter() {
+      var filterStrings = this.propertyFilterString.split(",");
+      var positive = [];
+      var negative = [];
+      filterStrings.forEach((f) => {
+        if (f.startsWith("!")) {
+          var str = f.substring(1);
+          negative.push((s) => s.indexOf(str) === -1);
+        } else {
+          var str = f;
+          positive.push((s) => s.indexOf(str) !== -1);
+        }
+      });
+      var filter = (item) => {
+        var apply = (f) => f(item.name);
+        return (positive.length === 0 || positive.some(apply)) &&
+          (negative.length === 0 || negative.every(apply));
+      };
+      filter.includeChildren = true;
+      return filter;
+    },
+    hasScreenView() {
+      return this.file.type !== DATA_TYPES.TRANSACTION;
+    },
+  },
+  components: {
+    'tree-view': TreeView,
+    'rects': Rects,
+  }
+}
+
+</script>
+<style>
+.rects {
+  flex: none;
+  margin: 8px;
+}
+
+.hierarchy,
+.properties {
+  flex: 1;
+  margin: 8px;
+  min-width: 400px;
+}
+
+.hierarchy>.tree-view,
+.properties>.tree-view {
+  margin: 16px;
+}
+
+.data-card {
+  overflow: auto;
+  max-height: 48em;
+}
+
+</style>

tools/winscope/src/VideoView.vue

@@ -0,0 +1,75 @@
+<!-- Copyright (C) 2019 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<template>
+  <md-card-content class="container">
+    <md-card class="rects">
+      <md-whiteframe md-tag="md-toolbar" md-elevation="0" class="card-toolbar md-transparent md-dense">
+        <h2 class="md-title">Screen</h2>
+      </md-whiteframe>
+      <md-whiteframe md-elevation="8">
+        <video :id="file.filename" class="screen" :src="file.data" />
+      </md-whiteframe>
+    </md-card>
+  </md-card-content>
+</template>
+<script>
+const EPSILON = 0.00001
+
+function uint8ToString(array) {
+  var chunk = 0x8000;
+  var out = [];
+  for (var i = 0; i < array.length; i += chunk) {
+    out.push(String.fromCharCode.apply(null, array.subarray(i, i + chunk)));
+  }
+  return out.join("");
+}
+
+export default {
+  name: 'videoview',
+  data() {
+    return {}
+  },
+  methods: {
+    arrowUp() {
+      return true
+    },
+    arrowDown() {
+      return true;
+    },
+    selectFrame(idx) {
+      var time = (this.file.timeline[idx] - this.file.timeline[0]) / 1000000000 + EPSILON;
+      document.getElementById(this.file.filename).currentTime = time;
+    },
+  },
+  watch: {
+    selectedIndex() {
+      this.selectFrame(this.file.selectedIndex);
+    }
+  },
+  props: ['file'],
+  computed: {
+    selectedIndex() {
+      return this.file.selectedIndex;
+    },
+  },
+}
+
+</script>
+<style>
+.screen {
+  max-height: 50em;
+}
+
+</style>

tools/winscope/src/decode.js

@@ -0,0 +1,298 @@
+/*
+ * Copyright 2017, The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
+import jsonProtoLogDefs from 'frameworks/base/core/proto/android/server/protolog.proto'
+import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
+import jsonProtoDefsTrans from 'frameworks/native/cmds/surfacereplayer/proto/src/trace.proto'
+import jsonProtoDefsWL from 'vendor/google_arc/libs/wayland_service/waylandtrace.proto'
+import protobuf from 'protobufjs'
+import { transform_layers, transform_layers_trace } from './transform_sf.js'
+import { transform_window_service, transform_window_trace } from './transform_wm.js'
+import { transform_transaction_trace } from './transform_transaction.js'
+import { transform_wl_outputstate, transform_wayland_trace } from './transform_wl.js'
+import { transform_protolog } from './transform_protolog.js'
+import { fill_transform_data } from './matrix_utils.js'
+import { mp4Decoder } from './decodeVideo.js'
+
+var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
+  .addJSON(jsonProtoLogDefs.nested)
+  .addJSON(jsonProtoDefsSF.nested)
+  .addJSON(jsonProtoDefsTrans.nested)
+  .addJSON(jsonProtoDefsWL.nested);
+
+var WindowTraceMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerTraceFileProto");
+var WindowMessage = protoDefs.lookupType(
+  "com.android.server.wm.WindowManagerServiceDumpProto");
+var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
+var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
+var TransactionMessage = protoDefs.lookupType("Trace");
+var WaylandMessage = protoDefs.lookupType("org.chromium.arc.wayland_composer.OutputStateProto");
+var WaylandTraceMessage = protoDefs.lookupType("org.chromium.arc.wayland_composer.TraceFileProto");
+var WindowLogMessage = protoDefs.lookupType(
+  "com.android.server.protolog.ProtoLogFileProto");
+var LogMessage = protoDefs.lookupType(
+  "com.android.server.protolog.ProtoLogMessage");
+
+const LAYER_TRACE_MAGIC_NUMBER = [0x09, 0x4c, 0x59, 0x52, 0x54, 0x52, 0x41, 0x43, 0x45] // .LYRTRACE
+const WINDOW_TRACE_MAGIC_NUMBER = [0x09, 0x57, 0x49, 0x4e, 0x54, 0x52, 0x41, 0x43, 0x45] // .WINTRACE
+const MPEG4_MAGIC_NMBER = [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x6d, 0x70, 0x34, 0x32] // ....ftypmp42
+const WAYLAND_TRACE_MAGIC_NUMBER = [0x09, 0x57, 0x59, 0x4c, 0x54, 0x52, 0x41, 0x43, 0x45] // .WYLTRACE
+const PROTO_LOG_MAGIC_NUMBER = [0x09, 0x50, 0x52, 0x4f, 0x54, 0x4f, 0x4c, 0x4f, 0x47] // .PROTOLOG
+
+const DATA_TYPES = {
+  WINDOW_MANAGER: {
+    name: "WindowManager",
+    icon: "view_compact",
+    mime: "application/octet-stream",
+  },
+  SURFACE_FLINGER: {
+    name: "SurfaceFlinger",
+    icon: "filter_none",
+    mime: "application/octet-stream",
+  },
+  SCREEN_RECORDING: {
+    name: "Screen recording",
+    icon: "videocam",
+    mime: "video/mp4",
+  },
+  TRANSACTION: {
+    name: "Transaction",
+    icon: "timeline",
+    mime: "application/octet-stream",
+  },
+  WAYLAND: {
+    name: "Wayland",
+    icon: "filter_none",
+    mime: "application/octet-stream",
+  },
+  PROTO_LOG: {
+    name: "ProtoLog",
+    icon: "notes",
+    mime: "application/octet-stream",
+  }
+}
+
+const FILE_TYPES = {
+  'window_trace': {
+    name: "WindowManager trace",
+    dataType: DATA_TYPES.WINDOW_MANAGER,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: WindowTraceMessage,
+      transform: transform_window_trace,
+      timeline: true,
+    },
+  },
+  'layers_trace': {
+    name: "SurfaceFlinger trace",
+    dataType: DATA_TYPES.SURFACE_FLINGER,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: LayersTraceMessage,
+      transform: transform_layers_trace,
+      timeline: true,
+    },
+  },
+  'wl_trace': {
+    name: "Wayland trace",
+    dataType: DATA_TYPES.WAYLAND,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: WaylandTraceMessage,
+      transform: transform_wayland_trace,
+      timeline: true,
+    },
+  },
+  'layers_dump': {
+    name: "SurfaceFlinger dump",
+    dataType: DATA_TYPES.SURFACE_FLINGER,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: LayersMessage,
+      transform: transform_layers,
+      timeline: false,
+    },
+  },
+  'window_dump': {
+    name: "WindowManager dump",
+    dataType: DATA_TYPES.WINDOW_MANAGER,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: WindowMessage,
+      transform: transform_window_service,
+      timeline: false,
+    },
+  },
+  'wl_dump': {
+    name: "Wayland dump",
+    dataType: DATA_TYPES.WAYLAND,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: WaylandMessage,
+      transform: transform_wl_outputstate,
+      timeline: false,
+    },
+  },
+  'screen_recording': {
+    name: "Screen recording",
+    dataType: DATA_TYPES.SCREEN_RECORDING,
+    decoder: videoDecoder,
+    decoderParams: {
+      videoDecoder: mp4Decoder,
+    },
+  },
+  'transaction': {
+    name: "Transaction",
+    dataType: DATA_TYPES.TRANSACTION,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: TransactionMessage,
+      transform: transform_transaction_trace,
+      timeline: true,
+    }
+  },
+  'proto_log': {
+    name: "ProtoLog",
+    dataType: DATA_TYPES.PROTO_LOG,
+    decoder: protoDecoder,
+    decoderParams: {
+      protoType: WindowLogMessage,
+      transform: transform_protolog,
+      timeline: true,
+    }
+  }
+};
+
+// Replace enum values with string representation and
+// add default values to the proto objects. This function also handles
+// a special case with TransformProtos where the matrix may be derived
+// from the transform type.
+function modifyProtoFields(protoObj, displayDefaults) {
+  if (!protoObj || protoObj !== Object(protoObj) || !protoObj.$type) {
+    return;
+  }
+  for (var fieldName in protoObj.$type.fields) {
+    var fieldProperties = protoObj.$type.fields[fieldName];
+    var field = protoObj[fieldName];
+
+    if (Array.isArray(field)) {
+      field.forEach((item, _) => {
+        modifyProtoFields(item, displayDefaults);
+      })
+      continue;
+    }
+
+    if (displayDefaults && !(field)) {
+      protoObj[fieldName] = fieldProperties.defaultValue;
+    }
+
+    if (fieldProperties.type === 'TransformProto') {
+      fill_transform_data(protoObj[fieldName]);
+      continue;
+    }
+
+    if (fieldProperties.resolvedType && fieldProperties.resolvedType.valuesById) {
+      protoObj[fieldName] = fieldProperties.resolvedType.valuesById[protoObj[fieldProperties.name]];
+      continue;
+    }
+    modifyProtoFields(protoObj[fieldName], displayDefaults);
+  }
+}
+
+function protoDecoder(buffer, fileType, fileName, store) {
+  var decoded = fileType.decoderParams.protoType.decode(buffer);
+  modifyProtoFields(decoded, store.displayDefaults);
+  var transformed = fileType.decoderParams.transform(decoded);
+  var data
+  if (fileType.decoderParams.timeline) {
+    data = transformed.children;
+  } else {
+    data = [transformed];
+  }
+  let blobUrl = URL.createObjectURL(new Blob([buffer], { type: fileType.dataType.mime }));
+  return dataFile(fileName, data.map(x => x.timestamp), data, blobUrl, fileType.dataType);
+}
+
+function videoDecoder(buffer, fileType, fileName, store) {
+  let [data, timeline] = fileType.decoderParams.videoDecoder(buffer);
+  let blobUrl = URL.createObjectURL(new Blob([data], { type: fileType.dataType.mime }));
+  return dataFile(fileName, timeline, blobUrl, blobUrl, fileType.dataType);
+}
+
+function dataFile(filename, timeline, data, blobUrl, type) {
+  return {
+    filename: filename,
+    timeline: timeline,
+    data: data,
+    blobUrl: blobUrl,
+    type: type,
+    selectedIndex: 0,
+    destroy() {
+      URL.revokeObjectURL(this.blobUrl);
+    },
+  }
+}
+
+function arrayEquals(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (var i = 0; i < a.length; i++) {
+    if (a[i] != b[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function arrayStartsWith(array, prefix) {
+  return arrayEquals(array.slice(0, prefix.length), prefix);
+}
+
+function decodedFile(fileType, buffer, fileName, store) {
+  return [fileType, fileType.decoder(buffer, fileType, fileName, store)];
+}
+
+function detectAndDecode(buffer, fileName, store) {
+  if (arrayStartsWith(buffer, LAYER_TRACE_MAGIC_NUMBER)) {
+    return decodedFile(FILE_TYPES['layers_trace'], buffer, fileName, store);
+  }
+  if (arrayStartsWith(buffer, WINDOW_TRACE_MAGIC_NUMBER)) {
+    return decodedFile(FILE_TYPES['window_trace'], buffer, fileName, store);
+  }
+  if (arrayStartsWith(buffer, MPEG4_MAGIC_NMBER)) {
+    return decodedFile(FILE_TYPES['screen_recording'], buffer, fileName, store);
+  }
+  if (arrayStartsWith(buffer, WAYLAND_TRACE_MAGIC_NUMBER)) {
+    return decodedFile(FILE_TYPES['wl_trace'], buffer, fileName, store);
+  }
+  if (arrayStartsWith(buffer, PROTO_LOG_MAGIC_NUMBER)) {
+    return decodedFile(FILE_TYPES['proto_log'], buffer, fileName, store);
+  }
+  for (var name of ['transaction', 'layers_dump', 'window_dump', 'wl_dump']) {
+    try {
+      return decodedFile(FILE_TYPES[name], buffer, fileName, store);
+    } catch (ex) {
+      // ignore exception and try next filetype
+    }
+  }
+  throw new Error('Unable to detect file');
+}
+
+export { detectAndDecode, DATA_TYPES, FILE_TYPES };

tools/winscope/src/decodeVideo.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2017, The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const WINSCOPE_META_MAGIC_STRING = [0x23, 0x56, 0x56, 0x31, 0x4e, 0x53, 0x43, 0x30, 0x50, 0x45, 0x54, 0x31, 0x4d, 0x45, 0x21, 0x23]; // #VV1NSC0PET1ME!#
+
+// Suitable only for short patterns
+function findFirstInArray(array, pattern) {
+  for (var i = 0; i < array.length; i++) {
+    var match = true;
+    for (var j = 0; j < pattern.length; j++) {
+      if (array[i + j] != pattern[j]) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      return i;
+    }
+  }
+  return -1;
+}
+
+function parseUintNLE(buffer, position, bytes) {
+  var num = 0;
+  for (var i = bytes - 1; i >= 0; i--) {
+    num = num * 256
+    num += buffer[position + i];
+  }
+  return num;
+}
+
+function parseUint32LE(buffer, position) {
+  return parseUintNLE(buffer, position, 4)
+}
+
+function parseUint64LE(buffer, position) {
+  return parseUintNLE(buffer, position, 8)
+}
+
+function mp4Decoder(buffer) {
+  var dataStart = findFirstInArray(buffer, WINSCOPE_META_MAGIC_STRING);
+  if (dataStart < 0) {
+    throw new Error('Unable to find sync metadata in the file. Are you using the latest Android ScreenRecorder version?');
+  }
+  dataStart += WINSCOPE_META_MAGIC_STRING.length;
+  var frameNum = parseUint32LE(buffer, dataStart);
+  dataStart += 4;
+  var timeline = [];
+  for (var i = 0; i < frameNum; i++) {
+    timeline.push(parseUint64LE(buffer, dataStart) * 1000);
+    dataStart += 8;
+  }
+  return [buffer, timeline]
+}
+
+export { mp4Decoder };

tools/winscope/src/detectfile.js

@@ -1,129 +0,0 @@
-/*
- * Copyright 2017, The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-
-import jsonProtoDefs from 'frameworks/base/core/proto/android/server/windowmanagertrace.proto'
-import jsonProtoDefsSF from 'frameworks/native/services/surfaceflinger/layerproto/layerstrace.proto'
-import protobuf from 'protobufjs'
-import { transform_layers, transform_layers_trace } from './transform_sf.js'
-import { transform_window_service, transform_window_trace } from './transform_wm.js'
-
-var protoDefs = protobuf.Root.fromJSON(jsonProtoDefs)
-  .addJSON(jsonProtoDefsSF.nested);
-
-var WindowTraceMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerTraceFileProto");
-var WindowMessage = protoDefs.lookupType(
-  "com.android.server.wm.WindowManagerServiceDumpProto");
-var LayersMessage = protoDefs.lookupType("android.surfaceflinger.LayersProto");
-var LayersTraceMessage = protoDefs.lookupType("android.surfaceflinger.LayersTraceFileProto");
-
-
-const LAYER_TRACE_MAGIC_NUMBER = [0x09, 0x4c, 0x59, 0x52, 0x54, 0x52, 0x41, 0x43, 0x45] // .LYRTRACE
-const WINDOW_TRACE_MAGIC_NUMBER = [0x09, 0x57, 0x49, 0x4e, 0x54, 0x52, 0x41, 0x43, 0x45] // .WINTRACE
-
-const DATA_TYPES = {
-  WINDOW_MANAGER: {
-    name: "WindowManager",
-    icon: "view_compact",
-  },
-  SURFACE_FLINGER: {
-    name: "SurfaceFlinger",
-    icon: "filter_none",
-  },
-}
-
-const FILE_TYPES = {
-  'window_trace': {
-    protoType: WindowTraceMessage,
-    transform: transform_window_trace,
-    name: "WindowManager trace",
-    timeline: true,
-    dataType: DATA_TYPES.WINDOW_MANAGER,
-  },
-  'layers_trace': {
-    protoType: LayersTraceMessage,
-    transform: transform_layers_trace,
-    name: "SurfaceFlinger trace",
-    timeline: true,
-    dataType: DATA_TYPES.SURFACE_FLINGER,
-  },
-  'layers_dump': {
-    protoType: LayersMessage,
-    transform: transform_layers,
-    name: "SurfaceFlinger dump",
-    timeline: false,
-    dataType: DATA_TYPES.SURFACE_FLINGER,
-  },
-  'window_dump': {
-    protoType: WindowMessage,
-    transform: transform_window_service,
-    name: "WindowManager dump",
-    timeline: false,
-    dataType: DATA_TYPES.WINDOW_MANAGER,
-  },
-};
-
-function dataFile(filename, timeline, type) {
-  return {
-    filename: filename,
-    timeline: timeline,
-    type: type,
-    selectedIndex: 0,
-  }
-}
-
-function arrayEquals(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  }
-  for (var i = 0; i < a.length; i++) {
-    if (a[i] != b[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function arrayStartsWith(array, prefix) {
-  return arrayEquals(array.slice(0, prefix.length), prefix);
-}
-
-function decodedFile(filename, buffer) {
-  var decoded = FILE_TYPES[filename].protoType.decode(buffer);
-  return [FILE_TYPES[filename], decoded];
-}
-
-function detectFile(buffer) {
-  if (arrayStartsWith(buffer, LAYER_TRACE_MAGIC_NUMBER)) {
-    return decodedFile('layers_trace', buffer);
-  }
-  if (arrayStartsWith(buffer, WINDOW_TRACE_MAGIC_NUMBER)) {
-    return decodedFile('window_trace', buffer);
-  }
-  for (var filename of ['layers_dump', 'window_dump']) {
-    try {
-      var [filetype, decoded] = decodedFile(filename, buffer);
-      var transformed = filetype.transform(decoded);
-      return [FILE_TYPES[filename], decoded];
-    } catch (ex) {
-      // ignore exception and try next filetype
-    }
-  }
-  throw new Error('Unable to detect file');
-}
-
-export { detectFile, dataFile, DATA_TYPES, FILE_TYPES };

tools/winscope/src/transform.js

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+// kind - a type used for categorization of different levels
+// name - name of the node
+// children - list of child entries. Each child entry is pair list [raw object, nested transform function].
+// bounds - used to calculate the full bounds of parents
+// stableId - unique id for an entry. Used to maintain selection across frames.
 function transform({obj, kind, name, children, timestamp, rect, bounds, highlight, rects_transform, chips, visible, flattened, stableId}) {
 	function call(fn, arg) {
 		return (typeof fn == 'function') ? fn(arg) : fn;

tools/winscope/src/transform_protolog.js

@@ -0,0 +1,131 @@
+import viewerConfig from "../../../../frameworks/base/data/etc/services.core.protolog.json"
+
+import { nanos_to_string } from './transform.js'
+
+const PROTOLOG_VERSION = "1.0.0"
+
+class FormatStringMismatchError extends Error {
+  constructor(message) {
+    super(message);
+  }
+}
+
+function get_param(arr, idx) {
+  if (arr.length <= idx) {
+    throw new FormatStringMismatchError('No param for format string conversion');
+  }
+  return arr[idx];
+}
+
+function format_text(messageFormat, data) {
+  let out = ""
+  const strParams = data.strParams;
+  let strParamsIdx = 0;
+  const sint64Params = data.sint64Params;
+  let sint64ParamsIdx = 0;
+  const doubleParams = data.doubleParams;
+  let doubleParamsIdx = 0;
+  const booleanParams = data.booleanParams;
+  let booleanParamsIdx = 0;
+  for (let i = 0; i < messageFormat.length;) {
+    if (messageFormat[i] == '%') {
+      if (i + 1 >= messageFormat.length) {
+        // Should never happen - protologtool checks for that
+        throw new Error("Invalid format string")
+      }
+      switch (messageFormat[i + 1]) {
+        case '%':
+          out += '%';
+          break;
+        case 'd':
+          out += get_param(sint64Params, sint64ParamsIdx++).toString(10);
+          break;
+        case 'o':
+          out += get_param(sint64Params, sint64ParamsIdx++).toString(8);
+          break;
+        case 'x':
+          out += get_param(sint64Params, sint64ParamsIdx++).toString(16);
+          break;
+        case 'f':
+          out += get_param(doubleParams, doubleParamsIdx++).toFixed(6);
+          break;
+        case 'e':
+          out += get_param(doubleParams, doubleParamsIdx++).toExponential();
+          break;
+        case 'g':
+          out += get_param(doubleParams, doubleParamsIdx++).toString();
+          break;
+        case 's':
+          out += get_param(strParams, strParamsIdx++);
+          break;
+        case 'b':
+          out += get_param(booleanParams, booleanParamsIdx++).toString();
+          break;
+        default:
+          // Should never happen - protologtool checks for that
+          throw new Error("Invalid format string conversion: " + messageFormat[i + 1]);
+      }
+      i += 2;
+    } else {
+      out += messageFormat[i];
+      i += 1;
+    }
+  }
+  return out;
+}
+
+function transform_unformatted(entry) {
+  return {
+    text: (entry.messageHash.toString() + ' - [' + entry.strParams.toString() +
+      '] [' + entry.sint64Params.toString() + '] [' + entry.doubleParams.toString() +
+      '] [' + entry.booleanParams.toString() + ']'),
+    time: nanos_to_string(entry.elapsedRealtimeNanos),
+    tag: "INVALID",
+    at: "",
+    timestamp: entry.elapsedRealtimeNanos,
+  };
+}
+
+function transform_formatted(entry, message) {
+  return {
+    text: format_text(message.message, entry),
+    time: nanos_to_string(entry.elapsedRealtimeNanos),
+    tag: viewerConfig.groups[message.group].tag,
+    at: message.at,
+    timestamp: entry.elapsedRealtimeNanos,
+  };
+}
+
+function transform_message(entry) {
+  let message = viewerConfig.messages[entry.messageHash]
+  if (message === undefined) {
+    return transform_unformatted(entry);
+  } else {
+    try {
+      return transform_formatted(entry, message);
+    } catch (err) {
+      if (err instanceof FormatStringMismatchError) {
+        return transform_unformatted(entry);
+      }
+      throw err;
+    }
+  }
+}
+
+function transform_protolog(log) {
+  if (log.version !== PROTOLOG_VERSION) {
+    throw new Error('Unsupported log version');
+  }
+  if (viewerConfig.version !== PROTOLOG_VERSION) {
+    throw new Error('Unsupported viewer config version');
+  }
+
+  let data = log.log.map(entry => (transform_message(entry)))
+  data.sort(function(a, b) { return a.timestamp - b.timestamp })
+  let transformed = {
+    children: data
+  }
+  return transformed
+}
+
+export { transform_protolog };

tools/winscope/src/transform_sf.js

@@ -32,7 +32,6 @@ var MISSING_LAYER = {short: 'MissingLayer',
     class: 'error'};
 
 function transform_layer(layer, {parentBounds, parentHidden}) {
-
   function get_size(layer) {
     var size = layer.size || {w: 0, h: 0};
     return {
@@ -101,7 +100,7 @@ function transform_layer(layer, {parentBounds, parentHidden}) {
     var ty = (layer.position) ? layer.position.y || 0 : 0;
     result = offset_to(result, 0, 0);
     result.label = layer.name;
-    result.transform = layer.transform;
+    result.transform = layer.transform || {dsdx:1, dtdx:0, dsdy:0, dtdy:1};
     result.transform.tx = tx;
     result.transform.ty = ty;
     return result;
@@ -118,6 +117,30 @@ function transform_layer(layer, {parentBounds, parentHidden}) {
         region.rect.every(function(r) { return is_empty_rect(r) } );
   }
 
+  function is_rect_empty_and_valid(rect) {
+    return rect &&
+      (rect.left - rect.right === 0 || rect.top - rect.bottom === 0);
+  }
+
+  function is_transform_invalid(transform) {
+    return !transform || (transform.dsdx * transform.dtdy ===
+        transform.dtdx * transform.dsdy); //determinant of transform
+        /**
+         * The transformation matrix is defined as the product of:
+         * | cos(a) -sin(a) |  \/  | X 0 |
+         * | sin(a)  cos(a) |  /\  | 0 Y |
+         *
+         * where a is a rotation angle, and X and Y are scaling factors.
+         * A transformation matrix is invalid when either X or Y is zero,
+         * as a rotation matrix is valid for any angle. When either X or Y
+         * is 0, then the scaling matrix is not invertible, which makes the
+         * transformation matrix not invertible as well. A 2D matrix with
+         * components | A B | is uninvertible if and only if AD - BC = 0.
+         *            | C D |
+         * This check is included above.
+         */
+  }
+
   /**
    * Checks if the layer is visible on screen according to its type,
    * active buffer content, alpha and visible regions.
@@ -172,16 +195,49 @@ function transform_layer(layer, {parentBounds, parentHidden}) {
   if (layer.missing) {
     chips.push(MISSING_LAYER);
   }
-
+  function visibilityReason(layer) {
+    var reasons = [];
+    if (!layer.color || layer.color.a === 0) {
+      reasons.push('Alpha is 0');
+    }
+    if (layer.flags && (layer.flags & FLAG_HIDDEN != 0)) {
+      reasons.push('Flag is hidden');
+    }
+    if (is_rect_empty_and_valid(layer.crop)) {
+      reasons.push('Crop is zero');
+    }
+    if (is_transform_invalid(layer.transform)) {
+      reasons.push('Transform is invalid');
+    }
+    if (layer.isRelativeOf && layer.zOrderRelativeOf == -1) {
+      reasons.push('RelativeOf layer has been removed');
+    }
+    return reasons.join();
+  }
+  if (parentHidden) {
+    layer.invisibleDueTo = 'Hidden by parent with ID: ' + parentHidden;
+  } else {
+    let reasons_hidden = visibilityReason(layer);
+    let isBufferLayer = (layer.type === 'BufferStateLayer' || layer.type === 'BufferQueueLayer');
+    if (reasons_hidden) {
+      layer.invisibleDueTo = reasons_hidden;
+      parentHidden = layer.id
+    } else if (layer.type === 'ContainerLayer') {
+        layer.invisibleDueTo = 'This is a ContainerLayer.';
+    } else if (isBufferLayer && (!layer.activeBuffer ||
+          layer.activeBuffer.height === 0 || layer.activeBuffer.width === 0)) {
+        layer.invisibleDueTo = 'The buffer is empty.';
+    } else if (!visible) {
+        layer.invisibleDueTo = 'Unknown. Occluded by another layer?';
+    }
+  }
   var transform_layer_with_parent_hidden =
-      (layer) => transform_layer(layer, {parentBounds: rect, parentHidden: hidden});
-
+      (layer) => transform_layer(layer, {parentBounds: rect, parentHidden: parentHidden});
   postprocess_flags(layer);
-
   return transform({
     obj: layer,
-    kind: 'layer',
-    name: layer.name,
+    kind: '',
+    name: layer.id + ": " + layer.name,
     children: [
       [layer.resolvedChildren, transform_layer_with_parent_hidden],
     ],
@@ -237,7 +293,7 @@ function transform_layers(layers) {
   var idToTransformed = {};
   var transformed_roots = roots.map((r) =>
     transform_layer(r, {parentBounds: {left: 0, right: 0, top: 0, bottom: 0},
-      parentHidden: false}));
+      parentHidden: null}));
 
   foreachTree(transformed_roots, (n) => {
     idToTransformed[n.obj.id] = n;

tools/winscope/src/transform_transaction.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2019, The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {transform, nanos_to_string} from './transform.js'
+
+function transform_transaction(transaction) {
+  return transform({
+    obj: transaction,
+    kind: 'transaction',
+    children:[[transaction.surfaceChange, transform_entry_type('surfaceChange')],
+        [transaction.displayChange, transform_entry_type('displayChange')]],
+    rects: [],
+    visible: false,
+  })
+}
+
+function transform_entry_type(transactionType) {
+  function return_transform(item) {
+    return Object.freeze({
+      obj: item,
+      kind: transactionType,
+      rects: [],
+      visible: false,
+      name: item.name || item.id || nanos_to_string(item.when),
+    });
+  }
+  return transactionType === 'transaction' ? transform_transaction : return_transform;
+}
+
+function transform_entry(entry) {
+  var transactionType = entry.increment;
+  return transform({
+    obj: entry,
+    kind: 'entry',
+    name: nanos_to_string(entry.timeStamp),
+    children: [[[entry[transactionType]], transform_entry_type(transactionType)]],
+    timestamp: entry.timeStamp,
+  });
+}
+
+function transform_transaction_trace(entries) {
+  var r = transform({
+    obj: entries,
+    kind: 'entries',
+    name: 'transactionstrace',
+    children: [
+      [entries.increment, transform_entry],
+    ],
+  })
+  return r;
+}
+
+export {transform_transaction_trace};

tools/winscope/src/transform_wl.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2019, The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {transform, nanos_to_string, get_visible_chip} from './transform.js'
+
+function transform_wl_layer(layer) {
+  function is_visible(layer) {
+    return layer.parent == 0 || (layer.visibleInParent && layer.visible && (layer.hidden != 1));
+  }
+
+  var chips = [];
+  var rect = layer.displayFrame;
+  var visible = is_visible(layer);
+  if (visible && layer.parent != 0) {
+    chips.push(get_visible_chip());
+  }
+  if (!visible) {
+    rect = undefined;
+  }
+
+  return transform({
+    obj: layer,
+    kind: 'layer',
+    name: layer.name,
+    children: [
+      [layer.resolvedChildren, transform_wl_layer],
+    ],
+    rect,
+    highlight: rect,
+    chips,
+    visible,
+    stableId: layer.id,
+  });
+}
+
+function transform_wl_container(cntnr) {
+  var rect = cntnr.geometry;
+  var layersList = cntnr.layers || [];
+
+  return transform({
+    obj: cntnr,
+    kind: 'container',
+    name: cntnr.name,
+    children: [
+      [layersList, transform_wl_layer],
+    ],
+    rect,
+    highlight: rect,
+    stableId: cntnr.id,
+  });
+}
+
+function transform_wl_outputstate(layers) {
+  var containerList = layers.containers || [];
+  var fullBounds = layers.fullBounds;
+
+  return transform({
+    obj: {name: "Output State", fullBounds: fullBounds},
+    kind: 'outputstate',
+    name: 'Output State',
+    rect: fullBounds,
+    highlight: fullBounds,
+    children: [
+      [containerList, transform_wl_container],
+    ],
+  });
+}
+
+function transform_wl_entry(entry) {
+  return transform({
+    obj: entry,
+    kind: 'entry',
+    name: nanos_to_string(entry.elapsedRealtimeNanos) + " - " + entry.where,
+    children: [
+      [[entry.state], transform_wl_outputstate],
+    ],
+    timestamp: entry.elapsedRealtimeNanos,
+    stableId: 'entry',
+  });
+}
+
+function transform_wayland_trace(entries) {
+  var r = transform({
+    obj: entries,
+    kind: 'wltrace',
+    name: 'wltrace',
+    children: [
+      [entries.entry, transform_wl_entry],
+    ],
+  });
+
+  return r;
+}
+
+export {transform_wl_outputstate, transform_wayland_trace};

tools/winscope/trace.sh

@@ -15,11 +15,10 @@
 # limitations under the License.
 #
 
-WINSCOPE_URL='http://go/winscope/#sftrace'
+WINSCOPE_URL='http://go/winscope/'
 
 set -e
 
-outfile=layerstrace.pb
 help=
 
 for arg in "$@"; do
@@ -31,13 +30,18 @@ for arg in "$@"; do
   esac
 done
 
+outfileTrans=${outfile}_transactiontrace.pb
+outfileSurf=${outfile}_layerstrace.pb
+
+outfileTrans_abs="$(cd "$(dirname "$outfileTrans")"; pwd)/$(basename "$outfileTrans")"
+outfileSurf_abs="$(cd "$(dirname "$outfileSurf")"; pwd)/$(basename "$outfileSurf")"
+
 if [ "$help" != "" ]; then
   echo "usage: $0 [-h | --help] [OUTFILE]"
   echo
-  echo "Traces SurfaceFlinger and writes the output to OUTFILE (default ./layerstrace.pb)."
+  echo "Records Transaction traces (default transactiontrace.pb)."
+  echo "Records Surface traces (default layerstrace.pb)."
   echo "To view the traces, use $WINSCOPE_URL."
-  echo
-  echo "WARNING: This calls adb root and deactivates SELinux."
   exit 1
 fi
 
@@ -46,16 +50,19 @@ function log_error() {
 }
 trap log_error ERR
 
-outfile_abs="$(cd "$(dirname "$outfile")"; pwd)/$(basename "$outfile")"
-
 function start_tracing() {
-  echo -n "Starting SurfaceFlinger trace..."
+  echo -n "Starting transaction and surface recording..."
+  echo
+  adb shell su root service call SurfaceFlinger 1020 i32 1 >/dev/null
   adb shell su root service call SurfaceFlinger 1025 i32 1 >/dev/null
   echo "DONE"
   trap stop_tracing EXIT
 }
+
 function stop_tracing() {
-  echo -n "Stopping SurfaceFlinger trace..."
+  echo -n "Stopping transaction and surface recording..."
+  echo
+  adb shell su root service call SurfaceFlinger 1020 i32 0 >/dev/null
   adb shell su root service call SurfaceFlinger 1025 i32 0 >/dev/null
   echo "DONE"
   trap - EXIT
@@ -64,16 +71,14 @@ function stop_tracing() {
 which adb >/dev/null 2>/dev/null || { echo "ERROR: ADB not found."; exit 1; }
 adb get-state 2>/dev/null | grep -q device || { echo "ERROR: No device connected or device is unauthorized."; exit 1; }
 
-echo -n "Deactivating SELinux..."
-adb shell su root setenforce 0 2>/dev/null >/dev/null
-echo "DONE"
-
 start_tracing
-read -p "Press ENTER to stop tracing" -s x
+read -p "Press ENTER to stop recording" -s x
 echo
 stop_tracing
-adb exec-out su root cat /data/misc/wmtrace/layers_trace.pb >"$outfile"
+adb exec-out su root cat /data/misc/wmtrace/transaction_trace.pb >"$outfileTrans"
+adb exec-out su root cat /data/misc/wmtrace/layers_trace.pb >"$outfileSurf"
 
 echo
-echo "To view the trace, go to $WINSCOPE_URL, click 'OPEN SF TRACE' and open"
-echo "${outfile_abs}"
+echo "To view the trace, go to $WINSCOPE_URL, and open"
+echo "${outfileTrans_abs}"
+echo "${outfileSurf_abs}"